fix callback width returning 0, add id to callback, add aria label to examples, update example resize callback with id

Author: kmcfaul

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableResizableColumnsExample.tsx

@@ -1,9 +1,5 @@
 import { FunctionComponent, useState } from 'react';
-import {
-  DataViewTable,
-  DataViewTr,
-  DataViewTh
-} from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { Button } from '@patternfly/react-core';
 import { ActionsColumn } from '@patternfly/react-table';
 
@@ -105,50 +101,54 @@ const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspac
 const ouiaId = 'TableExample';
 
 export const ResizableColumnsExample: FunctionComponent = () => {
-  const [ screenReaderText, setScreenReaderText ] = useState('');
-
-  const onResize = (_e, width) => {
+  const onResize = (
+    _e: React.MouseEvent | MouseEvent | React.KeyboardEvent | KeyboardEvent | TouchEvent,
+    id: string | number | undefined,
+    width: number
+  ) => {
     // eslint-disable-next-line no-console
-    console.log('resized width: ', width.toFixed(0));
-    setScreenReaderText(`Column ${width.toFixed(0)} pixels`);
+    console.log(`resized column id: ${id} width to: ${width.toFixed(0)}px`);
   };
 
   const columns: DataViewTh[] = [
     null,
     'Repositories',
     {
-      cell: 'col',
+      cell: 'Branches',
       resizableProps: {
         isResizable: true,
         onResize,
-        screenReaderText
-      }
+        resizeButtonAriaLabel: 'Resize repositories column'
+      },
+      props: { id: 'repositories' }
     },
     {
       cell: 'Pull requests',
       resizableProps: {
         isResizable: true,
         onResize,
-        screenReaderText
+        resizeButtonAriaLabel: 'Resize pull requests column'
       },
-      props: { info: { tooltip: 'More information' } }
+      props: { info: { tooltip: 'More information' }, id: 'pull-requests' }
     },
     {
       cell: 'This is a really long title',
       resizableProps: {
         isResizable: true,
         onResize,
-        screenReaderText
+        resizeButtonAriaLabel: 'Resize this is a really long title column'
       },
-      props: { info: { tooltip: 'More information' } }
+      props: { info: { tooltip: 'More information' }, id: 'this-is-a-really-long-title' }
     },
-    { cell: 'Last commit',
+    {
+      cell: 'Last commit',
       resizableProps: {
         isResizable: true,
         onResize,
-        screenReaderText
+        resizeButtonAriaLabel: 'Resize last commit column'
       },
-      props: { sort: { sortBy: {}, columnIndex: 4 } } }
+      props: { sort: { sortBy: {}, columnIndex: 4 }, id: 'last-commit' }
+    }
   ];
 
   return <DataViewTable isResizable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={rows} />;

packages/module/src/DataViewTh/DataViewTh.tsx

@@ -37,9 +37,10 @@ const useStyles = createUseStyles({
 export interface DataViewThResizableProps {
   /** Whether the column is resizable */
   isResizable?: boolean;
-  /** Callback after the column is resized */
+  /** Callback after the column is resized. Returns the triggering event, the column id passed in via cell props, and the new width of the column. */
   onResize?: (
     event: ReactMouseEvent | MouseEvent | ReactKeyboardEvent | KeyboardEvent | TouchEvent,
+    id: string | number | undefined,
     width: number
   ) => void;
   /** Width of the column */
@@ -76,6 +77,8 @@ export const DataViewTh: FC<DataViewThProps> = ({
   const thRef = useRef<HTMLTableCellElement>(null);
 
   const [ width, setWidth ] = useState(resizableProps?.width ? resizableProps.width : 0);
+  // Tracks the current column width for the onResize callback, because the width state is not updated until after the resize is complete
+  const trackedWidth = useRef(0);
   const classes = useStyles();
 
   const isResizable = resizableProps?.isResizable || false;
@@ -200,6 +203,7 @@ export const DataViewTh: FC<DataViewThProps> = ({
     }
 
     thRef.current?.style.setProperty('min-width', newSize + 'px');
+    trackedWidth.current = newSize;
     setWidth(newSize);
   };
 
@@ -212,7 +216,7 @@ export const DataViewTh: FC<DataViewThProps> = ({
     dragOffset.current = 0;
 
     // Call the onResize callback with the new width
-    onResize && onResize(e, width);
+    onResize && onResize(e, thProps?.id, trackedWidth.current);
 
     // Handle scroll into view when column drag button is moved off screen
     if (resizeButtonRef.current && !isInView.current) {
@@ -233,7 +237,7 @@ export const DataViewTh: FC<DataViewThProps> = ({
     dragOffset.current = 0;
 
     // Call the onResize callback with the new width
-    onResize && onResize(e, width);
+    onResize && onResize(e, thProps?.id, trackedWidth.current);
 
     document.removeEventListener('touchmove', callbackTouchMove);
     document.removeEventListener('touchend', callbackTouchEnd);
@@ -281,7 +285,7 @@ export const DataViewTh: FC<DataViewThProps> = ({
 
     thRef.current?.style.setProperty('min-width', newSize + 'px');
     setWidth(newSize);
-    onResize && onResize(e, newSize);
+    onResize && onResize(e, thProps?.id, newSize);
   };
 
   return (