From 15d880fd045b685f864f9e53971272992596a0f6 Mon Sep 17 00:00:00 2001 From: Vince Juric Date: Tue, 3 Mar 2020 00:23:21 +0100 Subject: [PATCH 1/2] OnColumnResize DataGrid * onColumnResize DataGrid prop * onColumnResize test * simple console log callback for datagrid example --- src-docs/src/views/datagrid/datagrid.js | 3 +++ src/components/datagrid/data_grid.test.tsx | 30 +++++++++++++++++++++ src/components/datagrid/data_grid.tsx | 31 ++++++++++++++++++---- src/components/datagrid/data_grid_types.ts | 9 +++++++ 4 files changed, 68 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js index 62864d99fce..f45e6a18ba0 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -215,6 +215,9 @@ export default () => { onChangeItemsPerPage: onChangeItemsPerPage, onChangePage: onChangePage, }} + onColumnResize={eventData => { + console.log(eventData); + }} /> ); }; diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index c0f5ba6864f..7daca32c87d 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -1245,6 +1245,36 @@ Array [ }); }); + it('should listen for column resize', () => { + const onColumnResizeCallback = jest.fn(); + const component = mount( + {}, + }} + rowCount={3} + renderCellValue={() => 'value'} + onColumnResize={args => onColumnResizeCallback(args)} + /> + ); + + resizeColumn(component, 'Column 1', 150); + resizeColumn(component, 'Column 2', 100); + + expect(onColumnResizeCallback.mock.calls.length).toBe(2); + expect(onColumnResizeCallback.mock.calls[0][0]).toEqual({ + columnId: 'Column 1', + width: 150, + }); + expect(onColumnResizeCallback.mock.calls[1][0]).toEqual({ + columnId: 'Column 2', + width: 100, + }); + }); + it('is prevented by isResizable:false', () => { const component = mount( void] { const [columnWidths, setColumnWidths] = useState({}); @@ -285,9 +291,20 @@ function useColumnWidths( ); }, [setColumnWidths, columns]); - const setColumnWidth = (columnId: string, width: number) => { - setColumnWidths({ ...columnWidths, [columnId]: width }); - }; + const setColumnWidth = useCallback( + (columnId: string, width: number): void => { + setColumnWidths(columnWidths => { + const newColumnWidths = { ...columnWidths, [columnId]: width }; + + if (onColumnResize instanceof Function) { + onColumnResize({ columnId, width }); + } + + return newColumnWidths; + }); + }, + [setColumnWidths, onColumnResize] + ); return [columnWidths, setColumnWidth]; } @@ -568,10 +585,14 @@ export const EuiDataGrid: FunctionComponent = props => { sorting, inMemory, popoverContents, + onColumnResize, ...rest } = props; - const [columnWidths, setColumnWidth] = useColumnWidths(columns); + const [columnWidths, setColumnWidth] = useColumnWidths( + columns, + onColumnResize + ); // apply style props on top of defaults const gridStyleWithDefaults = { ...startingStyles, ...gridStyle }; diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 58b5165095e..69c349bf886 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -200,3 +200,12 @@ export type EuiDataGridPopoverContent = ComponentType< export interface EuiDataGridPopoverContents { [key: string]: EuiDataGridPopoverContent; } + +export interface EuiDataGridColumnResizeEventData { + columnId: string; + width: number; +} + +export type EuiDataGridOnColumnResizeEvent = ( + eventData: EuiDataGridColumnResizeEventData +) => void; From 5d6096fe94161a2890c8ab82186f9dd9bb6375cc Mon Sep 17 00:00:00 2001 From: Vince Juric Date: Wed, 11 Mar 2020 18:00:08 +0100 Subject: [PATCH 2/2] DataGrid onColumnResize * Renamed `EuiDataGridOnColumnResizeEvent` to `EuiDataGridOnColumnResizeHandler` for clarity * Renamed `EuiDataGridColumnResizeEventData` to `EuiDataGridOnColumnResizeData` for clarity * Removed useCallback `setColumnWidth` --- CHANGELOG.md | 1 + src/components/datagrid/data_grid.tsx | 25 ++++++++-------------- src/components/datagrid/data_grid_types.ts | 6 +++--- 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4035559c5d3..fe021798e53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https://github.com/elastic/eui/pull/2914)) - Added `folderCheck`, `folderExclamation`, `push`, `quote`, `reporter` and `users` icons ([#2935](https://github.com/elastic/eui/pull/2935)) - Updated `folderClosed` and `folderOpen` to match new additions and sit better on the pixel grid ([#2935](https://github.com/elastic/eui/pull/2935)) +- Added `onColumnResize` prop to `EuiDataGrid` of type `EuiDataGridOnColumnResizeHandler` that gets called when column changes it's size. **Bug fixes** diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index ba8af79ec03..6a95d5eff5b 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -34,7 +34,7 @@ import { EuiDataGridColumnVisibility, EuiDataGridToolBarVisibilityOptions, EuiDataGridFocusedCell, - EuiDataGridOnColumnResizeEvent, + EuiDataGridOnColumnResizeHandler, } from './data_grid_types'; import { EuiDataGridCellProps } from './data_grid_cell'; import { EuiButtonEmpty } from '../button'; @@ -118,7 +118,7 @@ type CommonGridProps = CommonProps & /** * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`. */ - onColumnResize?: EuiDataGridOnColumnResizeEvent; + onColumnResize?: EuiDataGridOnColumnResizeHandler; }; // This structure forces either aria-label or aria-labelledby to be defined @@ -274,7 +274,7 @@ function doesColumnHaveAnInitialWidth( function useColumnWidths( columns: EuiDataGridColumn[], - onColumnResize?: EuiDataGridOnColumnResizeEvent + onColumnResize?: EuiDataGridOnColumnResizeHandler ): [EuiDataGridColumnWidths, (columnId: string, width: number) => void] { const [columnWidths, setColumnWidths] = useState({}); @@ -291,20 +291,13 @@ function useColumnWidths( ); }, [setColumnWidths, columns]); - const setColumnWidth = useCallback( - (columnId: string, width: number): void => { - setColumnWidths(columnWidths => { - const newColumnWidths = { ...columnWidths, [columnId]: width }; + const setColumnWidth = (columnId: string, width: number) => { + setColumnWidths({ ...columnWidths, [columnId]: width }); - if (onColumnResize instanceof Function) { - onColumnResize({ columnId, width }); - } - - return newColumnWidths; - }); - }, - [setColumnWidths, onColumnResize] - ); + if (onColumnResize) { + onColumnResize({ columnId, width }); + } + }; return [columnWidths, setColumnWidth]; } diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 69c349bf886..02a53b240dc 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -201,11 +201,11 @@ export interface EuiDataGridPopoverContents { [key: string]: EuiDataGridPopoverContent; } -export interface EuiDataGridColumnResizeEventData { +export interface EuiDataGridOnColumnResizeData { columnId: string; width: number; } -export type EuiDataGridOnColumnResizeEvent = ( - eventData: EuiDataGridColumnResizeEventData +export type EuiDataGridOnColumnResizeHandler = ( + data: EuiDataGridOnColumnResizeData ) => void;