UI: Refactor AdvancedMultiSelect.js to use props more

This commit is contained in:
vakarisz 2022-07-04 12:16:52 +03:00
parent 611818080a
commit ab720a5a55
1 changed files with 23 additions and 21 deletions

View File

@ -32,20 +32,12 @@ function AdvancedMultiSelectHeader(props) {
class AdvancedMultiSelect extends React.Component { class AdvancedMultiSelect extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.infoPaneRefString = props.schema.items.$ref;
this.registry = props.registry;
this.pluginNames = props.value.map(v => v.name);
this.state = { this.state = {
masterCheckboxState: this.getMasterCheckboxState(this.pluginNames), masterCheckboxState: this.getMasterCheckboxState(this.props.value.map(v => v.name)),
infoPaneParams: getDefaultPaneParams( pluginDefinitions: getObjectFromRegistryByRef(this.props.schema.items.$ref,
this.infoPaneRefString, this.props.registry).pluginDefs,
this.registry, pluginNames: this.props.value.map(v => v.name)
this.isUnsafeOptionSelected(this.pluginNames)
),
pluginDefinitions: getObjectFromRegistryByRef(this.infoPaneRefString,
this.registry).pluginDefs,
pluginNames: props.value.map(v => v.name)
}; };
} }
@ -155,12 +147,14 @@ class AdvancedMultiSelect extends React.Component {
} }
isSafe = (itemKey) => { isSafe = (itemKey) => {
console.log(getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey)) let fullDef = getFullDefinitionByKey(this.props.schema.items.$ref,
return getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey).safe; this.props.registry, itemKey);
return fullDef.safe;
} }
setPaneInfo = (itemKey) => { setPaneInfo = (itemKey) => {
let definitionObj = getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey); let definitionObj = getFullDefinitionByKey(this.props.schema.items.$ref,
this.props.registry, itemKey);
this.setState( this.setState(
{ {
infoPaneParams: { infoPaneParams: {
@ -192,12 +186,20 @@ class AdvancedMultiSelect extends React.Component {
schema schema
} = this.props; } = this.props;
let paneParams = getDefaultPaneParams(
this.props.schema.items.$ref,
this.props.registry,
this.isUnsafeOptionSelected(this.state.pluginNames)
);
return ( return (
<div className={'advanced-multi-select'}> <div className={'advanced-multi-select'}>
<AdvancedMultiSelectHeader title={schema.title} <AdvancedMultiSelectHeader title={schema.title}
onCheckboxClick={this.onMasterCheckboxClick} onCheckboxClick={this.onMasterCheckboxClick}
checkboxState={this.getMasterCheckboxState(this.state.pluginNames)} checkboxState={this.getMasterCheckboxState(
hideReset={this.getHideResetState(this.pluginNames)} this.state.pluginNames)}
hideReset={this.getHideResetState(
this.props.value.map(v => v.name))}
onResetClick={this.onResetClick}/> onResetClick={this.onResetClick}/>
<ChildCheckboxContainer id={id} multiple={multiple} required={required} <ChildCheckboxContainer id={id} multiple={multiple} required={required}
@ -207,10 +209,10 @@ class AdvancedMultiSelect extends React.Component {
selectedValues={this.state.pluginNames} selectedValues={this.state.pluginNames}
enumOptions={this.getOptionList()}/> enumOptions={this.getOptionList()}/>
<InfoPane title={this.state.infoPaneParams.title} <InfoPane title={paneParams.title}
body={this.state.infoPaneParams.content} body={paneParams.content}
link={this.state.infoPaneParams.link} link={paneParams.link}
warningType={this.state.infoPaneParams.warningType}/> warningType={paneParams.warningType}/>
</div> </div>
); );
} }