SelectPopover improvements (Graylog2#4697)

* Add disabled prop to SelectPopover * Fix condition to update state when prop changes
dkhamitov · Apr 3, 2018 · 5d7e0eb · 5d7e0eb
1 parent 921d04d
commit 5d7e0eb
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/graylog2-web-interface/src/components/common/SelectPopover.jsx b/graylog2-web-interface/src/components/common/SelectPopover.jsx
@@ -50,6 +50,8 @@ const SelectPopover = createReactClass({
     filterPlaceholder: PropTypes.string,
     /** Text to display in the entry to clear the current selection. */
     clearSelectionText: PropTypes.string,
+    /** Indicates whether items will be clickable or not. */
+    disabled: PropTypes.bool,
   },
 
   getDefaultProps() {
@@ -64,6 +66,7 @@ const SelectPopover = createReactClass({
       displayDataFilter: true,
       filterPlaceholder: 'Type to filter',
       clearSelectionText: 'Clear selection',
+      disabled: false,
     };
   },
 
@@ -76,7 +79,7 @@ const SelectPopover = createReactClass({
   },
 
   componentWillReceiveProps(nextProps) {
-    if (lodash.isEqual(this.props.selectedItems, nextProps.selectedItems)) {
+    if (!lodash.isEqual(this.props.selectedItems, nextProps.selectedItems)) {
       this.setState({ selectedItems: nextProps.selectedItems });
     }
     if (this.props.items !== nextProps.items) {
@@ -140,7 +143,7 @@ const SelectPopover = createReactClass({
   },
 
   render() {
-    const { displayDataFilter, itemFormatter, items, placement, triggerAction, triggerNode, ...otherProps } = this.props;
+    const { displayDataFilter, itemFormatter, items, placement, triggerAction, triggerNode, disabled, ...otherProps } = this.props;
     const popoverProps = this.pickPopoverProps(otherProps);
     const { filteredItems, selectedItems } = this.state;
 
@@ -153,8 +156,9 @@ const SelectPopover = createReactClass({
             {filteredItems.map((item) => {
               return (
                 <ListGroupItem key={item}
-                               onClick={this.handleItemSelection(item)}
-                               active={this.state.selectedItems.includes(item)}>
+                               onClick={disabled ? () => {} : this.handleItemSelection(item)}
+                               active={this.state.selectedItems.includes(item)}
+                               disabled={disabled}>
                   {itemFormatter(item)}
                 </ListGroupItem>
               );