p20319658
/
monkey
forked from p34709852/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui: Minor readability and style changes for AdvancedMultiSelect

This commit is contained in:
Mike Salvatore 2021-01-13 07:35:03 -05:00
parent 94b87f8d9a
commit 73dd8ddcc9
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js
View File

@ -41,6 +41,8 @@ class AdvancedMultiSelect extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.enumOptions = props.options.enumOptions;
this.state = { this.state = {
masterCheckboxState: this.getMasterCheckboxState(props.value), masterCheckboxState: this.getMasterCheckboxState(props.value),
infoPaneParams: getDefaultPaneParams(props.schema.items.$ref, props.registry) infoPaneParams: getDefaultPaneParams(props.schema.items.$ref, props.registry)
@ -52,10 +54,10 @@ class AdvancedMultiSelect extends React.Component {
} }
onMasterCheckboxClick() { onMasterCheckboxClick() {
let newValues = this.props.options.enumOptions.map(({value}) => value); if (this.state.masterCheckboxState === MasterCheckboxState.ALL) {
var newValues = [];
if (this.state.masterCheckboxState == MasterCheckboxState.ALL) { } else {
newValues = []; newValues = this.enumOptions.map(({value}) => value);
} }
this.props.onChange(newValues); this.props.onChange(newValues);
@ -87,11 +89,11 @@ class AdvancedMultiSelect extends React.Component {
} }
getMasterCheckboxState(selectValues) { getMasterCheckboxState(selectValues) {
if (selectValues.length == 0) { if (selectValues.length === 0) {
return MasterCheckboxState.NONE; return MasterCheckboxState.NONE;
} }
if (selectValues.length != this.props.options.enumOptions.length) { if (selectValues.length != this.enumOptions.length) {
return MasterCheckboxState.MIXED; return MasterCheckboxState.MIXED;
} }
@ -107,8 +109,6 @@ class AdvancedMultiSelect extends React.Component {
const { const {
schema, schema,
id, id,
options,
value,
required, required,
disabled, disabled,
readonly, readonly,
@ -116,19 +116,17 @@ class AdvancedMultiSelect extends React.Component {
autofocus autofocus
} = this.props; } = this.props;
const {enumOptions} = options;
return ( return (
<div className={'advanced-multi-select'}> <div className={'advanced-multi-select'}>
<MasterCheckbox title={schema.title} value={value} <MasterCheckbox title={schema.title}
disabled={disabled} onClick={this.onMasterCheckboxClick} disabled={disabled} onClick={this.onMasterCheckboxClick}
checkboxState={this.state.masterCheckboxState}/> checkboxState={this.state.masterCheckboxState}/>
<Form.Group <Form.Group
style={{height: `${getComponentHeight(enumOptions.length)}px`}} style={{height: `${getComponentHeight(this.enumOptions.length)}px`}}
id={id} multiple={multiple} className='choice-block form-control' id={id} multiple={multiple} className='choice-block form-control'
required={required} disabled={disabled || readonly} autoFocus={autofocus}> required={required} disabled={disabled || readonly} autoFocus={autofocus}>
{ {
enumOptions.map(({value, label}, i) => { this.enumOptions.map(({value, label}, i) => {
return ( return (
<ChildCheckbox key={i} onPaneClick={this.setPaneInfo} <ChildCheckbox key={i} onPaneClick={this.setPaneInfo}
onClick={this.onChildCheckboxClick} value={value} onClick={this.onChildCheckboxClick} value={value}
@ -148,7 +146,6 @@ class AdvancedMultiSelect extends React.Component {
function MasterCheckbox(props) { function MasterCheckbox(props) {
const { const {
title, title,
value,
disabled, disabled,
onClick, onClick,
checkboxState checkboxState
@ -156,17 +153,15 @@ function MasterCheckbox(props) {
let newCheckboxIcon = faCheckSquare; let newCheckboxIcon = faCheckSquare;
if (checkboxState == MasterCheckboxState.NONE) { if (checkboxState === MasterCheckboxState.NONE) {
newCheckboxIcon = faSquare; newCheckboxIcon = faSquare;
} else if (checkboxState == MasterCheckboxState.MIXED) { } else if (checkboxState === MasterCheckboxState.MIXED) {
newCheckboxIcon = faMinusSquare; newCheckboxIcon = faMinusSquare;
} }
return ( return (
<Card.Header> <Card.Header>
<Button key={`${title}-button`} value={value} <Button key={`${title}-button`} variant={'link'} disabled={disabled} onClick={onClick}>
variant={'link'} disabled={disabled}
onClick={onClick}>
<FontAwesomeIcon icon={newCheckboxIcon}/> <FontAwesomeIcon icon={newCheckboxIcon}/>
</Button> </Button>
<span className={'header-title'}>{title}</span> <span className={'header-title'}>{title}</span>