-
Notifications
You must be signed in to change notification settings - Fork 832
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add DeSelect func to SelectMenu & affected components (#198)
* Add DeSelect func to SelectMenu & affected components Follow up from issue #196 * Add Multi-Select with Deselect Example to Storybook & Docs Added onDeselect to index.stories.js, and attempted to put the proper docs files in place. Let me know of changes/corrections and I am happy to fix! * Fix multi example Linting helped me reformat this, forgot to update prior to commit.. * Fix multi deselect per linting * Updates per comments I also added the if statement (in lieu of switch) solution to the onSelect within these changes. This way it is always number of items + "..." for the Button presentation. Co-Authored-By: jeroenransijn <[email protected]> * Remove switch comments (fix local diff issue) Something wonky happened with the disk version & VS Code version diff.. not sure, but removing commented switch stmnt
- Loading branch information
1 parent
977274f
commit d388f0b
Showing
7 changed files
with
150 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<Manager> | ||
{({ setState, state }) => ( | ||
<SelectMenu | ||
title="Select multiple names" | ||
options={options} | ||
selected={state.selected} | ||
onSelect={item => { | ||
let selected | ||
if (Array.isArray(state.selected)) { | ||
selected = [...state.selected, item.value] | ||
} else { | ||
selected = arrify(item.value) | ||
} | ||
const selectedItems = selected | ||
const selectedItemsLength = selectedItems.length | ||
let selectedNames = '' | ||
if (selectedItemsLength === 0) { | ||
selectedNames = '' | ||
} | ||
else if (selectedItemsLength === 1) { | ||
selectedNames = selectedItems.toString() | ||
} else if (selectedItemsLength > 1 ) { | ||
selectedNames = selectedItemsLength.toString() + " selected..." | ||
} | ||
setState({ | ||
selected, | ||
selectedNames | ||
}) | ||
}} | ||
onDeselect={item => { | ||
const deselectedItemIndex = state.selected.indexOf(item.value) | ||
const selectedItems = state.selected.filter( | ||
(_item, i) => i !== deselectedItemIndex | ||
) | ||
const selectedItemsLength = selectedItems.length | ||
let selectedNames = '' | ||
if (selectedItemsLength === 0) { | ||
selectedNames = '' | ||
} | ||
else if (selectedItemsLength === 1) { | ||
selectedNames = selectedItems.toString() | ||
} else if (selectedItemsLength > 1 ) { | ||
selectedNames = selectedItemsLength.toString() + " selected..." | ||
} | ||
setState({ selected: selectedItems, selectedNames }) | ||
}} | ||
> | ||
<Button>{state.selectedNames || 'Select multiple...'}</Button> | ||
</SelectMenu> | ||
)} | ||
</Manager> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters