feat: new dropdown selection component #6
Conversation
| if (isFunction(afterChange)) { | ||
| afterChange(v); | ||
| } |
There was a problem hiding this comment.
@joaoassisb e @nerissa-aguirre, uma sugestão de vcs era usar a lógica do handleOnChangeFactory que vem do useFormControl para executar o afterChange, no entanto, a implementação atual de handleOnChangeFactory requer um evento. Como esse novo componente não emite um evento ao mudar, recebo um erro ao tentar usar ohandleOnChangeFactory. Uma maneira seria adaptar o handleOnChangeFactory pra lidar com esse caso, mas por enquanto achei mais simples deixar assim, que é a forma como está implementado no componente <FormAutocomplete/> também
Co-authored-by: nerissa-aguirre <79877143+nerissa-aguirre@users.noreply.github.com>
….com/geolaborapp/react-bootstrap-utils into feat-novo-componente-dropdown-select
| <div ref={dropdownRef}> | ||
| <Dropdown | ||
| isOpen={isOpen} | ||
| items={includeEmptyItem ? [{ value: null, label: <div className="m-3"></div> }, ...items] : items} |
There was a problem hiding this comment.
Essa <div className="m-3" /> é para que o label vazio tenha um largura maior.
| export function getSelectedOption(value, options, trackBy) { | ||
| if (!trackBy) { | ||
| return options.find((option) => option.value === value); | ||
| } | ||
|
|
||
| return options.find((option) => getValueByPath(option.value, trackBy) === getValueByPath(value, trackBy)); | ||
| } | ||
|
|
||
| export function getSelectedValue(value, options, trackBy) { | ||
| let selectedValue = value; | ||
|
|
||
| if (trackBy) { | ||
| const selectedOption = options.find( | ||
| (option) => getValueByPath(option.value, trackBy) === getValueByPath(value, trackBy) | ||
| ); | ||
| const selectedOption = getSelectedOption(value, options, trackBy); | ||
|
|
There was a problem hiding this comment.
Alterei o nome da antiga função getSelectedOption para getSelectedValue (que é o que de fato a função retorna) para poder criar uma função getSelectedOption que retorna a option completa pra usar no <FormDropdown />
Visualização mobile do novo componente: