Commit fa46f89b authored by Viacheslav Pavlov's avatar Viacheslav Pavlov

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
parents ac140309 fc8ce1c0
...@@ -44,36 +44,20 @@ class OptionsFilterInternal extends React.Component<IOptionsFilterInternalProps, ...@@ -44,36 +44,20 @@ class OptionsFilterInternal extends React.Component<IOptionsFilterInternalProps,
}; };
} }
public componentWillMount() { public static getDerivedStateFromProps(props) {
const input = _.get(this.props, `${ this.props.names[0] }.input`); const input = _.get(props, `${ props.names[0] }.input`);
const value = typeof input.value[0] === 'number' ? input.value.map((key) => `${ key }`) : input.value; 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; const notValue = typeof notInput.value[0] === 'number' ? notInput.value.map((key) => `${ key }`) : notInput.value;
this.setState({ return {
values: [...value], values: [...value],
notValues: [...notValue], notValues: [...notValue],
text: '', text: '',
error: null, 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() { public render() {
const { label, options, indented, t, terms, valueField, labelField, renderCustomLabel } = this.props; const { label, options, indented, t, terms, valueField, labelField, renderCustomLabel } = this.props;
const { values, notValues } = this.state; const { values, notValues } = this.state;
...@@ -181,85 +165,90 @@ class OptionsFilterInternal extends React.Component<IOptionsFilterInternalProps, ...@@ -181,85 +165,90 @@ class OptionsFilterInternal extends React.Component<IOptionsFilterInternalProps,
}); });
} }
private maybeAdd = (...newValues: string[]) => { private maybeAdd = (prevValues, prevNotValues, ...newValues: string[]) => {
const values = [...this.state.values]; const values = [...prevValues];
const notValues = [...this.state.notValues]; const notValues = [...prevNotValues];
newValues.forEach((text) => { newValues.forEach((text) => {
if (text && text.length > 0) { if (text && text.length > 0) {
if (values.indexOf(text) < 0 && notValues.indexOf(text) < 0) { if (values.indexOf(text) < 0 && notValues.indexOf(text) < 0) {
values.push(`${ text }`); values.push(`${ text }`);
}
} }
}
});
if (!_.isEqual(values, this.state.values)) {
this.setState({
text: '',
values,
}); });
}
return values; return values;
} }
private maybeAddNot = (...newValues: string[]) => { private maybeAddNot = (prevNotValues, ...newValues: string[]) => {
const notValues = [...this.state.notValues]; const notValues = [...prevNotValues];
newValues.forEach((text) => { newValues.forEach((text) => {
if (text && text.length > 0) { if (text && text.length > 0) {
if (notValues.indexOf(text) < 0) { if (notValues.indexOf(text) < 0) {
notValues.push(`${ text }`); notValues.push(`${ text }`);
}
} }
}
});
if (!_.isEqual(notValues, this.state.notValues)) {
this.setState({
text: '',
notValues,
}); });
}
return notValues; return notValues;
} }
private maybeRemove = (isNot?: boolean, ...newValues: string[]) => { private maybeRemove = (prevValues: string[], ...newValues: string[]) => {
const values = isNot ? [...this.state.notValues] : [...this.state.values]; const values = [...prevValues];
newValues.forEach((text) => { newValues.forEach((text) => {
if (text && text.length > 0) { if (text && text.length > 0) {
const index: number = values.indexOf(text); const index: number = values.indexOf(text);
if (index >= 0) { if (index >= 0) {
values.splice(index, 1); 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) => { private handleCheckbox = (field) => (checked) => {
const {input} = _.get(this.props, this.props.names[0]); const {input} = _.get(this.props, this.props.names[0]);
const {input: notInput} = _.get(this.props, this.props.names[1]); 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) : []; const subCategories: any = this.props.indented ? this.getSubcategories(field) : [];
let values: string[];
let notValues: string[];
if (checked === 1) { if (checked === 1) {
notInput.onChange(this.maybeRemove(true, field, ...subCategories)); notValues = this.maybeRemove(stateNotValues, field, ...subCategories);
input.onChange(this.maybeAdd(field, ...subCategories)); values = this.maybeAdd(stateValues, notValues, field, ...subCategories);
} else if (checked === -1) { } else if (checked === -1) {
input.onChange(this.maybeRemove(false, field, ...subCategories)); values = this.maybeRemove(stateValues, field, ...subCategories);
notInput.onChange(this.maybeAddNot(field, ...subCategories)); notValues = this.maybeAddNot(stateNotValues, field, ...subCategories);
} else { } else {
notInput.onChange(this.maybeRemove(true, field, ...subCategories)); notValues = this.maybeRemove(stateNotValues, field);
input.onChange(this.maybeRemove(false, field, ...subCategories)); values = this.maybeRemove(stateValues, field);
} }
this.setStateIfChanged(values, notValues);
notInput.onChange(notValues);
input.onChange(values);
} }
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment