Skip to content

Conversation

@CamsCampos
Copy link

Antes dessa correção, caso a props includeEmptyItem do componente <FormDropdown /> fosse true, uma div vazia era incluída nas opções do dropdown para representar o valor "null". Caso o dev passasse um template para <FormDropdown />, a div vazia era formatada junto com os demais itens, o que causava esse tipo de problema:

image

Código:
Obs 1/2: includeEmptyItem por default já é true

       <FormGroupDropdown
                name="itemProgramacaoCampanha"
                label="Item de Programação"
                options={getItensProgramacaoFiltrados}
                placeholder="Selecione o item de programação..."
                childClassName="flex-nowrap"
                itemClassName="border-bottom no-active"
                menuClassName="p-0 w-100"
                template={(label) => (
                  <div className="my-2">
                    <strong>Tipo de Equipamento: </strong>
                    <span>{label.tipoEquipamento ?? '-'}</span>
                    <div>
                      <strong>Especificação Técnica: </strong>
                      <span>{label.especificacaoTecnica ?? '-'}</span>
                    </div>
                    <div>
                      <strong>Ponto de Investigação: </strong>
                      <span>{label.pontoInvestigacao ?? '-'}</span>
                    </div>
                  </div>
                )}
                toggleIcon={(isOpen) => (
                  <div className="d-flex align-items-center px-2">
                    <FontAwesomeIcon icon={isOpen ? faChevronUp : faChevronDown} />
                  </div>
                )}
              />

Obs 2/2: A alteração em FormExamples foi só pra tentar demonstrar melhor a correção

onClick={safeClick(onSelect, { value, index, label })}
>
{template(label)}
{!isNullLike(useTemplate) && !useTemplate ? label : template(label)}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Essa lógica evita que os componentes que já usem o <Dropdown /> quebrem.

Camila Campos and others added 2 commits September 3, 2021 15:41
@nerissa-aguirre nerissa-aguirre changed the title fix: fix use of form dropdown template feat: makes the use of "template" more flexible for Dropdown and FormDropdown Sep 3, 2021
@nerissa-aguirre nerissa-aguirre merged commit 24a2d86 into master Sep 3, 2021
@nerissa-aguirre nerissa-aguirre deleted the fix-corrige-uso-template-form-dropdown branch March 28, 2025 13:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants