Merge branch '615-excluding-sub-option-is-unchecked-if-user-select-main-option' into 'master'

Excluding sub option is unchecked if user select main option

Closes #615

See merge request genesys-pgr/genesys-ui!606

src/ui/common/filter/OptionsFilter.tsx

@@ -44,36 +44,20 @@ class OptionsFilterInternal extends React.Component<IOptionsFilterInternalProps,
     };
   }
 
-  public componentWillMount() {
-    const input = _.get(this.props, `${ this.props.names[0] }.input`);
+  public static getDerivedStateFromProps(props) {
+    const input = _.get(props, `${ props.names[0] }.input`);
     const value = typeof input.value[0] === 'number' ? input.value.map((key) => `${ key }`) : input.value;
-    const notInput = _.get(this.props, `${ this.props.names[1] }.input`);
+    const notInput = _.get(props, `${ props.names[1] }.input`);
     const notValue = typeof notInput.value[0] === 'number' ? notInput.value.map((key) => `${ key }`) : notInput.value;
 
-    this.setState({
+    return {
       values: [...value],
       notValues: [...notValue],
       text: '',
       error: null,
-    });
-  }
-
-  public componentWillReceiveProps(nextProps) {
-    const input = _.get(nextProps, `${ nextProps.names[0] }.input`);
-    const value = typeof input.value[0] === 'number' ? input.value.map((key) => `${ key }`) : input.value;
-    const notInput = _.get(nextProps, `${ nextProps.names[1] }.input`);
-    const notValue = typeof notInput.value[0] === 'number' ? notInput.value.map((key) => `${ key }`) : notInput.value;
-
-
-    this.setState({
-      values: [...value],
-      notValues: [...notValue],
-      text: '',
-      error: null,
-    });
+    };
   }
 
-
   public render() {
     const { label, options, indented, t, terms, valueField, labelField, renderCustomLabel } = this.props;
     const { values, notValues } = this.state;
@@ -181,85 +165,90 @@ class OptionsFilterInternal extends React.Component<IOptionsFilterInternalProps,
     });
   }
 
-  private maybeAdd = (...newValues: string[]) => {
-    const values = [...this.state.values];
-    const notValues = [...this.state.notValues];
+  private maybeAdd = (prevValues, prevNotValues, ...newValues: string[]) => {
+      const values = [...prevValues];
+      const notValues = [...prevNotValues];
 
-    newValues.forEach((text) => {
-      if (text && text.length > 0) {
-        if (values.indexOf(text) < 0 && notValues.indexOf(text) < 0) {
-          values.push(`${ text }`);
+      newValues.forEach((text) => {
+        if (text && text.length > 0) {
+          if (values.indexOf(text) < 0 && notValues.indexOf(text) < 0) {
+            values.push(`${ text }`);
+          }
         }
-      }
-    });
-
-    if (!_.isEqual(values, this.state.values)) {
-      this.setState({
-        text: '',
-        values,
       });
-    }
-    return values;
+
+      return values;
   }
 
-  private maybeAddNot = (...newValues: string[]) => {
-    const notValues = [...this.state.notValues];
+  private maybeAddNot = (prevNotValues, ...newValues: string[]) => {
+      const notValues = [...prevNotValues];
 
-    newValues.forEach((text) => {
-      if (text && text.length > 0) {
-        if (notValues.indexOf(text) < 0) {
-          notValues.push(`${ text }`);
+      newValues.forEach((text) => {
+        if (text && text.length > 0) {
+          if (notValues.indexOf(text) < 0) {
+            notValues.push(`${ text }`);
+          }
         }
-      }
-    });
-
-    if (!_.isEqual(notValues, this.state.notValues)) {
-      this.setState({
-        text: '',
-        notValues,
       });
-    }
-    return notValues;
+
+      return notValues;
   }
 
-  private maybeRemove = (isNot?: boolean, ...newValues: string[]) => {
-    const values = isNot ? [...this.state.notValues] : [...this.state.values];
+  private maybeRemove = (prevValues: string[], ...newValues: string[]) => {
+      const values = [...prevValues];
 
-    newValues.forEach((text) => {
-      if (text && text.length > 0) {
-        const index: number = values.indexOf(text);
-        if (index >= 0) {
-          values.splice(index, 1);
+      newValues.forEach((text) => {
+        if (text && text.length > 0) {
+          const index: number = values.indexOf(text);
+          if (index >= 0) {
+            values.splice(index, 1);
+          }
         }
-      }
-    });
-
-    if (!_.isEqual(values, isNot ? this.state.notValues : this.state.values)) {
-      this.setState({
-        text: '',
-        values: isNot ? this.state.values : values,
-        notValues: !isNot ? this.state.notValues : values,
       });
+
+      return values;
+  }
+
+  private setStateIfChanged = (values?: string[], notValues?: string[]) => {
+    const newState: any = { text: '' };
+    if (!_.isEqual(notValues, this.state.notValues)) {
+      newState.notValues = notValues;
+    }
+
+    if (!_.isEqual(values, this.state.values)) {
+      newState.values = values;
+    }
+
+    if (newState.values || newState.notValues) {
+      this.setState(newState);
     }
-    return values;
   }
 
   private handleCheckbox = (field) => (checked) => {
     const {input} = _.get(this.props, this.props.names[0]);
     const {input: notInput} = _.get(this.props, this.props.names[1]);
 
+    const { values: stateValues, notValues: stateNotValues } = this.state;
+
     const subCategories: any = this.props.indented ? this.getSubcategories(field) : [];
 
+    let values: string[];
+    let notValues: string[];
+
     if (checked === 1) {
-      notInput.onChange(this.maybeRemove(true, field, ...subCategories));
-      input.onChange(this.maybeAdd(field, ...subCategories));
+      notValues = this.maybeRemove(stateNotValues, field, ...subCategories);
+      values = this.maybeAdd(stateValues, notValues, field, ...subCategories);
     } else if (checked === -1) {
-      input.onChange(this.maybeRemove(false, field, ...subCategories));
-      notInput.onChange(this.maybeAddNot(field, ...subCategories));
+      values = this.maybeRemove(stateValues, field, ...subCategories);
+      notValues = this.maybeAddNot(stateNotValues, field, ...subCategories);
     } else {
-      notInput.onChange(this.maybeRemove(true, field, ...subCategories));
-      input.onChange(this.maybeRemove(false, field, ...subCategories));
+      notValues = this.maybeRemove(stateNotValues, field);
+      values = this.maybeRemove(stateValues, field);
     }
+
+    this.setStateIfChanged(values, notValues);
+    notInput.onChange(notValues);
+    input.onChange(values);
   }
 }