search

maufarinelli / react-multiselect-dropdown-button

A Dropdown Button which toggle a Multiselect List. React component fully accessible (A11y).
MIT License
10 stars 1 forks source link

Adding custom button #35

Open Assafkalfa opened 2 years ago

Assafkalfa commented 2 years ago

Hello and thank you first for your multiselect dropdown sharing!

  1. I have to add a button to the dropdown layout (cancel button). Is it possible or you're supporting Apply button only?

  2. Is it possible to make the dropdown width equals at least to the button width?

Thank you very much !!

maufarinelli commented 2 years ago

Hey @Assafkalfa , thanks! I think I can add this cancel button, if it will improve it. But I need to understand more your needs. For now, what you need it a callback function, like onSelectionApplied we have for Apply, but for This new button called Cancel. Is that correct?

Regarding the width, you know I put CSS classes on every single component, in order for the user to styles as he wants. In this case, the dropdown CSS is called .multiselect-section-wrapper. Is it not enough for you guys?

Assafkalfa commented 2 years ago

Hi @maufarinelli First of all, thank you for your reply, I very appreciate it

Regarding the cancel - I not want to make you work, it's also great as it now (Only if you want, for the fun, I mean to add an option to add a custom button with a callback, let's say customButtonClick. For example, in my case the UI/X team ask to add a 'Cancel' button, like we have in Excel - for example, if the first options 1, 3 and 4 were marks, the user open the dropbox and change to 2, 5 and click Cancel - the dropdown should close and options 1, 3 and 4 should be selected).

Regarding the width, maybe is me (truly I'm a backend developer that learning React now..) but I found 'multiselect-button-dropdown-wrapper', not seems the width affect. I also found 'multiselect-section-wrapper' that really affect the dropdown div but I don't know how to define it to be equal to the dropdown-button without set the width manually:

image

as you can see in the image, 210px of the button-dropdown and 166px of the dropdown width give us ~same width...

Really thank you!! Assaf

Assafkalfa commented 2 years ago

Hi @maufarinelli First of all, thank you for your reply, I very appreciate it

Regarding the cancel - I not want to make you work, it's also great now! (Only if you want, for the fun, I mean to add an option to add a custom button with a callback, let's say customButtonClick. For example, in my case the UI/X team ask to add a 'Cancel' button, like we have in Excel - for example, if at first, options 1, 3 and 4 were checked, and now, the user open the dropbox and change to 2, 5 and click Cancel - the dropdown should close and options 1, 3 and 4 should be selected).

Regarding the width, maybe is me (truly I'm a backend developer that learning React now..) but I found 'multiselect-button-dropdown-wrapper' has no affect on the width. I also found 'multiselect-section-wrapper' that really affect the dropdown div but I don't know how to define it to be equal to the dropdown-button without set the width manually:

image

as you can see , 210px of the button-dropdown and 166px of the dropdown div give us ~same width...

Really thank you!! Assaf