@dhis2-ui/transfer 8.1.10 → 8.2.1
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 -24
- 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 -24
- 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/add-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 AddAll =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
18
|
+
const AddAll = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
label,
|
|
21
|
+
dataTest,
|
|
22
|
+
disabled,
|
|
23
|
+
onClick
|
|
24
|
+
} = _ref;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_button.Button, {
|
|
26
|
+
dataTest: dataTest,
|
|
27
|
+
disabled: disabled,
|
|
28
|
+
onClick: onClick,
|
|
29
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.IconAddAll, {
|
|
30
|
+
dataTest: "".concat(dataTest, "-iconaddall"),
|
|
31
|
+
disabled: disabled
|
|
32
|
+
})
|
|
33
|
+
}, label);
|
|
34
|
+
};
|
|
32
35
|
|
|
33
36
|
exports.AddAll = AddAll;
|
|
34
37
|
AddAll.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 AddIndividual =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.IconAddIndividual, {
|
|
18
|
+
const AddIndividual = _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.IconAddIndividual, {
|
|
30
|
+
disabled: disabled,
|
|
31
|
+
dataTest: "".concat(dataTest, "-iconaddindividual")
|
|
32
|
+
})
|
|
33
|
+
}, label);
|
|
34
|
+
};
|
|
32
35
|
|
|
33
36
|
exports.AddIndividual = AddIndividual;
|
|
34
37
|
AddIndividual.propTypes = {
|
|
@@ -15,12 +15,13 @@ var _modes = require("./modes.js");
|
|
|
15
15
|
* @param {bool} args.metaKey
|
|
16
16
|
* @return {string}
|
|
17
17
|
*/
|
|
18
|
-
const getModeByModifierKey =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
const getModeByModifierKey = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
altKey,
|
|
21
|
+
shiftKey,
|
|
22
|
+
ctrlKey,
|
|
23
|
+
metaKey
|
|
24
|
+
} = _ref;
|
|
24
25
|
const keys = [altKey, shiftKey, ctrlKey, metaKey];
|
|
25
26
|
const amountKeyPressed = keys.filter(v => v);
|
|
26
27
|
const moreThanOneKeyPressed = amountKeyPressed.length;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.REPLACE_MODE = exports.RANGE_MODE = exports.ADD_MODE = void 0;
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Click modes when clicking on an option with/without
|
package/build/cjs/container.js
CHANGED
|
@@ -13,18 +13,21 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
-
const Container =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
const Container = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
children,
|
|
19
|
+
dataTest,
|
|
20
|
+
className,
|
|
21
|
+
height
|
|
22
|
+
} = _ref;
|
|
23
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
24
|
+
"data-test": dataTest,
|
|
25
|
+
className: _style.default.dynamic([["3332822660", [height]]]) + " " + (className || "")
|
|
26
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
27
|
+
id: "3332822660",
|
|
28
|
+
dynamic: [height]
|
|
29
|
+
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:".concat(height, ";}")]));
|
|
30
|
+
};
|
|
28
31
|
|
|
29
32
|
exports.Container = Container;
|
|
30
33
|
Container.propTypes = {
|
|
@@ -15,21 +15,27 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const EndIntersectionDetector =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
18
|
+
const EndIntersectionDetector = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
rootRef,
|
|
21
|
+
onEndReached,
|
|
22
|
+
dataTest
|
|
23
|
+
} = _ref;
|
|
24
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
25
|
+
"data-test": dataTest,
|
|
26
|
+
className: "jsx-4200578429"
|
|
27
|
+
}, /*#__PURE__*/_react.default.createElement(_intersectionDetector.IntersectionDetector, {
|
|
28
|
+
rootRef: rootRef,
|
|
29
|
+
onChange: _ref2 => {
|
|
30
|
+
let {
|
|
31
|
+
isIntersecting
|
|
32
|
+
} = _ref2;
|
|
33
|
+
return isIntersecting && onEndReached();
|
|
34
|
+
}
|
|
35
|
+
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
36
|
+
id: "4200578429"
|
|
37
|
+
}, ["div.jsx-4200578429{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;left:0;}"]));
|
|
38
|
+
};
|
|
33
39
|
|
|
34
40
|
exports.EndIntersectionDetector = EndIntersectionDetector;
|
|
35
41
|
EndIntersectionDetector.propTypes = {
|
|
@@ -72,7 +72,8 @@ const disabledSourceOptionSelector = '{transfer-sourceoptions} {transferoption}.
|
|
|
72
72
|
});
|
|
73
73
|
(0, _steps.Then)('only the previously highlighted items are highlighted', () => {
|
|
74
74
|
cy.get('@enabledHighlightedSourceOptions').should('have.class', 'highlighted');
|
|
75
|
-
cy.all(() => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@enabledHighlightedSourceOptions')).should(
|
|
75
|
+
cy.all(() => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@enabledHighlightedSourceOptions')).should(_ref => {
|
|
76
|
+
let [$sourceOptions, $previouslyHighlightedOptions] = _ref;
|
|
76
77
|
const previouslyHighlightedOptions = $previouslyHighlightedOptions.toArray().map(_index2.extractOptionFromElement);
|
|
77
78
|
const $notHighlightedSourceOptions = $sourceOptions.filter((_index, sourceOptionEl) => {
|
|
78
79
|
const label = sourceOptionEl.innerText;
|
|
@@ -85,7 +86,8 @@ const disabledSourceOptionSelector = '{transfer-sourceoptions} {transferoption}.
|
|
|
85
86
|
});
|
|
86
87
|
});
|
|
87
88
|
(0, _steps.Then)('the enabled options in the range are highlighted', () => {
|
|
88
|
-
cy.all(() => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@clickedEnabledOption'), () => cy.get('@clickedWithShiftEnabledOption')).should(
|
|
89
|
+
cy.all(() => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@clickedEnabledOption'), () => cy.get('@clickedWithShiftEnabledOption')).should(_ref2 => {
|
|
90
|
+
let [$all, $clickedEnabledOption, $clickedWithShiftEnabledOption] = _ref2;
|
|
89
91
|
const from = $clickedEnabledOption.index();
|
|
90
92
|
const to = $clickedWithShiftEnabledOption.index();
|
|
91
93
|
const $allInRange = $all.slice(from, to + 1);
|
|
@@ -42,7 +42,8 @@ var _index = require("../common/index.js");
|
|
|
42
42
|
cy.get('{transfer-actions-addindividual}').click();
|
|
43
43
|
});
|
|
44
44
|
(0, _steps.Then)('the order of the selectable options should match the order of the supplied options', () => {
|
|
45
|
-
cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(
|
|
45
|
+
cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref => {
|
|
46
|
+
let [win, $options] = _ref;
|
|
46
47
|
const {
|
|
47
48
|
options
|
|
48
49
|
} = win;
|
|
@@ -51,60 +52,80 @@ var _index = require("../common/index.js");
|
|
|
51
52
|
});
|
|
52
53
|
});
|
|
53
54
|
(0, _steps.Then)('the order of the remaining selectable options should match the order of the supplied options', () => {
|
|
54
|
-
cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(
|
|
55
|
+
cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref2 => {
|
|
56
|
+
let [win, $options] = _ref2;
|
|
55
57
|
const selectableSourceOptions = $options.toArray().map(_index.extractOptionFromElement);
|
|
56
|
-
const options = win.options.filter(option => selectableSourceOptions.find(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
const options = win.options.filter(option => selectableSourceOptions.find(_ref3 => {
|
|
59
|
+
let {
|
|
60
|
+
label,
|
|
61
|
+
value
|
|
62
|
+
} = _ref3;
|
|
63
|
+
return label === option.label && value === option.value;
|
|
64
|
+
}));
|
|
60
65
|
expect(selectableSourceOptions).to.eql(options);
|
|
61
66
|
});
|
|
62
67
|
});
|
|
63
68
|
(0, _steps.Then)('it should be positioned according to the order of the supplied options', () => {
|
|
64
|
-
cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@deselectedOptions')).should(
|
|
69
|
+
cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@deselectedOptions')).should(_ref4 => {
|
|
70
|
+
let [win, $selectableSourceOptions, deselectedOptions] = _ref4;
|
|
65
71
|
// filter out non-selectable options and compare with selectable options
|
|
66
72
|
// this confirms that the order is correct
|
|
67
73
|
const selectableSourceOptions = $selectableSourceOptions.toArray().map(_index.extractOptionFromElement);
|
|
68
|
-
const originalOptions = win.options.filter(option => selectableSourceOptions.find(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
74
|
+
const originalOptions = win.options.filter(option => selectableSourceOptions.find(_ref5 => {
|
|
75
|
+
let {
|
|
76
|
+
label,
|
|
77
|
+
value
|
|
78
|
+
} = _ref5;
|
|
79
|
+
return label === option.label && value === option.value;
|
|
80
|
+
}));
|
|
72
81
|
expect(selectableSourceOptions).to.eql(originalOptions); // and confirm that the deselected option is in the selectable options list
|
|
73
82
|
|
|
74
83
|
const [deselectedOption] = deselectedOptions;
|
|
75
|
-
const hasOption = !!selectableSourceOptions.find(
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
84
|
+
const hasOption = !!selectableSourceOptions.find(_ref6 => {
|
|
85
|
+
let {
|
|
86
|
+
label,
|
|
87
|
+
value
|
|
88
|
+
} = _ref6;
|
|
89
|
+
return label === deselectedOption.label && value === deselectedOption.value;
|
|
90
|
+
});
|
|
79
91
|
expect(hasOption).to.equal(true);
|
|
80
92
|
});
|
|
81
93
|
});
|
|
82
94
|
(0, _steps.Then)('all should take the position according to the order of the supplied options', () => {
|
|
83
|
-
cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@deselectedOptions')).should(
|
|
95
|
+
cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('@deselectedOptions')).should(_ref7 => {
|
|
96
|
+
let [win, $selectableSourceOptions, deselectedOptions] = _ref7;
|
|
84
97
|
const selectableSourceOptions = $selectableSourceOptions.toArray().map(_index.extractOptionFromElement);
|
|
85
|
-
const options = win.options.filter(option => selectableSourceOptions.find(
|
|
86
|
-
|
|
87
|
-
value
|
|
88
|
-
}) => label === option.label && value === option.value));
|
|
89
|
-
expect(selectableSourceOptions).to.eql(options);
|
|
90
|
-
const hasAllOptions = deselectedOptions.every(deselectedOption => {
|
|
91
|
-
const result = !!selectableSourceOptions.find(({
|
|
98
|
+
const options = win.options.filter(option => selectableSourceOptions.find(_ref8 => {
|
|
99
|
+
let {
|
|
92
100
|
label,
|
|
93
101
|
value
|
|
94
|
-
}
|
|
102
|
+
} = _ref8;
|
|
103
|
+
return label === option.label && value === option.value;
|
|
104
|
+
}));
|
|
105
|
+
expect(selectableSourceOptions).to.eql(options);
|
|
106
|
+
const hasAllOptions = deselectedOptions.every(deselectedOption => {
|
|
107
|
+
const result = !!selectableSourceOptions.find(_ref9 => {
|
|
108
|
+
let {
|
|
109
|
+
label,
|
|
110
|
+
value
|
|
111
|
+
} = _ref9;
|
|
112
|
+
return label === deselectedOption.label && value === deselectedOption.value;
|
|
113
|
+
});
|
|
95
114
|
return result;
|
|
96
115
|
});
|
|
97
116
|
expect(hasAllOptions).to.equal(true);
|
|
98
117
|
});
|
|
99
118
|
});
|
|
100
119
|
(0, _steps.Then)('it should be added to the end of the selected options list', () => {
|
|
101
|
-
cy.all(() => cy.get('@selectedOptions'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(
|
|
120
|
+
cy.all(() => cy.get('@selectedOptions'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref10 => {
|
|
121
|
+
let [transferredOptions, $selectedOptions] = _ref10;
|
|
102
122
|
const lastSelectedOptions = $selectedOptions.toArray().slice(transferredOptions.length * -1).map(_index.extractOptionFromElement);
|
|
103
123
|
expect(transferredOptions).to.eql(lastSelectedOptions);
|
|
104
124
|
});
|
|
105
125
|
});
|
|
106
126
|
(0, _steps.Then)('they should be added to the end of the selected options list in the order they have been highlighted', () => {
|
|
107
|
-
cy.all(() => cy.get('@selectedOptions'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(
|
|
127
|
+
cy.all(() => cy.get('@selectedOptions'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref11 => {
|
|
128
|
+
let [transferredOptions, $selectedOptions] = _ref11;
|
|
108
129
|
const lastSelectedOptions = $selectedOptions.toArray().slice(transferredOptions.length * -1).map(_index.extractOptionFromElement);
|
|
109
130
|
expect(transferredOptions).to.eql(lastSelectedOptions);
|
|
110
131
|
});
|
|
@@ -35,7 +35,8 @@ var _index = require("../common/index.js");
|
|
|
35
35
|
cy.visitStory('Transfer filtering', 'Controlled Filter');
|
|
36
36
|
});
|
|
37
37
|
(0, _steps.When)('the user uses the same search term but {string}', secondCase => {
|
|
38
|
-
cy.all(() => cy.get('@firstCaseTerm'), () => cy.get('{transfer-filter} input')).then(
|
|
38
|
+
cy.all(() => cy.get('@firstCaseTerm'), () => cy.get('{transfer-filter} input')).then(_ref => {
|
|
39
|
+
let [firstCaseTerm, $filterInput] = _ref;
|
|
39
40
|
let secondCaseTerm;
|
|
40
41
|
|
|
41
42
|
if (secondCase === 'uppercase') {
|
|
@@ -54,7 +55,8 @@ var _index = require("../common/index.js");
|
|
|
54
55
|
cy.get('{transfer-filter} input').then($input => console.log('$input', $input) || $input).type('ANC');
|
|
55
56
|
});
|
|
56
57
|
(0, _steps.Then)('all the matching items should be shown in the options list', () => {
|
|
57
|
-
cy.all(() => cy.get('{transfer-filter}'), () => cy.get('{transferoption}')).should(
|
|
58
|
+
cy.all(() => cy.get('{transfer-filter}'), () => cy.get('{transferoption}')).should(_ref2 => {
|
|
59
|
+
let [$filter, $options] = _ref2;
|
|
58
60
|
const searchTerm = $filter.val();
|
|
59
61
|
expect($options).to.have.length.of.at.least(1);
|
|
60
62
|
$options.each((index, option) => {
|
|
@@ -72,7 +74,8 @@ var _index = require("../common/index.js");
|
|
|
72
74
|
}).should('exist');
|
|
73
75
|
});
|
|
74
76
|
(0, _steps.Then)('the same options should be shown', () => {
|
|
75
|
-
cy.all(() => cy.get('@firstCaseOptions'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(
|
|
77
|
+
cy.all(() => cy.get('@firstCaseOptions'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref3 => {
|
|
78
|
+
let [$firstCaseOptions, $secondCaseOptions] = _ref3;
|
|
76
79
|
const firstCaseOptions = $firstCaseOptions.toArray().map(_index.extractOptionFromElement);
|
|
77
80
|
const secondCaseOptions = $secondCaseOptions.toArray().map(_index.extractOptionFromElement);
|
|
78
81
|
expect(firstCaseOptions).to.eql(secondCaseOptions);
|
|
@@ -79,7 +79,8 @@ var _index2 = require("../common/index.js");
|
|
|
79
79
|
cy.get('@initiallyHighlighted').should('have.class', 'highlighted');
|
|
80
80
|
});
|
|
81
81
|
(0, _steps.Then)('the option is not highlighted', () => {
|
|
82
|
-
cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(
|
|
82
|
+
cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref => {
|
|
83
|
+
let [hiddenHighlighted, $options] = _ref;
|
|
83
84
|
const $hiddenHighlighted = $options.filter((index, optionEl) => {
|
|
84
85
|
const option = (0, _index2.extractOptionFromElement)(optionEl);
|
|
85
86
|
return option.label === hiddenHighlighted.label && option.value === hiddenHighlighted.value;
|
|
@@ -90,7 +91,8 @@ var _index2 = require("../common/index.js");
|
|
|
90
91
|
});
|
|
91
92
|
});
|
|
92
93
|
(0, _steps.Then)('the clicked options should be highlighted', () => {
|
|
93
|
-
cy.all(() => cy.get('@initiallyHighlighted'), () => cy.get('@secondBelowInitiallyHighlighted')).should(
|
|
94
|
+
cy.all(() => cy.get('@initiallyHighlighted'), () => cy.get('@secondBelowInitiallyHighlighted')).should(_ref2 => {
|
|
95
|
+
let [$initiallyHighlighted, $secondBelowInitiallyHighlighted] = _ref2;
|
|
94
96
|
expect($initiallyHighlighted).to.have.class('highlighted');
|
|
95
97
|
expect($secondBelowInitiallyHighlighted).to.have.class('highlighted');
|
|
96
98
|
});
|
|
@@ -108,7 +110,8 @@ var _index2 = require("../common/index.js");
|
|
|
108
110
|
cy.get('@firstBelowInitiallyHighlighted').should('have.class', 'highlighted');
|
|
109
111
|
});
|
|
110
112
|
(0, _steps.Then)('all other previously highlighted options are not highlighted anymore', () => {
|
|
111
|
-
cy.all(() => cy.get('@initiallyHighlightedMultiple').last().invoke('index'), () => cy.get('@initiallyHighlightedMultiple')).should(
|
|
113
|
+
cy.all(() => cy.get('@initiallyHighlightedMultiple').last().invoke('index'), () => cy.get('@initiallyHighlightedMultiple')).should(_ref3 => {
|
|
114
|
+
let [lastInitiallyHighlightedIndex, $initiallyHighlightedMultiple] = _ref3;
|
|
112
115
|
$initiallyHighlightedMultiple.filter((_, el) => {
|
|
113
116
|
const $el = Cypress.$(el);
|
|
114
117
|
return $el.index() !== lastInitiallyHighlightedIndex;
|
|
@@ -119,7 +122,8 @@ var _index2 = require("../common/index.js");
|
|
|
119
122
|
});
|
|
120
123
|
});
|
|
121
124
|
(0, _steps.Then)('the range from the visually first highlighted option to the SHIFT-clicked option is highlighted', () => {
|
|
122
|
-
cy.all(() => cy.get('@initiallyHighlightedMultiple'), () => cy.get('@firstShiftClicked'), () => cy.get('@list').find('{transferoption}')).should(
|
|
125
|
+
cy.all(() => cy.get('@initiallyHighlightedMultiple'), () => cy.get('@firstShiftClicked'), () => cy.get('@list').find('{transferoption}')).should(_ref4 => {
|
|
126
|
+
let [$initiallyHighlightedMultiple, $firstShiftClicked, $all] = _ref4;
|
|
123
127
|
const firstVisibleHighlightedIndex = $initiallyHighlightedMultiple.filter(':visible').eq(0).index();
|
|
124
128
|
const shiftIndex = $firstShiftClicked.index();
|
|
125
129
|
const from = Math.min(firstVisibleHighlightedIndex, shiftIndex);
|
|
@@ -133,7 +137,8 @@ var _index2 = require("../common/index.js");
|
|
|
133
137
|
});
|
|
134
138
|
});
|
|
135
139
|
(0, _steps.Then)('the range from the first clicked option to the second clicked option is highlighted', () => {
|
|
136
|
-
cy.all(() => cy.get('@firstClickedIndexWithShift'), () => cy.get('@secondClickedIndexWithShift'), () => cy.get('@list').find('{transferoption}')).should(
|
|
140
|
+
cy.all(() => cy.get('@firstClickedIndexWithShift'), () => cy.get('@secondClickedIndexWithShift'), () => cy.get('@list').find('{transferoption}')).should(_ref5 => {
|
|
141
|
+
let [firstClickedIndexWithShift, secondClickedIndexWithShift, $all] = _ref5;
|
|
137
142
|
const from = Math.min(firstClickedIndexWithShift, secondClickedIndexWithShift);
|
|
138
143
|
const to = Math.max(firstClickedIndexWithShift, secondClickedIndexWithShift);
|
|
139
144
|
const $insideRange = $all.slice(from, to + 1);
|
|
@@ -21,12 +21,12 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
|
|
|
21
21
|
(0, _steps.Then)('the loading indicator should be shown', () => {
|
|
22
22
|
cy.get('@listType').then(listType => {
|
|
23
23
|
const listSelector = listType === 'source' ? '{transfer-leftside}' : '{transfer-rightside}';
|
|
24
|
-
cy.get(
|
|
24
|
+
cy.get("".concat(listSelector, " .loading")).should('exist');
|
|
25
25
|
});
|
|
26
26
|
});
|
|
27
27
|
(0, _steps.Then)('the loading indicator should not be shown', () => {
|
|
28
28
|
cy.get('@listType').then(listType => {
|
|
29
29
|
const listSelector = listType === 'source' ? '{transfer-leftside}' : '{transfer-rightside}';
|
|
30
|
-
cy.get(
|
|
30
|
+
cy.get("".concat(listSelector, " .loading")).should('not.exist');
|
|
31
31
|
});
|
|
32
32
|
});
|
|
@@ -32,17 +32,19 @@ Cypress.on('uncaught:exception', err => {
|
|
|
32
32
|
(0, _steps.When)('the user scroll to the end of the list', () => {
|
|
33
33
|
cy.get('@listType').then(listType => {
|
|
34
34
|
const listSelector = listType === 'source' ? 'transfer-sourceoptions' : 'transfer-pickedoptions';
|
|
35
|
-
cy.get(
|
|
35
|
+
cy.get("{".concat(listSelector, "-endintersectiondetector}")).scrollIntoView();
|
|
36
36
|
});
|
|
37
37
|
});
|
|
38
38
|
(0, _steps.Then)('the callback for reaching the end should not be called', () => {
|
|
39
|
-
cy.all(() => cy.window(), () => cy.get('@listType')).should(
|
|
39
|
+
cy.all(() => cy.window(), () => cy.get('@listType')).should(_ref => {
|
|
40
|
+
let [win, listType] = _ref;
|
|
40
41
|
const callback = listType === 'source' ? win.onEndReached : win.onEndReachedPicked;
|
|
41
42
|
expect(callback).to.not.be.called;
|
|
42
43
|
});
|
|
43
44
|
});
|
|
44
45
|
(0, _steps.Then)('the callback for reaching the end should be called', () => {
|
|
45
|
-
cy.all(() => cy.window(), () => cy.get('@listType')).should(
|
|
46
|
+
cy.all(() => cy.window(), () => cy.get('@listType')).should(_ref2 => {
|
|
47
|
+
let [win, listType] = _ref2;
|
|
46
48
|
const callback = listType === 'source' ? win.onEndReached : win.onEndReachedPicked;
|
|
47
49
|
expect(callback).to.be.calledOnce;
|
|
48
50
|
});
|
|
@@ -43,7 +43,8 @@ var _index = require("../common/index.js");
|
|
|
43
43
|
cy.get('@initiallyHighlighted').should('have.not.class', 'highlighted');
|
|
44
44
|
});
|
|
45
45
|
(0, _steps.Then)('the option is visible', () => {
|
|
46
|
-
cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(
|
|
46
|
+
cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref => {
|
|
47
|
+
let [hiddenHighlighted, $options] = _ref;
|
|
47
48
|
const $hiddenHighlighted = $options.filter((index, optionEl) => {
|
|
48
49
|
const option = (0, _index.extractOptionFromElement)(optionEl);
|
|
49
50
|
return option.label === hiddenHighlighted.label && option.value === hiddenHighlighted.value;
|
|
@@ -52,7 +53,8 @@ var _index = require("../common/index.js");
|
|
|
52
53
|
});
|
|
53
54
|
});
|
|
54
55
|
(0, _steps.Then)('the option is highlighted', () => {
|
|
55
|
-
cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(
|
|
56
|
+
cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref2 => {
|
|
57
|
+
let [hiddenHighlighted, $options] = _ref2;
|
|
56
58
|
const $hiddenHighlighted = $options.filter((index, optionEl) => {
|
|
57
59
|
const option = (0, _index.extractOptionFromElement)(optionEl);
|
|
58
60
|
return option.label === hiddenHighlighted.label && option.value === hiddenHighlighted.value;
|
|
@@ -61,7 +63,8 @@ var _index = require("../common/index.js");
|
|
|
61
63
|
});
|
|
62
64
|
});
|
|
63
65
|
(0, _steps.Then)('the option is not highlighted', () => {
|
|
64
|
-
cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(
|
|
66
|
+
cy.all(() => cy.get('@hiddenHighlighted'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref3 => {
|
|
67
|
+
let [hiddenHighlighted, $options] = _ref3;
|
|
65
68
|
const $hiddenHighlighted = $options.filter((index, optionEl) => {
|
|
66
69
|
const option = (0, _index.extractOptionFromElement)(optionEl);
|
|
67
70
|
return option.label === hiddenHighlighted.label && option.value === hiddenHighlighted.value;
|