ui: Factor MasterCheckbox() out of AdvancedMultiSelect

This commit is contained in:
Mike Salvatore 2021-01-08 16:18:24 -05:00
parent 84b422a120
commit af329d56d8
1 changed files with 25 additions and 8 deletions

View File

@ -42,6 +42,27 @@ function getDefaultPaneParams(refString, registry) {
return ({title: configSection.title, content: configSection.description}); return ({title: configSection.title, content: configSection.description});
} }
function MasterCheckbox(props) {
const {
title,
value,
disabled,
onClick,
checkboxState
} = props;
return (
<Card.Header>
<Button key={`${title}-button`} value={value}
variant={'link'} disabled={disabled}
onClick={onClick}>
<FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare} />
</Button>
<span className={'header-title'}>{title}</span>
</Card.Header>
);
}
class AdvancedMultiSelect extends React.Component { class AdvancedMultiSelect extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
@ -69,6 +90,7 @@ class AdvancedMultiSelect extends React.Component {
let definitionObj = getFullDefinitionByKey(refString, registry, itemKey); let definitionObj = getFullDefinitionByKey(refString, registry, itemKey);
this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}}); this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}});
} }
render() { render() {
const { const {
schema, schema,
@ -88,14 +110,9 @@ class AdvancedMultiSelect extends React.Component {
const selectValue = cloneDeep(value); const selectValue = cloneDeep(value);
return ( return (
<div className={'advanced-multi-select'}> <div className={'advanced-multi-select'}>
<Card.Header> <MasterCheckbox title={schema.title} value={value}
<Button key={`${schema.title}-button`} value={value} disabled={disabled} onClick={this.onMasterCheckboxClick}
variant={'link'} disabled={disabled} checkboxState={this.state.masterCheckbox} />
onClick={this.onMasterCheckboxClick}>
<FontAwesomeIcon icon={this.state.masterCheckbox ? faCheckSquare : faSquare}/>
</Button>
<span className={'header-title'}>{schema.title}</span>
</Card.Header>
<Form.Group <Form.Group
style={{height: `${getComponentHeight(enumOptions.length)}px`}} style={{height: `${getComponentHeight(enumOptions.length)}px`}}
id={id} id={id}