@dhis2-ui/transfer 10.16.3-alpha.1 → 10.16.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/build/cjs/__e2e__/add_remove-highlighted-options.e2e.stories.js +20 -29
- package/build/cjs/__e2e__/common/stateful-decorator.js +20 -28
- package/build/cjs/__e2e__/disabled-transfer-buttons.e2e.stories.js +49 -70
- package/build/cjs/__e2e__/disabled-transfer-options.e2e.stories.js +11 -14
- package/build/cjs/__e2e__/display-order.e2e.stories.js +19 -28
- package/build/cjs/__e2e__/filter-options-list.e2e.stories.js +72 -96
- package/build/cjs/__e2e__/highlight-range-of-options.e2e.stories.js +33 -48
- package/build/cjs/__e2e__/notify_at_end_of_list.e2e.stories.js +47 -67
- package/build/cjs/__e2e__/reorder-with-buttons.e2e.stories.js +15 -24
- package/build/cjs/__e2e__/set_unset-highlighted-option.e2e.stories.js +20 -29
- package/build/cjs/__e2e__/transferring-items.e2e.stories.js +19 -28
- package/build/cjs/__tests__/helper/use-highlighted-option/toggle-add.test.js +3 -6
- package/build/cjs/__tests__/helper/use-highlighted-option/toggle-range.test.js +24 -48
- package/build/cjs/__tests__/transfer.test.js +10 -18
- package/build/cjs/actions.js +10 -13
- package/build/cjs/add-all.js +14 -17
- package/build/cjs/add-individual.js +13 -16
- package/build/cjs/common/get-mode-by-modifier-key.js +6 -7
- package/build/cjs/container.js +12 -15
- package/build/cjs/end-intersection-detector.js +15 -21
- package/build/cjs/features/disabled-transfer-options/index.js +2 -4
- package/build/cjs/features/display-order/index.js +26 -47
- package/build/cjs/features/filter-options-list/index.js +3 -6
- package/build/cjs/features/highlight-range-of-options/index.js +5 -10
- package/build/cjs/features/notify_at_end_of_list/index.js +2 -4
- package/build/cjs/features/set_unset-highlighted-option/index.js +3 -6
- package/build/cjs/features/transferring-items/index.js +41 -75
- package/build/cjs/filter.js +24 -27
- package/build/cjs/icons.js +147 -171
- package/build/cjs/left-footer.js +10 -13
- package/build/cjs/left-header.js +10 -13
- package/build/cjs/left-side.js +16 -19
- package/build/cjs/locales/index.js +6 -1
- package/build/cjs/options-container.js +15 -17
- package/build/cjs/remove-all.js +13 -16
- package/build/cjs/remove-individual.js +13 -16
- package/build/cjs/reordering-actions.js +75 -82
- package/build/cjs/right-footer.js +10 -13
- package/build/cjs/right-header.js +10 -13
- package/build/cjs/right-side.js +16 -19
- package/build/cjs/transfer/add-all-selectable-source-options.js +9 -13
- package/build/cjs/transfer/add-individual-source-options.js +9 -10
- package/build/cjs/transfer/create-double-click-handlers.js +13 -16
- package/build/cjs/transfer/default-filter-callback.js +3 -6
- package/build/cjs/transfer/get-highlighted-picked-indices.js +4 -5
- package/build/cjs/transfer/is-reorder-down-disabled.js +5 -6
- package/build/cjs/transfer/is-reorder-up-disabled.js +5 -6
- package/build/cjs/transfer/move-highlighted-picked-option-down.js +5 -6
- package/build/cjs/transfer/move-highlighted-picked-option-to-bottom.js +5 -6
- package/build/cjs/transfer/move-highlighted-picked-option-to-top.js +5 -6
- package/build/cjs/transfer/move-highlighted-picked-option-up.js +5 -6
- package/build/cjs/transfer/remove-all-picked-options.js +4 -5
- package/build/cjs/transfer/remove-individual-picked-options.js +8 -9
- package/build/cjs/transfer/use-filter.js +7 -8
- package/build/cjs/transfer/use-highlighted-options/create-toggle-highlighted-option.js +39 -43
- package/build/cjs/transfer/use-highlighted-options/toggle-add.js +6 -7
- package/build/cjs/transfer/use-highlighted-options/toggle-range.js +11 -15
- package/build/cjs/transfer/use-highlighted-options/toggle-replace.js +5 -6
- package/build/cjs/transfer/use-highlighted-options.js +5 -6
- package/build/cjs/transfer/use-options-key-monitor.js +6 -7
- package/build/cjs/transfer-option.js +11 -13
- package/build/cjs/transfer.js +65 -85
- package/build/cjs/transfer.prod.stories.js +99 -146
- package/build/es/__e2e__/add_remove-highlighted-options.e2e.stories.js +20 -29
- package/build/es/__e2e__/common/stateful-decorator.js +19 -26
- package/build/es/__e2e__/disabled-transfer-buttons.e2e.stories.js +49 -70
- package/build/es/__e2e__/disabled-transfer-options.e2e.stories.js +11 -14
- package/build/es/__e2e__/display-order.e2e.stories.js +19 -28
- package/build/es/__e2e__/filter-options-list.e2e.stories.js +72 -96
- package/build/es/__e2e__/highlight-range-of-options.e2e.stories.js +33 -48
- package/build/es/__e2e__/notify_at_end_of_list.e2e.stories.js +46 -65
- package/build/es/__e2e__/reorder-with-buttons.e2e.stories.js +15 -24
- package/build/es/__e2e__/set_unset-highlighted-option.e2e.stories.js +20 -29
- package/build/es/__e2e__/transferring-items.e2e.stories.js +19 -28
- package/build/es/__tests__/helper/use-highlighted-option/toggle-add.test.js +3 -6
- package/build/es/__tests__/helper/use-highlighted-option/toggle-range.test.js +24 -48
- package/build/es/__tests__/transfer.test.js +10 -18
- package/build/es/actions.js +10 -13
- package/build/es/add-all.js +14 -17
- package/build/es/add-individual.js +13 -16
- package/build/es/common/get-mode-by-modifier-key.js +6 -7
- package/build/es/container.js +12 -15
- package/build/es/end-intersection-detector.js +15 -21
- package/build/es/features/disabled-transfer-options/index.js +2 -4
- package/build/es/features/display-order/index.js +26 -47
- package/build/es/features/filter-options-list/index.js +3 -6
- package/build/es/features/highlight-range-of-options/index.js +5 -10
- package/build/es/features/notify_at_end_of_list/index.js +2 -4
- package/build/es/features/set_unset-highlighted-option/index.js +3 -6
- package/build/es/features/transferring-items/index.js +41 -75
- package/build/es/filter.js +24 -27
- package/build/es/icons.js +147 -171
- package/build/es/left-footer.js +10 -13
- package/build/es/left-header.js +10 -13
- package/build/es/left-side.js +16 -19
- package/build/es/locales/index.js +6 -1
- package/build/es/options-container.js +14 -15
- package/build/es/remove-all.js +13 -16
- package/build/es/remove-individual.js +13 -16
- package/build/es/reordering-actions.js +75 -82
- package/build/es/right-footer.js +10 -13
- package/build/es/right-header.js +10 -13
- package/build/es/right-side.js +16 -19
- package/build/es/transfer/add-all-selectable-source-options.js +9 -13
- package/build/es/transfer/add-individual-source-options.js +9 -10
- package/build/es/transfer/create-double-click-handlers.js +13 -16
- package/build/es/transfer/default-filter-callback.js +3 -6
- package/build/es/transfer/get-highlighted-picked-indices.js +4 -5
- package/build/es/transfer/is-reorder-down-disabled.js +5 -6
- package/build/es/transfer/is-reorder-up-disabled.js +5 -6
- package/build/es/transfer/move-highlighted-picked-option-down.js +5 -6
- package/build/es/transfer/move-highlighted-picked-option-to-bottom.js +5 -6
- package/build/es/transfer/move-highlighted-picked-option-to-top.js +5 -6
- package/build/es/transfer/move-highlighted-picked-option-up.js +5 -6
- package/build/es/transfer/remove-all-picked-options.js +4 -5
- package/build/es/transfer/remove-individual-picked-options.js +8 -9
- package/build/es/transfer/use-filter.js +7 -8
- package/build/es/transfer/use-highlighted-options/create-toggle-highlighted-option.js +39 -43
- package/build/es/transfer/use-highlighted-options/toggle-add.js +6 -7
- package/build/es/transfer/use-highlighted-options/toggle-range.js +11 -15
- package/build/es/transfer/use-highlighted-options/toggle-replace.js +5 -6
- package/build/es/transfer/use-highlighted-options.js +5 -6
- package/build/es/transfer/use-options-key-monitor.js +6 -7
- package/build/es/transfer-option.js +10 -11
- package/build/es/transfer.js +64 -83
- package/build/es/transfer.prod.stories.js +98 -144
- package/package.json +8 -8
- package/src/locales/index.js +6 -1
|
@@ -15,96 +15,89 @@ var _index = _interopRequireDefault(require("./locales/index.js"));
|
|
|
15
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
16
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
17
17
|
const filterActiveTooltip = _index.default.t('Reordering not allowed when filtering list');
|
|
18
|
-
const ReorderingActions =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
} = _ref;
|
|
18
|
+
const ReorderingActions = ({
|
|
19
|
+
dataTest,
|
|
20
|
+
disabledDown,
|
|
21
|
+
disabledUp,
|
|
22
|
+
filterActive,
|
|
23
|
+
onChangeUp,
|
|
24
|
+
onChangeDown,
|
|
25
|
+
onChangeToTop,
|
|
26
|
+
onChangeToBottom
|
|
27
|
+
}) => {
|
|
29
28
|
const moveToTopLabel = _index.default.t('Move selected items to top');
|
|
30
29
|
const moveUpLabel = _index.default.t('Move selected items up');
|
|
31
30
|
const moveDownLabel = _index.default.t('Move selected items down');
|
|
32
31
|
const moveToBottomLabel = _index.default.t('Move selected items to bottom');
|
|
33
|
-
const renderButtons =
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]
|
|
86
|
-
}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-inline-start:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;gap:${_uiConstants.spacers.dp4};padding-top:${_uiConstants.spacers.dp8};}`, `div.__jsx-style-dynamic-selector:last-child{padding-bottom:${_uiConstants.spacers.dp8};}`]));
|
|
87
|
-
};
|
|
32
|
+
const renderButtons = (tooltipHandlers = {}) => /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
33
|
+
"data-test": dataTest
|
|
34
|
+
}, tooltipHandlers, {
|
|
35
|
+
className: _style.default.dynamic([["3663884558", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]]]) + " " + (tooltipHandlers && tooltipHandlers.className != null && tooltipHandlers.className || "")
|
|
36
|
+
}), /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
37
|
+
small: true,
|
|
38
|
+
secondary: true,
|
|
39
|
+
disabled: disabledUp,
|
|
40
|
+
onClick: () => !disabledUp && onChangeToTop(),
|
|
41
|
+
dataTest: `${dataTest}-buttonmovetotop`,
|
|
42
|
+
"aria-label": moveToTopLabel,
|
|
43
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveToTop, {
|
|
44
|
+
dataTest: `${dataTest}-iconmovetotop`,
|
|
45
|
+
disabled: disabledUp
|
|
46
|
+
})
|
|
47
|
+
}), /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
48
|
+
small: true,
|
|
49
|
+
secondary: true,
|
|
50
|
+
disabled: disabledUp,
|
|
51
|
+
onClick: () => !disabledUp && onChangeUp(),
|
|
52
|
+
dataTest: `${dataTest}-buttonmoveup`,
|
|
53
|
+
"aria-label": moveUpLabel,
|
|
54
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveUp, {
|
|
55
|
+
dataTest: `${dataTest}-iconmoveup`,
|
|
56
|
+
disabled: disabledUp
|
|
57
|
+
})
|
|
58
|
+
}), /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
59
|
+
small: true,
|
|
60
|
+
secondary: true,
|
|
61
|
+
disabled: disabledDown,
|
|
62
|
+
onClick: () => !disabledDown && onChangeDown(),
|
|
63
|
+
dataTest: `${dataTest}-buttonmovedown`,
|
|
64
|
+
"aria-label": moveDownLabel,
|
|
65
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveDown, {
|
|
66
|
+
dataTest: `${dataTest}-iconmovedown`,
|
|
67
|
+
disabled: disabledDown
|
|
68
|
+
})
|
|
69
|
+
}), /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
70
|
+
small: true,
|
|
71
|
+
secondary: true,
|
|
72
|
+
disabled: disabledDown,
|
|
73
|
+
onClick: () => !disabledDown && onChangeToBottom(),
|
|
74
|
+
dataTest: `${dataTest}-buttonmovetobottom`,
|
|
75
|
+
"aria-label": moveToBottomLabel,
|
|
76
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveToBottom, {
|
|
77
|
+
dataTest: `${dataTest}-iconmovetobottom`,
|
|
78
|
+
disabled: disabledDown
|
|
79
|
+
})
|
|
80
|
+
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
81
|
+
id: "3663884558",
|
|
82
|
+
dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]
|
|
83
|
+
}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-inline-start:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;gap:${_uiConstants.spacers.dp4};padding-top:${_uiConstants.spacers.dp8};}`, `div.__jsx-style-dynamic-selector:last-child{padding-bottom:${_uiConstants.spacers.dp8};}`]));
|
|
88
84
|
if (filterActive) {
|
|
89
85
|
return /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
|
|
90
86
|
openDelay: 500,
|
|
91
87
|
content: filterActiveTooltip
|
|
92
|
-
},
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
onBlur
|
|
106
|
-
});
|
|
107
|
-
});
|
|
88
|
+
}, ({
|
|
89
|
+
onMouseOver,
|
|
90
|
+
onMouseOut,
|
|
91
|
+
onFocus,
|
|
92
|
+
onBlur,
|
|
93
|
+
ref
|
|
94
|
+
}) => renderButtons({
|
|
95
|
+
ref,
|
|
96
|
+
onMouseOver,
|
|
97
|
+
onMouseOut,
|
|
98
|
+
onFocus,
|
|
99
|
+
onBlur
|
|
100
|
+
}));
|
|
108
101
|
}
|
|
109
102
|
return renderButtons();
|
|
110
103
|
};
|
|
@@ -9,19 +9,16 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
const RightFooter =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
dynamic: [_uiConstants.colors.grey400, _uiConstants.spacers.dp8]
|
|
23
|
-
}, [`div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ${_uiConstants.colors.grey400};padding:0 ${_uiConstants.spacers.dp8};}`]));
|
|
24
|
-
};
|
|
12
|
+
const RightFooter = ({
|
|
13
|
+
children,
|
|
14
|
+
dataTest
|
|
15
|
+
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
16
|
+
"data-test": dataTest,
|
|
17
|
+
className: _style.default.dynamic([["1797409102", [_uiConstants.colors.grey400, _uiConstants.spacers.dp8]]])
|
|
18
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
19
|
+
id: "1797409102",
|
|
20
|
+
dynamic: [_uiConstants.colors.grey400, _uiConstants.spacers.dp8]
|
|
21
|
+
}, [`div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ${_uiConstants.colors.grey400};padding:0 ${_uiConstants.spacers.dp8};}`]));
|
|
25
22
|
exports.RightFooter = RightFooter;
|
|
26
23
|
RightFooter.propTypes = {
|
|
27
24
|
children: _propTypes.default.node,
|
|
@@ -9,19 +9,16 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
const RightHeader =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
dynamic: [_uiConstants.colors.grey400, _uiConstants.spacers.dp8]
|
|
23
|
-
}, [`div.__jsx-style-dynamic-selector{border-bottom:1px solid ${_uiConstants.colors.grey400};-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ${_uiConstants.spacers.dp8};}`]));
|
|
24
|
-
};
|
|
12
|
+
const RightHeader = ({
|
|
13
|
+
children,
|
|
14
|
+
dataTest
|
|
15
|
+
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
16
|
+
"data-test": dataTest,
|
|
17
|
+
className: _style.default.dynamic([["4225731772", [_uiConstants.colors.grey400, _uiConstants.spacers.dp8]]])
|
|
18
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
19
|
+
id: "4225731772",
|
|
20
|
+
dynamic: [_uiConstants.colors.grey400, _uiConstants.spacers.dp8]
|
|
21
|
+
}, [`div.__jsx-style-dynamic-selector{border-bottom:1px solid ${_uiConstants.colors.grey400};-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ${_uiConstants.spacers.dp8};}`]));
|
|
25
22
|
exports.RightHeader = RightHeader;
|
|
26
23
|
RightHeader.propTypes = {
|
|
27
24
|
children: _propTypes.default.node,
|
package/build/cjs/right-side.js
CHANGED
|
@@ -9,25 +9,22 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
const RightSide =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, width]
|
|
29
|
-
}, [`div.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.white};border:1px solid ${_uiConstants.colors.grey400};border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:100%;width:${width};}`]));
|
|
30
|
-
};
|
|
12
|
+
const RightSide = ({
|
|
13
|
+
children,
|
|
14
|
+
dataTest,
|
|
15
|
+
width
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
17
|
+
"data-test": dataTest,
|
|
18
|
+
className: _style.default.dynamic([["2265398144", [_uiConstants.colors.white, _uiConstants.colors.grey400, width]]])
|
|
19
|
+
}, children,
|
|
20
|
+
/**
|
|
21
|
+
* Flex basis 0px to make sure right and left side
|
|
22
|
+
* always have the same width
|
|
23
|
+
*/
|
|
24
|
+
'', /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
25
|
+
id: "2265398144",
|
|
26
|
+
dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, width]
|
|
27
|
+
}, [`div.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.white};border:1px solid ${_uiConstants.colors.grey400};border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:100%;width:${width};}`]));
|
|
31
28
|
exports.RightSide = RightSide;
|
|
32
29
|
RightSide.propTypes = {
|
|
33
30
|
width: _propTypes.default.string.isRequired,
|
|
@@ -12,19 +12,15 @@ exports.addAllSelectableSourceOptions = void 0;
|
|
|
12
12
|
* @param {Function} arg.setHighlightedSourceOptions
|
|
13
13
|
* @returns {void}
|
|
14
14
|
*/
|
|
15
|
-
const addAllSelectableSourceOptions =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
disabled
|
|
25
|
-
} = _ref2;
|
|
26
|
-
return !disabled;
|
|
27
|
-
});
|
|
15
|
+
const addAllSelectableSourceOptions = ({
|
|
16
|
+
sourceOptions,
|
|
17
|
+
onChange,
|
|
18
|
+
selected,
|
|
19
|
+
setHighlightedSourceOptions
|
|
20
|
+
}) => {
|
|
21
|
+
const enabledSourceOptions = sourceOptions.filter(({
|
|
22
|
+
disabled
|
|
23
|
+
}) => !disabled);
|
|
28
24
|
const newSelected = enabledSourceOptions.reduce((accumulatedSelected, enabledSourceOption) => [...accumulatedSelected, enabledSourceOption.value], selected);
|
|
29
25
|
setHighlightedSourceOptions([]);
|
|
30
26
|
|
|
@@ -14,16 +14,15 @@ exports.addIndividualSourceOptions = void 0;
|
|
|
14
14
|
* @param {Function} args.setHighlightedSourceOptions
|
|
15
15
|
* @returns void
|
|
16
16
|
*/
|
|
17
|
-
const addIndividualSourceOptions =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
} = _ref;
|
|
17
|
+
const addIndividualSourceOptions = ({
|
|
18
|
+
filterable,
|
|
19
|
+
sourceOptions,
|
|
20
|
+
highlightedSourceOptions,
|
|
21
|
+
maxSelections,
|
|
22
|
+
onChange,
|
|
23
|
+
selected,
|
|
24
|
+
setHighlightedSourceOptions
|
|
25
|
+
}) => {
|
|
27
26
|
/**
|
|
28
27
|
* Creates a subset of the highlighted options to reflect a changed
|
|
29
28
|
* filter value in case previously highlighted options are now
|
|
@@ -13,28 +13,25 @@ exports.createDoubleClickHandlers = void 0;
|
|
|
13
13
|
* @param {Function} args.setHighlightedPickedOptions
|
|
14
14
|
* @returns void
|
|
15
15
|
*/
|
|
16
|
-
const createDoubleClickHandlers =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
value
|
|
27
|
-
} = _ref2;
|
|
16
|
+
const createDoubleClickHandlers = ({
|
|
17
|
+
maxSelections,
|
|
18
|
+
onChange,
|
|
19
|
+
selected,
|
|
20
|
+
setHighlightedPickedOptions,
|
|
21
|
+
setHighlightedSourceOptions
|
|
22
|
+
}) => {
|
|
23
|
+
const selectSingleOption = ({
|
|
24
|
+
value
|
|
25
|
+
}) => {
|
|
28
26
|
const newSelected = selected.includes(value) ? selected : [...selected, value];
|
|
29
27
|
setHighlightedSourceOptions([]);
|
|
30
28
|
onChange({
|
|
31
29
|
selected: newSelected.slice(-1 * maxSelections)
|
|
32
30
|
});
|
|
33
31
|
};
|
|
34
|
-
const deselectSingleOption =
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
} = _ref3;
|
|
32
|
+
const deselectSingleOption = ({
|
|
33
|
+
value
|
|
34
|
+
}) => {
|
|
38
35
|
const newSelected = selected.filter(curSelected => curSelected !== value);
|
|
39
36
|
setHighlightedPickedOptions([]);
|
|
40
37
|
onChange({
|
|
@@ -15,12 +15,9 @@ const defaultFilterCallback = (options, filter) => {
|
|
|
15
15
|
}
|
|
16
16
|
try {
|
|
17
17
|
const regex = new RegExp(filter, 'i');
|
|
18
|
-
return options.filter(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
} = _ref;
|
|
22
|
-
return label.match(regex);
|
|
23
|
-
});
|
|
18
|
+
return options.filter(({
|
|
19
|
+
label
|
|
20
|
+
}) => label.match(regex));
|
|
24
21
|
} catch {
|
|
25
22
|
console.warn('Invalid regex filter:', filter);
|
|
26
23
|
return options;
|
|
@@ -17,11 +17,10 @@ exports.getHighlightedPickedIndices = void 0;
|
|
|
17
17
|
* @param {string[]} args.highlightedPickedOptions
|
|
18
18
|
* @returns {number[]}
|
|
19
19
|
*/
|
|
20
|
-
const getHighlightedPickedIndices =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
20
|
+
const getHighlightedPickedIndices = ({
|
|
21
|
+
selected,
|
|
22
|
+
highlightedPickedOptions
|
|
23
|
+
}) => {
|
|
25
24
|
const highlightedSet = new Set(highlightedPickedOptions);
|
|
26
25
|
const indices = [];
|
|
27
26
|
selected.forEach((value, index) => {
|
|
@@ -12,12 +12,11 @@ var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js"
|
|
|
12
12
|
* @param {boolean} [args.filterActivePicked] reorder is disabled while a filter is applied to the picked side
|
|
13
13
|
* @returns {bool}
|
|
14
14
|
*/
|
|
15
|
-
const isReorderDownDisabled =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
} = _ref;
|
|
15
|
+
const isReorderDownDisabled = ({
|
|
16
|
+
highlightedPickedOptions,
|
|
17
|
+
selected,
|
|
18
|
+
filterActivePicked = false
|
|
19
|
+
}) => {
|
|
21
20
|
if (filterActivePicked) {
|
|
22
21
|
return true;
|
|
23
22
|
}
|
|
@@ -12,12 +12,11 @@ var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js"
|
|
|
12
12
|
* @param {boolean} [args.filterActivePicked] reorder is disabled while a filter is applied to the picked side
|
|
13
13
|
* @returns {bool}
|
|
14
14
|
*/
|
|
15
|
-
const isReorderUpDisabled =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
} = _ref;
|
|
15
|
+
const isReorderUpDisabled = ({
|
|
16
|
+
highlightedPickedOptions,
|
|
17
|
+
selected,
|
|
18
|
+
filterActivePicked = false
|
|
19
|
+
}) => {
|
|
21
20
|
if (filterActivePicked) {
|
|
22
21
|
return true;
|
|
23
22
|
}
|
|
@@ -17,12 +17,11 @@ var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js"
|
|
|
17
17
|
* @param {Function} args.onChange
|
|
18
18
|
* @returns {void}
|
|
19
19
|
*/
|
|
20
|
-
const moveHighlightedPickedOptionDown =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} = _ref;
|
|
20
|
+
const moveHighlightedPickedOptionDown = ({
|
|
21
|
+
selected,
|
|
22
|
+
highlightedPickedOptions,
|
|
23
|
+
onChange
|
|
24
|
+
}) => {
|
|
26
25
|
const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
|
|
27
26
|
selected,
|
|
28
27
|
highlightedPickedOptions
|
|
@@ -16,12 +16,11 @@ var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js"
|
|
|
16
16
|
* @param {Function} args.onChange
|
|
17
17
|
* @returns {void}
|
|
18
18
|
*/
|
|
19
|
-
const moveHighlightedPickedOptionToBottom =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
19
|
+
const moveHighlightedPickedOptionToBottom = ({
|
|
20
|
+
selected,
|
|
21
|
+
highlightedPickedOptions,
|
|
22
|
+
onChange
|
|
23
|
+
}) => {
|
|
25
24
|
const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
|
|
26
25
|
selected,
|
|
27
26
|
highlightedPickedOptions
|
|
@@ -16,12 +16,11 @@ var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js"
|
|
|
16
16
|
* @param {Function} args.onChange
|
|
17
17
|
* @returns {void}
|
|
18
18
|
*/
|
|
19
|
-
const moveHighlightedPickedOptionToTop =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
19
|
+
const moveHighlightedPickedOptionToTop = ({
|
|
20
|
+
selected,
|
|
21
|
+
highlightedPickedOptions,
|
|
22
|
+
onChange
|
|
23
|
+
}) => {
|
|
25
24
|
const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
|
|
26
25
|
selected,
|
|
27
26
|
highlightedPickedOptions
|
|
@@ -17,12 +17,11 @@ var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js"
|
|
|
17
17
|
* @param {Function} args.onChange
|
|
18
18
|
* @returns {void}
|
|
19
19
|
*/
|
|
20
|
-
const moveHighlightedPickedOptionUp =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} = _ref;
|
|
20
|
+
const moveHighlightedPickedOptionUp = ({
|
|
21
|
+
selected,
|
|
22
|
+
highlightedPickedOptions,
|
|
23
|
+
onChange
|
|
24
|
+
}) => {
|
|
26
25
|
const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
|
|
27
26
|
selected,
|
|
28
27
|
highlightedPickedOptions
|
|
@@ -10,11 +10,10 @@ exports.removeAllPickedOptions = void 0;
|
|
|
10
10
|
* @param {Function} args.onChange
|
|
11
11
|
* @returns {void}
|
|
12
12
|
*/
|
|
13
|
-
const removeAllPickedOptions =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
13
|
+
const removeAllPickedOptions = ({
|
|
14
|
+
setHighlightedPickedOptions,
|
|
15
|
+
onChange
|
|
16
|
+
}) => {
|
|
18
17
|
setHighlightedPickedOptions([]);
|
|
19
18
|
onChange({
|
|
20
19
|
selected: []
|
|
@@ -12,15 +12,14 @@ exports.removeIndividualPickedOptions = void 0;
|
|
|
12
12
|
* @param {Function} args.onChange
|
|
13
13
|
* @returns {void}
|
|
14
14
|
*/
|
|
15
|
-
const removeIndividualPickedOptions =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
15
|
+
const removeIndividualPickedOptions = ({
|
|
16
|
+
filterablePicked,
|
|
17
|
+
pickedOptions,
|
|
18
|
+
highlightedPickedOptions,
|
|
19
|
+
onChange,
|
|
20
|
+
selected,
|
|
21
|
+
setHighlightedPickedOptions
|
|
22
|
+
}) => {
|
|
24
23
|
/**
|
|
25
24
|
* Creates a subset of the highlighted options to reflect a changed
|
|
26
25
|
* filter value in case previously highlighted options are now
|
|
@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useFilter = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
const identity = value => value;
|
|
9
|
-
const useFilter =
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = _ref;
|
|
9
|
+
const useFilter = ({
|
|
10
|
+
initialSearchTerm,
|
|
11
|
+
onFilterChange,
|
|
12
|
+
externalSearchTerm,
|
|
13
|
+
filterable,
|
|
14
|
+
filterCallback
|
|
15
|
+
}) => {
|
|
17
16
|
const [internalFilter, setInternalFilter] = (0, _react.useState)(initialSearchTerm);
|
|
18
17
|
const filterValue = onFilterChange ? externalSearchTerm : internalFilter;
|
|
19
18
|
const filter = filterable ? filterCallback : identity;
|