Make CheckboxDropdown work with new Dropdown [#156384281]

Signed-off-by: Steven Locke <slocke@pivotal.io>
pivotal-cf · Mar 29, 2018 · d9a7889 · d9a7889
1 parent 1b244ec
commit d9a7889
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 19 deletions.
diff --git a/spec/pivotal-ui-react/checkbox-dropdown/checkbox-dropdown_spec.js b/spec/pivotal-ui-react/checkbox-dropdown/checkbox-dropdown_spec.js
@@ -20,6 +20,13 @@ describe('checkbox dropdown', () => {
       expect($('.checkbox-dropdown-item-checkbox:eq(3)')).toHaveText('item #3');
     });
 
+    it('renders the items with labels and labelClassNames', () => {
+      expect($('.pui-checkbox-label:eq(0)')).toHaveClass('pui-checkbox-dropdown-item-label');
+      expect($('.pui-checkbox-label:eq(1)')).toHaveClass('pui-checkbox-dropdown-item-label');
+      expect($('.pui-checkbox-label:eq(2)')).toHaveClass('pui-checkbox-dropdown-item-label');
+      expect($('.pui-checkbox-label:eq(3)')).toHaveClass('pui-checkbox-dropdown-item-label');
+    });
+
     it('has the text "ALL"', () => {
       expect($('.dropdown > button')).toHaveText('ALL');
     });
@@ -214,4 +221,22 @@ describe('checkbox dropdown', () => {
       });
     });
   });
+
+  describe('when clicking on a label', () => {
+    let onChange;
+
+    beforeEach(() => {
+      onChange = jasmine.createSpy('onChange');
+      subject::setProps({onChange});
+      $('.pui-checkbox-label:eq(2)').click();
+    });
+
+    it('calls the onChange callback', () => {
+      expect(onChange).toHaveBeenCalledWith({
+        'item #1': true,
+        'item #2': false,
+        'item #3': true
+      });
+    });
+  });
 });
diff --git a/src/css/checkbox-dropdown/checkbox-dropdown.scss b/src/css/checkbox-dropdown/checkbox-dropdown.scss
@@ -0,0 +1,6 @@
+.pui-checkbox-dropdown-item-label {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: pointer;
+}
diff --git a/src/css/checkbox-dropdown/index.js b/src/css/checkbox-dropdown/index.js
@@ -0,0 +1,4 @@
+try {
+  require('./checkbox-dropdown.css');
+} catch(e) {
+}
diff --git a/src/react/checkbox-dropdown/checkbox-dropdown.js b/src/react/checkbox-dropdown/checkbox-dropdown.js
@@ -8,22 +8,6 @@ function doNothing() {
 };
 
 export class CheckboxDropdown extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    const {labels} = this.props;
-    const options = labels.reduce((result, item) => {
-      result[item] = true;
-      return result;
-    }, {});
-    this.state = {open: false, options};
-  }
-
-  componentDidMount() {
-    const {onChange} = this.props;
-    const {options} = this.state;
-    onChange(options);
-  }
-
   static propTypes = {
     buttonAriaLabel: PropTypes.string,
     buttonClassName: PropTypes.string,
@@ -40,6 +24,24 @@ export class CheckboxDropdown extends React.Component {
     size: 'normal'
   };
 
+  constructor(props, context) {
+    super(props, context);
+    const {labels} = this.props;
+    const options = labels.reduce((result, item) => {
+      result[item] = true;
+      return result;
+    }, {});
+    this.state = {open: false, options};
+  }
+
+  componentDidMount() {
+    require('../../css/checkbox-dropdown');
+
+    const {onChange} = this.props;
+    const {options} = this.state;
+    onChange(options);
+  }
+
   getTitle() {
     if (this.allSelected()) return 'ALL';
     const {options} = this.state;
@@ -80,6 +82,7 @@ export class CheckboxDropdown extends React.Component {
     const dropdownItems = labels.map(label => {
       return (
         <Checkbox className="checkbox-dropdown-item-checkbox man"
+                  labelClassName="pui-checkbox-dropdown-item-label"
                   key={label}
                   checked={options[label]}
                   onChange={doNothing}
@@ -89,17 +92,23 @@ export class CheckboxDropdown extends React.Component {
 
     const checkBoxAllProps = {
       className: 'all-checkbox man',
+      labelClassName: 'pui-checkbox-dropdown-item-label',
       checked: this.allSelected(),
       onClick: e => this.toggleAll(e),
       onChange: doNothing
     };
 
     const title = <span className="type-ellipsis">{this.getTitle()}</span>;
 
-    return (<Dropdown {...{...dropDownProps, title, className: classnames('checkbox-dropdown', className)}}>
+    return (<Dropdown {...{
+      ...dropDownProps,
+      title,
+      closeOnMenuClick: false,
+      className: classnames('checkbox-dropdown', className)
+    }}>
       <span className="checkbox-dropdown-item-checkbox show-all"
-          onSelect={e => this.toggleAll(e)}
-          checked={this.allSelected()}>
+            onSelect={e => this.toggleAll(e)}
+            checked={this.allSelected()}>
         <Checkbox {...checkBoxAllProps}>ALL</Checkbox>
       </span>
       {dropdownItems}