feat(Picky): Support disabled state

Picky was missing a disabled state

fix #112

dist/picky.css

@@ -19,6 +19,11 @@
   box-sizing: border-box;
   height: 38px;
 }
+
+.picky__input--disabled,
+.picky__input--disabled + .picky__dropdown .option {
+  color: rgb(95, 94, 94);
+}
 .picky__input::after {
   position: absolute;
   width: 0;

src/Option.js

@@ -12,11 +12,12 @@ const Option = props => {
     style,
     multiple,
     tabIndex,
+    disabled,
   } = props;
   const cssClass = isSelected ? 'option selected' : 'option';
   const body = isDataObject(item, labelKey, valueKey) ? item[labelKey] : item;
   const inputType = multiple ? 'checkbox' : 'radio';
-  const select = () => selectValue(item);
+  const select = () => !disabled && selectValue(item);
   return (
     <div
       tabIndex={tabIndex}
@@ -30,13 +31,16 @@ const Option = props => {
       onClick={select}
       onKeyPress={e => {
         e.preventDefault();
-        selectValue(item);
+        if (!disabled) {
+          selectValue(item);
+        }
       }}
     >
       <input
         type={inputType}
         readOnly
         tabIndex={-1}
+        disabled={disabled}
         checked={isSelected}
         aria-label={body}
         data-testid={'option-checkbox'}
@@ -60,5 +64,6 @@ Option.propTypes = {
   selectValue: PropTypes.func.isRequired,
   multiple: PropTypes.bool,
   tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
 };
 export default Option;

src/Picky.css

@@ -19,6 +19,11 @@
   box-sizing: border-box;
   height: 38px;
 }
+
+.picky__input--disabled,
+.picky__input--disabled + .picky__dropdown .option {
+  color: rgb(95, 94, 94);
+}
 .picky__input::after {
   position: absolute;
   width: 0;

src/Picky.js

@@ -138,6 +138,7 @@ class Picky extends React.PureComponent {
    * @memberof Picky
    */
   toggleSelectAll() {
+    if (this.props.disabled) return;
     this.setState(
       state => {
         return {
@@ -179,6 +180,7 @@ class Picky extends React.PureComponent {
       render,
       tabIndex,
       renderList,
+      disabled,
     } = this.props;
     if (renderList) {
       return renderList({
@@ -188,6 +190,7 @@ class Picky extends React.PureComponent {
         tabIndex,
         getIsSelected: this.isItemSelected,
         selectValue: this.selectValue,
+        disabled,
       });
     }
     return items.map((item, index) => {
@@ -205,6 +208,7 @@ class Picky extends React.PureComponent {
           labelKey: labelKey,
           valueKey: valueKey,
           multiple: multiple,
+          disabled,
         });
       } else {
         // Render a simple option
@@ -218,6 +222,7 @@ class Picky extends React.PureComponent {
             valueKey={valueKey}
             multiple={multiple}
             tabIndex={tabIndex}
+            disabled={disabled}
             id={this.state.id + '-option-' + index}
           />
         );
@@ -281,7 +286,11 @@ class Picky extends React.PureComponent {
     if (this.node && this.node.contains(e.target) && keepOpen) {
       return;
     }
-    if (this.filter && this.filter.filterInput && this.filter.filterInput.contains(e.target)) {
+    if (
+      this.filter &&
+      this.filter.filterInput &&
+      this.filter.filterInput.contains(e.target)
+    ) {
       return;
     }
     this.toggleDropDown();
@@ -344,6 +353,7 @@ class Picky extends React.PureComponent {
       dropdownHeight,
       renderSelectAll,
       filterPlaceholder,
+      disabled,
     } = this.props;
     const { open } = this.state;
     let ariaOwns = '';
@@ -369,7 +379,10 @@ class Picky extends React.PureComponent {
         <button
           id={`${this.state.id}__button`}
           type="button"
-          className="picky__input"
+          className={[
+            'picky__input',
+            disabled ? 'picky__input--disabled' : '',
+          ].join(' ')}
           data-testid="picky-input"
           onClick={this.toggleDropDown}
         >
@@ -410,6 +423,7 @@ class Picky extends React.PureComponent {
               toggleSelectAll: this.toggleSelectAll,
               tabIndex,
               multiple,
+              disabled,
             })}
           {!renderSelectAll &&
             includeSelectAll &&
@@ -426,6 +440,7 @@ class Picky extends React.PureComponent {
                   this.state.allSelected ? 'option selected' : 'option'
                 }
                 onClick={this.toggleSelectAll}
+                disabled={disabled}
                 onKeyPress={this.toggleSelectAll}
               >
                 <input
@@ -435,6 +450,7 @@ class Picky extends React.PureComponent {
                   tabIndex={-1}
                   checked={this.state.allSelected}
                   aria-label="select all"
+                  disabled={disabled}
                 />
                 <span data-testid="select-all-text">
                   {this.props.selectAllText}
@@ -491,6 +507,7 @@ Picky.propTypes = {
   className: PropTypes.string,
   renderList: PropTypes.func,
   filterPlaceholder: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 
 export default Picky;

tests/Picky.test.js

@@ -968,4 +968,30 @@ describe('Picky', () => {
       expect(getByTestId('selectall-checkbox').checked).toEqual(true);
     });
   });
+
+  it('should be disabled when disabled prop supplied', () => {
+    const options = [1, 2];
+    const { getByTestId, rerender, debug } = rtlRender(
+      <Picky
+        options={options}
+        includeSelectAll
+        open={true}
+        multiple
+        disabled
+        value={[]}
+      />
+    );
+
+    const selectAllCheckbox = getByTestId('selectall-checkbox');
+    expect(selectAllCheckbox.checked).toEqual(false);
+    fireEvent(
+      selectAllCheckbox,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(selectAllCheckbox.checked).toEqual(false);
+  });
 });