@dhis2-ui/transfer 8.1.11 → 8.2.2
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.stories.e2e.js +30 -21
- package/build/cjs/__e2e__/common/stateful-decorator.js +26 -19
- package/build/cjs/__e2e__/disabled-transfer-buttons.stories.e2e.js +70 -49
- package/build/cjs/__e2e__/disabled-transfer-options.stories.e2e.js +14 -11
- package/build/cjs/__e2e__/display-order.stories.e2e.js +29 -20
- package/build/cjs/__e2e__/filter-options-list.stories.e2e.js +97 -73
- package/build/cjs/__e2e__/highlight-range-of-options.stories.e2e.js +49 -34
- package/build/cjs/__e2e__/loading_lists.stories.e2e.js +1 -1
- package/build/cjs/__e2e__/notify_at_end_of_list.stories.e2e.js +61 -43
- package/build/cjs/__e2e__/reorder-with-buttons.stories.e2e.js +19 -13
- package/build/cjs/__e2e__/set_unset-highlighted-option.stories.e2e.js +30 -21
- package/build/cjs/__e2e__/transferring-items.stories.e2e.js +29 -20
- package/build/cjs/__tests__/helper/use-highlighted-option/toggle-add.test.js +6 -3
- package/build/cjs/__tests__/helper/use-highlighted-option/toggle-range.test.js +48 -24
- package/build/cjs/__tests__/transfer.test.js +18 -10
- package/build/cjs/actions.js +13 -10
- package/build/cjs/add-all.js +17 -14
- package/build/cjs/add-individual.js +16 -13
- package/build/cjs/common/get-mode-by-modifier-key.js +7 -6
- package/build/cjs/common/modes.js +1 -1
- package/build/cjs/container.js +15 -12
- package/build/cjs/end-intersection-detector.js +21 -15
- package/build/cjs/features/disabled-transfer-options/index.js +4 -2
- package/build/cjs/features/display-order/index.js +47 -26
- package/build/cjs/features/filter-options-list/index.js +6 -3
- package/build/cjs/features/highlight-range-of-options/index.js +10 -5
- package/build/cjs/features/loading_lists/index.js +2 -2
- package/build/cjs/features/notify_at_end_of_list/index.js +5 -3
- package/build/cjs/features/set_unset-highlighted-option/index.js +6 -3
- package/build/cjs/features/transferring-items/index.js +77 -42
- package/build/cjs/filter.js +26 -23
- package/build/cjs/icons.js +134 -116
- package/build/cjs/left-footer.js +13 -10
- package/build/cjs/left-header.js +13 -10
- package/build/cjs/left-side.js +19 -16
- package/build/cjs/options-container.js +17 -16
- package/build/cjs/picked-options.js +22 -19
- package/build/cjs/remove-all.js +16 -13
- package/build/cjs/remove-individual.js +16 -13
- package/build/cjs/reordering-actions.js +34 -31
- package/build/cjs/right-footer.js +13 -10
- package/build/cjs/right-header.js +13 -10
- package/build/cjs/right-side.js +19 -16
- package/build/cjs/source-options.js +22 -19
- package/build/cjs/transfer/add-all-selectable-source-options.js +13 -9
- package/build/cjs/transfer/add-individual-source-options.js +11 -9
- package/build/cjs/transfer/create-double-click-handlers.js +17 -13
- package/build/cjs/transfer/default-filter-callback.js +6 -3
- package/build/cjs/transfer/is-reorder-down-disabled.js +10 -6
- package/build/cjs/transfer/is-reorder-up-disabled.js +10 -6
- package/build/cjs/transfer/move-highlighted-picked-option-down.js +6 -5
- package/build/cjs/transfer/move-highlighted-picked-option-up.js +6 -5
- package/build/cjs/transfer/remove-all-picked-options.js +5 -4
- package/build/cjs/transfer/remove-individual-picked-options.js +10 -8
- package/build/cjs/transfer/use-filter.js +8 -7
- package/build/cjs/transfer/use-highlighted-options/create-toggle-highlighted-option.js +45 -40
- package/build/cjs/transfer/use-highlighted-options/toggle-add.js +7 -6
- package/build/cjs/transfer/use-highlighted-options/toggle-range.js +16 -11
- package/build/cjs/transfer/use-highlighted-options/toggle-replace.js +7 -5
- package/build/cjs/transfer/use-highlighted-options.js +7 -5
- package/build/cjs/transfer-option.js +12 -11
- package/build/cjs/transfer.js +86 -72
- package/build/cjs/transfer.stories.js +127 -131
- package/build/es/__e2e__/add_remove-highlighted-options.stories.e2e.js +29 -20
- package/build/es/__e2e__/common/stateful-decorator.js +26 -19
- package/build/es/__e2e__/disabled-transfer-buttons.stories.e2e.js +69 -48
- package/build/es/__e2e__/disabled-transfer-options.stories.e2e.js +13 -10
- package/build/es/__e2e__/display-order.stories.e2e.js +28 -19
- package/build/es/__e2e__/filter-options-list.stories.e2e.js +96 -72
- package/build/es/__e2e__/highlight-range-of-options.stories.e2e.js +48 -33
- package/build/es/__e2e__/notify_at_end_of_list.stories.e2e.js +60 -42
- package/build/es/__e2e__/reorder-with-buttons.stories.e2e.js +18 -12
- package/build/es/__e2e__/set_unset-highlighted-option.stories.e2e.js +29 -20
- package/build/es/__e2e__/transferring-items.stories.e2e.js +28 -19
- package/build/es/__tests__/helper/use-highlighted-option/toggle-add.test.js +6 -3
- package/build/es/__tests__/helper/use-highlighted-option/toggle-range.test.js +48 -24
- package/build/es/__tests__/transfer.test.js +18 -10
- package/build/es/actions.js +13 -10
- package/build/es/add-all.js +17 -14
- package/build/es/add-individual.js +16 -13
- package/build/es/common/get-mode-by-modifier-key.js +7 -6
- package/build/es/container.js +15 -12
- package/build/es/end-intersection-detector.js +21 -15
- package/build/es/features/disabled-transfer-options/index.js +4 -2
- package/build/es/features/display-order/index.js +47 -26
- package/build/es/features/filter-options-list/index.js +6 -3
- package/build/es/features/highlight-range-of-options/index.js +10 -5
- package/build/es/features/loading_lists/index.js +2 -2
- package/build/es/features/notify_at_end_of_list/index.js +5 -3
- package/build/es/features/set_unset-highlighted-option/index.js +6 -3
- package/build/es/features/transferring-items/index.js +77 -42
- package/build/es/filter.js +26 -23
- package/build/es/icons.js +133 -115
- package/build/es/left-footer.js +13 -10
- package/build/es/left-header.js +13 -10
- package/build/es/left-side.js +19 -16
- package/build/es/options-container.js +17 -16
- package/build/es/picked-options.js +22 -19
- package/build/es/remove-all.js +16 -13
- package/build/es/remove-individual.js +16 -13
- package/build/es/reordering-actions.js +34 -31
- package/build/es/right-footer.js +13 -10
- package/build/es/right-header.js +13 -10
- package/build/es/right-side.js +19 -16
- package/build/es/source-options.js +22 -19
- package/build/es/transfer/add-all-selectable-source-options.js +13 -9
- package/build/es/transfer/add-individual-source-options.js +11 -9
- package/build/es/transfer/create-double-click-handlers.js +17 -13
- package/build/es/transfer/default-filter-callback.js +6 -3
- package/build/es/transfer/is-reorder-down-disabled.js +10 -6
- package/build/es/transfer/is-reorder-up-disabled.js +10 -6
- package/build/es/transfer/move-highlighted-picked-option-down.js +6 -5
- package/build/es/transfer/move-highlighted-picked-option-up.js +6 -5
- package/build/es/transfer/remove-all-picked-options.js +5 -4
- package/build/es/transfer/remove-individual-picked-options.js +10 -8
- package/build/es/transfer/use-filter.js +8 -7
- package/build/es/transfer/use-highlighted-options/create-toggle-highlighted-option.js +45 -40
- package/build/es/transfer/use-highlighted-options/toggle-add.js +7 -6
- package/build/es/transfer/use-highlighted-options/toggle-range.js +16 -11
- package/build/es/transfer/use-highlighted-options/toggle-replace.js +7 -5
- package/build/es/transfer/use-highlighted-options.js +7 -5
- package/build/es/transfer-option.js +12 -11
- package/build/es/transfer.js +86 -72
- package/build/es/transfer.stories.js +126 -130
- package/package.json +7 -7
package/build/cjs/left-side.js
CHANGED
|
@@ -15,22 +15,25 @@ var _index = require("./common/index.js");
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const LeftSide =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
18
|
+
const LeftSide = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
children,
|
|
21
|
+
dataTest,
|
|
22
|
+
width
|
|
23
|
+
} = _ref;
|
|
24
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
25
|
+
"data-test": dataTest,
|
|
26
|
+
className: _style.default.dynamic([["4143353612", [_index.backgroundColor, _index.borderRadius, _index.borderColor, width]]])
|
|
27
|
+
}, children,
|
|
28
|
+
/**
|
|
29
|
+
* Flex basis 0px to make sure right and left side
|
|
30
|
+
* always have the same width
|
|
31
|
+
*/
|
|
32
|
+
'', /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
33
|
+
id: "4143353612",
|
|
34
|
+
dynamic: [_index.backgroundColor, _index.borderRadius, _index.borderColor, width]
|
|
35
|
+
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:".concat(backgroundColor, ";border-radius:").concat(borderRadius, ";border:1px solid ").concat(borderColor, ";min-height:240px;max-width:100%;width:").concat(width, ";}")]));
|
|
36
|
+
};
|
|
34
37
|
|
|
35
38
|
exports.LeftSide = LeftSide;
|
|
36
39
|
LeftSide.propTypes = {
|
|
@@ -25,19 +25,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
25
25
|
|
|
26
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
27
|
|
|
28
|
-
const OptionsContainer =
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
const OptionsContainer = _ref => {
|
|
29
|
+
let {
|
|
30
|
+
dataTest,
|
|
31
|
+
emptyComponent,
|
|
32
|
+
onEndReached,
|
|
33
|
+
getOptionClickHandlers,
|
|
34
|
+
highlightedOptions,
|
|
35
|
+
loading,
|
|
36
|
+
renderOption,
|
|
37
|
+
options,
|
|
38
|
+
selected,
|
|
39
|
+
selectionHandler,
|
|
40
|
+
toggleHighlightedOption
|
|
41
|
+
} = _ref;
|
|
41
42
|
const optionsRef = (0, _react.useRef)(null);
|
|
42
43
|
const wrapperRef = (0, _react.useRef)(null);
|
|
43
44
|
const resizeCounter = (0, _useResizeCounter.useResizeCounter)(wrapperRef.current);
|
|
@@ -62,14 +63,14 @@ const OptionsContainer = ({
|
|
|
62
63
|
selected
|
|
63
64
|
}));
|
|
64
65
|
}), onEndReached && /*#__PURE__*/_react.default.createElement(_endIntersectionDetector.EndIntersectionDetector, {
|
|
65
|
-
dataTest:
|
|
66
|
-
key:
|
|
66
|
+
dataTest: "".concat(dataTest, "-endintersectiondetector"),
|
|
67
|
+
key: "key-".concat(resizeCounter),
|
|
67
68
|
rootRef: optionsRef,
|
|
68
69
|
onEndReached: onEndReached
|
|
69
70
|
}))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
70
71
|
id: "889751462",
|
|
71
72
|
dynamic: [_uiConstants.spacers.dp4]
|
|
72
|
-
}, [
|
|
73
|
+
}, [".optionsContainer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(_uiConstants.spacers.dp4, " 0;position:relative;overflow:hidden;}"), ".container.__jsx-style-dynamic-selector{overflow-y:auto;height:100%;}", ".loading.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:2;top:0;left:0;}", ".content-container.__jsx-style-dynamic-selector{z-index:1;position:relative;}", ".loading.__jsx-style-dynamic-selector+.container.__jsx-style-dynamic-selector .content-container.__jsx-style-dynamic-selector{-webkit-filter:blur(2px);filter:blur(2px);}"]));
|
|
73
74
|
};
|
|
74
75
|
|
|
75
76
|
exports.OptionsContainer = OptionsContainer;
|
|
@@ -17,25 +17,28 @@ var _endIntersectionDetector = require("./end-intersection-detector.js");
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
const PickedOptions =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
const PickedOptions = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
children,
|
|
23
|
+
dataTest,
|
|
24
|
+
selectedEmptyComponent,
|
|
25
|
+
pickedOptionsRef,
|
|
26
|
+
onPickedEndReached
|
|
27
|
+
} = _ref;
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
29
|
+
"data-test": dataTest,
|
|
30
|
+
ref: pickedOptionsRef,
|
|
31
|
+
className: _style.default.dynamic([["392419471", [_uiConstants.spacers.dp4]]]) + " " + "container"
|
|
32
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
+
className: _style.default.dynamic([["392419471", [_uiConstants.spacers.dp4]]]) + " " + "content-container"
|
|
34
|
+
}, !_react.default.Children.count(children) && selectedEmptyComponent, children, onPickedEndReached && /*#__PURE__*/_react.default.createElement(_endIntersectionDetector.EndIntersectionDetector, {
|
|
35
|
+
rootRef: pickedOptionsRef,
|
|
36
|
+
onEndReached: onPickedEndReached
|
|
37
|
+
})), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
38
|
+
id: "392419471",
|
|
39
|
+
dynamic: [_uiConstants.spacers.dp4]
|
|
40
|
+
}, [".container.__jsx-style-dynamic-selector{padding:".concat(_uiConstants.spacers.dp4, " 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}"), ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
|
|
41
|
+
};
|
|
39
42
|
|
|
40
43
|
exports.PickedOptions = PickedOptions;
|
|
41
44
|
PickedOptions.propTypes = {
|
package/build/cjs/remove-all.js
CHANGED
|
@@ -15,20 +15,23 @@ var _icons = require("./icons.js");
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const RemoveAll =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.IconRemoveAll, {
|
|
18
|
+
const RemoveAll = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
label,
|
|
21
|
+
dataTest,
|
|
22
|
+
disabled,
|
|
23
|
+
onClick
|
|
24
|
+
} = _ref;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
26
|
+
dataTest: dataTest,
|
|
28
27
|
disabled: disabled,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
onClick: onClick,
|
|
29
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconRemoveAll, {
|
|
30
|
+
disabled: disabled,
|
|
31
|
+
dataTest: "".concat(dataTest, "-iconremoveall")
|
|
32
|
+
})
|
|
33
|
+
}, label);
|
|
34
|
+
};
|
|
32
35
|
|
|
33
36
|
exports.RemoveAll = RemoveAll;
|
|
34
37
|
RemoveAll.propTypes = {
|
|
@@ -15,20 +15,23 @@ var _icons = require("./icons.js");
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const RemoveIndividual =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.IconRemoveIndividual, {
|
|
18
|
+
const RemoveIndividual = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
label,
|
|
21
|
+
dataTest,
|
|
22
|
+
disabled,
|
|
23
|
+
onClick
|
|
24
|
+
} = _ref;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
26
|
+
dataTest: dataTest,
|
|
28
27
|
disabled: disabled,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
onClick: onClick,
|
|
29
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconRemoveIndividual, {
|
|
30
|
+
disabled: disabled,
|
|
31
|
+
dataTest: "".concat(dataTest, "-iconremoveindividual")
|
|
32
|
+
})
|
|
33
|
+
}, label);
|
|
34
|
+
};
|
|
32
35
|
|
|
33
36
|
exports.RemoveIndividual = RemoveIndividual;
|
|
34
37
|
RemoveIndividual.propTypes = {
|
|
@@ -19,37 +19,40 @@ var _icons = require("./icons.js");
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
|
|
22
|
-
const ReorderingActions =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
dataTest:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
dataTest:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
22
|
+
const ReorderingActions = _ref => {
|
|
23
|
+
let {
|
|
24
|
+
dataTest,
|
|
25
|
+
disabledDown,
|
|
26
|
+
disabledUp,
|
|
27
|
+
onChangeUp,
|
|
28
|
+
onChangeDown
|
|
29
|
+
} = _ref;
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
31
|
+
"data-test": dataTest,
|
|
32
|
+
className: _style.default.dynamic([["1295471940", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]]])
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
34
|
+
small: true,
|
|
35
|
+
disabled: disabledDown,
|
|
36
|
+
onClick: () => !disabledDown && onChangeDown(event),
|
|
37
|
+
dataTest: "".concat(dataTest, "-buttonmovedown"),
|
|
38
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveDown, {
|
|
39
|
+
dataTest: "".concat(dataTest, "-iconmovedown"),
|
|
40
|
+
disabled: disabledDown
|
|
41
|
+
})
|
|
42
|
+
}), /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
43
|
+
small: true,
|
|
44
|
+
disabled: disabledUp,
|
|
45
|
+
onClick: () => !disabledUp && onChangeUp(event),
|
|
46
|
+
dataTest: "".concat(dataTest, "-buttonmoveup"),
|
|
47
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconMoveUp, {
|
|
48
|
+
dataTest: "".concat(dataTest, "-iconmoveup"),
|
|
49
|
+
disabled: disabledUp
|
|
50
|
+
})
|
|
51
|
+
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
52
|
+
id: "1295471940",
|
|
53
|
+
dynamic: [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8]
|
|
54
|
+
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-top:".concat(_uiConstants.spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector:last-child{padding-bottom:".concat(_uiConstants.spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector>button:first-child{margin-left:".concat(_uiConstants.spacers.dp8, ";}")]));
|
|
55
|
+
};
|
|
53
56
|
|
|
54
57
|
exports.ReorderingActions = ReorderingActions;
|
|
55
58
|
ReorderingActions.propTypes = {
|
|
@@ -17,16 +17,19 @@ var _index = require("./common/index.js");
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
const RightFooter =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
const RightFooter = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
children,
|
|
23
|
+
dataTest
|
|
24
|
+
} = _ref;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
26
|
+
"data-test": dataTest,
|
|
27
|
+
className: _style.default.dynamic([["3629116366", [_index.borderColor, _uiConstants.spacers.dp8]]])
|
|
28
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
29
|
+
id: "3629116366",
|
|
30
|
+
dynamic: [_index.borderColor, _uiConstants.spacers.dp8]
|
|
31
|
+
}, ["div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ".concat(borderColor, ";padding:0 ").concat(_uiConstants.spacers.dp8, ";}")]));
|
|
32
|
+
};
|
|
30
33
|
|
|
31
34
|
exports.RightFooter = RightFooter;
|
|
32
35
|
RightFooter.propTypes = {
|
|
@@ -17,16 +17,19 @@ var _index = require("./common/index.js");
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
const RightHeader =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
const RightHeader = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
children,
|
|
23
|
+
dataTest
|
|
24
|
+
} = _ref;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
26
|
+
"data-test": dataTest,
|
|
27
|
+
className: _style.default.dynamic([["2175954399", [_index.borderColor, _uiConstants.spacers.dp8]]])
|
|
28
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
29
|
+
id: "2175954399",
|
|
30
|
+
dynamic: [_index.borderColor, _uiConstants.spacers.dp8]
|
|
31
|
+
}, ["div.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(borderColor, ";-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ").concat(_uiConstants.spacers.dp8, ";}")]));
|
|
32
|
+
};
|
|
30
33
|
|
|
31
34
|
exports.RightHeader = RightHeader;
|
|
32
35
|
RightHeader.propTypes = {
|
package/build/cjs/right-side.js
CHANGED
|
@@ -15,22 +15,25 @@ var _index = require("./common/index.js");
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const RightSide =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
18
|
+
const RightSide = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
children,
|
|
21
|
+
dataTest,
|
|
22
|
+
width
|
|
23
|
+
} = _ref;
|
|
24
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
25
|
+
"data-test": dataTest,
|
|
26
|
+
className: _style.default.dynamic([["1391448013", [_index.backgroundColor, _index.borderColor, _index.borderRadius, width]]])
|
|
27
|
+
}, children,
|
|
28
|
+
/**
|
|
29
|
+
* Flex basis 0px to make sure right and left side
|
|
30
|
+
* always have the same width
|
|
31
|
+
*/
|
|
32
|
+
'', /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
33
|
+
id: "1391448013",
|
|
34
|
+
dynamic: [_index.backgroundColor, _index.borderColor, _index.borderRadius, width]
|
|
35
|
+
}, ["div.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor, ";border:1px solid ").concat(borderColor, ";border-radius:").concat(borderRadius, ";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:").concat(width, ";}")]));
|
|
36
|
+
};
|
|
34
37
|
|
|
35
38
|
exports.RightSide = RightSide;
|
|
36
39
|
RightSide.propTypes = {
|
|
@@ -17,25 +17,28 @@ var _endIntersectionDetector = require("./end-intersection-detector.js");
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
const SourceOptions =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
const SourceOptions = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
children,
|
|
23
|
+
dataTest,
|
|
24
|
+
sourceEmptyPlaceholder,
|
|
25
|
+
sourceOptionsRef,
|
|
26
|
+
onSourceEndReached
|
|
27
|
+
} = _ref;
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
29
|
+
"data-test": dataTest,
|
|
30
|
+
ref: sourceOptionsRef,
|
|
31
|
+
className: _style.default.dynamic([["392419471", [_uiConstants.spacers.dp4]]]) + " " + "container"
|
|
32
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
+
className: _style.default.dynamic([["392419471", [_uiConstants.spacers.dp4]]]) + " " + "content-container"
|
|
34
|
+
}, children, !_react.default.Children.count(children) && sourceEmptyPlaceholder, onSourceEndReached && /*#__PURE__*/_react.default.createElement(_endIntersectionDetector.EndIntersectionDetector, {
|
|
35
|
+
rootRef: sourceOptionsRef,
|
|
36
|
+
onEndReached: onSourceEndReached
|
|
37
|
+
})), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
38
|
+
id: "392419471",
|
|
39
|
+
dynamic: [_uiConstants.spacers.dp4]
|
|
40
|
+
}, [".container.__jsx-style-dynamic-selector{padding:".concat(_uiConstants.spacers.dp4, " 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}"), ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
|
|
41
|
+
};
|
|
39
42
|
|
|
40
43
|
exports.SourceOptions = SourceOptions;
|
|
41
44
|
SourceOptions.propTypes = {
|
|
@@ -13,15 +13,19 @@ exports.addAllSelectableSourceOptions = void 0;
|
|
|
13
13
|
* @param {Function} arg.setHighlightedSourceOptions
|
|
14
14
|
* @returns {void}
|
|
15
15
|
*/
|
|
16
|
-
const addAllSelectableSourceOptions =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
const addAllSelectableSourceOptions = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
sourceOptions,
|
|
19
|
+
onChange,
|
|
20
|
+
selected,
|
|
21
|
+
setHighlightedSourceOptions
|
|
22
|
+
} = _ref;
|
|
23
|
+
const enabledSourceOptions = sourceOptions.filter(_ref2 => {
|
|
24
|
+
let {
|
|
25
|
+
disabled
|
|
26
|
+
} = _ref2;
|
|
27
|
+
return !disabled;
|
|
28
|
+
});
|
|
25
29
|
const newSelected = enabledSourceOptions.reduce((accumulatedSelected, enabledSourceOption) => [...accumulatedSelected, enabledSourceOption.value], selected);
|
|
26
30
|
setHighlightedSourceOptions([]); // If we ever allow maxSelection to be any value
|
|
27
31
|
// other than 1 and Infinity, we need to think
|
|
@@ -15,15 +15,17 @@ exports.addIndividualSourceOptions = void 0;
|
|
|
15
15
|
* @param {Function} args.setHighlightedSourceOptions
|
|
16
16
|
* @returns void
|
|
17
17
|
*/
|
|
18
|
-
const addIndividualSourceOptions =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
const addIndividualSourceOptions = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
filterable,
|
|
21
|
+
sourceOptions,
|
|
22
|
+
highlightedSourceOptions,
|
|
23
|
+
maxSelections,
|
|
24
|
+
onChange,
|
|
25
|
+
selected,
|
|
26
|
+
setHighlightedSourceOptions
|
|
27
|
+
} = _ref;
|
|
28
|
+
|
|
27
29
|
/**
|
|
28
30
|
* Creates a subset of the highlighted options to reflect a changed
|
|
29
31
|
* filter value in case previously highlighted options are now
|
|
@@ -14,16 +14,19 @@ exports.createDoubleClickHandlers = void 0;
|
|
|
14
14
|
* @param {Function} args.setHighlightedPickedOptions
|
|
15
15
|
* @returns void
|
|
16
16
|
*/
|
|
17
|
-
const createDoubleClickHandlers =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
const createDoubleClickHandlers = _ref => {
|
|
18
|
+
let {
|
|
19
|
+
maxSelections,
|
|
20
|
+
onChange,
|
|
21
|
+
selected,
|
|
22
|
+
setHighlightedPickedOptions,
|
|
23
|
+
setHighlightedSourceOptions
|
|
24
|
+
} = _ref;
|
|
25
|
+
|
|
26
|
+
const selectSingleOption = _ref2 => {
|
|
27
|
+
let {
|
|
28
|
+
value
|
|
29
|
+
} = _ref2;
|
|
27
30
|
const newSelected = selected.includes(value) ? selected : [...selected, value];
|
|
28
31
|
setHighlightedSourceOptions([]);
|
|
29
32
|
onChange({
|
|
@@ -31,9 +34,10 @@ const createDoubleClickHandlers = ({
|
|
|
31
34
|
});
|
|
32
35
|
};
|
|
33
36
|
|
|
34
|
-
const deselectSingleOption =
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
const deselectSingleOption = _ref3 => {
|
|
38
|
+
let {
|
|
39
|
+
value
|
|
40
|
+
} = _ref3;
|
|
37
41
|
const newSelected = selected.filter(curSelected => curSelected !== value);
|
|
38
42
|
setHighlightedPickedOptions([]);
|
|
39
43
|
onChange({
|
|
@@ -10,8 +10,11 @@ exports.defaultFilterCallback = void 0;
|
|
|
10
10
|
* @param {string} filter
|
|
11
11
|
* @returns {Object[]}
|
|
12
12
|
*/
|
|
13
|
-
const defaultFilterCallback = (options, filter) => filter === '' ? options : options.filter(
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
const defaultFilterCallback = (options, filter) => filter === '' ? options : options.filter(_ref => {
|
|
14
|
+
let {
|
|
15
|
+
label
|
|
16
|
+
} = _ref;
|
|
17
|
+
return label.match(new RegExp(filter, 'i'));
|
|
18
|
+
});
|
|
16
19
|
|
|
17
20
|
exports.defaultFilterCallback = defaultFilterCallback;
|
|
@@ -11,11 +11,15 @@ exports.isReorderDownDisabled = void 0;
|
|
|
11
11
|
* @param {string[]} args.selected
|
|
12
12
|
* @returns {bool}
|
|
13
13
|
*/
|
|
14
|
-
const isReorderDownDisabled =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
const isReorderDownDisabled = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
highlightedPickedOptions,
|
|
17
|
+
selected
|
|
18
|
+
} = _ref;
|
|
19
|
+
return (// only one item can be moved with the buttons
|
|
20
|
+
highlightedPickedOptions.length !== 1 || // can't move an item down if it's the last one
|
|
21
|
+
selected.indexOf(highlightedPickedOptions[0]) === selected.length - 1
|
|
22
|
+
);
|
|
23
|
+
};
|
|
20
24
|
|
|
21
25
|
exports.isReorderDownDisabled = isReorderDownDisabled;
|
|
@@ -11,11 +11,15 @@ exports.isReorderUpDisabled = void 0;
|
|
|
11
11
|
* @param {string[]} args.selected
|
|
12
12
|
* @returns {bool}
|
|
13
13
|
*/
|
|
14
|
-
const isReorderUpDisabled =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
const isReorderUpDisabled = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
highlightedPickedOptions,
|
|
17
|
+
selected
|
|
18
|
+
} = _ref;
|
|
19
|
+
return (// only one item can be moved with the buttons
|
|
20
|
+
highlightedPickedOptions.length !== 1 || // can't move an item up if it's the first one
|
|
21
|
+
selected.indexOf(highlightedPickedOptions[0]) === 0
|
|
22
|
+
);
|
|
23
|
+
};
|
|
20
24
|
|
|
21
25
|
exports.isReorderUpDisabled = isReorderUpDisabled;
|
|
@@ -12,11 +12,12 @@ exports.moveHighlightedPickedOptionDown = void 0;
|
|
|
12
12
|
* @param {Function} args.onChange
|
|
13
13
|
* @returns {void}
|
|
14
14
|
*/
|
|
15
|
-
const moveHighlightedPickedOptionDown =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
const moveHighlightedPickedOptionDown = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
selected,
|
|
18
|
+
highlightedPickedOptions,
|
|
19
|
+
onChange
|
|
20
|
+
} = _ref;
|
|
20
21
|
const optionIndex = selected.findIndex(selectedOption => selectedOption === highlightedPickedOptions[0]); // Can't move down last or non-existing option
|
|
21
22
|
|
|
22
23
|
if (optionIndex === -1 || optionIndex > selected.length - 2) {
|