@elliemae/ds-shared 2.2.0 → 2.3.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Animations/BaseAnimation.js +55 -35
- package/cjs/Animations/BaseAnimation.js.map +7 -0
- package/cjs/Animations/Grow.js +54 -41
- package/cjs/Animations/Grow.js.map +7 -0
- package/cjs/Animations/GrowRight.js +63 -41
- package/cjs/Animations/GrowRight.js.map +7 -0
- package/cjs/Animations/GrowVertical.js +47 -7
- package/cjs/Animations/GrowVertical.js.map +7 -0
- package/cjs/CheckableGroup.js +67 -65
- package/cjs/CheckableGroup.js.map +7 -0
- package/cjs/DeferRenderAfterComputation.js +48 -24
- package/cjs/DeferRenderAfterComputation.js.map +7 -0
- package/cjs/FocusGroup/FocusGrid.js +108 -143
- package/cjs/FocusGroup/FocusGrid.js.map +7 -0
- package/cjs/FocusGroup/FocusGroup.js +88 -147
- package/cjs/FocusGroup/FocusGroup.js.map +7 -0
- package/cjs/FocusGroup/FocusGroupContext.js +38 -11
- package/cjs/FocusGroup/FocusGroupContext.js.map +7 -0
- package/cjs/FocusGroup/FocusGroupManager.js +56 -47
- package/cjs/FocusGroup/FocusGroupManager.js.map +7 -0
- package/cjs/FocusGroup/focusGroupManagerHoc.js +52 -42
- package/cjs/FocusGroup/focusGroupManagerHoc.js.map +7 -0
- package/cjs/FocusGroup/index.js +47 -21
- package/cjs/FocusGroup/index.js.map +7 -0
- package/cjs/FocusGroup/useFocusGroupItem.js +59 -51
- package/cjs/FocusGroup/useFocusGroupItem.js.map +7 -0
- package/cjs/FocusGroup/utils/getNextCellPosition.js +47 -27
- package/cjs/FocusGroup/utils/getNextCellPosition.js.map +7 -0
- package/cjs/GroupContext/Group.js +64 -73
- package/cjs/GroupContext/Group.js.map +7 -0
- package/cjs/GroupContext/GroupContext.js +36 -13
- package/cjs/GroupContext/GroupContext.js.map +7 -0
- package/cjs/GroupContext/GroupItem.js +39 -21
- package/cjs/GroupContext/GroupItem.js.map +7 -0
- package/cjs/GroupContext/index.js +39 -13
- package/cjs/GroupContext/index.js.map +7 -0
- package/cjs/ScrollSync/ScrollSync.js +60 -75
- package/cjs/ScrollSync/ScrollSync.js.map +7 -0
- package/cjs/ScrollSync/ScrollSyncPane.js +52 -60
- package/cjs/ScrollSync/ScrollSyncPane.js.map +7 -0
- package/cjs/ScrollSync/ScrollSyncProvider.js +103 -50
- package/cjs/ScrollSync/ScrollSyncProvider.js.map +7 -0
- package/cjs/ScrollSync/index.js +37 -11
- package/cjs/ScrollSync/index.js.map +7 -0
- package/cjs/ScrollSync/useScrollSync.js +38 -7
- package/cjs/ScrollSync/useScrollSync.js.map +7 -0
- package/cjs/constants.js +65 -46
- package/cjs/constants.js.map +7 -0
- package/cjs/createDataInstance/createInstancePlugin.js +41 -29
- package/cjs/createDataInstance/createInstancePlugin.js.map +7 -0
- package/cjs/createDataInstance/createInstanceRef.js +66 -71
- package/cjs/createDataInstance/createInstanceRef.js.map +7 -0
- package/cjs/createDataInstance/utils.js +76 -100
- package/cjs/createDataInstance/utils.js.map +7 -0
- package/cjs/defer-render-hoc/index.js +48 -41
- package/cjs/defer-render-hoc/index.js.map +7 -0
- package/cjs/dimsum.config.js +38 -6
- package/cjs/dimsum.config.js.map +7 -0
- package/cjs/index.js +40 -17
- package/cjs/index.js.map +7 -0
- package/cjs/prop-types.js +106 -49
- package/cjs/prop-types.js.map +7 -0
- package/cjs/react-spring/index.js +28 -14
- package/cjs/react-spring/index.js.map +7 -0
- package/cjs/react-spring/renderprops.js +28 -14
- package/cjs/react-spring/renderprops.js.map +7 -0
- package/cjs/toolbar/ToolbarProvider.js +82 -94
- package/cjs/toolbar/ToolbarProvider.js.map +7 -0
- package/cjs/useDataGrid/VolatileRowsListener.js +38 -13
- package/cjs/useDataGrid/VolatileRowsListener.js.map +7 -0
- package/cjs/useDataGrid/index.js +36 -7
- package/cjs/useDataGrid/index.js.map +7 -0
- package/cjs/useDataGrid/initColumnDefinition.js +105 -110
- package/cjs/useDataGrid/initColumnDefinition.js.map +7 -0
- package/cjs/useDataGrid/useDataGrid.js +122 -148
- package/cjs/useDataGrid/useDataGrid.js.map +7 -0
- package/cjs/useDataList/index.js +36 -7
- package/cjs/useDataList/index.js.map +7 -0
- package/cjs/useDataList/recordIterator.js +42 -18
- package/cjs/useDataList/recordIterator.js.map +7 -0
- package/cjs/useDataList/useDataList.js +74 -83
- package/cjs/useDataList/useDataList.js.map +7 -0
- package/cjs/utils.js +71 -80
- package/cjs/utils.js.map +7 -0
- package/cjs/virtualization/AutoHeightList.js +62 -54
- package/cjs/virtualization/AutoHeightList.js.map +7 -0
- package/cjs/virtualization/FluidHeightList.js +42 -48
- package/cjs/virtualization/FluidHeightList.js.map +7 -0
- package/cjs/virtualization/index.js +48 -20
- package/cjs/virtualization/index.js.map +7 -0
- package/esm/Animations/BaseAnimation.js +26 -29
- package/esm/Animations/BaseAnimation.js.map +7 -0
- package/esm/Animations/Grow.js +25 -35
- package/esm/Animations/Grow.js.map +7 -0
- package/esm/Animations/GrowRight.js +34 -35
- package/esm/Animations/GrowRight.js.map +7 -0
- package/esm/Animations/GrowVertical.js +29 -4
- package/esm/Animations/GrowVertical.js.map +7 -0
- package/esm/CheckableGroup.js +35 -52
- package/esm/CheckableGroup.js.map +7 -0
- package/esm/DeferRenderAfterComputation.js +16 -15
- package/esm/DeferRenderAfterComputation.js.map +7 -0
- package/esm/FocusGroup/FocusGrid.js +64 -117
- package/esm/FocusGroup/FocusGrid.js.map +7 -0
- package/esm/FocusGroup/FocusGroup.js +56 -137
- package/esm/FocusGroup/FocusGroup.js.map +7 -0
- package/esm/FocusGroup/FocusGroupContext.js +9 -5
- package/esm/FocusGroup/FocusGroupContext.js.map +7 -0
- package/esm/FocusGroup/FocusGroupManager.js +24 -38
- package/esm/FocusGroup/FocusGroupManager.js.map +7 -0
- package/esm/FocusGroup/focusGroupManagerHoc.js +24 -36
- package/esm/FocusGroup/focusGroupManagerHoc.js.map +7 -0
- package/esm/FocusGroup/index.js +18 -6
- package/esm/FocusGroup/index.js.map +7 -0
- package/esm/FocusGroup/useFocusGroupItem.js +28 -40
- package/esm/FocusGroup/useFocusGroupItem.js.map +7 -0
- package/esm/FocusGroup/utils/getNextCellPosition.js +18 -25
- package/esm/FocusGroup/utils/getNextCellPosition.js.map +7 -0
- package/esm/GroupContext/Group.js +34 -66
- package/esm/GroupContext/Group.js.map +7 -0
- package/esm/GroupContext/GroupContext.js +7 -5
- package/esm/GroupContext/GroupContext.js.map +7 -0
- package/esm/GroupContext/GroupItem.js +10 -15
- package/esm/GroupContext/GroupItem.js.map +7 -0
- package/esm/GroupContext/index.js +10 -3
- package/esm/GroupContext/index.js.map +7 -0
- package/esm/ScrollSync/ScrollSync.js +30 -64
- package/esm/ScrollSync/ScrollSync.js.map +7 -0
- package/esm/ScrollSync/ScrollSyncPane.js +22 -52
- package/esm/ScrollSync/ScrollSyncPane.js.map +7 -0
- package/esm/ScrollSync/ScrollSyncProvider.js +74 -42
- package/esm/ScrollSync/ScrollSyncProvider.js.map +7 -0
- package/esm/ScrollSync/index.js +8 -2
- package/esm/ScrollSync/index.js.map +7 -0
- package/esm/ScrollSync/useScrollSync.js +9 -5
- package/esm/ScrollSync/useScrollSync.js.map +7 -0
- package/esm/constants.js +37 -28
- package/esm/constants.js.map +7 -0
- package/esm/createDataInstance/createInstancePlugin.js +12 -23
- package/esm/createDataInstance/createInstancePlugin.js.map +7 -0
- package/esm/createDataInstance/createInstanceRef.js +36 -59
- package/esm/createDataInstance/createInstanceRef.js.map +7 -0
- package/esm/createDataInstance/utils.js +48 -85
- package/esm/createDataInstance/utils.js.map +7 -0
- package/esm/defer-render-hoc/index.js +17 -31
- package/esm/defer-render-hoc/index.js.map +7 -0
- package/esm/dimsum.config.js +9 -4
- package/esm/dimsum.config.js.map +7 -0
- package/esm/index.js +11 -5
- package/esm/index.js.map +7 -0
- package/esm/prop-types.js +75 -31
- package/esm/prop-types.js.map +7 -0
- package/esm/react-spring/index.js +3 -1
- package/esm/react-spring/index.js.map +7 -0
- package/esm/react-spring/renderprops.js +3 -1
- package/esm/react-spring/renderprops.js.map +7 -0
- package/esm/toolbar/ToolbarProvider.js +45 -74
- package/esm/toolbar/ToolbarProvider.js.map +7 -0
- package/esm/useDataGrid/VolatileRowsListener.js +9 -11
- package/esm/useDataGrid/VolatileRowsListener.js.map +7 -0
- package/esm/useDataGrid/index.js +7 -1
- package/esm/useDataGrid/index.js.map +7 -0
- package/esm/useDataGrid/initColumnDefinition.js +78 -94
- package/esm/useDataGrid/initColumnDefinition.js.map +7 -0
- package/esm/useDataGrid/useDataGrid.js +82 -99
- package/esm/useDataGrid/useDataGrid.js.map +7 -0
- package/esm/useDataList/index.js +7 -1
- package/esm/useDataList/index.js.map +7 -0
- package/esm/useDataList/recordIterator.js +13 -14
- package/esm/useDataList/recordIterator.js.map +7 -0
- package/esm/useDataList/useDataList.js +44 -67
- package/esm/useDataList/useDataList.js.map +7 -0
- package/esm/utils.js +42 -59
- package/esm/utils.js.map +7 -0
- package/esm/virtualization/AutoHeightList.js +28 -40
- package/esm/virtualization/AutoHeightList.js.map +7 -0
- package/esm/virtualization/FluidHeightList.js +14 -38
- package/esm/virtualization/FluidHeightList.js.map +7 -0
- package/esm/virtualization/index.js +19 -16
- package/esm/virtualization/index.js.map +7 -0
- package/package.json +3 -3
- package/types/Animations/BaseAnimation.d.ts +1 -0
- package/types/Animations/Grow.d.ts +1 -0
- package/types/Animations/GrowRight.d.ts +1 -0
- package/types/CheckableGroup.d.ts +1 -0
- package/types/DeferRenderAfterComputation.d.ts +3 -2
- package/types/FocusGroup/FocusGrid.d.ts +5 -3
- package/types/FocusGroup/FocusGroup.d.ts +3 -1
- package/types/FocusGroup/FocusGroupContext.d.ts +3 -2
- package/types/FocusGroup/FocusGroupManager.d.ts +3 -1
- package/types/FocusGroup/focusGroupManagerHoc.d.ts +3 -1
- package/types/FocusGroup/index.d.ts +6 -6
- package/types/FocusGroup/useFocusGroupItem.d.ts +3 -1
- package/types/FocusGroup/utils/getNextCellPosition.d.ts +3 -1
- package/types/GroupContext/Group.d.ts +1 -0
- package/types/GroupContext/GroupItem.d.ts +1 -0
- package/types/GroupContext/index.d.ts +3 -3
- package/types/ScrollSync/ScrollSync.d.ts +4 -2
- package/types/ScrollSync/ScrollSyncPane.d.ts +2 -2
- package/types/ScrollSync/index.d.ts +2 -2
- package/types/ScrollSync/useScrollSync.d.ts +6 -5
- package/types/createDataInstance/createInstancePlugin.d.ts +2 -1
- package/types/createDataInstance/createInstanceRef.d.ts +3 -1
- package/types/dimsum.config.d.ts +3 -2
- package/types/index.d.ts +2 -2
- package/types/toolbar/ToolbarProvider.d.ts +3 -8
- package/types/useDataGrid/VolatileRowsListener.d.ts +3 -1
- package/types/useDataGrid/index.d.ts +1 -1
- package/types/useDataGrid/initColumnDefinition.d.ts +2 -1
- package/types/useDataGrid/useDataGrid.d.ts +3 -2
- package/types/useDataList/index.d.ts +1 -1
- package/types/useDataList/useDataList.d.ts +3 -2
|
@@ -1,47 +1,50 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var FocusGrid_exports = {};
|
|
29
|
+
__export(FocusGrid_exports, {
|
|
30
|
+
FocusGrid: () => FocusGridProvider,
|
|
31
|
+
FocusGridContext: () => FocusGridContext,
|
|
32
|
+
FocusGridProvider: () => FocusGridProvider,
|
|
33
|
+
default: () => FocusGrid_default
|
|
34
|
+
});
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
38
|
+
var import_getNextCellPosition = require("./utils/getNextCellPosition");
|
|
39
|
+
const FocusGridContext = (0, import_react.createContext)();
|
|
40
|
+
const { Provider } = FocusGridContext;
|
|
41
|
+
const preventDefault = (e) => e.preventDefault();
|
|
42
|
+
function registerHotKeysHooks(hotKeys, { focusedRow, focusedCell }) {
|
|
43
|
+
Object.keys(hotKeys).forEach((key) => {
|
|
44
|
+
const { handler, options } = hotKeys[key];
|
|
45
|
+
(0, import_ds_utilities.useHotkeys)({
|
|
43
46
|
keys: key,
|
|
44
|
-
handler: e => {
|
|
47
|
+
handler: (e) => {
|
|
45
48
|
e.preventDefault();
|
|
46
49
|
handler({
|
|
47
50
|
rowIndex: focusedRow.current,
|
|
@@ -51,76 +54,59 @@ function registerHotKeysHooks(hotKeys, _ref) {
|
|
|
51
54
|
options
|
|
52
55
|
});
|
|
53
56
|
});
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const
|
|
67
|
-
const
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
const child = React__default["default"].Children.only(children);
|
|
71
|
-
const decoratedChild = /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
72
|
-
innerRef: dsUtilities.mergeRefs(child.props.innerRef, containerRef)
|
|
57
|
+
}
|
|
58
|
+
const FocusGridProvider = ({
|
|
59
|
+
shouldWrapRows = false,
|
|
60
|
+
shouldWrapCells = false,
|
|
61
|
+
shouldRefocus = true,
|
|
62
|
+
children,
|
|
63
|
+
keyBindings,
|
|
64
|
+
hotKeys
|
|
65
|
+
}) => {
|
|
66
|
+
const focusedRow = (0, import_react.useRef)();
|
|
67
|
+
const focusedCell = (0, import_react.useRef)();
|
|
68
|
+
const grid = (0, import_react.useRef)([]);
|
|
69
|
+
const containerRef = (0, import_react.useRef)(document);
|
|
70
|
+
const child = import_react.default.Children.only(children);
|
|
71
|
+
const decoratedChild = import_react.default.cloneElement(child, {
|
|
72
|
+
innerRef: (0, import_ds_utilities.mergeRefs)(child.props.innerRef, containerRef)
|
|
73
73
|
});
|
|
74
|
-
|
|
75
|
-
const getNode = _ref3 => {
|
|
76
|
-
let {
|
|
77
|
-
rowIndex,
|
|
78
|
-
cellIndex
|
|
79
|
-
} = _ref3;
|
|
80
|
-
return dsUtilities.get(grid.current, [rowIndex, cellIndex]);
|
|
81
|
-
};
|
|
82
|
-
|
|
74
|
+
const getNode = ({ rowIndex, cellIndex }) => (0, import_ds_utilities.get)(grid.current, [rowIndex, cellIndex]);
|
|
83
75
|
const register = (node, rowIndex, columnIndex) => {
|
|
84
|
-
if (!node)
|
|
85
|
-
|
|
76
|
+
if (!node)
|
|
77
|
+
return;
|
|
86
78
|
if (!Array.isArray(grid.current[rowIndex])) {
|
|
87
79
|
grid.current[rowIndex] = [];
|
|
88
80
|
}
|
|
89
|
-
|
|
90
81
|
if (rowIndex === 0 && columnIndex === 0) {
|
|
91
|
-
node.setAttribute(
|
|
82
|
+
node.setAttribute("tabindex", 0);
|
|
92
83
|
} else {
|
|
93
|
-
node.setAttribute(
|
|
84
|
+
node.setAttribute("tabindex", -1);
|
|
94
85
|
}
|
|
95
|
-
|
|
96
86
|
node.onfocus = () => {
|
|
97
87
|
const prevNode = getNode({
|
|
98
88
|
rowIndex: focusedRow.current,
|
|
99
89
|
cellIndex: focusedCell.current
|
|
100
90
|
});
|
|
101
|
-
if (prevNode)
|
|
102
|
-
|
|
91
|
+
if (prevNode)
|
|
92
|
+
prevNode.setAttribute("tabindex", -1);
|
|
93
|
+
node.setAttribute("tabindex", 0);
|
|
103
94
|
focusedRow.current = rowIndex;
|
|
104
95
|
focusedCell.current = columnIndex;
|
|
105
96
|
};
|
|
106
|
-
|
|
107
97
|
grid.current[rowIndex][columnIndex] = node;
|
|
108
98
|
};
|
|
109
|
-
|
|
110
|
-
React.useEffect(() => {
|
|
99
|
+
(0, import_react.useEffect)(() => {
|
|
111
100
|
if (shouldRefocus) {
|
|
112
101
|
const rowIndex = focusedRow.current;
|
|
113
102
|
const cellIndex = focusedCell.current;
|
|
114
|
-
const node =
|
|
115
|
-
if (node)
|
|
103
|
+
const node = (0, import_ds_utilities.get)(grid.current, [rowIndex, cellIndex]);
|
|
104
|
+
if (node)
|
|
105
|
+
node.focus();
|
|
116
106
|
}
|
|
117
107
|
});
|
|
118
|
-
|
|
119
108
|
const focusNextCell = (directionY, directionX, position) => {
|
|
120
|
-
const {
|
|
121
|
-
rowIndex,
|
|
122
|
-
cellIndex
|
|
123
|
-
} = position || getNextCellPosition({
|
|
109
|
+
const { rowIndex, cellIndex } = position || (0, import_getNextCellPosition.getNextCellPosition)({
|
|
124
110
|
grid: grid.current,
|
|
125
111
|
currentCell: focusedCell.current,
|
|
126
112
|
currentRow: focusedRow.current,
|
|
@@ -129,87 +115,66 @@ function FocusGridProvider(_ref2) {
|
|
|
129
115
|
shouldWrapCells,
|
|
130
116
|
shouldWrapRows
|
|
131
117
|
});
|
|
132
|
-
const node = getNode({
|
|
133
|
-
rowIndex,
|
|
134
|
-
cellIndex
|
|
135
|
-
}); // can focus
|
|
136
|
-
|
|
118
|
+
const node = getNode({ rowIndex, cellIndex });
|
|
137
119
|
if (node) {
|
|
138
120
|
node.focus();
|
|
139
121
|
focusedRow.current = rowIndex;
|
|
140
122
|
focusedCell.current = cellIndex;
|
|
141
123
|
}
|
|
142
124
|
};
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
ArrowUp: dsUtilities.runAll(preventDefault, () => focusNextCell(-1, 0)),
|
|
151
|
-
ArrowRight: dsUtilities.runAll(preventDefault, () => focusNextCell(0, 1)),
|
|
152
|
-
ArrowDown: dsUtilities.runAll(preventDefault, () => focusNextCell(1, 0)),
|
|
153
|
-
ArrowLeft: dsUtilities.runAll(preventDefault, () => focusNextCell(0, -1)),
|
|
154
|
-
Home: dsUtilities.runAll(preventDefault, e => {
|
|
125
|
+
registerHotKeysHooks(hotKeys, { focusedCell, focusedRow });
|
|
126
|
+
const defaultKeyBindings = {
|
|
127
|
+
ArrowUp: (0, import_ds_utilities.runAll)(preventDefault, () => focusNextCell(-1, 0)),
|
|
128
|
+
ArrowRight: (0, import_ds_utilities.runAll)(preventDefault, () => focusNextCell(0, 1)),
|
|
129
|
+
ArrowDown: (0, import_ds_utilities.runAll)(preventDefault, () => focusNextCell(1, 0)),
|
|
130
|
+
ArrowLeft: (0, import_ds_utilities.runAll)(preventDefault, () => focusNextCell(0, -1)),
|
|
131
|
+
Home: (0, import_ds_utilities.runAll)(preventDefault, (e) => {
|
|
155
132
|
let rowIndex = focusedRow.current;
|
|
156
|
-
|
|
157
133
|
if (e.ctrlKey) {
|
|
158
134
|
rowIndex = 0;
|
|
159
135
|
}
|
|
160
|
-
|
|
161
|
-
focusNextCell(0, 0, {
|
|
162
|
-
rowIndex,
|
|
163
|
-
cellIndex: 0
|
|
164
|
-
});
|
|
136
|
+
focusNextCell(0, 0, { rowIndex, cellIndex: 0 });
|
|
165
137
|
}),
|
|
166
|
-
End:
|
|
138
|
+
End: (0, import_ds_utilities.runAll)(preventDefault, (e) => {
|
|
167
139
|
let rowIndex = focusedRow.current;
|
|
168
|
-
|
|
169
140
|
if (e.ctrlKey) {
|
|
170
141
|
rowIndex = grid.current.length - 1;
|
|
171
142
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
})
|
|
178
|
-
}, keyBindings);
|
|
179
|
-
|
|
180
|
-
const nextKeyBindings = dsUtilities.isFunction(keyBindings) ? keyBindings({
|
|
143
|
+
focusNextCell(0, 0, { rowIndex, cellIndex: grid.current[0].length - 1 });
|
|
144
|
+
}),
|
|
145
|
+
...keyBindings
|
|
146
|
+
};
|
|
147
|
+
const nextKeyBindings = (0, import_ds_utilities.isFunction)(keyBindings) ? keyBindings({
|
|
181
148
|
defaultBindings: defaultKeyBindings,
|
|
182
149
|
rowIndex: focusedRow.current,
|
|
183
150
|
cellIndex: focusedCell.current
|
|
184
|
-
}) :
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
151
|
+
}) : { ...defaultKeyBindings, ...keyBindings };
|
|
152
|
+
const onKeyDown = (e) => {
|
|
153
|
+
if (e.target.tagName.toLowerCase() === "input")
|
|
154
|
+
return;
|
|
188
155
|
const action = nextKeyBindings[e.key];
|
|
189
|
-
if (
|
|
156
|
+
if ((0, import_ds_utilities.isFunction)(action))
|
|
157
|
+
action(e);
|
|
190
158
|
};
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
container.addEventListener('keydown', onKeyDown, true);
|
|
159
|
+
const activate = (container) => {
|
|
160
|
+
container.addEventListener("keydown", onKeyDown, true);
|
|
194
161
|
};
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
container.removeEventListener('keydown', onKeyDown, true);
|
|
162
|
+
const deactivate = (container) => {
|
|
163
|
+
container.removeEventListener("keydown", onKeyDown, true);
|
|
198
164
|
};
|
|
199
|
-
|
|
200
|
-
React.useEffect(() => {
|
|
165
|
+
(0, import_react.useEffect)(() => {
|
|
201
166
|
activate(containerRef.current);
|
|
202
167
|
return () => {
|
|
203
168
|
deactivate(containerRef.current);
|
|
204
169
|
};
|
|
205
170
|
}, []);
|
|
206
|
-
const valueProvider =
|
|
171
|
+
const valueProvider = (0, import_react.useMemo)(() => ({
|
|
207
172
|
register
|
|
208
173
|
}), []);
|
|
209
|
-
return
|
|
174
|
+
return /* @__PURE__ */ import_react.default.createElement(Provider, {
|
|
210
175
|
value: valueProvider
|
|
211
|
-
},
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
exports
|
|
215
|
-
|
|
176
|
+
}, decoratedChild);
|
|
177
|
+
};
|
|
178
|
+
var FocusGrid_default = FocusGridProvider;
|
|
179
|
+
module.exports = __toCommonJS(FocusGrid_exports);
|
|
180
|
+
//# sourceMappingURL=FocusGrid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/FocusGroup/FocusGrid.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { createContext, useEffect, useMemo, useRef } from 'react';\nimport { isFunction, runAll, get, useHotkeys, mergeRefs } from '@elliemae/ds-utilities';\nimport { getNextCellPosition } from './utils/getNextCellPosition';\n\nconst FocusGridContext = createContext();\nconst { Provider } = FocusGridContext;\n\nconst preventDefault = e => e.preventDefault();\n\nfunction registerHotKeysHooks(hotKeys, { focusedRow, focusedCell }) {\n Object.keys(hotKeys).forEach(key => {\n const { handler, options } = hotKeys[key];\n useHotkeys({\n keys: key,\n handler: e => {\n e.preventDefault();\n handler({\n rowIndex: focusedRow.current,\n cellIndex: focusedCell.current,\n });\n },\n options,\n });\n });\n}\n\n// eslint-disable-next-line max-statements\nconst FocusGridProvider = ({\n shouldWrapRows = false,\n shouldWrapCells = false,\n shouldRefocus = true,\n children,\n keyBindings,\n hotKeys,\n}) => {\n const focusedRow = useRef();\n const focusedCell = useRef();\n const grid = useRef([]);\n const containerRef = useRef(document);\n const child = React.Children.only(children);\n const decoratedChild = React.cloneElement(child, {\n innerRef: mergeRefs(child.props.innerRef, containerRef),\n });\n\n const getNode = ({ rowIndex, cellIndex }) =>\n get(grid.current, [rowIndex, cellIndex]);\n\n const register = (node, rowIndex, columnIndex) => {\n if (!node) return;\n if (!Array.isArray(grid.current[rowIndex])) {\n grid.current[rowIndex] = [];\n }\n\n if (rowIndex === 0 && columnIndex === 0) {\n node.setAttribute('tabindex', 0);\n } else {\n node.setAttribute('tabindex', -1);\n }\n\n node.onfocus = () => {\n const prevNode = getNode({\n rowIndex: focusedRow.current,\n cellIndex: focusedCell.current,\n });\n\n if (prevNode) prevNode.setAttribute('tabindex', -1);\n\n node.setAttribute('tabindex', 0);\n focusedRow.current = rowIndex;\n focusedCell.current = columnIndex;\n };\n grid.current[rowIndex][columnIndex] = node;\n };\n\n useEffect(() => {\n if (shouldRefocus) {\n const rowIndex = focusedRow.current;\n const cellIndex = focusedCell.current;\n\n const node = get(grid.current, [rowIndex, cellIndex]);\n if (node) node.focus();\n }\n });\n\n const focusNextCell = (directionY, directionX, position) => {\n const { rowIndex, cellIndex } =\n position ||\n getNextCellPosition({\n grid: grid.current,\n currentCell: focusedCell.current,\n currentRow: focusedRow.current,\n directionX,\n directionY,\n shouldWrapCells,\n shouldWrapRows,\n });\n\n const node = getNode({ rowIndex, cellIndex });\n\n // can focus\n if (node) {\n node.focus();\n focusedRow.current = rowIndex;\n focusedCell.current = cellIndex;\n }\n };\n\n registerHotKeysHooks(hotKeys, { focusedCell, focusedRow });\n\n const defaultKeyBindings = {\n ArrowUp: runAll(preventDefault, () => focusNextCell(-1, 0)),\n ArrowRight: runAll(preventDefault, () => focusNextCell(0, 1)),\n ArrowDown: runAll(preventDefault, () => focusNextCell(1, 0)),\n ArrowLeft: runAll(preventDefault, () => focusNextCell(0, -1)),\n Home: runAll(preventDefault, e => {\n let rowIndex = focusedRow.current;\n if (e.ctrlKey) {\n rowIndex = 0;\n }\n focusNextCell(0, 0, { rowIndex, cellIndex: 0 });\n }),\n End: runAll(preventDefault, e => {\n let rowIndex = focusedRow.current;\n if (e.ctrlKey) {\n rowIndex = grid.current.length - 1;\n }\n focusNextCell(0, 0, { rowIndex, cellIndex: grid.current[0].length - 1 });\n }),\n ...keyBindings,\n };\n const nextKeyBindings = isFunction(keyBindings)\n ? keyBindings({\n defaultBindings: defaultKeyBindings,\n rowIndex: focusedRow.current,\n cellIndex: focusedCell.current,\n })\n : { ...defaultKeyBindings, ...keyBindings };\n\n const onKeyDown = e => {\n if (e.target.tagName.toLowerCase() === 'input') return;\n const action = nextKeyBindings[e.key];\n if (isFunction(action)) action(e);\n };\n\n const activate = container => {\n container.addEventListener('keydown', onKeyDown, true);\n };\n\n const deactivate = container => {\n container.removeEventListener('keydown', onKeyDown, true);\n };\n\n useEffect(() => {\n activate(containerRef.current);\n return () => {\n deactivate(containerRef.current);\n };\n }, []);\n\n const valueProvider = useMemo(\n () => ({\n register,\n }),\n [],\n );\n\n return <Provider value={valueProvider}>{decoratedChild}</Provider>;\n};\n\nexport { FocusGridProvider, FocusGridProvider as FocusGrid, FocusGridContext };\nexport default FocusGridProvider;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|