forked from p15670423/monkey
Merge pull request #2328 from guardicore/2290-import-config-bug
UI: Get derived state from props in AdvancedMultiSelect
This commit is contained in:
commit
444bf99e41
|
@ -32,22 +32,23 @@ function AdvancedMultiSelectHeader(props) {
|
||||||
class AdvancedMultiSelect extends React.Component {
|
class AdvancedMultiSelect extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
let selectedPluginNames = this.props.value.map(v => v.name);
|
|
||||||
let allPluginNames = this.props.options.enumOptions.map(v => v.value);
|
let allPluginNames = this.props.options.enumOptions.map(v => v.value);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
infoPaneParams: getDefaultPaneParams(
|
infoPaneParams: getDefaultPaneParams(
|
||||||
this.props.schema.items,
|
this.props.schema.items,
|
||||||
this.isUnsafeOptionSelected(selectedPluginNames)
|
this.isUnsafeOptionSelected(this.getSelectedPluginNames())
|
||||||
),
|
),
|
||||||
allPluginNames: allPluginNames,
|
allPluginNames: allPluginNames,
|
||||||
masterCheckboxState: this.getMasterCheckboxState(selectedPluginNames),
|
masterCheckboxState: this.getMasterCheckboxState(this.getSelectedPluginNames()),
|
||||||
pluginDefinitions: this.props.schema.items.pluginDefs,
|
pluginDefinitions: this.props.schema.items.pluginDefs
|
||||||
selectedPluginNames: selectedPluginNames
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getSelectedPluginNames = () => {
|
||||||
|
return this.props.value.map(v => v.name);
|
||||||
|
}
|
||||||
|
|
||||||
getOptionList = () => {
|
getOptionList = () => {
|
||||||
return this.props.options.enumOptions.sort(this.compareOptions);
|
return this.props.options.enumOptions.sort(this.compareOptions);
|
||||||
}
|
}
|
||||||
|
@ -55,7 +56,6 @@ class AdvancedMultiSelect extends React.Component {
|
||||||
onChange = (strValues) => {
|
onChange = (strValues) => {
|
||||||
let pluginArray = this.namesToPlugins(strValues, this.state.pluginDefinitions);
|
let pluginArray = this.namesToPlugins(strValues, this.state.pluginDefinitions);
|
||||||
this.props.onChange(pluginArray)
|
this.props.onChange(pluginArray)
|
||||||
this.setState({selectedPluginNames: pluginArray.map(v => v.name)});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
namesToPlugins = (names, allPlugins) => {
|
namesToPlugins = (names, allPlugins) => {
|
||||||
|
@ -80,7 +80,7 @@ class AdvancedMultiSelect extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMasterCheckboxClick = () => {
|
onMasterCheckboxClick = () => {
|
||||||
let checkboxState = this.getMasterCheckboxState(this.state.selectedPluginNames);
|
let checkboxState = this.getMasterCheckboxState(this.getSelectedPluginNames());
|
||||||
if (checkboxState === MasterCheckboxState.ALL) {
|
if (checkboxState === MasterCheckboxState.ALL) {
|
||||||
var newValues = [];
|
var newValues = [];
|
||||||
} else {
|
} else {
|
||||||
|
@ -96,7 +96,7 @@ class AdvancedMultiSelect extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
getSelectValuesAfterClick(clickedValue) {
|
getSelectValuesAfterClick(clickedValue) {
|
||||||
const valueArray = cloneDeep(this.state.selectedPluginNames);
|
const valueArray = cloneDeep(this.getSelectedPluginNames());
|
||||||
|
|
||||||
if (valueArray.includes(clickedValue)) {
|
if (valueArray.includes(clickedValue)) {
|
||||||
return valueArray.filter(e => e !== clickedValue);
|
return valueArray.filter(e => e !== clickedValue);
|
||||||
|
@ -158,10 +158,10 @@ class AdvancedMultiSelect extends React.Component {
|
||||||
|
|
||||||
setPaneInfoToSafe() {
|
setPaneInfoToSafe() {
|
||||||
let safePluginNames = this.state.allPluginNames.filter(pluginName => this.isSafe(pluginName));
|
let safePluginNames = this.state.allPluginNames.filter(pluginName => this.isSafe(pluginName));
|
||||||
this.setState({selectedPluginNames: safePluginNames});
|
|
||||||
this.onChange(safePluginNames);
|
this.onChange(safePluginNames);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
autofocus,
|
autofocus,
|
||||||
|
@ -176,16 +176,16 @@ class AdvancedMultiSelect extends React.Component {
|
||||||
<AdvancedMultiSelectHeader title={schema.title}
|
<AdvancedMultiSelectHeader title={schema.title}
|
||||||
onCheckboxClick={this.onMasterCheckboxClick}
|
onCheckboxClick={this.onMasterCheckboxClick}
|
||||||
checkboxState={this.getMasterCheckboxState(
|
checkboxState={this.getMasterCheckboxState(
|
||||||
this.state.selectedPluginNames)}
|
this.getSelectedPluginNames())}
|
||||||
hideReset={this.getHideResetState(
|
hideReset={this.getHideResetState(
|
||||||
this.state.selectedPluginNames)}
|
this.getSelectedPluginNames())}
|
||||||
onResetClick={this.onResetClick}/>
|
onResetClick={this.onResetClick}/>
|
||||||
|
|
||||||
<ChildCheckboxContainer id={id} multiple={multiple} required={required}
|
<ChildCheckboxContainer id={id} multiple={multiple} required={required}
|
||||||
autoFocus={autofocus} isSafe={this.isSafe}
|
autoFocus={autofocus} isSafe={this.isSafe}
|
||||||
onPaneClick={this.setPaneInfo}
|
onPaneClick={this.setPaneInfo}
|
||||||
onCheckboxClick={this.onChildCheckboxClick}
|
onCheckboxClick={this.onChildCheckboxClick}
|
||||||
selectedValues={this.state.selectedPluginNames}
|
selectedValues={this.getSelectedPluginNames()}
|
||||||
enumOptions={this.getOptionList()}/>
|
enumOptions={this.getOptionList()}/>
|
||||||
|
|
||||||
<InfoPane title={this.state.infoPaneParams.title}
|
<InfoPane title={this.state.infoPaneParams.title}
|
||||||
|
|
Loading…
Reference in New Issue