@elliemae/ds-shared 2.0.0-next.7 → 2.0.0-rc.10
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 +23 -20
- package/cjs/Animations/Grow.js +29 -26
- package/cjs/Animations/GrowRight.js +29 -26
- package/cjs/CheckableGroup.js +31 -23
- package/cjs/DeferRenderAfterComputation.js +7 -6
- package/cjs/FocusGroup/FocusGrid.js +38 -31
- package/cjs/FocusGroup/FocusGroup.js +28 -11
- package/cjs/FocusGroup/FocusGroupManager.js +6 -11
- package/cjs/FocusGroup/focusGroupManagerHoc.js +7 -1
- package/cjs/FocusGroup/useFocusGroupItem.js +8 -2
- package/cjs/FocusGroup/utils/getNextCellPosition.js +10 -9
- package/cjs/GroupContext/Group.js +10 -4
- package/cjs/GroupContext/GroupItem.js +6 -3
- package/cjs/ScrollSync/ScrollSync.js +22 -21
- package/cjs/ScrollSync/ScrollSyncPane.js +13 -6
- package/cjs/ScrollSync/ScrollSyncProvider.js +12 -6
- package/cjs/createDataInstance/createInstancePlugin.js +5 -0
- package/cjs/createDataInstance/createInstanceRef.js +7 -0
- package/cjs/createDataInstance/utils.js +56 -24
- package/cjs/defer-render-hoc/index.js +9 -5
- package/cjs/toolbar/ToolbarProvider.js +30 -21
- package/cjs/useDataGrid/VolatileRowsListener.js +6 -8
- package/cjs/useDataGrid/initColumnDefinition.js +24 -17
- package/cjs/useDataGrid/useDataGrid.js +41 -34
- package/cjs/useDataList/recordIterator.js +4 -1
- package/cjs/useDataList/useDataList.js +17 -4
- package/cjs/utils.js +7 -0
- package/cjs/virtualization/AutoHeightList.js +10 -8
- package/cjs/virtualization/FluidHeightList.js +15 -7
- package/cjs/virtualization/index.js +7 -6
- package/esm/Animations/BaseAnimation.js +23 -20
- package/esm/Animations/Grow.js +29 -26
- package/esm/Animations/GrowRight.js +29 -26
- package/esm/CheckableGroup.js +28 -19
- package/esm/DeferRenderAfterComputation.js +7 -6
- package/esm/FocusGroup/FocusGrid.js +27 -19
- package/esm/FocusGroup/FocusGroup.js +25 -8
- package/esm/FocusGroup/FocusGroupManager.js +4 -8
- package/esm/FocusGroup/focusGroupManagerHoc.js +7 -1
- package/esm/FocusGroup/useFocusGroupItem.js +8 -2
- package/esm/FocusGroup/utils/getNextCellPosition.js +10 -9
- package/esm/GroupContext/Group.js +10 -4
- package/esm/GroupContext/GroupItem.js +6 -3
- package/esm/ScrollSync/ScrollSync.js +22 -20
- package/esm/ScrollSync/ScrollSyncPane.js +13 -6
- package/esm/ScrollSync/ScrollSyncProvider.js +12 -6
- package/esm/createDataInstance/createInstancePlugin.js +5 -0
- package/esm/createDataInstance/createInstanceRef.js +7 -0
- package/esm/createDataInstance/utils.js +56 -24
- package/esm/defer-render-hoc/index.js +9 -5
- package/esm/toolbar/ToolbarProvider.js +29 -20
- package/esm/useDataGrid/VolatileRowsListener.js +5 -3
- package/esm/useDataGrid/initColumnDefinition.js +10 -3
- package/esm/useDataGrid/useDataGrid.js +25 -16
- package/esm/useDataList/recordIterator.js +4 -1
- package/esm/useDataList/useDataList.js +16 -3
- package/esm/utils.js +7 -0
- package/esm/virtualization/AutoHeightList.js +6 -3
- package/esm/virtualization/FluidHeightList.js +14 -6
- package/esm/virtualization/index.js +7 -6
- package/package.json +8 -4
- package/types/toolbar/ToolbarProvider.d.ts +1 -1
- package/types/useDataGrid/initColumnDefinition.d.ts +4 -3
|
@@ -9,25 +9,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
11
11
|
|
|
12
|
-
const BaseAnimation =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
12
|
+
const BaseAnimation = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
keys = undefined,
|
|
15
|
+
items = [],
|
|
16
|
+
duration = 100,
|
|
17
|
+
enter = {},
|
|
18
|
+
from = {},
|
|
19
|
+
leave = {},
|
|
20
|
+
onRest = () => null,
|
|
21
|
+
children
|
|
22
|
+
} = _ref;
|
|
23
|
+
return /*#__PURE__*/_jsx__default["default"](renderprops.Transition, {
|
|
24
|
+
config: {
|
|
25
|
+
duration
|
|
26
|
+
},
|
|
27
|
+
enter: enter,
|
|
28
|
+
from: from,
|
|
29
|
+
items: items,
|
|
30
|
+
keys: keys,
|
|
31
|
+
leave: leave,
|
|
32
|
+
onRest: onRest
|
|
33
|
+
}, void 0, children);
|
|
34
|
+
};
|
|
32
35
|
|
|
33
36
|
module.exports = BaseAnimation;
|
package/cjs/Animations/Grow.js
CHANGED
|
@@ -9,31 +9,34 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
11
11
|
|
|
12
|
-
const Grow =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
},
|
|
12
|
+
const Grow = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
keys = undefined,
|
|
15
|
+
duration,
|
|
16
|
+
items = undefined,
|
|
17
|
+
from = 0,
|
|
18
|
+
to = 1,
|
|
19
|
+
children,
|
|
20
|
+
onRest = () => null
|
|
21
|
+
} = _ref;
|
|
22
|
+
return /*#__PURE__*/_jsx__default["default"](BaseAnimation, {
|
|
23
|
+
duration: duration,
|
|
24
|
+
enter: {
|
|
25
|
+
opacity: 1,
|
|
26
|
+
transform: "scale(".concat(to, ")")
|
|
27
|
+
},
|
|
28
|
+
from: {
|
|
29
|
+
opacity: 0,
|
|
30
|
+
transform: "scale(".concat(from, ")")
|
|
31
|
+
},
|
|
32
|
+
items: items,
|
|
33
|
+
keys: keys,
|
|
34
|
+
leave: {
|
|
35
|
+
opacity: 0,
|
|
36
|
+
transform: "scale(".concat(from, ")")
|
|
37
|
+
},
|
|
38
|
+
onRest: onRest
|
|
39
|
+
}, void 0, children);
|
|
40
|
+
};
|
|
38
41
|
|
|
39
42
|
module.exports = Grow;
|
|
@@ -9,31 +9,34 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
11
11
|
|
|
12
|
-
const GrowRight =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
},
|
|
12
|
+
const GrowRight = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
keys = undefined,
|
|
15
|
+
items = undefined,
|
|
16
|
+
duration = 200,
|
|
17
|
+
from = 0,
|
|
18
|
+
to = 1,
|
|
19
|
+
children,
|
|
20
|
+
onRest = () => null
|
|
21
|
+
} = _ref;
|
|
22
|
+
return /*#__PURE__*/_jsx__default["default"](BaseAnimation, {
|
|
23
|
+
duration: duration,
|
|
24
|
+
enter: {
|
|
25
|
+
opacity: "".concat(to),
|
|
26
|
+
transform: 'translateX(0px)'
|
|
27
|
+
},
|
|
28
|
+
from: {
|
|
29
|
+
opacity: "".concat(from),
|
|
30
|
+
transform: 'translateX(100%)'
|
|
31
|
+
},
|
|
32
|
+
items: items,
|
|
33
|
+
keys: keys,
|
|
34
|
+
leave: {
|
|
35
|
+
opacity: "".concat(from),
|
|
36
|
+
transform: 'translateX(100%)'
|
|
37
|
+
},
|
|
38
|
+
onRest: onRest
|
|
39
|
+
}, void 0, children);
|
|
40
|
+
};
|
|
38
41
|
|
|
39
42
|
module.exports = GrowRight;
|
package/cjs/CheckableGroup.js
CHANGED
|
@@ -4,34 +4,41 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
7
14
|
var React = require('react');
|
|
8
|
-
var
|
|
9
|
-
var useDerivedStateFromProps = require('@elliemae/ds-utilities/hooks/useDerivedStateFromProps');
|
|
15
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
10
16
|
|
|
11
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
18
|
|
|
13
19
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
14
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
|
-
var useDerivedStateFromProps__default = /*#__PURE__*/_interopDefaultLegacy(useDerivedStateFromProps);
|
|
16
21
|
|
|
17
22
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
18
23
|
|
|
19
24
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
20
|
-
function useCheckableGroup({
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
function useCheckableGroup(_ref) {
|
|
26
|
+
let {
|
|
27
|
+
children,
|
|
28
|
+
active: activeProp,
|
|
29
|
+
multi,
|
|
30
|
+
onCheck = () => null
|
|
31
|
+
} = _ref;
|
|
32
|
+
const [active, setActive] = dsUtilities.useDerivedStateFromProps(activeProp);
|
|
27
33
|
|
|
28
|
-
const handleCheck = ({
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
const handleCheck = (_ref2, item) => {
|
|
35
|
+
let {
|
|
36
|
+
target: {
|
|
37
|
+
value
|
|
38
|
+
}
|
|
39
|
+
} = _ref2;
|
|
33
40
|
setActive(prevActive => {
|
|
34
|
-
const nextActive = multi ?
|
|
41
|
+
const nextActive = multi ? dsUtilities.addOrRemove(prevActive, value) : value;
|
|
35
42
|
onCheck(nextActive, item);
|
|
36
43
|
return nextActive;
|
|
37
44
|
});
|
|
@@ -44,17 +51,18 @@ function useCheckableGroup({
|
|
|
44
51
|
const checked = Array.isArray(active) ? active.indexOf(props.name) !== -1 : active === props.name;
|
|
45
52
|
return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, props), {}, {
|
|
46
53
|
checked,
|
|
47
|
-
onClick:
|
|
54
|
+
onClick: dsUtilities.runAll(handleCheck, props.onClick)
|
|
48
55
|
}));
|
|
49
56
|
});
|
|
50
57
|
}
|
|
51
58
|
|
|
52
|
-
function CheckableGroup({
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
59
|
+
function CheckableGroup(_ref3) {
|
|
60
|
+
let {
|
|
61
|
+
active = [],
|
|
62
|
+
multi = false,
|
|
63
|
+
// checkbox or radio
|
|
64
|
+
children
|
|
65
|
+
} = _ref3;
|
|
58
66
|
return useCheckableGroup({
|
|
59
67
|
active,
|
|
60
68
|
multi,
|
|
@@ -8,12 +8,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
8
|
|
|
9
9
|
var raf__default = /*#__PURE__*/_interopDefaultLegacy(raf);
|
|
10
10
|
|
|
11
|
-
function DeferRenderAfterComputation({
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
function DeferRenderAfterComputation(_ref) {
|
|
12
|
+
let {
|
|
13
|
+
children,
|
|
14
|
+
resolve,
|
|
15
|
+
fallback,
|
|
16
|
+
timeout = 2000
|
|
17
|
+
} = _ref;
|
|
17
18
|
const [shouldRender, setShouldRender] = React.useState(false);
|
|
18
19
|
React.useEffect(() => {
|
|
19
20
|
// eslint-disable-next-line max-nested-callbacks
|
|
@@ -4,10 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
7
12
|
var React = require('react');
|
|
8
|
-
var
|
|
9
|
-
var useHotkeys = require('@elliemae/ds-utilities/hooks/useHotkeys');
|
|
10
|
-
var system = require('@elliemae/ds-utilities/system');
|
|
13
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
11
14
|
var getNextCellPosition = require('./utils/getNextCellPosition.js');
|
|
12
15
|
|
|
13
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -15,7 +18,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
18
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
16
19
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
17
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
-
var useHotkeys__default = /*#__PURE__*/_interopDefaultLegacy(useHotkeys);
|
|
19
21
|
|
|
20
22
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
21
23
|
|
|
@@ -27,16 +29,17 @@ const {
|
|
|
27
29
|
|
|
28
30
|
const preventDefault = e => e.preventDefault();
|
|
29
31
|
|
|
30
|
-
function registerHotKeysHooks(hotKeys, {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
function registerHotKeysHooks(hotKeys, _ref) {
|
|
33
|
+
let {
|
|
34
|
+
focusedRow,
|
|
35
|
+
focusedCell
|
|
36
|
+
} = _ref;
|
|
34
37
|
Object.keys(hotKeys).forEach(key => {
|
|
35
38
|
const {
|
|
36
39
|
handler,
|
|
37
40
|
options
|
|
38
41
|
} = hotKeys[key];
|
|
39
|
-
|
|
42
|
+
dsUtilities.useHotkeys({
|
|
40
43
|
keys: key,
|
|
41
44
|
handler: e => {
|
|
42
45
|
e.preventDefault();
|
|
@@ -51,27 +54,31 @@ function registerHotKeysHooks(hotKeys, {
|
|
|
51
54
|
} // eslint-disable-next-line max-statements
|
|
52
55
|
|
|
53
56
|
|
|
54
|
-
function FocusGridProvider({
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
function FocusGridProvider(_ref2) {
|
|
58
|
+
let {
|
|
59
|
+
shouldWrapRows = false,
|
|
60
|
+
shouldWrapCells = false,
|
|
61
|
+
shouldRefocus = true,
|
|
62
|
+
children,
|
|
63
|
+
keyBindings,
|
|
64
|
+
hotKeys
|
|
65
|
+
} = _ref2;
|
|
62
66
|
const focusedRow = React.useRef();
|
|
63
67
|
const focusedCell = React.useRef();
|
|
64
68
|
const grid = React.useRef([]);
|
|
65
69
|
const containerRef = React.useRef(document);
|
|
66
70
|
const child = React__default["default"].Children.only(children);
|
|
67
71
|
const decoratedChild = /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
68
|
-
innerRef:
|
|
72
|
+
innerRef: dsUtilities.mergeRefs(child.props.innerRef, containerRef)
|
|
69
73
|
});
|
|
70
74
|
|
|
71
|
-
const getNode =
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
+
const getNode = _ref3 => {
|
|
76
|
+
let {
|
|
77
|
+
rowIndex,
|
|
78
|
+
cellIndex
|
|
79
|
+
} = _ref3;
|
|
80
|
+
return dsUtilities.get(grid.current, [rowIndex, cellIndex]);
|
|
81
|
+
};
|
|
75
82
|
|
|
76
83
|
const register = (node, rowIndex, columnIndex) => {
|
|
77
84
|
if (!node) return;
|
|
@@ -104,7 +111,7 @@ function FocusGridProvider({
|
|
|
104
111
|
if (shouldRefocus) {
|
|
105
112
|
const rowIndex = focusedRow.current;
|
|
106
113
|
const cellIndex = focusedCell.current;
|
|
107
|
-
const node =
|
|
114
|
+
const node = dsUtilities.get(grid.current, [rowIndex, cellIndex]);
|
|
108
115
|
if (node) node.focus();
|
|
109
116
|
}
|
|
110
117
|
});
|
|
@@ -140,11 +147,11 @@ function FocusGridProvider({
|
|
|
140
147
|
});
|
|
141
148
|
|
|
142
149
|
const defaultKeyBindings = _objectSpread({
|
|
143
|
-
ArrowUp:
|
|
144
|
-
ArrowRight:
|
|
145
|
-
ArrowDown:
|
|
146
|
-
ArrowLeft:
|
|
147
|
-
Home:
|
|
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 => {
|
|
148
155
|
let rowIndex = focusedRow.current;
|
|
149
156
|
|
|
150
157
|
if (e.ctrlKey) {
|
|
@@ -156,7 +163,7 @@ function FocusGridProvider({
|
|
|
156
163
|
cellIndex: 0
|
|
157
164
|
});
|
|
158
165
|
}),
|
|
159
|
-
End:
|
|
166
|
+
End: dsUtilities.runAll(preventDefault, e => {
|
|
160
167
|
let rowIndex = focusedRow.current;
|
|
161
168
|
|
|
162
169
|
if (e.ctrlKey) {
|
|
@@ -170,7 +177,7 @@ function FocusGridProvider({
|
|
|
170
177
|
})
|
|
171
178
|
}, keyBindings);
|
|
172
179
|
|
|
173
|
-
const nextKeyBindings =
|
|
180
|
+
const nextKeyBindings = dsUtilities.isFunction(keyBindings) ? keyBindings({
|
|
174
181
|
defaultBindings: defaultKeyBindings,
|
|
175
182
|
rowIndex: focusedRow.current,
|
|
176
183
|
cellIndex: focusedCell.current
|
|
@@ -179,7 +186,7 @@ function FocusGridProvider({
|
|
|
179
186
|
const onKeyDown = e => {
|
|
180
187
|
if (e.target.tagName.toLowerCase() === 'input') return;
|
|
181
188
|
const action = nextKeyBindings[e.key];
|
|
182
|
-
if (
|
|
189
|
+
if (dsUtilities.isFunction(action)) action(e);
|
|
183
190
|
};
|
|
184
191
|
|
|
185
192
|
const activate = container => {
|
|
@@ -2,7 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
4
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
|
-
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
6
13
|
var hotkeys = require('hotkeys-js');
|
|
7
14
|
|
|
8
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -17,14 +24,22 @@ const defaultOptions = {
|
|
|
17
24
|
orientation: 'vertical'
|
|
18
25
|
};
|
|
19
26
|
|
|
20
|
-
const safeCallAction = (e, fun
|
|
21
|
-
if (
|
|
27
|
+
const safeCallAction = function (e, fun) {
|
|
28
|
+
if (dsUtilities.isFunction(fun)) {
|
|
22
29
|
e.preventDefault();
|
|
30
|
+
|
|
31
|
+
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
|
32
|
+
args[_key - 2] = arguments[_key];
|
|
33
|
+
}
|
|
34
|
+
|
|
23
35
|
fun(...args);
|
|
24
36
|
}
|
|
25
37
|
};
|
|
26
38
|
|
|
27
|
-
const registerHotkeys =
|
|
39
|
+
const registerHotkeys = function () {
|
|
40
|
+
let hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
41
|
+
let params = arguments.length > 1 ? arguments[1] : undefined;
|
|
42
|
+
let getContainer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => document;
|
|
28
43
|
Object.keys(hotKeys).forEach(hotkey => {
|
|
29
44
|
const {
|
|
30
45
|
options,
|
|
@@ -33,7 +48,7 @@ const registerHotkeys = (hotKeys = {}, params, getContainer = () => document) =>
|
|
|
33
48
|
} = hotKeys[hotkey];
|
|
34
49
|
|
|
35
50
|
const parameterizedHandler = e => {
|
|
36
|
-
const handlerParams =
|
|
51
|
+
const handlerParams = dsUtilities.isFunction(params) ? params() : params;
|
|
37
52
|
if (!allowDocumentHandler && handlerParams.item !== document.activeElement) return;
|
|
38
53
|
e.preventDefault();
|
|
39
54
|
handler(handlerParams);
|
|
@@ -45,7 +60,8 @@ const registerHotkeys = (hotKeys = {}, params, getContainer = () => document) =>
|
|
|
45
60
|
});
|
|
46
61
|
};
|
|
47
62
|
|
|
48
|
-
const unregisterHotKeys = (
|
|
63
|
+
const unregisterHotKeys = function () {
|
|
64
|
+
let hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
49
65
|
Object.keys(hotKeys).forEach(hotkey => {
|
|
50
66
|
hotkeys__default["default"].unbind(hotkey);
|
|
51
67
|
});
|
|
@@ -54,9 +70,9 @@ const unregisterHotKeys = (hotKeys = {}) => {
|
|
|
54
70
|
const noop = () => null;
|
|
55
71
|
|
|
56
72
|
class FocusGroup {
|
|
57
|
-
constructor(
|
|
58
|
-
|
|
59
|
-
|
|
73
|
+
constructor() {
|
|
74
|
+
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
75
|
+
this.items = [];
|
|
60
76
|
this.options = _objectSpread(_objectSpread({}, defaultOptions), options);
|
|
61
77
|
const {
|
|
62
78
|
orientation
|
|
@@ -98,7 +114,7 @@ class FocusGroup {
|
|
|
98
114
|
const item = this.currentFocusedItem;
|
|
99
115
|
const {
|
|
100
116
|
index
|
|
101
|
-
} =
|
|
117
|
+
} = dsUtilities.get(item, ['dataset'], {});
|
|
102
118
|
return {
|
|
103
119
|
item,
|
|
104
120
|
index
|
|
@@ -128,7 +144,8 @@ class FocusGroup {
|
|
|
128
144
|
return actions.map(action => typeof action === 'string' ? safeCallAction(e, this.mapActions[action]) : safeCallAction(e, action));
|
|
129
145
|
}
|
|
130
146
|
|
|
131
|
-
register(node
|
|
147
|
+
register(node) {
|
|
148
|
+
let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
132
149
|
const afterIndex = this.items.findIndex(item => item.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_PRECEDING);
|
|
133
150
|
node.specialOnFocus = props.onFocus || noop;
|
|
134
151
|
node.specialOnBlur = props.onBlur || noop;
|
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
4
|
var React = require('react');
|
|
6
|
-
var
|
|
5
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
7
6
|
var FocusGroup = require('./FocusGroup.js');
|
|
8
7
|
var FocusGroupContext = require('./FocusGroupContext.js');
|
|
9
8
|
|
|
10
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
10
|
|
|
12
11
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
13
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
14
12
|
|
|
15
13
|
const noop = () => null;
|
|
16
14
|
|
|
17
15
|
class FocusGroupProvider extends React.Component {
|
|
18
16
|
constructor(props) {
|
|
19
17
|
super(props);
|
|
20
|
-
|
|
21
|
-
_defineProperty__default["default"](this, "activated", false);
|
|
22
|
-
|
|
18
|
+
this.activated = false;
|
|
23
19
|
this.focusGroup = new FocusGroup(props);
|
|
24
20
|
props.onFocusGroupSet(this);
|
|
25
21
|
this.actions = {
|
|
@@ -61,7 +57,7 @@ class FocusGroupProvider extends React.Component {
|
|
|
61
57
|
} = this.props;
|
|
62
58
|
this.focusGroup.activate();
|
|
63
59
|
this.activated = true;
|
|
64
|
-
if (
|
|
60
|
+
if (dsUtilities.isFunction(onActivate)) onActivate();
|
|
65
61
|
}
|
|
66
62
|
|
|
67
63
|
deactivate() {
|
|
@@ -71,7 +67,7 @@ class FocusGroupProvider extends React.Component {
|
|
|
71
67
|
this.activated = false;
|
|
72
68
|
this.focusGroup.deactivate();
|
|
73
69
|
|
|
74
|
-
if (
|
|
70
|
+
if (dsUtilities.isFunction(onExitFocusGroup)) {
|
|
75
71
|
onExitFocusGroup();
|
|
76
72
|
}
|
|
77
73
|
}
|
|
@@ -107,8 +103,7 @@ class FocusGroupProvider extends React.Component {
|
|
|
107
103
|
}
|
|
108
104
|
|
|
109
105
|
}
|
|
110
|
-
|
|
111
|
-
_defineProperty__default["default"](FocusGroupProvider, "defaultProps", {
|
|
106
|
+
FocusGroupProvider.defaultProps = {
|
|
112
107
|
exitWhenNoPrevious: false,
|
|
113
108
|
exitWhenNoNext: false,
|
|
114
109
|
keyBindings: {},
|
|
@@ -117,6 +112,6 @@ _defineProperty__default["default"](FocusGroupProvider, "defaultProps", {
|
|
|
117
112
|
onFocusPreviousGroup: noop,
|
|
118
113
|
onFocusNextGroup: noop,
|
|
119
114
|
onFocusGroupSet: noop
|
|
120
|
-
}
|
|
115
|
+
};
|
|
121
116
|
|
|
122
117
|
module.exports = FocusGroupProvider;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
3
8
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
9
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
10
|
require('react');
|
|
@@ -16,7 +21,8 @@ const _excluded = ["onExitFocusGroup", "onFocusPrevGroup", "focusKeyBindings"];
|
|
|
16
21
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
17
22
|
|
|
18
23
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
19
|
-
function FocusGroupHoc(WrappedComponent
|
|
24
|
+
function FocusGroupHoc(WrappedComponent) {
|
|
25
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
20
26
|
return _ref => {
|
|
21
27
|
let {
|
|
22
28
|
onExitFocusGroup,
|
|
@@ -12,7 +12,10 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
|
|
|
12
12
|
|
|
13
13
|
const _excluded = ["register", "unregister"],
|
|
14
14
|
_excluded2 = ["register", "unregister"];
|
|
15
|
-
function useFocusGroupItem(
|
|
15
|
+
function useFocusGroupItem() {
|
|
16
|
+
let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
17
|
+
let props = arguments.length > 1 ? arguments[1] : undefined;
|
|
18
|
+
|
|
16
19
|
const _ref = React.useContext(FocusGroupContext) || {},
|
|
17
20
|
{
|
|
18
21
|
register,
|
|
@@ -30,7 +33,10 @@ function useFocusGroupItem(ref = {}, props) {
|
|
|
30
33
|
if (!register) return {};
|
|
31
34
|
return otherActions;
|
|
32
35
|
}
|
|
33
|
-
const useFocusGroupWithState = (
|
|
36
|
+
const useFocusGroupWithState = function () {
|
|
37
|
+
let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
38
|
+
let props = arguments.length > 1 ? arguments[1] : undefined;
|
|
39
|
+
|
|
34
40
|
const _ref2 = React.useContext(FocusGroupContext) || {},
|
|
35
41
|
{
|
|
36
42
|
register,
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
// eslint-disable-next-line max-statements
|
|
4
|
-
function getNextCellPosition({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
function getNextCellPosition(_ref) {
|
|
5
|
+
let {
|
|
6
|
+
grid,
|
|
7
|
+
currentRow = 0,
|
|
8
|
+
currentCell = 0,
|
|
9
|
+
directionY,
|
|
10
|
+
directionX,
|
|
11
|
+
shouldWrapCells,
|
|
12
|
+
shouldWrapRows
|
|
13
|
+
} = _ref;
|
|
13
14
|
let nextRow = currentRow + directionY;
|
|
14
15
|
let nextCell = currentCell + directionX;
|
|
15
16
|
const rowCount = grid.length;
|