From ec87396f2ef6a745de980eab58d2fa5dca0fa2d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Fri, 10 Aug 2018 14:51:37 -0300 Subject: [PATCH 1/6] Support for indeterminate checkboxes --- src-docs/src/views/form_controls/checkbox.js | 19 +++ src/components/form/checkbox/checkbox.js | 131 +++++++++++-------- 2 files changed, 99 insertions(+), 51 deletions(-) diff --git a/src-docs/src/views/form_controls/checkbox.js b/src-docs/src/views/form_controls/checkbox.js index 73acf8e3320..459bf817dc9 100644 --- a/src-docs/src/views/form_controls/checkbox.js +++ b/src-docs/src/views/form_controls/checkbox.js @@ -37,6 +37,25 @@ export default class extends Component { + + + + + + + + { - const classes = classNames( - 'euiCheckbox', - typeToClassNameMap[type], - { - 'euiCheckbox--noLabel': !label, - 'euiCheckbox--compressed': compressed - }, - className - ); - - let optionalLabel; - - if (label) { - optionalLabel = ( - + ); + } + + return ( +
- {label} - + + +
+ + {optionalLabel} +
); } - return ( -
- - -
- - {optionalLabel} -
- ); -}; + setInputRef = (input) => { + this.inputRef = input; + + if (this.props.inputRef) { + this.props.inputRef(input); + } + + if (input) { + this.invalidateIndeterminate(this.props); + } + } + + invalidateIndeterminate({ indeterminate }) { + this.inputRef.indeterminate = indeterminate; + } +} EuiCheckbox.propTypes = { className: PropTypes.string, From ccbcaf1de9ba16b22839238d0b3f916c5d9cb176 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Fri, 10 Aug 2018 14:58:17 -0300 Subject: [PATCH 2/6] Update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 12fc5e8b918..73011b16ce6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `3.4.0`. +- Added support for `indeterminate` to `EuiCheckbox` ([#1108](https://github.com/elastic/eui/pull/1108)) ## [`3.4.0`](https://github.com/elastic/eui/tree/v3.4.0) From 51ee80712f5491cf38ec4f485b19672fab21780b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Fri, 10 Aug 2018 15:03:51 -0300 Subject: [PATCH 3/6] Switch to componentDidUpdate --- src/components/form/checkbox/checkbox.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/form/checkbox/checkbox.js b/src/components/form/checkbox/checkbox.js index 8c95e49e049..1bf89f5b841 100644 --- a/src/components/form/checkbox/checkbox.js +++ b/src/components/form/checkbox/checkbox.js @@ -10,11 +10,11 @@ export const TYPES = Object.keys(typeToClassNameMap); export class EuiCheckbox extends Component { componentDidMount() { - this.invalidateIndeterminate(this.props); + this.invalidateIndeterminate(); } - componentWillReceiveProps(nextProps) { - this.invalidateIndeterminate(nextProps); + componentDidUpdate() { + this.invalidateIndeterminate(); } render() { @@ -83,12 +83,12 @@ export class EuiCheckbox extends Component { } if (input) { - this.invalidateIndeterminate(this.props); + this.invalidateIndeterminate(); } } - invalidateIndeterminate({ indeterminate }) { - this.inputRef.indeterminate = indeterminate; + invalidateIndeterminate() { + this.inputRef.indeterminate = this.props.indeterminate; } } From 488a8d88ac70a7887a6fe16c31134f66891a0cf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Fri, 10 Aug 2018 15:20:39 -0300 Subject: [PATCH 4/6] Cleanup docs --- src-docs/src/views/form_controls/checkbox.js | 21 +++++++++----------- src/components/form/checkbox/checkbox.js | 5 ++++- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src-docs/src/views/form_controls/checkbox.js b/src-docs/src/views/form_controls/checkbox.js index 459bf817dc9..f3c18a3eb6b 100644 --- a/src-docs/src/views/form_controls/checkbox.js +++ b/src-docs/src/views/form_controls/checkbox.js @@ -16,6 +16,7 @@ export default class extends Component { this.state = { checked: false, + indeterminate: true, }; } @@ -25,6 +26,12 @@ export default class extends Component { }); }; + onChangeIndeterminate = () => { + this.setState({ + indeterminate: !this.state.indeterminate, + }); + }; + render() { return ( @@ -37,21 +44,11 @@ export default class extends Component { - - - - diff --git a/src/components/form/checkbox/checkbox.js b/src/components/form/checkbox/checkbox.js index 1bf89f5b841..a2112ab4568 100644 --- a/src/components/form/checkbox/checkbox.js +++ b/src/components/form/checkbox/checkbox.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { omit } from 'lodash'; const typeToClassNameMap = { inList: 'euiCheckbox--inList', @@ -30,6 +31,8 @@ export class EuiCheckbox extends Component { ...rest } = this.props; + const inputProps = omit(rest, 'indeterminate'); + const classes = classNames( 'euiCheckbox', typeToClassNameMap[type], @@ -65,7 +68,7 @@ export class EuiCheckbox extends Component { onChange={onChange} disabled={disabled} ref={this.setInputRef} - {...rest} + {...inputProps} />
From 7f31bb3af277dd1463158202388510725f3a8126 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Fri, 10 Aug 2018 15:35:28 -0300 Subject: [PATCH 5/6] Remove background-image transition --- src/components/form/_mixins.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index b8eb064eb50..6b06a27dab1 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -197,8 +197,7 @@ } transition: background-color $euiAnimSpeedFast ease-in, - border-color $euiAnimSpeedFast ease-in, - background-image 0s ease-out $euiAnimSpeedFast; + border-color $euiAnimSpeedFast ease-in; } @mixin euiCustomControl--selected($type: null){ From 15c4c09f440460aca8b99f4606cdaeae30ae24bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Fri, 10 Aug 2018 15:43:31 -0300 Subject: [PATCH 6/6] Add default, typings --- .../__snapshots__/basic_table.test.js.snap | 28 +++++++++++++++++++ src/components/form/checkbox/checkbox.js | 2 ++ src/components/form/checkbox/index.d.ts | 1 + 3 files changed, 31 insertions(+) diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap index e9c25a62de0..3b5725d3ce0 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap @@ -757,6 +757,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -787,6 +788,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -817,6 +819,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -847,6 +850,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -914,6 +918,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -947,6 +952,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -977,6 +983,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1007,6 +1014,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1074,6 +1082,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1114,6 +1123,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1172,6 +1182,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1230,6 +1241,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1325,6 +1337,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1358,6 +1371,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1388,6 +1402,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1418,6 +1433,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1485,6 +1501,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1518,6 +1535,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1548,6 +1566,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1578,6 +1597,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1645,6 +1665,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1685,6 +1706,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1741,6 +1763,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1797,6 +1820,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1890,6 +1914,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1923,6 +1948,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1953,6 +1979,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1983,6 +2010,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> diff --git a/src/components/form/checkbox/checkbox.js b/src/components/form/checkbox/checkbox.js index a2112ab4568..0f905f31399 100644 --- a/src/components/form/checkbox/checkbox.js +++ b/src/components/form/checkbox/checkbox.js @@ -103,6 +103,7 @@ EuiCheckbox.propTypes = { onChange: PropTypes.func.isRequired, type: PropTypes.oneOf(TYPES), disabled: PropTypes.bool, + indeterminate: PropTypes.bool, /** * when `true` creates a shorter height checkbox row */ @@ -112,5 +113,6 @@ EuiCheckbox.propTypes = { EuiCheckbox.defaultProps = { checked: false, disabled: false, + indeterminate: false, compressed: false, }; diff --git a/src/components/form/checkbox/index.d.ts b/src/components/form/checkbox/index.d.ts index 11bdd0eeb2b..aa44db8ccb4 100644 --- a/src/components/form/checkbox/index.d.ts +++ b/src/components/form/checkbox/index.d.ts @@ -18,6 +18,7 @@ declare module '@elastic/eui' { label?: ReactNode; type?: EuiCheckboxType; disabled?: boolean; + indeterminate?: boolean; } export const EuiCheckbox: SFC<