From e769b3c17dc45059b8b286246aa3ba14ea4c01c2 Mon Sep 17 00:00:00 2001
From: jvince <vince.nightshift@gmail.com>
Date: Thu, 12 Mar 2020 01:13:33 +0100
Subject: [PATCH] added OnColumnResize to DataGrid (#2963)

* OnColumnResize DataGrid

* onColumnResize DataGrid prop
* onColumnResize test
* simple console log callback for datagrid example

* DataGrid onColumnResize

* Renamed `EuiDataGridOnColumnResizeEvent` to `EuiDataGridOnColumnResizeHandler` for clarity
* Renamed `EuiDataGridColumnResizeEventData` to `EuiDataGridOnColumnResizeData` for clarity
* Removed useCallback `setColumnWidth`

Co-authored-by: dave.snider@gmail.com <dave.snider@gmail.com>
---
 CHANGELOG.md                               |  3 ++-
 src-docs/src/views/datagrid/datagrid.js    |  3 +++
 src/components/datagrid/data_grid.test.tsx | 30 ++++++++++++++++++++++
 src/components/datagrid/data_grid.tsx      | 18 +++++++++++--
 src/components/datagrid/data_grid_types.ts |  9 +++++++
 5 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 240b9af8bed..3c90c329188 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,8 @@
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))
 - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039))
 - Removed `role` attribute from `EuiImage`([#3036](https://github.com/elastic/eui/pull/3036))
--  Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003))
+- Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003))
+- Added `onColumnResize` prop to `EuiDataGrid` of type `EuiDataGridOnColumnResizeHandler` that gets called when column changes it's size ([#2963](https://github.com/elastic/eui/pull/2963))
 
 **Bug Fixes**
 
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 440cc1b8406..6597826bbd7 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -219,6 +219,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(
+          <EuiDataGrid
+            aria-labelledby="#test"
+            columns={[{ id: 'Column 1' }, { id: 'Column 2', initialWidth: 75 }]}
+            columnVisibility={{
+              visibleColumns: ['Column 1', 'Column 2'],
+              setVisibleColumns: () => {},
+            }}
+            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(
           <EuiDataGrid
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 8a972bba52d..cfa59333bb9 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -35,6 +35,7 @@ import {
   EuiDataGridColumnVisibility,
   EuiDataGridToolBarVisibilityOptions,
   EuiDataGridFocusedCell,
+  EuiDataGridOnColumnResizeHandler,
 } from './data_grid_types';
 import { EuiDataGridCellProps } from './data_grid_cell';
 import { EuiButtonEmpty } from '../button';
@@ -115,6 +116,10 @@ type CommonGridProps = CommonProps &
      * A #EuiDataGridSorting oject that provides the sorted columns along with their direction. Omit to disable, but you'll likely want to also turn off the user sorting controls through the `toolbarVisibility` prop.
      */
     sorting?: EuiDataGridSorting;
+    /**
+     * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`.
+     */
+    onColumnResize?: EuiDataGridOnColumnResizeHandler;
   };
 
 // This structure forces either aria-label or aria-labelledby to be defined
@@ -270,7 +275,8 @@ function doesColumnHaveAnInitialWidth(
 }
 
 function useColumnWidths(
-  columns: EuiDataGridColumn[]
+  columns: EuiDataGridColumn[],
+  onColumnResize?: EuiDataGridOnColumnResizeHandler
 ): [EuiDataGridColumnWidths, (columnId: string, width: number) => void] {
   const [columnWidths, setColumnWidths] = useState<EuiDataGridColumnWidths>({});
 
@@ -289,6 +295,10 @@ function useColumnWidths(
 
   const setColumnWidth = (columnId: string, width: number) => {
     setColumnWidths({ ...columnWidths, [columnId]: width });
+
+    if (onColumnResize) {
+      onColumnResize({ columnId, width });
+    }
   };
 
   return [columnWidths, setColumnWidth];
@@ -570,10 +580,14 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = 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 683be6c72f3..31f0bc2cb6b 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -204,3 +204,12 @@ export type EuiDataGridPopoverContent = ComponentType<
 export interface EuiDataGridPopoverContents {
   [key: string]: EuiDataGridPopoverContent;
 }
+
+export interface EuiDataGridOnColumnResizeData {
+  columnId: string;
+  width: number;
+}
+
+export type EuiDataGridOnColumnResizeHandler = (
+  data: EuiDataGridOnColumnResizeData
+) => void;