From 99fd478585227e1648ea2caba9748ab4315fecd0 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 14 May 2018 11:18:40 -0700 Subject: [PATCH 1/5] adds isDisabled prop to EuiComboBox --- .../src/views/combo_box/combo_box_example.js | 20 +++++ src-docs/src/views/combo_box/disabled.js | 84 +++++++++++++++++++ src/components/combo_box/_combo_box.scss | 6 ++ src/components/combo_box/combo_box.js | 7 +- .../combo_box_input/combo_box_input.js | 15 +++- 5 files changed, 128 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/combo_box/disabled.js diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index e3d69e48c60..055b577d8b2 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -58,6 +58,10 @@ import Virtualized from './virtualized'; const virtualizedSource = require('!!raw-loader!./virtualized'); const virtualizedHtml = renderToHtml(Virtualized); +import Disabled from './disabled'; +const disabledSource = require('!!raw-loader!./disabled'); +const disabledHtml = renderToHtml(Disabled); + export const ComboBoxExample = { title: 'Combo Box', intro: ( @@ -98,6 +102,22 @@ export const ComboBoxExample = { }], props: { EuiComboBox }, demo: , + }, { + title: 'Disabled', + source: [{ + type: GuideSectionTypes.JS, + code: disabledSource, + }, { + type: GuideSectionTypes.HTML, + code: disabledHtml, + }], + text: ( +

+ Set the prop isDisabled to make the combo box disabled. +

+ ), + props: { EuiComboBox }, + demo: , }, { title: 'Virtualized', source: [{ diff --git a/src-docs/src/views/combo_box/disabled.js b/src-docs/src/views/combo_box/disabled.js new file mode 100644 index 00000000000..499ee32c47b --- /dev/null +++ b/src-docs/src/views/combo_box/disabled.js @@ -0,0 +1,84 @@ +import React, { Component } from 'react'; + +import { + EuiComboBox, +} from '../../../../src/components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.options = [{ + label: 'Titan', + 'data-test-subj': 'titanOption', + }, { + label: 'Enceladus is disabled', + disabled: true, + }, { + label: 'Mimas', + }, { + label: 'Dione', + }, { + label: 'Iapetus', + }, { + label: 'Phoebe', + }, { + label: 'Rhea', + }, { + label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', + }, { + label: 'Tethys', + }, { + label: 'Hyperion', + }]; + + this.state = { + selectedOptions: [this.options[2], this.options[4]], + }; + } + + onChange = (selectedOptions) => { + this.setState({ + selectedOptions, + }); + }; + + onCreateOption = (searchValue, flattenedOptions) => { + const normalizedSearchValue = searchValue.trim().toLowerCase(); + + if (!normalizedSearchValue) { + return; + } + + const newOption = { + label: searchValue, + }; + + // Create the option if it doesn't exist. + if (flattenedOptions.findIndex(option => + option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1) { + this.options.push(newOption); + } + + // Select the option. + this.setState(prevState => ({ + selectedOptions: prevState.selectedOptions.concat(newOption), + })); + }; + + render() { + const { selectedOptions } = this.state; + return ( + + ); + } +} diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index c40ccdd6e50..abe866d0b39 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -64,4 +64,10 @@ @include euiFormControlInvalidStyle; } } + + &.euiComboBox-isDisabled { + .euiComboBox__inputWrap { + @include euiFormControlDisabledStyle; + } + } } diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index dd92923ec95..16a51757a96 100644 --- a/src/components/combo_box/combo_box.js +++ b/src/components/combo_box/combo_box.js @@ -26,6 +26,7 @@ import { export class EuiComboBox extends Component { static propTypes = { id: PropTypes.string, + isDisabled: PropTypes.bool, className: PropTypes.string, placeholder: PropTypes.string, isLoading: PropTypes.bool, @@ -500,6 +501,7 @@ export class EuiComboBox extends Component { render() { const { id, + isDisabled, className, isLoading, options, @@ -523,6 +525,7 @@ export class EuiComboBox extends Component { const classes = classNames('euiComboBox', className, { 'euiComboBox-isOpen': isListOpen, 'euiComboBox-isInvalid': isInvalid, + 'euiComboBox-isDisabled': isDisabled, }); const value = selectedOptions.map(selectedOption => selectedOption.label).join(', '); @@ -552,6 +555,7 @@ export class EuiComboBox extends Component { scrollToIndex={activeOptionIndex} onScroll={this.focusActiveOption} rowHeight={rowHeight} + isDisabled={isDisabled} /> ); @@ -578,12 +582,13 @@ export class EuiComboBox extends Component { autoSizeInputRef={this.autoSizeInputRef} inputRef={this.searchInputRef} updatePosition={this.updateListPosition} - onClear={isClearable && this.clearSelectedOptions ? this.clearSelectedOptions : undefined} + onClear={(isClearable && this.clearSelectedOptions && !isDisabled) ? this.clearSelectedOptions : undefined} hasSelectedOptions={selectedOptions.length > 0} isListOpen={isListOpen} onOpen={this.openList} onClose={this.closeList} singleSelection={singleSelection} + isDisabled={isDisabled} /> {optionsList} diff --git a/src/components/combo_box/combo_box_input/combo_box_input.js b/src/components/combo_box/combo_box_input/combo_box_input.js index d8ce6f6d249..ac35ac3c9f2 100644 --- a/src/components/combo_box/combo_box_input/combo_box_input.js +++ b/src/components/combo_box/combo_box_input/combo_box_input.js @@ -29,6 +29,7 @@ export class EuiComboBoxInput extends Component { onOpen: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, singleSelection: PropTypes.bool, + isDisabled: PropTypes.bool, } constructor(props) { @@ -87,6 +88,7 @@ export class EuiComboBoxInput extends Component { onOpen, onClose, singleSelection, + isDisabled, } = this.props; const pills = selectedOptions.map((option) => { @@ -99,7 +101,7 @@ export class EuiComboBoxInput extends Component { return (
{removeOptionMessage}
From e35fd83d5d7feb982745e90c1bdb859f3d127fcf Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 14 May 2018 12:17:36 -0700 Subject: [PATCH 2/5] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 003e11429f1..c7dd11a1dbd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ - Made boolean matching in `EuiSearchBar` more exact so it doesn't match words starting with booleans, like "truest" or "offer" ([#776](https://github.com/elastic/eui/pull/776)) - `EuiComboBox` do not setState or call refs once component is unmounted ([807](https://github.com/elastic/eui/pull/807) and [#813](https://github.com/elastic/eui/pull/813)) - Added better accessibility labeling to `EuiPagination`, `EuiSideNav`, `EuiPopover`, `EuiBottomBar` and `EuiBasicTable`. ([#821](https://github.com/elastic/eui/pull/821)) +- Added `isDisabled` to `EuiComboBox` ([#829](https://github.com/elastic/eui/pull/829)) ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46) From 392d2f2974b0e7227ae2749c69e45221eb315510 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 15 May 2018 09:02:51 -0700 Subject: [PATCH 3/5] feedback --- src/components/combo_box/combo_box.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index 16a51757a96..1b4a28522e8 100644 --- a/src/components/combo_box/combo_box.js +++ b/src/components/combo_box/combo_box.js @@ -434,6 +434,14 @@ export class EuiComboBox extends Component { } }; + onClear = () => { + if (isClearable && this.clearSelectedOptions && !isDisabled) { + return this.clearSelectedOptions; + } else { + return undefined; + } + } + autoSizeInputRef = node => { this.autoSizeInput = node; }; @@ -582,7 +590,7 @@ export class EuiComboBox extends Component { autoSizeInputRef={this.autoSizeInputRef} inputRef={this.searchInputRef} updatePosition={this.updateListPosition} - onClear={(isClearable && this.clearSelectedOptions && !isDisabled) ? this.clearSelectedOptions : undefined} + onClear={this.onClear} hasSelectedOptions={selectedOptions.length > 0} isListOpen={isListOpen} onOpen={this.openList} From c69d05d763653655e65b5eb195a130182f4d22b1 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 15 May 2018 09:59:00 -0700 Subject: [PATCH 4/5] proper vars --- src/components/combo_box/combo_box.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index 1b4a28522e8..927685773dd 100644 --- a/src/components/combo_box/combo_box.js +++ b/src/components/combo_box/combo_box.js @@ -435,7 +435,7 @@ export class EuiComboBox extends Component { }; onClear = () => { - if (isClearable && this.clearSelectedOptions && !isDisabled) { + if (this.props.isClearable && this.clearSelectedOptions && !this.props.isDisabled) { return this.clearSelectedOptions; } else { return undefined; @@ -524,7 +524,7 @@ export class EuiComboBox extends Component { async, // eslint-disable-line no-unused-vars isInvalid, rowHeight, - isClearable, + isClearable, // eslint-disable-line no-unused-vars ...rest } = this.props; From 501def3f10b56a9f64cbbf65b89f8c081b35128c Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 15 May 2018 10:18:12 -0700 Subject: [PATCH 5/5] make onclear work properly --- src/components/combo_box/combo_box.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index 927685773dd..3e1faa2d24c 100644 --- a/src/components/combo_box/combo_box.js +++ b/src/components/combo_box/combo_box.js @@ -436,7 +436,7 @@ export class EuiComboBox extends Component { onClear = () => { if (this.props.isClearable && this.clearSelectedOptions && !this.props.isDisabled) { - return this.clearSelectedOptions; + return this.clearSelectedOptions(); } else { return undefined; }