From c50078656a25e879bc15c3f414a399f885557fbe Mon Sep 17 00:00:00 2001 From: mouradmourafiq Date: Sun, 31 May 2020 13:03:10 +0200 Subject: [PATCH 1/7] Add minSizeForControls to euiDataGrid --- CHANGELOG.md | 1 + .../views/datagrid/datagrid_styling_example.js | 4 +++- src/components/datagrid/data_grid.tsx | 15 ++++++++++++--- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d3247b355cd..3b5a04beebe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `minSizeForControls` to `euiDataGrid` as prop to control the min size for grid controls ([#](https://github.com/elastic/eui/pull/)) - Passed `getSelectedOptionForSearchValue` to `EuiComboBoxOptionsList` as prop ([#3501](https://github.com/elastic/eui/pull/3501)) - Added `appendIconComponentCache` function to allow manual pre-emptive loading of source elements into the `EuiIcon` cache ([#3481](https://github.com/elastic/eui/pull/3481)) - Added `initialSelected` to `EuiTableSelectionType` properties to set initial selected checkboxes for `EuiBasicTable` ([#3418](https://github.com/elastic/eui/pull/3418)) diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js index 6b1c14f0952..4b078697701 100644 --- a/src-docs/src/views/datagrid/datagrid_styling_example.js +++ b/src-docs/src/views/datagrid/datagrid_styling_example.js @@ -183,7 +183,9 @@ export const DataGridStylingExample = { text: (

When wrapped inside a container, like a dashboard panel, the grid will - start hiding controls and adopt a more strict flex layout + start hiding controls and adopt a more strict flex layout. + Use the `minSizeForControls` prop to control the min width to + enables/disables grid controls based on available width.

), components: { DataGridContainer }, diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 1da0d758722..6ea0ccfba69 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -140,6 +140,11 @@ type CommonGridProps = CommonProps & * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`. */ onColumnResize?: EuiDataGridOnColumnResizeHandler; + /** + * Defines a control for the min size when the grid only shows the full screen button. + * Default to `MINIMUM_WIDTH_FOR_GRID_CONTROLS`. + */ + minSizeForControls?: number; }; // This structure forces either aria-label or aria-labelledby to be defined @@ -326,12 +331,13 @@ function useColumnWidths( function useOnResize( setHasRoomForGridControls: (hasRoomForGridControls: boolean) => void, - isFullScreen: boolean + isFullScreen: boolean, + minSizeForControls: number ) { return useCallback( ({ width }: { width: number }) => { setHasRoomForGridControls( - width > MINIMUM_WIDTH_FOR_GRID_CONTROLS || isFullScreen + width > minSizeForControls || isFullScreen ); }, [setHasRoomForGridControls, isFullScreen] @@ -593,11 +599,14 @@ export const EuiDataGrid: FunctionComponent = props => { ); // enables/disables grid controls based on available width + const minSizeForControls = typeof props.minSizeForControls === 'undefined' ? + MINIMUM_WIDTH_FOR_GRID_CONTROLS : + props.minSizeForControls; const onResize = useOnResize(nextHasRoomForGridControls => { if (nextHasRoomForGridControls !== hasRoomForGridControls) { setHasRoomForGridControls(nextHasRoomForGridControls); } - }, isFullScreen); + }, isFullScreen, minSizeForControls); const handleGridKeyDown = (e: KeyboardEvent) => { switch (e.keyCode) { From b98390a5cd26812d64636457d0d970732f1ec4d3 Mon Sep 17 00:00:00 2001 From: mouradmourafiq Date: Sun, 31 May 2020 13:13:42 +0200 Subject: [PATCH 2/7] Update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b5a04beebe..b098689d3ed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added `minSizeForControls` to `euiDataGrid` as prop to control the min size for grid controls ([#](https://github.com/elastic/eui/pull/)) +- Added `minSizeForControls` to `euiDataGrid` as prop to control the min size for grid controls ([#3527](https://github.com/elastic/eui/pull/3527)) - Passed `getSelectedOptionForSearchValue` to `EuiComboBoxOptionsList` as prop ([#3501](https://github.com/elastic/eui/pull/3501)) - Added `appendIconComponentCache` function to allow manual pre-emptive loading of source elements into the `EuiIcon` cache ([#3481](https://github.com/elastic/eui/pull/3481)) - Added `initialSelected` to `EuiTableSelectionType` properties to set initial selected checkboxes for `EuiBasicTable` ([#3418](https://github.com/elastic/eui/pull/3418)) From 9c55ae73baf6766f62512cbfdf7a49192a5eaa0b Mon Sep 17 00:00:00 2001 From: Mourad Date: Mon, 1 Jun 2020 22:32:53 +0200 Subject: [PATCH 3/7] Update CHANGELOG.md Co-authored-by: Chandler Prall --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b098689d3ed..332505e1685 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added `minSizeForControls` to `euiDataGrid` as prop to control the min size for grid controls ([#3527](https://github.com/elastic/eui/pull/3527)) +- Added `minSizeForControls` prop to `EuiDataGrid` to control the minimum width for showing grid controls ([#3527](https://github.com/elastic/eui/pull/3527)) - Passed `getSelectedOptionForSearchValue` to `EuiComboBoxOptionsList` as prop ([#3501](https://github.com/elastic/eui/pull/3501)) - Added `appendIconComponentCache` function to allow manual pre-emptive loading of source elements into the `EuiIcon` cache ([#3481](https://github.com/elastic/eui/pull/3481)) - Added `initialSelected` to `EuiTableSelectionType` properties to set initial selected checkboxes for `EuiBasicTable` ([#3418](https://github.com/elastic/eui/pull/3418)) From d8346867a0595566d3a486ab31ad7c378cba6103 Mon Sep 17 00:00:00 2001 From: Mourad Date: Mon, 1 Jun 2020 22:33:15 +0200 Subject: [PATCH 4/7] Update src-docs/src/views/datagrid/datagrid_styling_example.js Co-authored-by: Chandler Prall --- src-docs/src/views/datagrid/datagrid_styling_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js index 4b078697701..59e7570a279 100644 --- a/src-docs/src/views/datagrid/datagrid_styling_example.js +++ b/src-docs/src/views/datagrid/datagrid_styling_example.js @@ -184,7 +184,7 @@ export const DataGridStylingExample = {

When wrapped inside a container, like a dashboard panel, the grid will start hiding controls and adopt a more strict flex layout. - Use the `minSizeForControls` prop to control the min width to + Use the minSizeForControls prop to control the min width to enables/disables grid controls based on available width.

), From c8f0c769b98b5b3c7b7179921dae45e6c7b89023 Mon Sep 17 00:00:00 2001 From: mouradmourafiq Date: Mon, 1 Jun 2020 22:41:06 +0200 Subject: [PATCH 5/7] Review comment: move minSizeForControls to props destructuring --- src/components/datagrid/data_grid.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 6ea0ccfba69..3889b31ead6 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -598,16 +598,6 @@ export const EuiDataGrid: FunctionComponent = props => { [headerIsInteractive, setHeaderIsInteractive, focusedCell, setFocusedCell] ); - // enables/disables grid controls based on available width - const minSizeForControls = typeof props.minSizeForControls === 'undefined' ? - MINIMUM_WIDTH_FOR_GRID_CONTROLS : - props.minSizeForControls; - const onResize = useOnResize(nextHasRoomForGridControls => { - if (nextHasRoomForGridControls !== hasRoomForGridControls) { - setHasRoomForGridControls(nextHasRoomForGridControls); - } - }, isFullScreen, minSizeForControls); - const handleGridKeyDown = (e: KeyboardEvent) => { switch (e.keyCode) { case keyCodes.ESCAPE: @@ -635,9 +625,19 @@ export const EuiDataGrid: FunctionComponent = props => { inMemory, popoverContents, onColumnResize, + minSizeForControls = typeof props.minSizeForControls === 'undefined' ? + MINIMUM_WIDTH_FOR_GRID_CONTROLS : + props.minSizeForControls, ...rest } = props; + // enables/disables grid controls based on available width + const onResize = useOnResize(nextHasRoomForGridControls => { + if (nextHasRoomForGridControls !== hasRoomForGridControls) { + setHasRoomForGridControls(nextHasRoomForGridControls); + } + }, isFullScreen, minSizeForControls); + const [columnWidths, setColumnWidth] = useColumnWidths( columns, onColumnResize From 3e20850bb33e0551315532f732c8b60f6fcfe546 Mon Sep 17 00:00:00 2001 From: mouradmourafiq Date: Mon, 1 Jun 2020 23:09:13 +0200 Subject: [PATCH 6/7] Review comments --- src/components/datagrid/data_grid.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 3889b31ead6..4413c4cb00d 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -141,8 +141,7 @@ type CommonGridProps = CommonProps & */ onColumnResize?: EuiDataGridOnColumnResizeHandler; /** - * Defines a control for the min size when the grid only shows the full screen button. - * Default to `MINIMUM_WIDTH_FOR_GRID_CONTROLS`. + * Defines a minimum width for the grid to show all controls in its header. */ minSizeForControls?: number; }; @@ -625,9 +624,7 @@ export const EuiDataGrid: FunctionComponent = props => { inMemory, popoverContents, onColumnResize, - minSizeForControls = typeof props.minSizeForControls === 'undefined' ? - MINIMUM_WIDTH_FOR_GRID_CONTROLS : - props.minSizeForControls, + minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS, ...rest } = props; From 10ce89bae2eb74c326867d32daf55f8deb86b913 Mon Sep 17 00:00:00 2001 From: mouradmourafiq Date: Tue, 2 Jun 2020 00:14:44 +0200 Subject: [PATCH 7/7] Fix lint issues --- .../datagrid/datagrid_styling_example.js | 4 ++-- src/components/datagrid/data_grid.tsx | 20 ++++++++++--------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js index 59e7570a279..50b2a3a815f 100644 --- a/src-docs/src/views/datagrid/datagrid_styling_example.js +++ b/src-docs/src/views/datagrid/datagrid_styling_example.js @@ -183,8 +183,8 @@ export const DataGridStylingExample = { text: (

When wrapped inside a container, like a dashboard panel, the grid will - start hiding controls and adopt a more strict flex layout. - Use the minSizeForControls prop to control the min width to + start hiding controls and adopt a more strict flex layout. Use the + minSizeForControls prop to control the min width to enables/disables grid controls based on available width.

), diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 4413c4cb00d..a6547c24e2e 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -335,11 +335,9 @@ function useOnResize( ) { return useCallback( ({ width }: { width: number }) => { - setHasRoomForGridControls( - width > minSizeForControls || isFullScreen - ); + setHasRoomForGridControls(width > minSizeForControls || isFullScreen); }, - [setHasRoomForGridControls, isFullScreen] + [setHasRoomForGridControls, isFullScreen, minSizeForControls] ); } @@ -629,11 +627,15 @@ export const EuiDataGrid: FunctionComponent = props => { } = props; // enables/disables grid controls based on available width - const onResize = useOnResize(nextHasRoomForGridControls => { - if (nextHasRoomForGridControls !== hasRoomForGridControls) { - setHasRoomForGridControls(nextHasRoomForGridControls); - } - }, isFullScreen, minSizeForControls); + const onResize = useOnResize( + nextHasRoomForGridControls => { + if (nextHasRoomForGridControls !== hasRoomForGridControls) { + setHasRoomForGridControls(nextHasRoomForGridControls); + } + }, + isFullScreen, + minSizeForControls + ); const [columnWidths, setColumnWidth] = useColumnWidths( columns,