@dhis2-ui/transfer 10.16.3 → 10.16.5
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
|
@@ -10,8 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _transferOption = require("./transfer-option.js");
|
|
12
12
|
var _transfer = require("./transfer.js");
|
|
13
|
-
function
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
15
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
15
|
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
16
|
const subtitle = 'Allows users to select options from a list';
|
|
@@ -149,11 +148,10 @@ var _default = exports.default = {
|
|
|
149
148
|
options: options
|
|
150
149
|
}
|
|
151
150
|
};
|
|
152
|
-
const StatefulTemplate =
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
} = _ref;
|
|
151
|
+
const StatefulTemplate = ({
|
|
152
|
+
initiallySelected = [],
|
|
153
|
+
...args
|
|
154
|
+
}) => {
|
|
157
155
|
const [selected, setSelected] = (0, _react.useState)(initiallySelected);
|
|
158
156
|
const onChange = payload => setSelected(payload.selected);
|
|
159
157
|
return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, args, {
|
|
@@ -197,12 +195,9 @@ const FilteredPicked = exports.FilteredPicked = StatefulTemplate.bind({});
|
|
|
197
195
|
FilteredPicked.args = {
|
|
198
196
|
filterablePicked: true,
|
|
199
197
|
initialSearchTermPicked: 'ANC',
|
|
200
|
-
initiallySelected: options.map(
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
} = _ref2;
|
|
204
|
-
return value;
|
|
205
|
-
})
|
|
198
|
+
initiallySelected: options.map(({
|
|
199
|
+
value
|
|
200
|
+
}) => value)
|
|
206
201
|
};
|
|
207
202
|
const FilteredPlaceholder = exports.FilteredPlaceholder = StatefulTemplate.bind({});
|
|
208
203
|
FilteredPlaceholder.args = {
|
|
@@ -210,25 +205,22 @@ FilteredPlaceholder.args = {
|
|
|
210
205
|
filterLabel: 'Filter with placeholder',
|
|
211
206
|
filterPlaceholder: 'Search'
|
|
212
207
|
};
|
|
213
|
-
const renderOption =
|
|
214
|
-
|
|
208
|
+
const renderOption = ({
|
|
209
|
+
label,
|
|
210
|
+
value,
|
|
211
|
+
onClick,
|
|
212
|
+
highlighted,
|
|
213
|
+
selected
|
|
214
|
+
}) => /*#__PURE__*/_react.default.createElement("p", {
|
|
215
|
+
onClick: event => onClick({
|
|
215
216
|
label,
|
|
216
|
-
value
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
label,
|
|
224
|
-
value
|
|
225
|
-
}, event),
|
|
226
|
-
style: {
|
|
227
|
-
background: highlighted ? 'green' : 'blue',
|
|
228
|
-
color: selected ? 'orange' : 'white'
|
|
229
|
-
}
|
|
230
|
-
}, "Custom: ", label, " (label), ", value, " (value)");
|
|
231
|
-
};
|
|
217
|
+
value
|
|
218
|
+
}, event),
|
|
219
|
+
style: {
|
|
220
|
+
background: highlighted ? 'green' : 'blue',
|
|
221
|
+
color: selected ? 'orange' : 'white'
|
|
222
|
+
}
|
|
223
|
+
}, "Custom: ", label, " (label), ", value, " (value)");
|
|
232
224
|
const RenderOptionCode = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "Custom option code:"), /*#__PURE__*/_react.default.createElement("code", null, /*#__PURE__*/_react.default.createElement("pre", null, `const renderOption = ({ label, value, onClick, highlighted, selected }) => (
|
|
233
225
|
<p
|
|
234
226
|
onClick={event => onClick({ label, value }, event)}
|
|
@@ -240,11 +232,10 @@ const RenderOptionCode = () => /*#__PURE__*/_react.default.createElement(_react.
|
|
|
240
232
|
Custom: {label} (label), {value} (value)
|
|
241
233
|
</p>
|
|
242
234
|
)`)));
|
|
243
|
-
const StatefulTemplateCustomRenderOption =
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
} = _ref4;
|
|
235
|
+
const StatefulTemplateCustomRenderOption = ({
|
|
236
|
+
initiallySelected = [],
|
|
237
|
+
...args
|
|
238
|
+
}) => {
|
|
248
239
|
const [selected, setSelected] = (0, _react.useState)(initiallySelected);
|
|
249
240
|
const onChange = payload => setSelected(payload.selected);
|
|
250
241
|
return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, args, {
|
|
@@ -260,12 +251,9 @@ exports.CustomListOptions = CustomListOptions;
|
|
|
260
251
|
CustomListOptions.args = {
|
|
261
252
|
renderOption,
|
|
262
253
|
options: options.slice(0, 2),
|
|
263
|
-
initiallySelected: options.slice(0, 2).map(
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
} = _ref5;
|
|
267
|
-
return value;
|
|
268
|
-
})
|
|
254
|
+
initiallySelected: options.slice(0, 2).map(({
|
|
255
|
+
value
|
|
256
|
+
}) => value)
|
|
269
257
|
};
|
|
270
258
|
const IndividualCustomOption = exports.IndividualCustomOption = StatefulTemplateCustomRenderOption.bind({});
|
|
271
259
|
IndividualCustomOption.args = {
|
|
@@ -313,12 +301,9 @@ const Reordering = exports.Reordering = StatefulTemplate.bind({});
|
|
|
313
301
|
Reordering.args = {
|
|
314
302
|
enableOrderChange: true,
|
|
315
303
|
options: options.slice(0, 20),
|
|
316
|
-
initiallySelected: options.slice(0, 8).map(
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
} = _ref6;
|
|
320
|
-
return value;
|
|
321
|
-
})
|
|
304
|
+
initiallySelected: options.slice(0, 8).map(({
|
|
305
|
+
value
|
|
306
|
+
}) => value)
|
|
322
307
|
};
|
|
323
308
|
const ReorderingWithPickedFilter = exports.ReorderingWithPickedFilter = StatefulTemplate.bind({});
|
|
324
309
|
ReorderingWithPickedFilter.storyName = 'Reordering with picked filter';
|
|
@@ -327,18 +312,14 @@ ReorderingWithPickedFilter.args = {
|
|
|
327
312
|
filterablePicked: true,
|
|
328
313
|
filterPlaceholderPicked: 'Search picked options',
|
|
329
314
|
options: options.slice(0, 20),
|
|
330
|
-
initiallySelected: options.slice(0, 8).map(
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
} = _ref7;
|
|
334
|
-
return value;
|
|
335
|
-
})
|
|
315
|
+
initiallySelected: options.slice(0, 8).map(({
|
|
316
|
+
value
|
|
317
|
+
}) => value)
|
|
336
318
|
};
|
|
337
|
-
const ReorderingWithRightFooterTemplate =
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
} = _ref8;
|
|
319
|
+
const ReorderingWithRightFooterTemplate = ({
|
|
320
|
+
initiallySelected = [],
|
|
321
|
+
...args
|
|
322
|
+
}) => {
|
|
342
323
|
const [selected, setSelected] = (0, _react.useState)(initiallySelected);
|
|
343
324
|
const onChange = payload => setSelected(payload.selected);
|
|
344
325
|
return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, args, {
|
|
@@ -359,24 +340,18 @@ ReorderingWithRightFooterContent.storyName = 'Reordering with right footer conte
|
|
|
359
340
|
ReorderingWithRightFooterContent.args = {
|
|
360
341
|
enableOrderChange: true,
|
|
361
342
|
options: options.slice(0, 20),
|
|
362
|
-
initiallySelected: options.slice(0, 8).map(
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
} = _ref9;
|
|
366
|
-
return value;
|
|
367
|
-
})
|
|
343
|
+
initiallySelected: options.slice(0, 8).map(({
|
|
344
|
+
value
|
|
345
|
+
}) => value)
|
|
368
346
|
};
|
|
369
347
|
const ReorderingWithCustomOptions = exports.ReorderingWithCustomOptions = StatefulTemplateCustomRenderOption.bind({});
|
|
370
348
|
ReorderingWithCustomOptions.storyName = 'Reordering with custom options';
|
|
371
349
|
ReorderingWithCustomOptions.args = {
|
|
372
350
|
enableOrderChange: true,
|
|
373
351
|
options: options.slice(0, 20),
|
|
374
|
-
initiallySelected: options.slice(0, 8).map(
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
} = _ref10;
|
|
378
|
-
return value;
|
|
379
|
-
}),
|
|
352
|
+
initiallySelected: options.slice(0, 8).map(({
|
|
353
|
+
value
|
|
354
|
+
}) => value),
|
|
380
355
|
renderOption: option => {
|
|
381
356
|
if (option.value === options[0].value) {
|
|
382
357
|
return renderOption(option);
|
|
@@ -413,40 +388,37 @@ const createCustomFilteringInHeader = hideFilterInput => {
|
|
|
413
388
|
year: index < 5 ? '2020' : '2019'
|
|
414
389
|
}));
|
|
415
390
|
const allOptions = [...relativePeriods, ...fixedPeriods];
|
|
416
|
-
const Header =
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
label: "2019"
|
|
448
|
-
})));
|
|
449
|
-
};
|
|
391
|
+
const Header = ({
|
|
392
|
+
onClick,
|
|
393
|
+
relativePeriod,
|
|
394
|
+
selectedYear,
|
|
395
|
+
onSelectedYearChange
|
|
396
|
+
}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tab.TabBar, null, /*#__PURE__*/_react.default.createElement(_tab.Tab, {
|
|
397
|
+
selected: relativePeriod,
|
|
398
|
+
onClick: () => onClick({
|
|
399
|
+
relativePeriod: true
|
|
400
|
+
})
|
|
401
|
+
}, "Relative periods"), /*#__PURE__*/_react.default.createElement(_tab.Tab, {
|
|
402
|
+
selected: !relativePeriod,
|
|
403
|
+
onClick: () => onClick({
|
|
404
|
+
relativePeriod: false
|
|
405
|
+
})
|
|
406
|
+
}, "Fixed periods")), /*#__PURE__*/_react.default.createElement("p", {
|
|
407
|
+
style: {
|
|
408
|
+
margin: 0,
|
|
409
|
+
height: 10
|
|
410
|
+
}
|
|
411
|
+
}), /*#__PURE__*/_react.default.createElement(_select.SingleSelectField, {
|
|
412
|
+
label: "Year",
|
|
413
|
+
selected: selectedYear,
|
|
414
|
+
onChange: onSelectedYearChange
|
|
415
|
+
}, /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
|
|
416
|
+
value: "2020",
|
|
417
|
+
label: "2020"
|
|
418
|
+
}), /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
|
|
419
|
+
value: "2019",
|
|
420
|
+
label: "2019"
|
|
421
|
+
})));
|
|
450
422
|
/* eslint-enable react/prop-types */
|
|
451
423
|
|
|
452
424
|
const CustomTransfer = props => {
|
|
@@ -459,28 +431,19 @@ const createCustomFilteringInHeader = hideFilterInput => {
|
|
|
459
431
|
if (filter === '') {
|
|
460
432
|
return optionsWithPeriod;
|
|
461
433
|
}
|
|
462
|
-
return optionsWithPeriod.filter(
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
} = _ref12;
|
|
466
|
-
return label.indexOf(filter) !== -1;
|
|
467
|
-
});
|
|
434
|
+
return optionsWithPeriod.filter(({
|
|
435
|
+
label
|
|
436
|
+
}) => label.indexOf(filter) !== -1);
|
|
468
437
|
};
|
|
469
438
|
const header = /*#__PURE__*/_react.default.createElement(Header, {
|
|
470
439
|
relativePeriod: relativePeriod,
|
|
471
440
|
selectedYear: year,
|
|
472
|
-
onSelectedYearChange:
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
}
|
|
478
|
-
onClick: _ref14 => {
|
|
479
|
-
let {
|
|
480
|
-
relativePeriod: newRelativePeriod
|
|
481
|
-
} = _ref14;
|
|
482
|
-
return setRelativePeriod(newRelativePeriod);
|
|
483
|
-
}
|
|
441
|
+
onSelectedYearChange: ({
|
|
442
|
+
selected
|
|
443
|
+
}) => setYear(selected),
|
|
444
|
+
onClick: ({
|
|
445
|
+
relativePeriod: newRelativePeriod
|
|
446
|
+
}) => setRelativePeriod(newRelativePeriod)
|
|
484
447
|
});
|
|
485
448
|
return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, props, {
|
|
486
449
|
options: allOptions,
|
|
@@ -490,22 +453,18 @@ const createCustomFilteringInHeader = hideFilterInput => {
|
|
|
490
453
|
filterCallback: filterCallback,
|
|
491
454
|
leftHeader: header,
|
|
492
455
|
rightHeader: /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("b", null, "Selected Periods")),
|
|
493
|
-
onFilterChange:
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
} = _ref15;
|
|
497
|
-
return setFilter(value);
|
|
498
|
-
},
|
|
456
|
+
onFilterChange: ({
|
|
457
|
+
value
|
|
458
|
+
}) => setFilter(value),
|
|
499
459
|
height: "400px",
|
|
500
460
|
filterLabel: "Filter options",
|
|
501
461
|
filterPlaceholder: "Search"
|
|
502
462
|
}));
|
|
503
463
|
};
|
|
504
|
-
return
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
} = _ref16;
|
|
464
|
+
return ({
|
|
465
|
+
initiallySelected,
|
|
466
|
+
...args
|
|
467
|
+
}) => {
|
|
509
468
|
const [selected, setSelected] = (0, _react.useState)(initiallySelected);
|
|
510
469
|
const onChange = payload => setSelected(payload.selected);
|
|
511
470
|
return /*#__PURE__*/_react.default.createElement(CustomTransfer, _extends({}, args, {
|
|
@@ -539,12 +498,9 @@ const InfiniteLoading = args => {
|
|
|
539
498
|
// selected options
|
|
540
499
|
const [selected] = (0, _react.useState)(
|
|
541
500
|
// Last 4 options preselected
|
|
542
|
-
preSelectedOptions.map(
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
} = _ref17;
|
|
546
|
-
return value;
|
|
547
|
-
}));
|
|
501
|
+
preSelectedOptions.map(({
|
|
502
|
+
value
|
|
503
|
+
}) => value));
|
|
548
504
|
const selectedOptionsLookup = (0, _react.useMemo)(() => preSelectedOptions.reduce((lookup, option) => {
|
|
549
505
|
lookup[option.value] = option;
|
|
550
506
|
return lookup;
|
|
@@ -584,12 +540,9 @@ const LoadingPicked = exports.LoadingPicked = StatefulTemplate.bind({});
|
|
|
584
540
|
LoadingPicked.args = {
|
|
585
541
|
loadingPicked: true,
|
|
586
542
|
options: options.slice(0, 3),
|
|
587
|
-
initiallySelected: options.slice(0, 2).map(
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
} = _ref18;
|
|
591
|
-
return value;
|
|
592
|
-
})
|
|
543
|
+
initiallySelected: options.slice(0, 2).map(({
|
|
544
|
+
value
|
|
545
|
+
}) => value)
|
|
593
546
|
};
|
|
594
547
|
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
595
548
|
dir: "rtl"
|
|
@@ -6,36 +6,27 @@ export default {
|
|
|
6
6
|
title: 'Transfer add & remove highlighted options',
|
|
7
7
|
decorators: [statefulDecorator()]
|
|
8
8
|
};
|
|
9
|
-
export const HasOptions = (_,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
return /*#__PURE__*/React.createElement(Transfer, {
|
|
27
|
-
onChange: onChange,
|
|
28
|
-
selected: selected,
|
|
29
|
-
options: options
|
|
30
|
-
});
|
|
31
|
-
};
|
|
9
|
+
export const HasOptions = (_, {
|
|
10
|
+
onChange,
|
|
11
|
+
selected
|
|
12
|
+
}) => /*#__PURE__*/React.createElement(Transfer, {
|
|
13
|
+
filterable: true,
|
|
14
|
+
selected: selected,
|
|
15
|
+
onChange: onChange,
|
|
16
|
+
options: options
|
|
17
|
+
});
|
|
18
|
+
export const HasSelected = (_, {
|
|
19
|
+
onChange,
|
|
20
|
+
selected
|
|
21
|
+
}) => /*#__PURE__*/React.createElement(Transfer, {
|
|
22
|
+
onChange: onChange,
|
|
23
|
+
selected: selected,
|
|
24
|
+
options: options
|
|
25
|
+
});
|
|
32
26
|
HasSelected.story = {
|
|
33
27
|
decorators: [statefulDecorator({
|
|
34
|
-
initialState: options.slice(0, 4).map(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
} = _ref3;
|
|
38
|
-
return value;
|
|
39
|
-
})
|
|
28
|
+
initialState: options.slice(0, 4).map(({
|
|
29
|
+
value
|
|
30
|
+
}) => value)
|
|
40
31
|
})]
|
|
41
32
|
};
|
|
@@ -1,37 +1,30 @@
|
|
|
1
1
|
/* eslint-disable react/display-name */
|
|
2
2
|
|
|
3
3
|
import React, { useState } from 'react';
|
|
4
|
-
const WithState =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
} = _ref;
|
|
4
|
+
const WithState = ({
|
|
5
|
+
fn,
|
|
6
|
+
initialState,
|
|
7
|
+
initialSearchTerm,
|
|
8
|
+
controlFilter
|
|
9
|
+
}) => {
|
|
11
10
|
const [selected, setSelected] = useState(initialState);
|
|
12
11
|
const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
|
|
13
12
|
return fn({
|
|
14
13
|
selected,
|
|
15
14
|
searchTerm: controlFilter ? searchTerm : undefined,
|
|
16
15
|
onChange: payload => setSelected(payload.selected),
|
|
17
|
-
onFilterChange: controlFilter ?
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
} = _ref2;
|
|
21
|
-
return setSearchTerm(value);
|
|
22
|
-
} : undefined
|
|
16
|
+
onFilterChange: controlFilter ? ({
|
|
17
|
+
value
|
|
18
|
+
}) => setSearchTerm(value) : undefined
|
|
23
19
|
});
|
|
24
20
|
};
|
|
25
|
-
export const statefulDecorator =
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
fn: fn
|
|
36
|
-
});
|
|
37
|
-
};
|
|
21
|
+
export const statefulDecorator = ({
|
|
22
|
+
initialState = [],
|
|
23
|
+
controlFilter = false,
|
|
24
|
+
initialSearchTerm = ''
|
|
25
|
+
} = {}) => fn => /*#__PURE__*/React.createElement(WithState, {
|
|
26
|
+
initialState: initialState,
|
|
27
|
+
initialSearchTerm: initialSearchTerm,
|
|
28
|
+
controlFilter: controlFilter,
|
|
29
|
+
fn: fn
|
|
30
|
+
});
|
|
@@ -6,81 +6,60 @@ export default {
|
|
|
6
6
|
title: 'Transfer Disabled Transfer Buttons',
|
|
7
7
|
decorators: [statefulDecorator()]
|
|
8
8
|
};
|
|
9
|
-
export const NoOptions = (_,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
selected,
|
|
45
|
-
onChange
|
|
46
|
-
} = _ref4;
|
|
47
|
-
return /*#__PURE__*/React.createElement(Transfer, {
|
|
48
|
-
selected: selected,
|
|
49
|
-
onChange: onChange,
|
|
50
|
-
options: [{
|
|
51
|
-
...options[0],
|
|
52
|
-
disabled: true
|
|
53
|
-
}]
|
|
54
|
-
});
|
|
55
|
-
};
|
|
9
|
+
export const NoOptions = (_, {
|
|
10
|
+
selected,
|
|
11
|
+
onChange
|
|
12
|
+
}) => /*#__PURE__*/React.createElement(Transfer, {
|
|
13
|
+
selected: selected,
|
|
14
|
+
onChange: onChange,
|
|
15
|
+
options: []
|
|
16
|
+
});
|
|
17
|
+
export const HasOptions = (_, {
|
|
18
|
+
selected,
|
|
19
|
+
onChange
|
|
20
|
+
}) => /*#__PURE__*/React.createElement(Transfer, {
|
|
21
|
+
selected: selected,
|
|
22
|
+
onChange: onChange,
|
|
23
|
+
options: options
|
|
24
|
+
});
|
|
25
|
+
export const SomeOptionsSelected = (_, {
|
|
26
|
+
selected,
|
|
27
|
+
onChange
|
|
28
|
+
}) => /*#__PURE__*/React.createElement(Transfer, {
|
|
29
|
+
selected: selected,
|
|
30
|
+
onChange: onChange,
|
|
31
|
+
options: options
|
|
32
|
+
});
|
|
33
|
+
export const OnlyDisabledSourceOptions = (_, {
|
|
34
|
+
selected,
|
|
35
|
+
onChange
|
|
36
|
+
}) => /*#__PURE__*/React.createElement(Transfer, {
|
|
37
|
+
selected: selected,
|
|
38
|
+
onChange: onChange,
|
|
39
|
+
options: [{
|
|
40
|
+
...options[0],
|
|
41
|
+
disabled: true
|
|
42
|
+
}]
|
|
43
|
+
});
|
|
56
44
|
SomeOptionsSelected.story = {
|
|
57
45
|
decorators: [statefulDecorator({
|
|
58
|
-
initialState: options.slice(0, 4).map(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
} = _ref5;
|
|
62
|
-
return value;
|
|
63
|
-
})
|
|
46
|
+
initialState: options.slice(0, 4).map(({
|
|
47
|
+
value
|
|
48
|
+
}) => value)
|
|
64
49
|
})]
|
|
65
50
|
};
|
|
66
|
-
export const AllOptionsSelected = (_,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
options: options
|
|
75
|
-
});
|
|
76
|
-
};
|
|
51
|
+
export const AllOptionsSelected = (_, {
|
|
52
|
+
selected,
|
|
53
|
+
onChange
|
|
54
|
+
}) => /*#__PURE__*/React.createElement(Transfer, {
|
|
55
|
+
selected: selected,
|
|
56
|
+
onChange: onChange,
|
|
57
|
+
options: options
|
|
58
|
+
});
|
|
77
59
|
AllOptionsSelected.story = {
|
|
78
60
|
decorators: [statefulDecorator({
|
|
79
|
-
initialState: options.map(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
} = _ref7;
|
|
83
|
-
return value;
|
|
84
|
-
})
|
|
61
|
+
initialState: options.map(({
|
|
62
|
+
value
|
|
63
|
+
}) => value)
|
|
85
64
|
})]
|
|
86
65
|
};
|
|
@@ -6,17 +6,14 @@ export default {
|
|
|
6
6
|
title: 'Disabled Source Options',
|
|
7
7
|
decorators: [statefulDecorator()]
|
|
8
8
|
};
|
|
9
|
-
export const OneDisabled = (_,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}, ...options.slice(4)]
|
|
21
|
-
});
|
|
22
|
-
};
|
|
9
|
+
export const OneDisabled = (_, {
|
|
10
|
+
selected,
|
|
11
|
+
onChange
|
|
12
|
+
}) => /*#__PURE__*/React.createElement(Transfer, {
|
|
13
|
+
selected: selected,
|
|
14
|
+
onChange: onChange,
|
|
15
|
+
options: [...options.slice(0, 3), {
|
|
16
|
+
...options[3],
|
|
17
|
+
disabled: true
|
|
18
|
+
}, ...options.slice(4)]
|
|
19
|
+
});
|