Adds more complex focus control for DataGrid

elastic · Aug 13, 2019 · 20b56fc · 20b56fc
1 parent 17ec36a
commit 20b56fc
Show file tree

Hide file tree

Showing 11 changed files with 198 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "react-is": "~16.3.0",
     "react-virtualized": "^9.18.5",
     "resize-observer-polyfill": "^1.5.0",
-    "tabbable": "^1.1.0",
+    "tabbable": "^4.0.0",
     "uuid": "^3.1.0"
   },
   "devDependencies": {
@@ -85,6 +85,7 @@
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/resize-observer-browser": "^0.1.1",
+    "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -17,6 +17,8 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   top: 0;
   bottom: 0;
 
+  display: none;
+
   .guideSideNav__identity {
     border-bottom: $euiBorderThin;
     padding: $euiSize;
@@ -50,7 +52,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   background-color: $euiColorEmptyShade;
   border-left: $euiBorderThin;
   max-width: 1000px;
-  margin-left: 240px;
+  // margin-left: 240px;
 }
 
 .guideDemo__highlightLayout {

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -7,7 +7,10 @@ import {
   EuiFormRow,
   EuiPopover,
   EuiButton,
+  EuiButtonIcon,
+  EuiLink,
 } from '../../../../src/components/';
+import { iconTypes } from '../../../../src-docs/src/views/icon/icons';
 
 const columns = [
   {
@@ -22,6 +25,12 @@ const columns = [
   {
     id: 'contributions',
   },
+  {
+    id: 'actions',
+  },
+  {
+    id: 'a bug',
+  },
 ];
 
 const data = [
@@ -304,6 +313,13 @@ export default class DataGrid extends Component {
       pagination: { ...pagination, pageSize },
     }));
 
+  dummyIcon = () => (
+    <EuiButtonIcon
+      aria-label="dummy icon"
+      iconType={iconTypes[Math.floor(Math.random() * iconTypes.length)]}
+    />
+  );
+
   render() {
     const { pagination } = this.state;
 
@@ -396,7 +412,36 @@ export default class DataGrid extends Component {
             rowHover: this.state.rowHoverSelected,
             header: this.state.headerSelected,
           }}
-          renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+          renderCellValue={({ rowIndex, columnId }) => {
+            const value = data[rowIndex][columnId];
+
+            if (columnId === 'actions') {
+              return (
+                <>
+                  {this.dummyIcon()}
+                  {this.dummyIcon()}
+                </>
+              );
+            }
+
+            if (columnId === 'url') {
+              return <EuiLink href={value}>{value}</EuiLink>;
+            }
+
+            if (columnId === 'avatar_url') {
+              return (
+                <>
+                  Avatar: <EuiLink href={value}>{value}</EuiLink>
+                </>
+              );
+            }
+
+            if (columnId === 'a bug') {
+              return <p>check it: {this.dummyIcon()}</p>;
+            }
+
+            return value;
+          }}
           pagination={{
             ...pagination,
             pageSizeOptions: [5, 10, 25],

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -20,7 +20,7 @@ import {
   EuiCopy,
 } from '../../../../src/components';
 
-const iconTypes = [
+export const iconTypes = [
   'alert',
   'apmTrace',
   'apps',

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
@@ -23,6 +23,7 @@ import { EuiDataGridBody } from './data_grid_body';
 import { useColumnSelector } from './column_selector';
 // @ts-ignore-next-line
 import { EuiTablePagination } from '../table/table_pagination';
+import { getTabbables, CELL_CONTENTS_ATTR } from './utils';
 
 // Types for styling options, passed down through the `gridStyle` prop
 type EuiDataGridStyleFontSizes = 's' | 'm' | 'l';
@@ -138,13 +139,11 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
 
   useEffect(() => {
     if (gridRef.current != null) {
-      const gridWidth = Math.max(
-        gridRef.current!.clientWidth / props.columns.length,
-        100
-      );
+      const gridWidth = gridRef.current.clientWidth;
+      const columnWidth = Math.max(gridWidth / props.columns.length, 100);
       const columnWidths = props.columns.reduce(
         (columnWidths: EuiDataGridColumnWidths, column) => {
-          columnWidths[column.id] = gridWidth;
+          columnWidths[column.id] = columnWidth;
           return columnWidths;
         },
         {}
@@ -154,44 +153,71 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   }, []);
 
   const [focusedCell, setFocusedCell] = useState<[number, number]>(ORIGIN);
-  const onCellFocus = useCallback(
-    (x: number, y: number) => {
-      setFocusedCell([x, y]);
-    },
-    [setFocusedCell]
-  );
+  const [isGridNavigationEnabled, setIsGridNavigationEnabled] = useState<
+    boolean
+  >(true);
+
+  const isInteractiveCell = (element: HTMLElement) => {
+    if (element.getAttribute('role') !== 'gridcell') {
+      return false;
+    }
+
+    const cellContents = element.querySelector(`[${CELL_CONTENTS_ATTR}]`)!;
+    const tabbables = getTabbables(cellContents);
+    const nodeCount = cellContents.childNodes.length;
+
+    // TODO fix the bug column (should check if when removing all tabbables from cell if anything is left)
+    return tabbables.length > 1 || (tabbables.length === 1 && nodeCount > 1);
+  };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     const colCount = props.columns.length - 1;
     const [x, y] = focusedCell;
     const rowCount = computeVisibleRows(props);
+    const key = e.keyCode;
+
+    if (
+      // @ts-ignore // TODO why do I need this ignore?
+      isInteractiveCell(e.target) &&
+      (key === keyCodes.ENTER || key === keyCodes.F2)
+    ) {
+      e.preventDefault();
+      setIsGridNavigationEnabled(false);
+    }
+
+    if (key === keyCodes.ESCAPE || key === keyCodes.F2) {
+      e.preventDefault();
+      setIsGridNavigationEnabled(true);
+    }
 
-    switch (e.keyCode) {
-      case keyCodes.DOWN:
-        e.preventDefault();
-        if (y < rowCount) {
-          setFocusedCell([x, y + 1]);
-        }
-        break;
-      case keyCodes.LEFT:
-        e.preventDefault();
-        if (x > 0) {
-          setFocusedCell([x - 1, y]);
-        }
-        break;
-      case keyCodes.UP:
-        e.preventDefault();
-        // TODO sort out when a user can arrow up into the column headers
-        if (y > 0) {
-          setFocusedCell([x, y - 1]);
-        }
-        break;
-      case keyCodes.RIGHT:
-        e.preventDefault();
-        if (x < colCount) {
-          setFocusedCell([x + 1, y]);
-        }
-        break;
+    if (isGridNavigationEnabled) {
+      switch (e.keyCode) {
+        case keyCodes.DOWN:
+          e.preventDefault();
+          if (y < rowCount) {
+            setFocusedCell([x, y + 1]);
+          }
+          break;
+        case keyCodes.LEFT:
+          e.preventDefault();
+          if (x > 0) {
+            setFocusedCell([x - 1, y]);
+          }
+          break;
+        case keyCodes.UP:
+          e.preventDefault();
+          // TODO sort out when a user can arrow up into the column headers
+          if (y > 0) {
+            setFocusedCell([x, y - 1]);
+          }
+          break;
+        case keyCodes.RIGHT:
+          e.preventDefault();
+          if (x < colCount) {
+            setFocusedCell([x + 1, y]);
+          }
+          break;
+      }
     }
   };
 
@@ -238,7 +264,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
         role="grid"
         onKeyDown={handleKeyDown}
         ref={gridRef}
-        // {...label}
         {...rest}
         className={classes}>
         <div className="euiDataGrid__content">
@@ -251,10 +276,11 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
             columnWidths={columnWidths}
             columns={visibleColumns}
             focusedCell={focusedCell}
-            onCellFocus={onCellFocus}
+            onCellFocus={useCallback(setFocusedCell, [setFocusedCell])}
             pagination={pagination}
             renderCellValue={renderCellValue}
             rowCount={rowCount}
+            isGridNavigationEnabled={isGridNavigationEnabled}
           />
         </div>
         <EuiSpacer size="s" />

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
@@ -18,6 +18,7 @@ interface EuiDataGridBodyProps {
   rowCount: number;
   renderCellValue: EuiDataGridCellProps['renderCellValue'];
   pagination?: EuiDataGridPaginationProps;
+  isGridNavigationEnabled: EuiDataGridCellProps['isGridNavigationEnabled'];
 }
 
 export const EuiDataGridBody: FunctionComponent<
@@ -31,6 +32,7 @@ export const EuiDataGridBody: FunctionComponent<
     rowCount,
     renderCellValue,
     pagination,
+    isGridNavigationEnabled,
   } = props;
 
   const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
@@ -51,6 +53,7 @@ export const EuiDataGridBody: FunctionComponent<
           onCellFocus={onCellFocus}
           renderCellValue={renderCellValue}
           rowIndex={i}
+          isGridNavigationEnabled={isGridNavigationEnabled}
         />
       );
     }
@@ -64,6 +67,7 @@ export const EuiDataGridBody: FunctionComponent<
     onCellFocus,
     renderCellValue,
     startRow,
+    isGridNavigationEnabled,
   ]);
 
   return <Fragment>{rows}</Fragment>;