feat(dropdown): Add select all button to multiple option (#144)

* add select all button to multiple option dropdown

* reformat code and remove package.json packages

* reformat code and add spacing class to select all button

* fix code style

* reduce number of lines

* fix(dropdown): Fixed some formatting

Author: antnascimento

demo/demo_app.js

@@ -49,7 +49,7 @@ render(
       <br />
       <br />
       <WSDropdown
-        text="Multiple" type="button" width="500px" placeholder="Filter values.." filterable multiple items={[
+        text="Multiple" type="button" width="500px" placeholder="Filter values.." selectAll filterable multiple items={[
           'New',
           'New From Template',
           'Open',

doc/api/ws-dropdown.md

@@ -196,8 +196,9 @@ additional wrapping markup and functionality, you SHOULD NOT use this component
     -   `props.value` **([Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>)** Selected dropdown item(s)
     -   `props.filterable` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Flag if the dropdown menu is filterable
     -   `props.filter` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Default filter value
-    -   `props.limit` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Limit visible dropdown items. Use together with filterable flag.
     -   `props.placeholder` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Placeholder for text inputs (Filter input or Input only version)
+    -   `props.limit` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Limit visible dropdown items. Use together with filterable flag.
+    -   `props.selectAll` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Show button to select all items
     -   `props.handle` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function used to propagate data
 
 ### constructor
@@ -278,6 +279,12 @@ Handles submit action on multi select drop downs
 
 Returns **void** 
 
+### onClickSelectAll
+
+Handles select all action on multi select drop downs
+
+Returns **void** 
+
 ### getHeight
 
 Gets the current height of the menu
@@ -421,6 +428,7 @@ As trigger type you can choose between an anchor, button or a select like lookin
     -   `props.limit` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Limit visible dropdown items. Use together with filterable flag.
     -   `props.orientation` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Dropdown orientation. Can be either left or right
     -   `props.placeholder` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Placeholder for text inputs (Filter input or Input only version)
+    -   `props.selectAll` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Show button to select all items
     -   `props.onChange` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Callback for react components to propagate value changes
 
 ### constructor

src/ws-dropdown/dropdown-menu.js

@@ -13,8 +13,9 @@ const ANIMATION_END_EVENTS = ['oAnimationEnd', 'MSAnimationEnd', 'animationend']
  * @property {Object|Array<Object>} props.value Selected dropdown item(s)
  * @property {Boolean} props.filterable Flag if the dropdown menu is filterable
  * @property {string} props.filter Default filter value
- * @property {number} props.limit Limit visible dropdown items. Use together with filterable flag.
  * @property {string} props.placeholder Placeholder for text inputs (Filter input or Input only version)
+ * @property {number} props.limit Limit visible dropdown items. Use together with filterable flag.
+ * @property {Boolean} props.selectAll Show button to select all items
  * @property {Function} props.handle Function used to propagate data
  */
 export class DropdownMenu extends Component {
@@ -30,6 +31,7 @@ export class DropdownMenu extends Component {
     filter: null,
     placeholder: '',
     limit: 10,
+    selectAll: false,
     handle: () => {}
   };
 
@@ -42,7 +44,8 @@ export class DropdownMenu extends Component {
     filterable: PropTypes.bool,
     filter: PropTypes.string,
     placeholder: PropTypes.string,
-    limit: PropTypes.number
+    limit: PropTypes.number,
+    selectAll: PropTypes.bool
   };
 
   /**
@@ -64,7 +67,8 @@ export class DropdownMenu extends Component {
     this.state = {
       filter: props.filter,
       items: props.items,
-      value: props.value
+      value: props.value,
+      selectAllActive: false
     };
   }
 
@@ -81,6 +85,9 @@ export class DropdownMenu extends Component {
       this.button.addEventListener('click', this.onClickSubmit);
       this.button.addEventListener('keydown', event => event.stopPropagation());
     }
+    if (this.selectAllButton) {
+      this.selectAllButton.addEventListener('click', this.onClickSelectAll);
+    }
   }
 
   /**
@@ -92,7 +99,8 @@ export class DropdownMenu extends Component {
     this.setState({
       filter: props.filter,
       items: props.items,
-      value: props.value
+      value: props.value,
+      selectAllActive: props.selectAllActive
     });
   }
 
@@ -118,6 +126,9 @@ export class DropdownMenu extends Component {
       this.button.removeEventListener('click', this.onClickSubmit);
       this.button.removeEventListener('keydown', event => event.stopPropagation());
     }
+    if (this.selectAllButton) {
+      this.selectAllButton.removeEventListener('click', this.onClickSelectAll);
+    }
   }
 
   /**
@@ -131,7 +142,6 @@ export class DropdownMenu extends Component {
     window.addEventListener('keydown', this.onGlobalKeyDown);
   };
 
-
   /**
    * Unbind keyboard listener when dropdown closes
    * @returns {void}
@@ -190,6 +200,22 @@ export class DropdownMenu extends Component {
     this.setState({value});
   };
 
+  /**
+   * Handles select all action on multi select drop downs
+   * @returns {void}
+   */
+  onClickSelectAll = () => {
+    if (this.state.items) {
+      this.state.items.forEach(item => {
+        item.selected = !this.state.selectAllActive;
+      });
+      this.setState({
+        items: this.state.items,
+        selectAllActive: !this.state.selectAllActive
+      });
+    }
+  };
+
   /**
    * Gets the current height of the menu
    * @returns {Number}
@@ -258,7 +284,9 @@ export class DropdownMenu extends Component {
    */
   focusNextItem(direction) {
     // Update focus state of items
-    this.state.items.forEach(item => { item.focused = false; });
+    this.state.items.forEach(item => {
+      item.focused = false;
+    });
     const result = this.getItemAtIndex(this.selectedIndex + direction);
     result.item.focused = true;
 
@@ -474,7 +502,16 @@ export class DropdownMenu extends Component {
         {this.context.multiple && [
           <li className="dropdown-item-separator" key="submit-separator" />,
           <li className="dropdown-submit" key="submit">
-            <button className="mod-small" ref={element => { this.button = element; }}>OK</button>
+            {this.props.selectAll && [
+              <button
+                key="selectAll"
+                className={`mod-secondary mr-s mod-small ${this.state.selectAllActive ? 'mod-toggle is-active' : ''}`}
+                ref={element => { this.selectAllButton = element; }}
+              >
+                ALL
+              </button>
+            ]}
+            <button className="mod-small dropdown-submit-button" ref={element => { this.button = element; }}>OK</button>
           </li>
         ]}
       </ul>

src/ws-dropdown/ws-dropdown.js

@@ -21,6 +21,7 @@ const ANIMATION_END_EVENTS = ['oAnimationEnd', 'MSAnimationEnd', 'animationend']
  * @property {number} props.limit Limit visible dropdown items. Use together with filterable flag.
  * @property {string} props.orientation Dropdown orientation. Can be either left or right
  * @property {string} props.placeholder Placeholder for text inputs (Filter input or Input only version)
+ * @property {Boolean} props.selectAll Show button to select all items
  * @property {string} props.onChange Callback for react components to propagate value changes
  */
 export class WSDropdown extends Component {
@@ -43,7 +44,8 @@ export class WSDropdown extends Component {
     width: '',
     value: null,
     onChange: () => {},
-    disabled: false
+    disabled: false,
+    selectAll: false
   };
 
   /**
@@ -64,7 +66,8 @@ export class WSDropdown extends Component {
     width: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
     onChange: PropTypes.func,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    selectAll: PropTypes.bool
   };
 
   /**
@@ -445,6 +448,7 @@ export class WSDropdown extends Component {
         filterable={this.props.filterable}
         filter={this.props.filter}
         placeholder={this.props.placeholder}
+        selectAll={this.props.selectAll}
         handle={this.handlePropagation}
         ref={element => { this.dropdownMenu = element; }}
       />