EQWorks / lumen-labs

React library of basic components based on Tailwind CSS
https://eqworks.github.io/lumen-labs
5 stars 2 forks source link

[G2M] DropdownSelect - implement simple mode via bool prop #72

Closed vxsl closed 2 years ago

vxsl commented 2 years ago

this would allow devs to use the DropdownSelect component more easily in cases where the more complex functionality, such as descriptions and dividers, is not required.

for example, if myData = ['option1', 'option2', 'option3', ...] and myValue is some string or array of strings (depending on isMulti)

      <DropdownSelect
        multiSelect={isMulti}
        data={[{ items: myData.map(d => ({ title: d })) }]}
        onSelect={(v) =>
          onSelect(isMulti
            ? v.map(({ title }) => title)
            : v.title
          )
        }
        setSelectedOption={isMulti
          ? myValue?.map(v => ({ title: v }))
          : { title: myValue }
        }
      />

becomes

      <DropdownSelect simple
        multiSelect={isMulti}
        data={myData}
        onSelect={someFunction}
        setSelectedOption={myValue}
      />

This would not impact existing usage of the component because the simple prop defaults to false.

vxsl commented 2 years ago

noice good feature for simpler usage although there the is dropdown base component for this without fancy styling

Ah, true, the styling is definitely most often required though. The button looks ok but the dropdown component is very different