From 73aad03cbc6c60368bd2e2459924c54d3d53a474 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 23 Aug 2018 17:10:29 -0400 Subject: [PATCH] Forcing max-width on flex item in form and fixing some other layout stuff --- .../views/header/_global_filter_group.scss | 2 +- .../src/views/header/_global_filter_item.scss | 2 +- .../src/views/header/global_filter_form.js | 128 ++++-------------- .../__snapshots__/combo_box.test.js.snap | 4 +- src/components/combo_box/_combo_box.scss | 6 +- .../combo_box_input/_combo_box_input.scss | 1 + .../combo_box_input/combo_box_input.js | 1 + 7 files changed, 40 insertions(+), 104 deletions(-) diff --git a/src-docs/src/views/header/_global_filter_group.scss b/src-docs/src/views/header/_global_filter_group.scss index 890c123ccbe1..8389257876a0 100644 --- a/src-docs/src/views/header/_global_filter_group.scss +++ b/src-docs/src/views/header/_global_filter_group.scss @@ -2,7 +2,7 @@ @import 'global_filter_form'; .globalFilterGroup__filterBar { - margin-top: $euiSizeM - 1px; + margin-top: $euiSizeM; } .globalFilterGroup__branch { diff --git a/src-docs/src/views/header/_global_filter_item.scss b/src-docs/src/views/header/_global_filter_item.scss index 824c013b04b3..f4fe725e54d5 100644 --- a/src-docs/src/views/header/_global_filter_item.scss +++ b/src-docs/src/views/header/_global_filter_item.scss @@ -16,5 +16,5 @@ } .globalFilterItem-isPinned { - border-left: $euiSizeXS solid $euiColorSuccess; + border-left: $euiSizeXS solid $euiColorVis0; } diff --git a/src-docs/src/views/header/global_filter_form.js b/src-docs/src/views/header/global_filter_form.js index 98577c48f42d..93e07989ddfe 100644 --- a/src-docs/src/views/header/global_filter_form.js +++ b/src-docs/src/views/header/global_filter_form.js @@ -80,107 +80,17 @@ export default class GlobalFilterForm extends Component { super(props); this.state = { + fieldOptions: fieldOptions, + operandOptions: operatorOptions, + valueOptions: valueOptions, selectedField: this.props.selectedObject ? this.props.selectedObject.field : [], selectedOperand: this.props.selectedObject ? this.props.selectedObject.operand : [], selectedValues: this.props.selectedObject ? this.props.selectedObject.values : [], useCustomLabel: false, - customLabel: null, + customLabel: '', }; } - // onComboBoxChange = selectedComboBoxOptions => { - // const selectedOptions = selectedComboBoxOptions || []; - // const numOfSelections = selectedOptions.length; - // const lastUpdate = selectedOptions[selectedOptions.length - 1]; - // const current = {}; - - // // If length is less than 3, then move on to the next - // if (numOfSelections < 3) { - // switch (numOfSelections) { - // case 0: - // current.selectedComboBoxOptions = []; - // current.editingOption = 'field'; - // current.comboBoxOptions = fieldOptions; - // break; - // case 1: - // current.selectedComboBoxOptions = selectedOptions; - // current.editingOption = 'operator'; - // current.comboBoxOptions = operatorOptions; - // break; - // default: - // // 2 or more - // current.selectedComboBoxOptions = selectedOptions; - // current.editingOption = 'value'; - // current.comboBoxOptions = valueOptions; - // break; - // } - // } else { - // // else stay on and just update the value - // switch (this.state.editingOption) { - // case 'field': - // pull(selectedOptions, lastUpdate); - // selectedOptions[0] = lastUpdate; - // break; - // case 'operator': - // pull(selectedOptions, lastUpdate); - // selectedOptions[1] = lastUpdate; - // break; - // default: - // // 'value' - // break; - // } - - // current.selectedComboBoxOptions = selectedOptions; - // } - - // // Add the appropriate click handlers to the first two selected options - // // (if they exist) - // if (numOfSelections > 0) { - // current.selectedComboBoxOptions[0].onClick = this.fieldClicked; - // } - // if (numOfSelections > 1) { - // current.selectedComboBoxOptions[1].onClick = this.opClicked; - // } - - // this.setState({ ...current }); - // }; - - // fieldClicked = () => { - // this.setState({ - // comboBoxOptions: fieldOptions, - // editingOption: 'field', - // }); - // }; - - // opClicked = () => { - // this.setState({ - // comboBoxOptions: operatorOptions, - // editingOption: 'operator', - // }); - // }; - - // eslint-disable-next-line no-unused-vars - onSearchChange = searchValue => { - //const options = this.state.comboBoxOptions; - // this.setState({ - // isComboBoxLoading: true, - // comboBoxOptions: [], - // }); - // clearTimeout(this.searchTimeout); - // if (this.state.selectedComboBoxOptions.length === 1) { - // options = operatorOptions; - // } else if (this.state.selectedComboBoxOptions.length > 1) { - // options = valueOptions; - // } - // this.searchTimeout = setTimeout(() => { - // // Simulate a remotely-executed search. - //this.setState({ - // isComboBoxLoading: false, - //comboBoxOptions: options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())), - //}); - // }, 200); - }; - onFieldChange = selectedOptions => { // We should only get back either 0 or 1 options. this.setState({ @@ -207,6 +117,24 @@ export default class GlobalFilterForm extends Component { }); }; + onFieldSearchChange = searchValue => { + this.setState({ + fieldOptions: fieldOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())), + }); + }; + + onOperandSearchChange = searchValue => { + this.setState({ + operandOptions: operatorOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())), + }); + }; + + onValuesSearchChange = searchValue => { + this.setState({ + valueOptions: valueOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())), + }); + }; + resetForm = () => { this.setState({ selectedField: [], @@ -234,30 +162,32 @@ export default class GlobalFilterForm extends Component { return (
- + - + @@ -274,7 +204,7 @@ export default class GlobalFilterForm extends Component { : 'Select one or more values' } isDisabled={this.state.selectedField.length < 1 || this.state.selectedOperand.length < 1} - options={valueOptions} + options={this.state.valueOptions} selectedOptions={this.state.selectedValues} onChange={this.onValuesChange} onSearchChange={this.onValuesSearchChange} diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap index 4c4575cb8f16..ef0c350452e0 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.js.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.js.snap @@ -13,7 +13,7 @@ exports[`EuiComboBox is rendered 1`] = ` class="euiFormControlLayout__childrenWrapper" >