@elliemae/ds-shared 2.0.0-next.9 → 2.0.0-rc.4
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 -9
- package/cjs/FocusGroup/FocusGroupManager.js +3 -3
- 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 +5 -0
- package/cjs/ScrollSync/ScrollSyncPane.js +10 -2
- 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 +7 -2
- package/cjs/toolbar/ToolbarProvider.js +30 -21
- package/cjs/useDataGrid/VolatileRowsListener.js +5 -2
- 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 -6
- package/esm/FocusGroup/FocusGroupManager.js +1 -1
- 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 +5 -0
- package/esm/ScrollSync/ScrollSyncPane.js +10 -2
- 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 +7 -2
- package/esm/toolbar/ToolbarProvider.js +29 -20
- package/esm/useDataGrid/VolatileRowsListener.js +4 -1
- 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,7 +70,9 @@ const unregisterHotKeys = (hotKeys = {}) => {
|
|
|
54
70
|
const noop = () => null;
|
|
55
71
|
|
|
56
72
|
class FocusGroup {
|
|
57
|
-
constructor(
|
|
73
|
+
constructor() {
|
|
74
|
+
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
75
|
+
|
|
58
76
|
_defineProperty__default["default"](this, "items", []);
|
|
59
77
|
|
|
60
78
|
this.options = _objectSpread(_objectSpread({}, defaultOptions), options);
|
|
@@ -98,7 +116,7 @@ class FocusGroup {
|
|
|
98
116
|
const item = this.currentFocusedItem;
|
|
99
117
|
const {
|
|
100
118
|
index
|
|
101
|
-
} =
|
|
119
|
+
} = dsUtilities.get(item, ['dataset'], {});
|
|
102
120
|
return {
|
|
103
121
|
item,
|
|
104
122
|
index
|
|
@@ -128,7 +146,8 @@ class FocusGroup {
|
|
|
128
146
|
return actions.map(action => typeof action === 'string' ? safeCallAction(e, this.mapActions[action]) : safeCallAction(e, action));
|
|
129
147
|
}
|
|
130
148
|
|
|
131
|
-
register(node
|
|
149
|
+
register(node) {
|
|
150
|
+
let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
132
151
|
const afterIndex = this.items.findIndex(item => item.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_PRECEDING);
|
|
133
152
|
node.specialOnFocus = props.onFocus || noop;
|
|
134
153
|
node.specialOnBlur = props.onBlur || noop;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
6
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
7
7
|
var FocusGroup = require('./FocusGroup.js');
|
|
8
8
|
var FocusGroupContext = require('./FocusGroupContext.js');
|
|
9
9
|
|
|
@@ -61,7 +61,7 @@ class FocusGroupProvider extends React.Component {
|
|
|
61
61
|
} = this.props;
|
|
62
62
|
this.focusGroup.activate();
|
|
63
63
|
this.activated = true;
|
|
64
|
-
if (
|
|
64
|
+
if (dsUtilities.isFunction(onActivate)) onActivate();
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
deactivate() {
|
|
@@ -71,7 +71,7 @@ class FocusGroupProvider extends React.Component {
|
|
|
71
71
|
this.activated = false;
|
|
72
72
|
this.focusGroup.deactivate();
|
|
73
73
|
|
|
74
|
-
if (
|
|
74
|
+
if (dsUtilities.isFunction(onExitFocusGroup)) {
|
|
75
75
|
onExitFocusGroup();
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -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;
|
|
@@ -66,9 +66,10 @@ class Group extends React.Component {
|
|
|
66
66
|
};
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
static getDerivedStateFromProps(nextProps, {
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
static getDerivedStateFromProps(nextProps, _ref) {
|
|
70
|
+
let {
|
|
71
|
+
prevValue
|
|
72
|
+
} = _ref;
|
|
72
73
|
if (nextProps.activeValue === prevValue) return null;
|
|
73
74
|
return {
|
|
74
75
|
activeValue: nextProps.activeValue,
|
|
@@ -76,7 +77,7 @@ class Group extends React.Component {
|
|
|
76
77
|
};
|
|
77
78
|
}
|
|
78
79
|
|
|
79
|
-
handleChange(e
|
|
80
|
+
handleChange(e) {
|
|
80
81
|
const {
|
|
81
82
|
multiple,
|
|
82
83
|
onChange
|
|
@@ -97,6 +98,11 @@ class Group extends React.Component {
|
|
|
97
98
|
this.setState({
|
|
98
99
|
activeValue: newValue
|
|
99
100
|
});
|
|
101
|
+
|
|
102
|
+
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
103
|
+
rest[_key - 1] = arguments[_key];
|
|
104
|
+
}
|
|
105
|
+
|
|
100
106
|
if (onChange) onChange(newValue, ...rest);
|
|
101
107
|
}
|
|
102
108
|
|
|
@@ -12,8 +12,11 @@ const {
|
|
|
12
12
|
Consumer
|
|
13
13
|
} = GroupContext.GroupContext;
|
|
14
14
|
|
|
15
|
-
const GroupItem =
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
const GroupItem = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
render
|
|
18
|
+
} = _ref;
|
|
19
|
+
return /*#__PURE__*/_jsx__default["default"](Consumer, {}, void 0, context => render(context));
|
|
20
|
+
};
|
|
18
21
|
|
|
19
22
|
module.exports = GroupItem;
|