@elliemae/ds-shared 2.0.0-alpha.1 → 2.0.0-alpha.13
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 +24 -20
- package/cjs/Animations/Grow.js +30 -26
- package/cjs/Animations/GrowRight.js +30 -26
- package/cjs/Animations/GrowVertical.js +1 -0
- package/cjs/CheckableGroup.js +35 -26
- package/cjs/DeferRenderAfterComputation.js +9 -7
- package/cjs/FocusGroup/FocusGrid.js +43 -36
- package/cjs/FocusGroup/FocusGroup.js +32 -14
- package/cjs/FocusGroup/FocusGroupContext.js +1 -1
- package/cjs/FocusGroup/FocusGroupManager.js +7 -12
- package/cjs/FocusGroup/focusGroupManagerHoc.js +9 -3
- package/cjs/FocusGroup/index.js +2 -2
- package/cjs/FocusGroup/useFocusGroupItem.js +11 -5
- package/cjs/FocusGroup/utils/getNextCellPosition.js +10 -9
- package/cjs/GroupContext/Group.js +12 -5
- package/cjs/GroupContext/GroupContext.js +1 -1
- package/cjs/GroupContext/GroupItem.js +6 -3
- package/cjs/ScrollSync/ScrollSync.js +26 -25
- package/cjs/ScrollSync/ScrollSyncPane.js +16 -8
- package/cjs/ScrollSync/ScrollSyncProvider.js +15 -9
- package/cjs/ScrollSync/index.js +1 -1
- package/cjs/createDataInstance/createInstancePlugin.js +7 -1
- package/cjs/createDataInstance/createInstanceRef.js +10 -2
- package/cjs/createDataInstance/utils.js +58 -26
- package/cjs/defer-render-hoc/index.js +13 -8
- package/cjs/index.js +1 -1
- package/cjs/react-spring/index.js +1 -3
- package/cjs/react-spring/renderprops.js +1 -3
- package/cjs/toolbar/ToolbarProvider.js +37 -27
- package/cjs/useDataGrid/VolatileRowsListener.js +6 -8
- package/cjs/useDataGrid/initColumnDefinition.js +30 -22
- package/cjs/useDataGrid/useDataGrid.js +47 -41
- package/cjs/useDataList/index.js +1 -1
- package/cjs/useDataList/recordIterator.js +4 -1
- package/cjs/useDataList/useDataList.js +21 -7
- package/cjs/utils.js +9 -2
- package/cjs/virtualization/AutoHeightList.js +12 -10
- package/cjs/virtualization/FluidHeightList.js +18 -10
- package/cjs/virtualization/index.js +7 -6
- package/esm/Animations/BaseAnimation.js +24 -20
- package/esm/Animations/Grow.js +30 -26
- package/esm/Animations/GrowRight.js +30 -26
- package/esm/Animations/GrowVertical.js +1 -0
- package/esm/CheckableGroup.js +29 -19
- package/esm/DeferRenderAfterComputation.js +8 -6
- package/esm/FocusGroup/FocusGrid.js +27 -19
- package/esm/FocusGroup/FocusGroup.js +26 -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 +11 -4
- package/esm/GroupContext/GroupItem.js +6 -3
- package/esm/ScrollSync/ScrollSync.js +22 -20
- package/esm/ScrollSync/ScrollSyncPane.js +14 -6
- package/esm/ScrollSync/ScrollSyncProvider.js +12 -6
- package/esm/createDataInstance/createInstancePlugin.js +6 -0
- package/esm/createDataInstance/createInstanceRef.js +8 -0
- package/esm/createDataInstance/utils.js +57 -25
- package/esm/defer-render-hoc/index.js +10 -5
- package/esm/toolbar/ToolbarProvider.js +30 -20
- package/esm/useDataGrid/VolatileRowsListener.js +5 -3
- package/esm/useDataGrid/initColumnDefinition.js +12 -4
- package/esm/useDataGrid/useDataGrid.js +26 -16
- package/esm/useDataList/recordIterator.js +4 -1
- package/esm/useDataList/useDataList.js +17 -3
- package/esm/utils.js +8 -1
- 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
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
4
5
|
require('react');
|
|
5
6
|
var renderprops = require('react-spring/renderprops');
|
|
6
7
|
|
|
@@ -8,25 +9,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
9
|
|
|
9
10
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
10
11
|
|
|
11
|
-
const BaseAnimation =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
+
};
|
|
31
35
|
|
|
32
36
|
module.exports = BaseAnimation;
|
package/cjs/Animations/Grow.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
4
5
|
require('react');
|
|
5
6
|
var BaseAnimation = require('./BaseAnimation.js');
|
|
6
7
|
|
|
@@ -8,31 +9,34 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
9
|
|
|
9
10
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
10
11
|
|
|
11
|
-
const Grow =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
},
|
|
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
|
+
};
|
|
37
41
|
|
|
38
42
|
module.exports = Grow;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
4
5
|
require('react');
|
|
5
6
|
var BaseAnimation = require('./BaseAnimation.js');
|
|
6
7
|
|
|
@@ -8,31 +9,34 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
9
|
|
|
9
10
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
10
11
|
|
|
11
|
-
const GrowRight =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
},
|
|
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
|
+
};
|
|
37
41
|
|
|
38
42
|
module.exports = GrowRight;
|
package/cjs/CheckableGroup.js
CHANGED
|
@@ -3,57 +3,66 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
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');
|
|
6
14
|
var React = require('react');
|
|
7
|
-
var
|
|
8
|
-
var useDerivedStateFromProps = require('@elliemae/ds-utilities/hooks/useDerivedStateFromProps');
|
|
15
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
9
16
|
|
|
10
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
18
|
|
|
12
19
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
13
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
-
var useDerivedStateFromProps__default = /*#__PURE__*/_interopDefaultLegacy(useDerivedStateFromProps);
|
|
15
21
|
|
|
16
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; }
|
|
17
23
|
|
|
18
|
-
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[
|
|
19
|
-
function useCheckableGroup({
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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; }
|
|
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);
|
|
26
33
|
|
|
27
|
-
const handleCheck = ({
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
34
|
+
const handleCheck = (_ref2, item) => {
|
|
35
|
+
let {
|
|
36
|
+
target: {
|
|
37
|
+
value
|
|
38
|
+
}
|
|
39
|
+
} = _ref2;
|
|
32
40
|
setActive(prevActive => {
|
|
33
|
-
const nextActive = multi ?
|
|
41
|
+
const nextActive = multi ? dsUtilities.addOrRemove(prevActive, value) : value;
|
|
34
42
|
onCheck(nextActive, item);
|
|
35
43
|
return nextActive;
|
|
36
44
|
});
|
|
37
45
|
};
|
|
38
46
|
|
|
39
|
-
return React__default[
|
|
47
|
+
return React__default["default"].Children.map(children, child => {
|
|
40
48
|
const {
|
|
41
49
|
props
|
|
42
50
|
} = child;
|
|
43
51
|
const checked = Array.isArray(active) ? active.indexOf(props.name) !== -1 : active === props.name;
|
|
44
52
|
return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, props), {}, {
|
|
45
53
|
checked,
|
|
46
|
-
onClick:
|
|
54
|
+
onClick: dsUtilities.runAll(handleCheck, props.onClick)
|
|
47
55
|
}));
|
|
48
56
|
});
|
|
49
57
|
}
|
|
50
58
|
|
|
51
|
-
function CheckableGroup({
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
function CheckableGroup(_ref3) {
|
|
60
|
+
let {
|
|
61
|
+
active = [],
|
|
62
|
+
multi = false,
|
|
63
|
+
// checkbox or radio
|
|
64
|
+
children
|
|
65
|
+
} = _ref3;
|
|
57
66
|
return useCheckableGroup({
|
|
58
67
|
active,
|
|
59
68
|
multi,
|
|
@@ -61,5 +70,5 @@ function CheckableGroup({
|
|
|
61
70
|
});
|
|
62
71
|
}
|
|
63
72
|
|
|
64
|
-
exports[
|
|
73
|
+
exports["default"] = CheckableGroup;
|
|
65
74
|
exports.useCheckableGroup = useCheckableGroup;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
3
4
|
var React = require('react');
|
|
4
5
|
var raf = require('raf');
|
|
5
6
|
|
|
@@ -7,16 +8,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
7
8
|
|
|
8
9
|
var raf__default = /*#__PURE__*/_interopDefaultLegacy(raf);
|
|
9
10
|
|
|
10
|
-
function DeferRenderAfterComputation({
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
function DeferRenderAfterComputation(_ref) {
|
|
12
|
+
let {
|
|
13
|
+
children,
|
|
14
|
+
resolve,
|
|
15
|
+
fallback,
|
|
16
|
+
timeout = 2000
|
|
17
|
+
} = _ref;
|
|
16
18
|
const [shouldRender, setShouldRender] = React.useState(false);
|
|
17
19
|
React.useEffect(() => {
|
|
18
20
|
// eslint-disable-next-line max-nested-callbacks
|
|
19
|
-
raf__default[
|
|
21
|
+
raf__default["default"](() => raf__default["default"](() => resolve().then(() => {
|
|
20
22
|
setShouldRender(true);
|
|
21
23
|
})));
|
|
22
24
|
}, []);
|
|
@@ -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,11 +18,10 @@ 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
|
|
|
22
|
-
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[
|
|
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; }
|
|
23
25
|
const FocusGridContext = /*#__PURE__*/React.createContext();
|
|
24
26
|
const {
|
|
25
27
|
Provider
|
|
@@ -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
|
-
const child = React__default[
|
|
67
|
-
const decoratedChild = /*#__PURE__*/React__default[
|
|
68
|
-
innerRef:
|
|
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)
|
|
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 => {
|
|
@@ -199,10 +206,10 @@ function FocusGridProvider({
|
|
|
199
206
|
const valueProvider = React.useMemo(() => ({
|
|
200
207
|
register
|
|
201
208
|
}), []);
|
|
202
|
-
return /*#__PURE__*/_jsx__default[
|
|
209
|
+
return /*#__PURE__*/_jsx__default["default"](Provider, {
|
|
203
210
|
value: valueProvider
|
|
204
211
|
}, void 0, decoratedChild);
|
|
205
212
|
}
|
|
206
213
|
|
|
207
214
|
exports.FocusGridContext = FocusGridContext;
|
|
208
|
-
exports[
|
|
215
|
+
exports["default"] = FocusGridProvider;
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
|
-
|
|
4
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
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');
|
|
5
13
|
var hotkeys = require('hotkeys-js');
|
|
6
14
|
|
|
7
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -11,19 +19,27 @@ var hotkeys__default = /*#__PURE__*/_interopDefaultLegacy(hotkeys);
|
|
|
11
19
|
|
|
12
20
|
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; }
|
|
13
21
|
|
|
14
|
-
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[
|
|
22
|
+
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; }
|
|
15
23
|
const defaultOptions = {
|
|
16
24
|
orientation: 'vertical'
|
|
17
25
|
};
|
|
18
26
|
|
|
19
|
-
const safeCallAction = (e, fun
|
|
20
|
-
if (
|
|
27
|
+
const safeCallAction = function (e, fun) {
|
|
28
|
+
if (dsUtilities.isFunction(fun)) {
|
|
21
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
|
+
|
|
22
35
|
fun(...args);
|
|
23
36
|
}
|
|
24
37
|
};
|
|
25
38
|
|
|
26
|
-
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;
|
|
27
43
|
Object.keys(hotKeys).forEach(hotkey => {
|
|
28
44
|
const {
|
|
29
45
|
options,
|
|
@@ -32,30 +48,31 @@ const registerHotkeys = (hotKeys = {}, params, getContainer = () => document) =>
|
|
|
32
48
|
} = hotKeys[hotkey];
|
|
33
49
|
|
|
34
50
|
const parameterizedHandler = e => {
|
|
35
|
-
const handlerParams =
|
|
51
|
+
const handlerParams = dsUtilities.isFunction(params) ? params() : params;
|
|
36
52
|
if (!allowDocumentHandler && handlerParams.item !== document.activeElement) return;
|
|
37
53
|
e.preventDefault();
|
|
38
54
|
handler(handlerParams);
|
|
39
55
|
};
|
|
40
56
|
|
|
41
|
-
hotkeys__default[
|
|
57
|
+
hotkeys__default["default"](hotkey, _objectSpread({
|
|
42
58
|
element: getContainer()
|
|
43
59
|
}, options), parameterizedHandler);
|
|
44
60
|
});
|
|
45
61
|
};
|
|
46
62
|
|
|
47
|
-
const unregisterHotKeys = (
|
|
63
|
+
const unregisterHotKeys = function () {
|
|
64
|
+
let hotKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
48
65
|
Object.keys(hotKeys).forEach(hotkey => {
|
|
49
|
-
hotkeys__default[
|
|
66
|
+
hotkeys__default["default"].unbind(hotkey);
|
|
50
67
|
});
|
|
51
68
|
};
|
|
52
69
|
|
|
53
70
|
const noop = () => null;
|
|
54
71
|
|
|
55
72
|
class FocusGroup {
|
|
56
|
-
constructor(
|
|
57
|
-
|
|
58
|
-
|
|
73
|
+
constructor() {
|
|
74
|
+
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
75
|
+
this.items = [];
|
|
59
76
|
this.options = _objectSpread(_objectSpread({}, defaultOptions), options);
|
|
60
77
|
const {
|
|
61
78
|
orientation
|
|
@@ -97,7 +114,7 @@ class FocusGroup {
|
|
|
97
114
|
const item = this.currentFocusedItem;
|
|
98
115
|
const {
|
|
99
116
|
index
|
|
100
|
-
} =
|
|
117
|
+
} = dsUtilities.get(item, ['dataset'], {});
|
|
101
118
|
return {
|
|
102
119
|
item,
|
|
103
120
|
index
|
|
@@ -127,7 +144,8 @@ class FocusGroup {
|
|
|
127
144
|
return actions.map(action => typeof action === 'string' ? safeCallAction(e, this.mapActions[action]) : safeCallAction(e, action));
|
|
128
145
|
}
|
|
129
146
|
|
|
130
|
-
register(node
|
|
147
|
+
register(node) {
|
|
148
|
+
let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
131
149
|
const afterIndex = this.items.findIndex(item => item.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_PRECEDING);
|
|
132
150
|
node.specialOnFocus = props.onFocus || noop;
|
|
133
151
|
node.specialOnBlur = props.onBlur || noop;
|
|
@@ -6,6 +6,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
6
6
|
|
|
7
7
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
8
8
|
|
|
9
|
-
var FocusGroupContext = /*#__PURE__*/React__default[
|
|
9
|
+
var FocusGroupContext = /*#__PURE__*/React__default["default"].createContext();
|
|
10
10
|
|
|
11
11
|
module.exports = FocusGroupContext;
|