Skip to content

Commit

Permalink
Rename wrapGridX
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesplease
jamesplease committed Jun 17, 2021
1 parent 73b3995 commit 233a3ad
Show file tree
Hide file tree
Showing 9 changed files with 44 additions and 42 deletions.
8 changes: 4 additions & 4 deletions README.md
View file
Expand Up @@ -142,8 +142,8 @@ All props are optional. Example usage appears beneath the props table.
| `focusId` | string | `{unique_id}` | A unique identifier for this node. Specify this yourself for debugging purposes, or when you will need to manually set focus to the node. |
| `orientation` | string | 'horizontal' | Whether the children of this node are arranged horizontally or vertically. Pass `"vertical"` for vertical lists. |
| `wrapping` | boolean | `false` | Set to `true` for the navigation to wrap when the user reaches the start or end of the children list. For grids this sets wrapping in both directions. |
| `wrapGridColumns` | boolean | `false` | Set to `true` for horizontal navigation in grids to wrap. |
| `wrapGridRows` | boolean | `false` | Set to `true` for vertical navigation in grids to wrap. |
| `wrapGridHorizontally` | boolean | `false` | Set to `true` for horizontal navigation in grids to wrap. |
| `wrapGridVertically` | boolean | `false` | Set to `true` for vertical navigation in grids to wrap. |
| `disabled` | boolean | `false` | This node will not receive focus when `true`. |
| `isGrid` | boolean | `false` | Pass `true` to make this a grid. |
| `isTrap` | boolean | `false` | Pass `true` to make this a focus trap. |
Expand Down Expand Up @@ -336,8 +336,8 @@ A focus node. Each `<FocusNode/>` React component creates one of these.
| `disabled` | boolean | `true` when this node is disabled. |
| `isExiting` | boolean | Set to `true` to indicate that the node will be animating out. Useful for certain exit animations. |
| `wrapping` | boolean | `true` when the navigation at the end of the node will wrap around to the other side. |
| `wrapGridRows` | boolean | `true` when grid rows will wrap. |
| `wrapGridColumns` | boolean | `true` when grid columns will wrap. |
| `wrapGridVertically` | boolean | `true` when grid rows will wrap. |
| `wrapGridHorizontally` | boolean | `true` when grid columns will wrap. |
| `isRoot` | boolean | `true` this is the root node. |
| `trap` | boolean | `true` when this node is a focus trap. |
| `restoreTrapFocusHierarchy` | boolean | Set to `true` and a focus trap will restore its previous hierarchy upon becoming re-focused. |
Expand Down
18 changes: 10 additions & 8 deletions src/focus-node.tsx
View file
Expand Up @@ -51,8 +51,8 @@ export function FocusNode(
className = '',
children,
wrapping = false,
wrapGridColumns,
wrapGridRows,
wrapGridHorizontally,
wrapGridVertically,
orientation,
isGrid = false,
isTrap = false,
Expand Down Expand Up @@ -221,10 +221,12 @@ export function FocusNode(

const contextValue = useContext(FocusContext.Context);
const [staticDefinitions] = useState(() => {
const wrapGridRowsValue =
typeof wrapGridRows === 'boolean' ? wrapGridRows : wrapping;
const wrapGridColumnsValue =
typeof wrapGridColumns === 'boolean' ? wrapGridColumns : wrapping;
const wrapGridVerticallyValue =
typeof wrapGridVertically === 'boolean' ? wrapGridVertically : wrapping;
const wrapGridHorizontallyValue =
typeof wrapGridHorizontally === 'boolean'
? wrapGridHorizontally
: wrapping;

function createCallbackWrapper(fnName: string) {
return function callbackWrapper(...args: any[]) {
Expand All @@ -246,8 +248,8 @@ export function FocusNode(
orientation: orientation || defaultOrientation,
wrapping: Boolean(wrapping),
trap: Boolean(isTrap),
wrapGridColumns: wrapGridColumnsValue,
wrapGridRows: wrapGridRowsValue,
wrapGridHorizontally: wrapGridHorizontallyValue,
wrapGridVertically: wrapGridVerticallyValue,
restoreTrapFocusHierarchy:
restoreTrapFocusHierarchy !== undefined
? restoreTrapFocusHierarchy
Expand Down
4 changes: 2 additions & 2 deletions src/focus-store.ts
View file
Expand Up @@ -82,8 +82,8 @@ export default function createFocusStore({
prevFocusedChildIndex: null,
_gridColumnIndex: null,
_gridRowIndex: null,
wrapGridRows: false,
wrapGridColumns: false,
wrapGridVertically: false,
wrapGridHorizontally: false,
_focusTrapPreviousHierarchy: [],
},
},
Expand Down
4 changes: 2 additions & 2 deletions src/handle-arrow/determine-navigation-style/test-for-grid.ts
View file
Expand Up @@ -59,10 +59,10 @@ export default function testForGrid({
!isVertical && isForward && isAtLastColumn;

const wouldHandleVertical =
gridNode.wrapGridRows ||
gridNode.wrapGridVertically ||
(!movingBackwardVerticallyOnFirstRow && !movingForwardVerticallyOnLastRow);
const wouldHandleHorizontal =
gridNode.wrapGridColumns ||
gridNode.wrapGridHorizontally ||
(!movingBackwardHorizontallyOnFirstColumn &&
!movingForwardHorizontallyOnLastColumn);

Expand Down
6 changes: 3 additions & 3 deletions src/tests/grids.test.js
View file
Expand Up @@ -345,7 +345,7 @@ describe('Grids', () => {
focusId="gridRoot"
data-testid="gridRoot"
isGrid
wrapGridColumns>
wrapGridHorizontally>
<FocusNode focusId="gridRow1" data-testid="gridRow1">
<FocusNode focusId="gridItem1-1" data-testid="gridItem1-1" />
<FocusNode focusId="gridItem1-2" data-testid="gridItem1-2" />
Expand Down Expand Up @@ -394,7 +394,7 @@ describe('Grids', () => {
]);
expect(focusState.activeNodeId).toEqual(null);

// This tests that wrapping doesn't work vertically when only `wrapGridColumns`
// This tests that wrapping doesn't work vertically when only `wrapGridHorizontally`
// is specified
fireEvent.keyDown(window, {
code: 'ArrowUp',
Expand Down Expand Up @@ -424,7 +424,7 @@ describe('Grids', () => {
focusId="gridRoot"
data-testid="gridRoot"
isGrid
wrapGridRows>
wrapGridVertically>
<FocusNode focusId="gridRow1" data-testid="gridRow1">
<FocusNode focusId="gridItem1-1" data-testid="gridItem1-1" />
<FocusNode focusId="gridItem1-2" data-testid="gridItem1-2" />
Expand Down
16 changes: 8 additions & 8 deletions src/types.ts
View file
Expand Up @@ -119,8 +119,8 @@ export interface RootFocusNode extends BaseNode {
nodeNavigationItem: NodeNavigationItem;
_gridColumnIndex: null | number;
_gridRowIndex: null | number;
wrapGridRows: boolean;
wrapGridColumns: boolean;
wrapGridVertically: boolean;
wrapGridHorizontally: boolean;

_focusTrapPreviousHierarchy: NodeHierarchy;
}
Expand Down Expand Up @@ -155,8 +155,8 @@ export interface FocusNode extends BaseNode {

restoreTrapFocusHierarchy: boolean;

wrapGridRows: boolean;
wrapGridColumns: boolean;
wrapGridVertically: boolean;
wrapGridHorizontally: boolean;
_gridColumnIndex: null | number;
_gridRowIndex: null | number;

Expand Down Expand Up @@ -190,8 +190,8 @@ export interface NodeDefinition extends FocusNodeEvents {
navigationStyle?: NavigationStyle;
initiallyDisabled?: boolean;

wrapGridRows?: boolean;
wrapGridColumns?: boolean;
wrapGridVertically?: boolean;
wrapGridHorizontally?: boolean;

isExiting?: boolean;

Expand Down Expand Up @@ -241,8 +241,8 @@ export interface FocusNodeProps extends FocusNodeEvents {
className?: string;
children?: React.ReactNode;
wrapping?: boolean;
wrapGridRows?: boolean;
wrapGridColumns?: boolean;
wrapGridVertically?: boolean;
wrapGridHorizontally?: boolean;
orientation?: Orientation;
isGrid?: boolean;
isTrap?: boolean;
Expand Down
4 changes: 2 additions & 2 deletions src/utils/create-node.ts
View file
Expand Up @@ -69,7 +69,7 @@ export default function createNodeDefinitionHierarchy({
const rowIndex = getIndex(
gridNode.children.length,
nodeDefinition.defaultFocusRow ?? 0,
gridNode.wrapGridRows
gridNode.wrapGridVertically
);

const newRowNodeId = gridNode.children[rowIndex];
Expand All @@ -81,7 +81,7 @@ export default function createNodeDefinitionHierarchy({
const columnIndex = getIndex(
rowNodeChildrenLength,
nodeDefinition.defaultFocusColumn ?? 0,
gridNode.wrapGridColumns
gridNode.wrapGridHorizontally
);

const itemIndex = Math.min(
Expand Down
22 changes: 11 additions & 11 deletions src/utils/get-grid-focus-data.ts
View file
Expand Up @@ -2,26 +2,26 @@ import getIndex from './get-index';
import { Id, Orientation, Direction, Node, FocusState } from '../types';

interface GetGridFocusDataReturn {
targetFocusId: Id,
currentRowIndex: number,
currentColumnIndex: number,
newRowIndex: number,
newColumnIndex: number,
targetFocusId: Id;
currentRowIndex: number;
currentColumnIndex: number;
newRowIndex: number;
newColumnIndex: number;
}

export default function getGridFocusData({
focusState,
orientation,
direction,
gridNode,
rowNode
rowNode,
}: {
focusState: FocusState;
orientation: Orientation;
direction: Direction;
gridNode: Node;
rowNode: Node;
}):GetGridFocusDataReturn|null {
}): GetGridFocusDataReturn | null {
const isVertical = orientation === 'vertical';
const isForward = direction === 'forward';

Expand All @@ -43,14 +43,14 @@ export default function getGridFocusData({
? getIndex(
gridNode.children.length,
actualRowIndex + distance,
gridNode.wrapGridRows
gridNode.wrapGridVertically
)
: actualRowIndex;
const newColumnIndex = !isVertical
? getIndex(
rowNode.children.length,
actualColumnIndex + distance,
gridNode.wrapGridColumns
gridNode.wrapGridHorizontally
)
: currentColumnIndex;

Expand All @@ -74,5 +74,5 @@ export default function getGridFocusData({
currentColumnIndex,
newRowIndex,
newColumnIndex,
}
}
};
}
4 changes: 2 additions & 2 deletions src/utils/node-from-definition.ts
View file
Expand Up @@ -78,8 +78,8 @@ export default function nodeFromDefinition({
prevFocusedChildIndex: null,
_gridColumnIndex: isGridContainer ? defaultFocusColumnValue : null,
_gridRowIndex: isGridContainer ? defaultFocusRowValue : null,
wrapGridColumns: Boolean(nodeDefinition.wrapGridColumns),
wrapGridRows: Boolean(nodeDefinition.wrapGridRows),
wrapGridHorizontally: Boolean(nodeDefinition.wrapGridHorizontally),
wrapGridVertically: Boolean(nodeDefinition.wrapGridVertically),
_focusTrapPreviousHierarchy: [],

onKey,
Expand Down

0 comments on commit 233a3ad

Please sign in to comment.