shoreline
shoreline copied to clipboard
fix(filter-value): show children text content instead of value
Summary
Partially resolves #1505
Now, the inner text from the children of the selected item is used on the selected value. Pay attention to the inner text expression here because it is not precisely the children property. So, no HTML tags will be rendered. I see that as a quick solution to not change all the state logic created.
Examples
Simple
For this example, when the item with value rj
is selected, the filter will show 'Cidade: Rio de Janeiro'
const [city, setCity] = useState<string>('')
<Filter label="Cidade" value={city} setValue={setCity}>
<FilterItem value="rj">Rio de Janeiro</FilterItem>
<FilterItem value="sp">São Paulo</FilterItem>
<FilterItem value="mg">Minas Gerais</FilterItem>
</Filter>
Multiple
For this example, when the items with values rj
and mg
are selected in that order, the filter will show 'Cidade: Rio de Janeiro, +1'
const [cities, setCities] = useState<string>([])
<Filter label="Cidade" value={cities} setValue={setCities}>
<FilterItem value="rj">Rio de Janeiro</FilterItem>
<FilterItem value="sp">São Paulo</FilterItem>
<FilterItem value="mg">Minas Gerais</FilterItem>
</Filter>