Add tab/enter nav while editing, address comments

palantir · Oct 19, 2017 · 8fa7b3c · 8fa7b3c
1 parent 5eb55fe
commit 8fa7b3c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 19 deletions.
diff --git a/packages/table/src/cell/cell.tsx b/packages/table/src/cell/cell.tsx
@@ -71,12 +71,12 @@ export interface ICellProps extends IIntentProps, IProps {
     tabIndex?: number;
 
     /**
-     * Callback to be called when cell is focused and key is pressed down.
+     * Callback to be called when the cell is focused and a key is pressed down.
      */
     onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
 
     /**
-     * Callback to be called when cell is focused and key is released.
+     * Callback to be called when the cell is focused and a key is released.
      */
     onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
 
@@ -165,15 +165,7 @@ export class Cell extends React.Component<ICellProps, {}> {
         const content = <div className={textClasses}>{modifiedChildren}</div>;
 
         return (
-            <div
-                className={classes}
-                style={style}
-                title={tooltip}
-                tabIndex={tabIndex}
-                onKeyDown={onKeyDown}
-                onKeyUp={onKeyUp}
-                ref={cellRef}
-            >
+            <div className={classes} title={tooltip} ref={cellRef} {...{ style, tabIndex, onKeyDown, onKeyUp }}>
                 <LoadableContent loading={loading} variableLength={true}>
                     {content}
                 </LoadableContent>

diff --git a/packages/table/src/cell/editableCell.tsx b/packages/table/src/cell/editableCell.tsx
@@ -16,7 +16,7 @@ import { Cell, ICellProps } from "./cell";
 
 export interface IEditableCellProps extends ICellProps {
     /**
-     * Whether or not the given cell is the current active/focused cell.
+     * Whether the given cell is the current active/focused cell.
      */
     isFocused?: boolean;
 
@@ -66,6 +66,11 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
     };
 
     private cellRef: HTMLElement;
+    private refHandlers = {
+        cell: (ref: HTMLElement) => {
+            this.cellRef = ref;
+        },
+    };
 
     public constructor(props: IEditableCellProps, context?: any) {
         super(props, context);
@@ -131,7 +136,7 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
         }
 
         return (
-            <Cell {...spreadableProps} truncated={false} interactive={interactive} cellRef={this.handleCellRef}>
+            <Cell {...spreadableProps} truncated={false} interactive={interactive} cellRef={this.refHandlers.cell}>
                 <Draggable
                     onActivate={this.handleCellActivate}
                     onDoubleClick={this.handleCellDoubleClick}
@@ -149,7 +154,7 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
             <Hotkeys>
                 <Hotkey
                     key="edit-cell"
-                    label="Edit the currely focused cell"
+                    label="Edit the currently focused cell"
                     group="Table"
                     combo="f2"
                     onKeyDown={this.handleEdit}
@@ -165,10 +170,6 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
         }
     }
 
-    private handleCellRef = (cellRef: HTMLElement) => {
-        this.cellRef = cellRef;
-    };
-
     private handleEdit = () => {
         this.setState({ isEditing: true, dirtyValue: this.state.savedValue });
     };

diff --git a/packages/table/src/table.tsx b/packages/table/src/table.tsx
@@ -988,27 +988,31 @@ export class Table extends AbstractComponent<ITableProps, ITableState> {
                     group="Table"
                     combo="tab"
                     onKeyDown={this.handleFocusMoveRightInternal}
+                    allowInInput={true}
                 />,
                 <Hotkey
                     key="move shift-tab"
                     label="Move focus cell shift tab"
                     group="Table"
                     combo="shift+tab"
                     onKeyDown={this.handleFocusMoveLeftInternal}
+                    allowInInput={true}
                 />,
                 <Hotkey
                     key="move enter"
                     label="Move focus cell enter"
                     group="Table"
                     combo="enter"
                     onKeyDown={this.handleFocusMoveDownInternal}
+                    allowInInput={true}
                 />,
                 <Hotkey
                     key="move shift-enter"
                     label="Move focus cell shift enter"
                     group="Table"
                     combo="shift+enter"
                     onKeyDown={this.handleFocusMoveUpInternal}
+                    allowInInput={true}
                 />,
             ];
         } else {

diff --git a/packages/table/src/tableBodyCells.tsx b/packages/table/src/tableBodyCells.tsx
@@ -25,7 +25,7 @@ export interface ITableBodyCellsProps extends IRowIndices, IColumnIndices, IProp
     cellRenderer: ICellRenderer;
 
     /**
-     * The location of the focused cell, for setting the "focused" property on cells
+     * The coordinates of the currently focused cell, for setting the "isFocused" prop on cells.
      */
     focusedCell?: IFocusedCellCoordinates;