ui: Factor ChildCheckbox out of AdvancedMultiSelect
This commit is contained in:
Mike Salvatore
parent
af329d56d8
commit
878f959a8f
|
|
@ -10,17 +10,6 @@ import {resolveObjectPath} from './utils/ObjectPathResolver';
|
|||
import InfoPane from './InfoPane';
|
||||
|
||||
|
||||
function getSelectValuesAfterClick(valueArray, clickedValue) {
|
||||
if (valueArray.includes(clickedValue)) {
|
||||
return valueArray.filter((e) => {
|
||||
return e !== clickedValue;
|
||||
});
|
||||
} else {
|
||||
valueArray.push(clickedValue);
|
||||
return valueArray;
|
||||
}
|
||||
}
|
||||
|
||||
// Definitions passed to components only contains value and label,
|
||||
// custom fields like "info" or "links" must be pulled from registry object using this function
|
||||
function getFullDefinitionsFromRegistry(refString, registry) {
|
||||
|
|
@ -56,95 +45,129 @@ function MasterCheckbox(props) {
|
|||
<Button key={`${title}-button`} value={value}
|
||||
variant={'link'} disabled={disabled}
|
||||
onClick={onClick}>
|
||||
<FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare} />
|
||||
<FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare}/>
|
||||
</Button>
|
||||
<span className={'header-title'}>{title}</span>
|
||||
</Card.Header>
|
||||
);
|
||||
}
|
||||
|
||||
function ChildCheckbox(props) {
|
||||
const {
|
||||
onPaneClick,
|
||||
onClick,
|
||||
value,
|
||||
disabled,
|
||||
label,
|
||||
checkboxState
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Form.Group onClick={() => onPaneClick(value)}>
|
||||
<Button value={value} variant={'link'} disabled={disabled} onClick={() => onClick(value)}>
|
||||
<FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare}/>
|
||||
</Button>
|
||||
<span className={'option-text'}>
|
||||
{label}
|
||||
</span>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
|
||||
class AdvancedMultiSelect extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {masterCheckbox: true, infoPaneParams: getDefaultPaneParams(props.schema.items.$ref, props.registry)};
|
||||
this.onMasterCheckboxClick = this.onMasterCheckboxClick.bind(this);
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {masterCheckbox: true, infoPaneParams: getDefaultPaneParams(props.schema.items.$ref, props.registry)};
|
||||
this.onMasterCheckboxClick = this.onMasterCheckboxClick.bind(this);
|
||||
this.onChildCheckboxClick = this.onChildCheckboxClick.bind(this);
|
||||
this.setPaneInfo = this.setPaneInfo.bind(this, props.schema.items.$ref, props.registry);
|
||||
}
|
||||
|
||||
onMasterCheckboxClick() {
|
||||
if (this.state.masterCheckbox) {
|
||||
this.props.onChange([]);
|
||||
} else {
|
||||
this.props.onChange(this.props.schema.default);
|
||||
}
|
||||
|
||||
onMasterCheckboxClick() {
|
||||
if (this.state.masterCheckbox) {
|
||||
this.props.onChange([]);
|
||||
} else {
|
||||
this.props.onChange(this.props.schema.default);
|
||||
}
|
||||
this.toggleMasterCheckbox();
|
||||
}
|
||||
|
||||
this.toggleMasterCheckbox();
|
||||
onChildCheckboxClick(value) {
|
||||
this.props.onChange(this.getSelectValuesAfterClick(value));
|
||||
}
|
||||
|
||||
getSelectValuesAfterClick(clickedValue) {
|
||||
const valueArray = cloneDeep(this.props.value);
|
||||
|
||||
if (valueArray.includes(clickedValue)) {
|
||||
return valueArray.filter((e) => {
|
||||
return e !== clickedValue;
|
||||
});
|
||||
} else {
|
||||
valueArray.push(clickedValue);
|
||||
return valueArray;
|
||||
}
|
||||
}
|
||||
|
||||
toggleMasterCheckbox() {
|
||||
this.setState((state) => ({
|
||||
masterCheckbox: !state.masterCheckbox
|
||||
}));
|
||||
}
|
||||
toggleMasterCheckbox() {
|
||||
this.setState((state) => ({
|
||||
masterCheckbox: !state.masterCheckbox
|
||||
}));
|
||||
}
|
||||
|
||||
setPaneInfo(refString, registry, itemKey) {
|
||||
let definitionObj = getFullDefinitionByKey(refString, registry, itemKey);
|
||||
this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}});
|
||||
}
|
||||
setPaneInfo(refString, registry, itemKey) {
|
||||
let definitionObj = getFullDefinitionByKey(refString, registry, itemKey);
|
||||
this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
schema,
|
||||
id,
|
||||
options,
|
||||
value,
|
||||
required,
|
||||
disabled,
|
||||
readonly,
|
||||
multiple,
|
||||
autofocus,
|
||||
onChange,
|
||||
registry
|
||||
} = this.props;
|
||||
const {enumOptions} = options;
|
||||
getDefaultPaneParams(schema.items.$ref, registry);
|
||||
const selectValue = cloneDeep(value);
|
||||
return (
|
||||
<div className={'advanced-multi-select'}>
|
||||
<MasterCheckbox title={schema.title} value={value}
|
||||
disabled={disabled} onClick={this.onMasterCheckboxClick}
|
||||
checkboxState={this.state.masterCheckbox} />
|
||||
<Form.Group
|
||||
style={{height: `${getComponentHeight(enumOptions.length)}px`}}
|
||||
id={id}
|
||||
multiple={multiple}
|
||||
className='choice-block form-control'
|
||||
required={required}
|
||||
disabled={disabled || readonly}
|
||||
autoFocus={autofocus}>
|
||||
{
|
||||
enumOptions.map(({value, label}, i) => {
|
||||
return (
|
||||
<Form.Group
|
||||
key={i}
|
||||
onClick={() => this.setPaneInfo(schema.items.$ref, registry, value)}>
|
||||
render() {
|
||||
const {
|
||||
schema,
|
||||
id,
|
||||
options,
|
||||
value,
|
||||
required,
|
||||
disabled,
|
||||
readonly,
|
||||
multiple,
|
||||
autofocus,
|
||||
onChange,
|
||||
registry
|
||||
} = this.props;
|
||||
|
||||
<Button value={value} variant={'link'} disabled={disabled}
|
||||
onClick={() => onChange(getSelectValuesAfterClick(selectValue, value))}>
|
||||
const {enumOptions} = options;
|
||||
getDefaultPaneParams(schema.items.$ref, registry);
|
||||
|
||||
<FontAwesomeIcon icon={selectValue.includes(value) ? faCheckSquare : faSquare}/>
|
||||
</Button>
|
||||
<span className={'option-text'}>
|
||||
{label}
|
||||
</span>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</Form.Group>
|
||||
<InfoPane title={this.state.infoPaneParams.title} body={this.state.infoPaneParams.content} link={this.state.infoPaneParams.link}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={'advanced-multi-select'}>
|
||||
<MasterCheckbox title={schema.title} value={value}
|
||||
disabled={disabled} onClick={this.onMasterCheckboxClick}
|
||||
checkboxState={this.state.masterCheckbox}/>
|
||||
<Form.Group
|
||||
style={{height: `${getComponentHeight(enumOptions.length)}px`}}
|
||||
id={id}
|
||||
multiple={multiple}
|
||||
className='choice-block form-control'
|
||||
required={required}
|
||||
disabled={disabled || readonly}
|
||||
autoFocus={autofocus}>
|
||||
{
|
||||
enumOptions.map(({value, label}, i) => {
|
||||
return (
|
||||
<ChildCheckbox key={i} onPaneClick={this.setPaneInfo}
|
||||
onClick={this.onChildCheckboxClick} value={value}
|
||||
disabled={disabled} label={label} checkboxState={this.props.value.includes(value)}/>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</Form.Group>
|
||||
<InfoPane title={this.state.infoPaneParams.title}
|
||||
body={this.state.infoPaneParams.content}
|
||||
link={this.state.infoPaneParams.link}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AdvancedMultiSelect;
|
||||
|
|
|
|||
Loading…
Reference in New Issue