Added onFullScreenChange to OuiDataGrid (opensearch-project#1053)

* Added onFullScreenChange to OuiDataGrid (opensearch-project#1053) Signed-off-by: Danila Gulderov <[email protected]> * Update CHANGELOG.md Co-authored-by: Miki <[email protected]> Signed-off-by: Josh Romero <[email protected]> * from if to ?.(opensearch-project#1053) Signed-off-by: Danila Gulderov <[email protected]> --------- Signed-off-by: Danila Gulderov <[email protected]> Signed-off-by: Josh Romero <[email protected]> Co-authored-by: Josh Romero <[email protected]> Co-authored-by: Miki <[email protected]>
joshuarrrr · Nov 7, 2023 · 4a9645e · 4a9645e
1 parent 9ba6199
commit 4a9645e
Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -58,6 +58,7 @@
 - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004))
 - Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856))
 - Add new icons for OpenSearch Dashboards v2.10.0 ([#1014](https://github.com/opensearch-project/oui/pull/1014))
+- Add `onFullScreenChange` to `OuiDataGrid` ([#1053](https://github.com/opensearch-project/oui/pull/1053))
 
 ### 🐛 Bug Fixes
 

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -312,6 +312,10 @@ export default () => {
     console.log(eventData);
   });
 
+  const onFullScreenChange = useRef((eventData) => {
+    console.log('isFullScreen:', eventData);
+  });
+
   return (
     <DataContext.Provider value={raw_data}>
       <OuiDataGrid
@@ -330,6 +334,7 @@ export default () => {
           onChangePage: onChangePage,
         }}
         onColumnResize={onColumnResize.current}
+        onFullScreenChange={onFullScreenChange.current}
       />
     </DataContext.Provider>
   );

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
@@ -164,6 +164,10 @@ type CommonGridProps = CommonProps &
      * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`.
      */
     onColumnResize?: OuiDataGridOnColumnResizeHandler;
+    /**
+     * A callback fired when the internal full screen state changes.
+     */
+    onFullScreenChange?: (isFullScreen: boolean) => void;
     /**
      * Defines a minimum width for the grid to show all controls in its header.
      */
@@ -690,6 +694,7 @@ function notifyCellOfFocusState(
 }
 
 const emptyArrayDefault: OuiDataGridControlColumn[] = [];
+
 export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
   const {
     leadingControlColumns = emptyArrayDefault,
@@ -708,14 +713,15 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
     inMemory,
     popoverContents,
     onColumnResize,
+    onFullScreenChange,
     minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS,
     height,
     width,
     rowHeightsOptions,
     ...rest
   } = props;
 
-  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isFullScreen, setFullScreen] = useState(false);
   const [gridWidth, setGridWidth] = useState(0);
 
   const [interactiveCellId] = useState(htmlIdGenerator()());
@@ -756,6 +762,14 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
     [headerIsInteractive, setHeaderIsInteractive, setFocusedCell]
   );
 
+  const handleFullScreenChange = useCallback(
+    (isFullScreen: boolean) => {
+      setFullScreen(isFullScreen);
+      onFullScreenChange?.(isFullScreen);
+    },
+    [onFullScreenChange]
+  );
+
   const handleHeaderMutation = useCallback<MutationCallback>(
     (records) => {
       const [{ target }] = records;
@@ -781,7 +795,7 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
       case keys.ESCAPE:
         if (isFullScreen) {
           event.preventDefault();
-          setIsFullScreen(false);
+          handleFullScreenChange(false);
         }
         break;
     }
@@ -1000,7 +1014,7 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
           color="text"
           className={controlBtnClasses}
           data-test-subj="dataGridFullScrenButton"
-          onClick={() => setIsFullScreen(!isFullScreen)}>
+          onClick={() => handleFullScreenChange(!isFullScreen)}>
           {isFullScreen ? fullScreenButtonActive : fullScreenButton}
         </OuiButtonEmpty>
       )}