@react-stately/grid
Advanced tools
Comparing version
@@ -19,7 +19,33 @@ var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends")); | ||
let { | ||
collection | ||
collection, | ||
focusMode | ||
} = props; | ||
let selectionState = useMultipleSelectionState(props); | ||
let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]); // Reset focused key if that item is deleted from the collection. | ||
let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]); | ||
let setFocusedKey = selectionState.setFocusedKey; | ||
selectionState.setFocusedKey = (key, child) => { | ||
// If focusMode is cell and an item is focused, focus a child cell instead. | ||
if (focusMode === 'cell' && key != null) { | ||
let item = collection.getItem(key); | ||
if ((item == null ? void 0 : item.type) === 'item') { | ||
let children = [...item.childNodes]; | ||
if (child === 'last') { | ||
var _children; | ||
key = (_children = children[children.length - 1]) == null ? void 0 : _children.key; | ||
} else { | ||
var _children$; | ||
key = (_children$ = children[0]) == null ? void 0 : _children$.key; | ||
} | ||
} | ||
} | ||
setFocusedKey(key, child); | ||
}; // Reset focused key if that item is deleted from the collection. | ||
useEffect(() => { | ||
@@ -26,0 +52,0 @@ if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) { |
@@ -6,7 +6,33 @@ import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends"; | ||
let { | ||
collection | ||
collection, | ||
focusMode | ||
} = props; | ||
let selectionState = useMultipleSelectionState(props); | ||
let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]); // Reset focused key if that item is deleted from the collection. | ||
let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]); | ||
let setFocusedKey = selectionState.setFocusedKey; | ||
selectionState.setFocusedKey = (key, child) => { | ||
// If focusMode is cell and an item is focused, focus a child cell instead. | ||
if (focusMode === 'cell' && key != null) { | ||
let item = collection.getItem(key); | ||
if ((item == null ? void 0 : item.type) === 'item') { | ||
let children = [...item.childNodes]; | ||
if (child === 'last') { | ||
var _children; | ||
key = (_children = children[children.length - 1]) == null ? void 0 : _children.key; | ||
} else { | ||
var _children$; | ||
key = (_children$ = children[0]) == null ? void 0 : _children$.key; | ||
} | ||
} | ||
} | ||
setFocusedKey(key, child); | ||
}; // Reset focused key if that item is deleted from the collection. | ||
useEffect(() => { | ||
@@ -13,0 +39,0 @@ if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) { |
@@ -13,2 +13,3 @@ import { GridCollection as _GridCollection1, GridNode, GridRow } from "@react-types/grid"; | ||
disabledKeys?: Iterable<Key>; | ||
focusMode?: 'row' | 'cell'; | ||
} | ||
@@ -15,0 +16,0 @@ export function useGridState<T extends object, C extends _GridCollection1<T>>(props: GridStateOptions<T, C>): GridState<T, C>; |
{ | ||
"name": "@react-stately/grid", | ||
"version": "3.0.0-alpha.1", | ||
"version": "3.0.0-alpha.2", | ||
"description": "Spectrum UI components in React", | ||
@@ -21,5 +21,5 @@ "license": "Apache-2.0", | ||
"@babel/runtime": "^7.6.2", | ||
"@react-stately/selection": "^3.4.0", | ||
"@react-stately/selection": "^3.5.0", | ||
"@react-types/grid": "3.0.0-alpha.0", | ||
"@react-types/shared": "^3.5.0" | ||
"@react-types/shared": "^3.6.0" | ||
}, | ||
@@ -32,3 +32,3 @@ "peerDependencies": { | ||
}, | ||
"gitHead": "bead0d5e0d5f4411430741d63d31e10dd5628dae" | ||
"gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296" | ||
} |
@@ -14,7 +14,8 @@ import {GridCollection} from '@react-types/grid'; | ||
collection: C, | ||
disabledKeys?: Iterable<Key> | ||
disabledKeys?: Iterable<Key>, | ||
focusMode?: 'row' | 'cell' | ||
} | ||
export function useGridState<T extends object, C extends GridCollection<T>>(props: GridStateOptions<T, C>): GridState<T, C> { | ||
let {collection} = props; | ||
let {collection, focusMode} = props; | ||
let selectionState = useMultipleSelectionState(props); | ||
@@ -25,2 +26,20 @@ let disabledKeys = useMemo(() => | ||
let setFocusedKey = selectionState.setFocusedKey; | ||
selectionState.setFocusedKey = (key, child) => { | ||
// If focusMode is cell and an item is focused, focus a child cell instead. | ||
if (focusMode === 'cell' && key != null) { | ||
let item = collection.getItem(key); | ||
if (item?.type === 'item') { | ||
let children = [...item.childNodes]; | ||
if (child === 'last') { | ||
key = children[children.length - 1]?.key; | ||
} else { | ||
key = children[0]?.key; | ||
} | ||
} | ||
} | ||
setFocusedKey(key, child); | ||
}; | ||
// Reset focused key if that item is deleted from the collection. | ||
@@ -27,0 +46,0 @@ useEffect(() => { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
56937
9.16%563
11.05%