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
segmentio · Jun 15, 2018 · d388f0b · d388f0b
1 parent 977274f
commit d388f0b
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 1 deletion.
diff --git a/src/select-menu/docs/examples/SelectMenu-multi.example b/src/select-menu/docs/examples/SelectMenu-multi.example
@@ -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>
diff --git a/src/select-menu/docs/index.js b/src/select-menu/docs/index.js
@@ -14,6 +14,7 @@ import sourceSelectMenu from '!raw-loader!../src/SelectMenu'
  * Code examples
  */
 import exampleSelectMenuBasic from './examples/SelectMenu-basic.example'
+import exampleSelectMenuMulti from './examples/SelectMenu-multi.example'
 
 const title = 'Select Menu'
 const subTitle = 'Select one or multiple items from a dropdown list.'
@@ -90,6 +91,26 @@ const components = [
         ),
         codeText: exampleSelectMenuBasic,
         scope
+      },
+      {
+        title: 'Multi SelectMenu Example',
+        description: (
+          <div>
+            <p>This example shows basic usage with multiple selected items.</p>
+            <p>
+              This pattern is only an example. Selected values and the
+              formatting of their names should be managed wherever you choose to
+              manage state. The onDeselect method is provided to assist with
+              this.
+            </p>
+            <p>
+              As users click on selected values to remove them, you can update
+              state.
+            </p>
+          </div>
+        ),
+        codeText: exampleSelectMenuMulti,
+        scope
       }
     ]
   }

diff --git a/src/select-menu/src/Option.js b/src/select-menu/src/Option.js
@@ -23,6 +23,7 @@ export default class Option extends PureComponent {
     style: PropTypes.any,
     height: PropTypes.number,
     onSelect: PropTypes.func,
+    onDeselect: PropTypes.func,
     isHighlighted: PropTypes.bool,
     isSelected: PropTypes.bool
   }
@@ -31,6 +32,7 @@ export default class Option extends PureComponent {
     const {
       label,
       onSelect,
+      onDeselect,
       isHighlighted,
       isSelected,
       style,
@@ -43,6 +45,7 @@ export default class Option extends PureComponent {
         isSelectable
         isHighlighted={isHighlighted}
         onSelect={onSelect}
+        onDeselect={onDeselect}
         isSelected={isSelected}
         style={style}
         display="flex"

diff --git a/src/select-menu/src/OptionsList.js b/src/select-menu/src/OptionsList.js
@@ -33,6 +33,7 @@ export default class OptionsList extends PureComponent {
      */
     selected: PropTypes.arrayOf(PropTypes.string),
     onSelect: PropTypes.func,
+    onDeselect: PropTypes.func,
     hasFilter: PropTypes.bool,
     optionSize: PropTypes.number,
     renderItem: PropTypes.func,
@@ -50,6 +51,7 @@ export default class OptionsList extends PureComponent {
      */
     optionSize: 33,
     onSelect: () => {},
+    onDeselect: () => {},
     selected: [],
     renderItem: itemRenderer,
     optionsFilter: fuzzyFilter,
@@ -115,6 +117,9 @@ export default class OptionsList extends PureComponent {
   handleSelect = item => {
     this.props.onSelect(item)
   }
+  handleDeselect = item => {
+    this.props.onDeselect(item)
+  }
 
   assignSearchRef = ref => {
     this.searchRef = ref
@@ -127,6 +132,7 @@ export default class OptionsList extends PureComponent {
       width,
       height,
       onSelect,
+      onDeselect,
       selected,
       hasFilter,
       optionSize,
@@ -173,6 +179,7 @@ export default class OptionsList extends PureComponent {
                 style,
                 height: optionSize,
                 onSelect: () => this.handleSelect(item),
+                onDeselect: () => this.handleDeselect(item),
                 isSelected: this.isSelected(item)
               })
             }}

diff --git a/src/select-menu/src/SelectMenu.js b/src/select-menu/src/SelectMenu.js
@@ -34,6 +34,10 @@ export default class SelectMenu extends PureComponent {
      * Function that is called when an option is selected.
      */
     onSelect: PropTypes.func,
+    /**
+     * Function that is called when an option is Deselected.
+     */
+    onDeselect: PropTypes.func,
 
     /**
      *
@@ -65,6 +69,7 @@ export default class SelectMenu extends PureComponent {
 
   static defaultProps = {
     onSelect: () => {},
+    onDeselect: () => {},
     width: 240,
     height: 248,
     position: Position.BOTTOM_LEFT
@@ -115,6 +120,9 @@ export default class SelectMenu extends PureComponent {
               onSelect: item => {
                 this.props.onSelect(item)
               },
+              onDeselect: item => {
+                this.props.onDeselect(item)
+              },
               selected: arrify(selected)
             }}
             close={close}

diff --git a/src/select-menu/stories/index.stories.js b/src/select-menu/stories/index.stories.js
@@ -1,4 +1,5 @@
 import { storiesOf } from '@storybook/react'
+import arrify from 'arrify'
 import React from 'react'
 import Box from 'ui-box'
 import options from '../docs/starwars-options'
@@ -24,5 +25,54 @@ storiesOf('select-menu', module).add('SelectMenu', () => (
         </SelectMenu>
       )}
     </Manager>
+    <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>
   </Box>
 ))
diff --git a/src/table/src/TableRow.js b/src/table/src/TableRow.js
@@ -14,6 +14,10 @@ export default class TableRow extends PureComponent {
      * Function that is called on click and enter/space keypress.
      */
     onSelect: PropTypes.func,
+    /**
+     * Function that is called on click and enter/space keypress.
+     */
+    onDeselect: PropTypes.func,
 
     /**
      * Makes the TableRow selectable.
@@ -34,13 +38,18 @@ export default class TableRow extends PureComponent {
   static defaultProps = {
     onClick: () => {},
     onSelect: () => {},
+    onDeselect: () => {},
     onKeyPress: () => {}
   }
 
   handleClick = e => {
     this.props.onClick(e)
     if (this.props.isSelectable) {
-      this.props.onSelect()
+      if (this.props.isSelected) {
+        this.props.onDeselect()
+      } else {
+        this.props.onSelect()
+      }
     }
   }