@snack-uikit/chips 0.30.2-preview-6a625dbd.0 → 0.30.2-preview-74429015.0
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/dist/cjs/components/ChipAssist/ChipAssist.js +11 -11
- package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.js +22 -16
- package/dist/cjs/components/ChipChoice/components/ChipChoiceCustom.js +26 -17
- package/dist/cjs/components/ChipChoice/components/ChipChoiceDate.js +30 -23
- package/dist/cjs/components/ChipChoice/components/ChipChoiceDateRange.js +29 -23
- package/dist/cjs/components/ChipChoice/components/ChipChoiceMultiple.js +56 -43
- package/dist/cjs/components/ChipChoice/components/ChipChoiceSingle.js +52 -41
- package/dist/cjs/components/ChipChoice/components/ChipChoiceTime.js +31 -26
- package/dist/cjs/components/ChipChoice/hooks.js +11 -18
- package/dist/cjs/components/ChipChoice/utils/options.js +11 -19
- package/dist/cjs/components/ChipChoice/utils/utils.js +9 -15
- package/dist/cjs/components/ChipChoiceRow/ChipChoiceRow.js +53 -40
- package/dist/cjs/components/ChipChoiceRow/__unit__/helpers.spec.js +4 -8
- package/dist/cjs/components/ChipToggle/ChipToggle.js +13 -12
- package/dist/cjs/helperComponents/ButtonClearValue/ButtonClearValue.js +6 -7
- package/package.json +7 -7
|
@@ -26,17 +26,17 @@ const constants_1 = require("../../constants");
|
|
|
26
26
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
27
27
|
/** Чип с лейблом */
|
|
28
28
|
function ChipAssist(_a) {
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
29
|
+
var icon = _a.icon,
|
|
30
|
+
_a$size = _a.size,
|
|
31
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
32
|
+
label = _a.label,
|
|
33
|
+
disabled = _a.disabled,
|
|
34
|
+
loading = _a.loading,
|
|
35
|
+
onClick = _a.onClick,
|
|
36
|
+
className = _a.className,
|
|
37
|
+
tabIndex = _a.tabIndex,
|
|
38
|
+
_a$truncateVariant = _a.truncateVariant,
|
|
39
|
+
truncateVariant = _a$truncateVariant === void 0 ? 'middle' : _a$truncateVariant,
|
|
40
40
|
rest = __rest(_a, ["icon", "size", "label", "disabled", "loading", "onClick", "className", "tabIndex", "truncateVariant"]);
|
|
41
41
|
const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
|
|
42
42
|
const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -29,28 +31,32 @@ const helperComponents_1 = require("../../../../helperComponents");
|
|
|
29
31
|
const constants_2 = require("../../constants");
|
|
30
32
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
31
33
|
exports.ChipChoiceBase = (0, react_1.forwardRef)((_a, ref) => {
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
var _a$size = _a.size,
|
|
35
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
36
|
+
disabled = _a.disabled,
|
|
37
|
+
loading = _a.loading,
|
|
38
|
+
icon = _a.icon,
|
|
39
|
+
label = _a.label,
|
|
40
|
+
valueToRender = _a.valueToRender,
|
|
41
|
+
value = _a.value,
|
|
42
|
+
onClick = _a.onClick,
|
|
43
|
+
className = _a.className,
|
|
44
|
+
_a$tabIndex = _a.tabIndex,
|
|
45
|
+
tabIndex = _a$tabIndex === void 0 ? 0 : _a$tabIndex,
|
|
46
|
+
onClearButtonClick = _a.onClearButtonClick,
|
|
47
|
+
onKeyDown = _a.onKeyDown,
|
|
48
|
+
_a$truncateVariant = _a.truncateVariant,
|
|
49
|
+
truncateVariant = _a$truncateVariant === void 0 ? 'middle' : _a$truncateVariant,
|
|
47
50
|
rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown", "truncateVariant"]);
|
|
48
51
|
const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
|
|
49
52
|
const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
|
|
50
53
|
const localRef = (0, react_1.useRef)(null);
|
|
51
54
|
const clearButtonRef = (0, react_1.useRef)(null);
|
|
52
55
|
const showClearButton = Boolean(onClearButtonClick);
|
|
53
|
-
const
|
|
56
|
+
const _ref = (0, react_1.useState)(false),
|
|
57
|
+
_ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
58
|
+
isDroplistOpened = _ref2[0],
|
|
59
|
+
setIsDroplistOpened = _ref2[1];
|
|
54
60
|
const handleChipClick = e => {
|
|
55
61
|
if (loading || disabled) return;
|
|
56
62
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -22,25 +24,32 @@ const hooks_1 = require("../hooks");
|
|
|
22
24
|
const ChipChoiceBase_1 = require("./ChipChoiceBase");
|
|
23
25
|
function ChipChoiceCustom(_a) {
|
|
24
26
|
var _b;
|
|
25
|
-
var
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
27
|
+
var _a$size = _a.size,
|
|
28
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
29
|
+
valueProp = _a.value,
|
|
30
|
+
onChangeProp = _a.onChange,
|
|
31
|
+
_a$placement = _a.placement,
|
|
32
|
+
placement = _a$placement === void 0 ? 'bottom-start' : _a$placement,
|
|
33
|
+
_a$widthStrategy = _a.widthStrategy,
|
|
34
|
+
widthStrategy = _a$widthStrategy === void 0 ? 'gte' : _a$widthStrategy,
|
|
35
|
+
content = _a.content,
|
|
36
|
+
valueRender = _a.valueRender,
|
|
37
|
+
onClearButtonClick = _a.onClearButtonClick,
|
|
38
|
+
openProp = _a.open,
|
|
39
|
+
onOpenChange = _a.onOpenChange,
|
|
37
40
|
rest = __rest(_a, ["size", "value", "onChange", "placement", "widthStrategy", "content", "valueRender", "onClearButtonClick", "open", "onOpenChange"]);
|
|
38
41
|
const localRef = (0, react_1.useRef)(null);
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
const _ref = (0, utils_1.useValueControl)({
|
|
43
|
+
value: valueProp,
|
|
44
|
+
onChange: onChangeProp
|
|
45
|
+
}),
|
|
46
|
+
_ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
47
|
+
value = _ref2[0],
|
|
48
|
+
setValue = _ref2[1];
|
|
49
|
+
const _ref3 = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange),
|
|
50
|
+
_ref4 = (0, _slicedToArray2.default)(_ref3, 2),
|
|
51
|
+
open = _ref4[0],
|
|
52
|
+
setOpen = _ref4[1];
|
|
44
53
|
const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
|
|
45
54
|
setOpen
|
|
46
55
|
});
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -25,30 +27,36 @@ const hooks_1 = require("../hooks");
|
|
|
25
27
|
const ChipChoiceBase_1 = require("./ChipChoiceBase");
|
|
26
28
|
function ChipChoiceDate(_a) {
|
|
27
29
|
var _b;
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
+
var _a$size = _a.size,
|
|
31
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
32
|
+
value = _a.value,
|
|
33
|
+
defaultValue = _a.defaultValue,
|
|
34
|
+
onChange = _a.onChange,
|
|
35
|
+
valueRender = _a.valueRender,
|
|
36
|
+
dropDownClassName = _a.dropDownClassName,
|
|
37
|
+
_a$mode = _a.mode,
|
|
38
|
+
mode = _a$mode === void 0 ? 'date' : _a$mode,
|
|
39
|
+
placement = _a.placement,
|
|
40
|
+
widthStrategy = _a.widthStrategy,
|
|
41
|
+
buildCalendarCellProps = _a.buildCalendarCellProps,
|
|
42
|
+
onClearButtonClick = _a.onClearButtonClick,
|
|
43
|
+
openProp = _a.open,
|
|
44
|
+
onOpenChange = _a.onOpenChange,
|
|
45
|
+
rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode", "placement", "widthStrategy", "buildCalendarCellProps", "onClearButtonClick", "open", "onOpenChange"]);
|
|
46
|
+
const _ref = (0, utils_1.useValueControl)({
|
|
30
47
|
value,
|
|
31
48
|
defaultValue,
|
|
32
|
-
onChange
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
widthStrategy,
|
|
38
|
-
buildCalendarCellProps,
|
|
39
|
-
onClearButtonClick,
|
|
40
|
-
open: openProp,
|
|
41
|
-
onOpenChange
|
|
42
|
-
} = _a,
|
|
43
|
-
rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode", "placement", "widthStrategy", "buildCalendarCellProps", "onClearButtonClick", "open", "onOpenChange"]);
|
|
44
|
-
const [selectedValue, setSelectedValue] = (0, utils_1.useValueControl)({
|
|
45
|
-
value,
|
|
46
|
-
defaultValue,
|
|
47
|
-
onChange
|
|
48
|
-
});
|
|
49
|
+
onChange
|
|
50
|
+
}),
|
|
51
|
+
_ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
52
|
+
selectedValue = _ref2[0],
|
|
53
|
+
setSelectedValue = _ref2[1];
|
|
49
54
|
const showSeconds = mode === 'date-time' ? (_b = rest.showSeconds) !== null && _b !== void 0 ? _b : true : undefined;
|
|
50
55
|
const localRef = (0, react_1.useRef)(null);
|
|
51
|
-
const
|
|
56
|
+
const _ref3 = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange),
|
|
57
|
+
_ref4 = (0, _slicedToArray2.default)(_ref3, 2),
|
|
58
|
+
open = _ref4[0],
|
|
59
|
+
setOpen = _ref4[1];
|
|
52
60
|
const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
|
|
53
61
|
setOpen
|
|
54
62
|
});
|
|
@@ -59,9 +67,8 @@ function ChipChoiceDate(_a) {
|
|
|
59
67
|
return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
60
68
|
}, 0);
|
|
61
69
|
}, [setOpen]);
|
|
62
|
-
const
|
|
63
|
-
t
|
|
64
|
-
} = (0, locale_1.useLocale)('Chips');
|
|
70
|
+
const _ref5 = (0, locale_1.useLocale)('Chips'),
|
|
71
|
+
t = _ref5.t;
|
|
65
72
|
const valueToRender = (0, react_1.useMemo)(() => {
|
|
66
73
|
if (valueRender) {
|
|
67
74
|
return valueRender(selectedValue);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -23,38 +25,42 @@ const constants_2 = require("../constants");
|
|
|
23
25
|
const hooks_1 = require("../hooks");
|
|
24
26
|
const ChipChoiceBase_1 = require("./ChipChoiceBase");
|
|
25
27
|
function defaultRangeFormatter(_ref) {
|
|
26
|
-
let
|
|
27
|
-
|
|
28
|
-
allLabel
|
|
29
|
-
} = _ref;
|
|
28
|
+
let value = _ref.value,
|
|
29
|
+
allLabel = _ref.allLabel;
|
|
30
30
|
if (!value || !value.length) return allLabel;
|
|
31
|
-
const
|
|
32
|
-
|
|
31
|
+
const _value = (0, _slicedToArray2.default)(value, 2),
|
|
32
|
+
from = _value[0],
|
|
33
|
+
to = _value[1];
|
|
34
|
+
return "".concat(from.toLocaleDateString(constants_2.DEFAULT_LOCALE), " ").concat(constants_1.DEFAULT_EMPTY_VALUE, " ").concat(to.toLocaleDateString(constants_2.DEFAULT_LOCALE));
|
|
33
35
|
}
|
|
34
36
|
function ChipChoiceDateRange(_a) {
|
|
35
|
-
var
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
} = _a,
|
|
37
|
+
var _a$size = _a.size,
|
|
38
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
39
|
+
value = _a.value,
|
|
40
|
+
defaultValue = _a.defaultValue,
|
|
41
|
+
onChange = _a.onChange,
|
|
42
|
+
valueRender = _a.valueRender,
|
|
43
|
+
dropDownClassName = _a.dropDownClassName,
|
|
44
|
+
buildCalendarCellProps = _a.buildCalendarCellProps,
|
|
45
|
+
onClearButtonClick = _a.onClearButtonClick,
|
|
46
|
+
openProp = _a.open,
|
|
47
|
+
onOpenChange = _a.onOpenChange,
|
|
47
48
|
rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "buildCalendarCellProps", "onClearButtonClick", "open", "onOpenChange"]);
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
const _ref2 = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, onChange),
|
|
50
|
+
_ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
51
|
+
selectedValue = _ref3[0],
|
|
52
|
+
setSelectedValue = _ref3[1];
|
|
53
|
+
const _ref4 = (0, locale_1.useLocale)('Chips'),
|
|
54
|
+
t = _ref4.t;
|
|
52
55
|
const valueToRender = valueRender ? valueRender(selectedValue) : defaultRangeFormatter({
|
|
53
56
|
value: selectedValue,
|
|
54
57
|
allLabel: t('allLabel')
|
|
55
58
|
});
|
|
56
59
|
const localRef = (0, react_1.useRef)(null);
|
|
57
|
-
const
|
|
60
|
+
const _ref5 = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange),
|
|
61
|
+
_ref6 = (0, _slicedToArray2.default)(_ref5, 2),
|
|
62
|
+
open = _ref6[0],
|
|
63
|
+
setOpen = _ref6[1];
|
|
58
64
|
const closeDroplist = (0, react_1.useCallback)(() => {
|
|
59
65
|
setOpen(false);
|
|
60
66
|
setTimeout(() => {
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -25,11 +27,9 @@ const utils_2 = require("../utils");
|
|
|
25
27
|
const options_1 = require("../utils/options");
|
|
26
28
|
const ChipChoiceBase_1 = require("./ChipChoiceBase");
|
|
27
29
|
const defaultMultiValueLabelFormatter = _ref => {
|
|
28
|
-
let
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
allLabel
|
|
32
|
-
} = _ref;
|
|
30
|
+
let value = _ref.value,
|
|
31
|
+
total = _ref.total,
|
|
32
|
+
allLabel = _ref.allLabel;
|
|
33
33
|
const len = value.length;
|
|
34
34
|
if ([0, total].includes(len) && total !== len) {
|
|
35
35
|
return allLabel;
|
|
@@ -37,51 +37,64 @@ const defaultMultiValueLabelFormatter = _ref => {
|
|
|
37
37
|
if (len === 1) {
|
|
38
38
|
return value[0].label;
|
|
39
39
|
}
|
|
40
|
-
return
|
|
40
|
+
return "".concat(len.toString(), "/").concat(total);
|
|
41
41
|
};
|
|
42
42
|
function ChipChoiceMultiple(_a) {
|
|
43
|
-
var
|
|
43
|
+
var valueProp = _a.value,
|
|
44
|
+
defaultValue = _a.defaultValue,
|
|
45
|
+
options = _a.options,
|
|
46
|
+
onChangeProp = _a.onChange,
|
|
47
|
+
valueRender = _a.valueRender,
|
|
48
|
+
_a$size = _a.size,
|
|
49
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
50
|
+
label = _a.label,
|
|
51
|
+
searchable = _a.searchable,
|
|
52
|
+
contentRender = _a.contentRender,
|
|
53
|
+
dropDownClassName = _a.dropDownClassName,
|
|
54
|
+
onClearButtonClick = _a.onClearButtonClick,
|
|
55
|
+
_a$autoApply = _a.autoApply,
|
|
56
|
+
autoApply = _a$autoApply === void 0 ? true : _a$autoApply,
|
|
57
|
+
_a$disableFuzzySearch = _a.disableFuzzySearch,
|
|
58
|
+
disableFuzzySearch = _a$disableFuzzySearch === void 0 ? false : _a$disableFuzzySearch,
|
|
59
|
+
onApprove = _a.onApprove,
|
|
60
|
+
onCancel = _a.onCancel,
|
|
61
|
+
openProp = _a.open,
|
|
62
|
+
onOpenChange = _a.onOpenChange,
|
|
63
|
+
_a$widthStrategy = _a.widthStrategy,
|
|
64
|
+
widthStrategy = _a$widthStrategy === void 0 ? 'gte' : _a$widthStrategy,
|
|
65
|
+
rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "onClearButtonClick", "autoApply", "disableFuzzySearch", "onApprove", "onCancel", "open", "onOpenChange", "widthStrategy"]);
|
|
66
|
+
const _ref2 = (0, utils_1.useValueControl)({
|
|
44
67
|
value: valueProp,
|
|
45
68
|
defaultValue,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
onApprove,
|
|
58
|
-
onCancel,
|
|
59
|
-
open: openProp,
|
|
60
|
-
onOpenChange,
|
|
61
|
-
widthStrategy = 'gte'
|
|
62
|
-
} = _a,
|
|
63
|
-
rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "onClearButtonClick", "autoApply", "disableFuzzySearch", "onApprove", "onCancel", "open", "onOpenChange", "widthStrategy"]);
|
|
64
|
-
const [value, setValue] = (0, utils_1.useValueControl)({
|
|
65
|
-
value: valueProp,
|
|
66
|
-
defaultValue,
|
|
67
|
-
onChange: onChangeProp
|
|
68
|
-
});
|
|
69
|
-
const [deferredValue, setDeferredValue] = (0, utils_1.useValueControl)({
|
|
70
|
-
defaultValue
|
|
71
|
-
});
|
|
69
|
+
onChange: onChangeProp
|
|
70
|
+
}),
|
|
71
|
+
_ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
72
|
+
value = _ref3[0],
|
|
73
|
+
setValue = _ref3[1];
|
|
74
|
+
const _ref4 = (0, utils_1.useValueControl)({
|
|
75
|
+
defaultValue
|
|
76
|
+
}),
|
|
77
|
+
_ref5 = (0, _slicedToArray2.default)(_ref4, 2),
|
|
78
|
+
deferredValue = _ref5[0],
|
|
79
|
+
setDeferredValue = _ref5[1];
|
|
72
80
|
const flattenOptions = (0, react_1.useMemo)(() => {
|
|
73
|
-
const {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
});
|
|
81
|
+
const _ref6 = (0, utils_2.kindFlattenOptions)({
|
|
82
|
+
options
|
|
83
|
+
}),
|
|
84
|
+
flattenOptions = _ref6.flattenOptions;
|
|
78
85
|
return flattenOptions;
|
|
79
86
|
}, [options]);
|
|
80
|
-
const
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
87
|
+
const _ref7 = (0, react_1.useState)(''),
|
|
88
|
+
_ref8 = (0, _slicedToArray2.default)(_ref7, 2),
|
|
89
|
+
_ref8$ = _ref8[0],
|
|
90
|
+
searchValue = _ref8$ === void 0 ? '' : _ref8$,
|
|
91
|
+
setSearchValue = _ref8[1];
|
|
92
|
+
const _ref9 = (0, locale_1.useLocale)('Chips'),
|
|
93
|
+
t = _ref9.t;
|
|
94
|
+
const _ref0 = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange),
|
|
95
|
+
_ref1 = (0, _slicedToArray2.default)(_ref0, 2),
|
|
96
|
+
open = _ref1[0],
|
|
97
|
+
setOpen = _ref1[1];
|
|
85
98
|
const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
|
|
86
99
|
setOpen
|
|
87
100
|
});
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -26,61 +28,70 @@ const utils_2 = require("../utils");
|
|
|
26
28
|
const options_1 = require("../utils/options");
|
|
27
29
|
const ChipChoiceBase_1 = require("./ChipChoiceBase");
|
|
28
30
|
function defaultSingleValueFormatter(_ref) {
|
|
29
|
-
let
|
|
30
|
-
|
|
31
|
-
allLabel
|
|
32
|
-
} = _ref;
|
|
31
|
+
let label = _ref.label,
|
|
32
|
+
allLabel = _ref.allLabel;
|
|
33
33
|
return label !== null && label !== void 0 ? label : allLabel;
|
|
34
34
|
}
|
|
35
35
|
function ChipChoiceSingle(_a) {
|
|
36
|
-
var
|
|
36
|
+
var valueProp = _a.value,
|
|
37
|
+
defaultValue = _a.defaultValue,
|
|
38
|
+
options = _a.options,
|
|
39
|
+
onChangeProp = _a.onChange,
|
|
40
|
+
valueRender = _a.valueRender,
|
|
41
|
+
_a$size = _a.size,
|
|
42
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
43
|
+
label = _a.label,
|
|
44
|
+
searchable = _a.searchable,
|
|
45
|
+
contentRender = _a.contentRender,
|
|
46
|
+
dropDownClassName = _a.dropDownClassName,
|
|
47
|
+
disableFuzzySearch = _a.disableFuzzySearch,
|
|
48
|
+
_a$autoApply = _a.autoApply,
|
|
49
|
+
autoApply = _a$autoApply === void 0 ? true : _a$autoApply,
|
|
50
|
+
onApprove = _a.onApprove,
|
|
51
|
+
onCancel = _a.onCancel,
|
|
52
|
+
onClearButtonClick = _a.onClearButtonClick,
|
|
53
|
+
openProp = _a.open,
|
|
54
|
+
onOpenChange = _a.onOpenChange,
|
|
55
|
+
_a$widthStrategy = _a.widthStrategy,
|
|
56
|
+
widthStrategy = _a$widthStrategy === void 0 ? 'gte' : _a$widthStrategy,
|
|
57
|
+
rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "disableFuzzySearch", "autoApply", "onApprove", "onCancel", "onClearButtonClick", "open", "onOpenChange", "widthStrategy"]);
|
|
58
|
+
const _ref2 = (0, utils_1.useValueControl)({
|
|
37
59
|
value: valueProp,
|
|
38
60
|
defaultValue,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
onCancel,
|
|
51
|
-
onClearButtonClick,
|
|
52
|
-
open: openProp,
|
|
53
|
-
onOpenChange,
|
|
54
|
-
widthStrategy = 'gte'
|
|
55
|
-
} = _a,
|
|
56
|
-
rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "disableFuzzySearch", "autoApply", "onApprove", "onCancel", "onClearButtonClick", "open", "onOpenChange", "widthStrategy"]);
|
|
57
|
-
const [value, setValue] = (0, utils_1.useValueControl)({
|
|
58
|
-
value: valueProp,
|
|
59
|
-
defaultValue,
|
|
60
|
-
onChange: onChangeProp
|
|
61
|
-
});
|
|
62
|
-
const [deferredValue, setDeferredValue] = (0, utils_1.useValueControl)({
|
|
63
|
-
defaultValue
|
|
64
|
-
});
|
|
61
|
+
onChange: onChangeProp
|
|
62
|
+
}),
|
|
63
|
+
_ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
64
|
+
value = _ref3[0],
|
|
65
|
+
setValue = _ref3[1];
|
|
66
|
+
const _ref4 = (0, utils_1.useValueControl)({
|
|
67
|
+
defaultValue
|
|
68
|
+
}),
|
|
69
|
+
_ref5 = (0, _slicedToArray2.default)(_ref4, 2),
|
|
70
|
+
deferredValue = _ref5[0],
|
|
71
|
+
setDeferredValue = _ref5[1];
|
|
65
72
|
const flattenOptions = (0, react_1.useMemo)(() => {
|
|
66
|
-
const {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
});
|
|
73
|
+
const _ref6 = (0, utils_2.kindFlattenOptions)({
|
|
74
|
+
options
|
|
75
|
+
}),
|
|
76
|
+
flattenOptions = _ref6.flattenOptions;
|
|
71
77
|
return flattenOptions;
|
|
72
78
|
}, [options]);
|
|
73
|
-
const
|
|
74
|
-
t
|
|
75
|
-
|
|
76
|
-
|
|
79
|
+
const _ref7 = (0, locale_1.useLocale)('Chips'),
|
|
80
|
+
t = _ref7.t;
|
|
81
|
+
const _ref8 = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange),
|
|
82
|
+
_ref9 = (0, _slicedToArray2.default)(_ref8, 2),
|
|
83
|
+
open = _ref9[0],
|
|
84
|
+
setOpen = _ref9[1];
|
|
77
85
|
const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
|
|
78
86
|
setOpen
|
|
79
87
|
});
|
|
80
88
|
const flatMapOptions = (0, react_1.useMemo)(() => Object.values(flattenOptions), [flattenOptions]);
|
|
81
89
|
const dropListSelection = (0, react_1.useMemo)(() => autoApply ? value : deferredValue, [autoApply, deferredValue, value]);
|
|
82
90
|
const selectedOption = (0, react_1.useMemo)(() => value ? flattenOptions[value] : {}, [flattenOptions, value]);
|
|
83
|
-
const
|
|
91
|
+
const _ref0 = (0, react_1.useState)(''),
|
|
92
|
+
_ref1 = (0, _slicedToArray2.default)(_ref0, 2),
|
|
93
|
+
searchValue = _ref1[0],
|
|
94
|
+
setSearchValue = _ref1[1];
|
|
84
95
|
const valueToRender = valueRender ? valueRender(selectedOption) : defaultSingleValueFormatter({
|
|
85
96
|
label: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label,
|
|
86
97
|
allLabel: t('allLabel')
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -24,10 +26,8 @@ const constants_2 = require("../constants");
|
|
|
24
26
|
const hooks_1 = require("../hooks");
|
|
25
27
|
const ChipChoiceBase_1 = require("./ChipChoiceBase");
|
|
26
28
|
const getStringTimeValue = (time, _ref) => {
|
|
27
|
-
let
|
|
28
|
-
|
|
29
|
-
locale
|
|
30
|
-
} = _ref;
|
|
29
|
+
let showSeconds = _ref.showSeconds,
|
|
30
|
+
locale = _ref.locale;
|
|
31
31
|
var _a, _b, _c;
|
|
32
32
|
if (!time) {
|
|
33
33
|
return '';
|
|
@@ -43,28 +43,34 @@ const getStringTimeValue = (time, _ref) => {
|
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
45
|
function ChipChoiceTime(_a) {
|
|
46
|
-
var
|
|
47
|
-
|
|
46
|
+
var _a$size = _a.size,
|
|
47
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
48
|
+
value = _a.value,
|
|
49
|
+
defaultValue = _a.defaultValue,
|
|
50
|
+
onChange = _a.onChange,
|
|
51
|
+
valueRender = _a.valueRender,
|
|
52
|
+
dropDownClassName = _a.dropDownClassName,
|
|
53
|
+
_a$showSeconds = _a.showSeconds,
|
|
54
|
+
showSeconds = _a$showSeconds === void 0 ? true : _a$showSeconds,
|
|
55
|
+
footerMode = _a.footerMode,
|
|
56
|
+
placement = _a.placement,
|
|
57
|
+
onClearButtonClick = _a.onClearButtonClick,
|
|
58
|
+
openProp = _a.open,
|
|
59
|
+
onOpenChange = _a.onOpenChange,
|
|
60
|
+
rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "showSeconds", "footerMode", "placement", "onClearButtonClick", "open", "onOpenChange"]);
|
|
61
|
+
const _ref2 = (0, utils_1.useValueControl)({
|
|
48
62
|
value,
|
|
49
63
|
defaultValue,
|
|
50
|
-
onChange
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
placement,
|
|
56
|
-
onClearButtonClick,
|
|
57
|
-
open: openProp,
|
|
58
|
-
onOpenChange
|
|
59
|
-
} = _a,
|
|
60
|
-
rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "showSeconds", "footerMode", "placement", "onClearButtonClick", "open", "onOpenChange"]);
|
|
61
|
-
const [selectedValue, setSelectedValue] = (0, utils_1.useValueControl)({
|
|
62
|
-
value,
|
|
63
|
-
defaultValue,
|
|
64
|
-
onChange
|
|
65
|
-
});
|
|
64
|
+
onChange
|
|
65
|
+
}),
|
|
66
|
+
_ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
67
|
+
selectedValue = _ref3[0],
|
|
68
|
+
setSelectedValue = _ref3[1];
|
|
66
69
|
const localRef = (0, react_1.useRef)(null);
|
|
67
|
-
const
|
|
70
|
+
const _ref4 = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange),
|
|
71
|
+
_ref5 = (0, _slicedToArray2.default)(_ref4, 2),
|
|
72
|
+
open = _ref5[0],
|
|
73
|
+
setOpen = _ref5[1];
|
|
68
74
|
const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
|
|
69
75
|
setOpen
|
|
70
76
|
});
|
|
@@ -75,9 +81,8 @@ function ChipChoiceTime(_a) {
|
|
|
75
81
|
return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
76
82
|
}, 0);
|
|
77
83
|
}, [setOpen]);
|
|
78
|
-
const
|
|
79
|
-
t
|
|
80
|
-
} = (0, locale_1.useLocale)('Chips');
|
|
84
|
+
const _ref6 = (0, locale_1.useLocale)('Chips'),
|
|
85
|
+
t = _ref6.t;
|
|
81
86
|
const valueToRender = (0, react_1.useMemo)(() => {
|
|
82
87
|
if (valueRender) {
|
|
83
88
|
return valueRender(selectedValue);
|
|
@@ -20,9 +20,7 @@ const constants_1 = require("../../constants");
|
|
|
20
20
|
const constants_2 = require("./constants");
|
|
21
21
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
22
22
|
function useHandleOnKeyDown(_ref) {
|
|
23
|
-
let
|
|
24
|
-
setOpen
|
|
25
|
-
} = _ref;
|
|
23
|
+
let setOpen = _ref.setOpen;
|
|
26
24
|
return (0, react_1.useCallback)(onKeyDown => e => {
|
|
27
25
|
if (e.code === 'Space') {
|
|
28
26
|
e.stopPropagation();
|
|
@@ -47,12 +45,10 @@ const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
|
|
|
47
45
|
* Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
|
|
48
46
|
*/
|
|
49
47
|
function useOptionSearch(_ref2) {
|
|
50
|
-
let
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
disableFuzzySearch
|
|
55
|
-
} = _ref2;
|
|
48
|
+
let options = _ref2.options,
|
|
49
|
+
flatMapOptions = _ref2.flatMapOptions,
|
|
50
|
+
minSearchInputLength = _ref2.minSearchInputLength,
|
|
51
|
+
disableFuzzySearch = _ref2.disableFuzzySearch;
|
|
56
52
|
return (0, react_1.useCallback)(search => {
|
|
57
53
|
if (search.length < (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)) return options;
|
|
58
54
|
if (disableFuzzySearch) {
|
|
@@ -70,15 +66,12 @@ function useOptionSearch(_ref2) {
|
|
|
70
66
|
}, [disableFuzzySearch, flatMapOptions, minSearchInputLength, options]);
|
|
71
67
|
}
|
|
72
68
|
function useAutoApply(_ref3) {
|
|
73
|
-
let
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
const {
|
|
80
|
-
t
|
|
81
|
-
} = (0, locale_1.useLocale)('Chips');
|
|
69
|
+
let autoApply = _ref3.autoApply,
|
|
70
|
+
size = _ref3.size,
|
|
71
|
+
onApprove = _ref3.onApprove,
|
|
72
|
+
onCancel = _ref3.onCancel;
|
|
73
|
+
const _ref4 = (0, locale_1.useLocale)('Chips'),
|
|
74
|
+
t = _ref4.t;
|
|
82
75
|
return (0, react_1.useCallback)(() => {
|
|
83
76
|
if (autoApply) {
|
|
84
77
|
return;
|
|
@@ -18,13 +18,11 @@ const typeGuards_1 = require("./typeGuards");
|
|
|
18
18
|
function transformOptionsToItems(options, contentRender) {
|
|
19
19
|
return options.map(option => {
|
|
20
20
|
if ((0, typeGuards_1.isAccordionOption)(option) || (0, typeGuards_1.isNextListOption)(option)) {
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
disabled
|
|
27
|
-
} = option,
|
|
21
|
+
const label = option.label,
|
|
22
|
+
options = option.options,
|
|
23
|
+
id = option.id,
|
|
24
|
+
contentRenderProps = option.contentRenderProps,
|
|
25
|
+
disabled = option.disabled,
|
|
28
26
|
rest = __rest(option, ["label", "options", "id", "contentRenderProps", "disabled"]);
|
|
29
27
|
return Object.assign(Object.assign({}, rest), {
|
|
30
28
|
disabled,
|
|
@@ -42,30 +40,24 @@ function transformOptionsToItems(options, contentRender) {
|
|
|
42
40
|
});
|
|
43
41
|
}
|
|
44
42
|
if ((0, typeGuards_1.isGroupSelectOption)(option)) {
|
|
45
|
-
const
|
|
46
|
-
options
|
|
47
|
-
} = option,
|
|
43
|
+
const options = option.options,
|
|
48
44
|
rest = __rest(option, ["options"]);
|
|
49
45
|
return Object.assign(Object.assign({}, rest), {
|
|
50
46
|
items: transformOptionsToItems(options)
|
|
51
47
|
});
|
|
52
48
|
}
|
|
53
49
|
if ((0, typeGuards_1.isGroupOption)(option)) {
|
|
54
|
-
const
|
|
55
|
-
options
|
|
56
|
-
} = option,
|
|
50
|
+
const options = option.options,
|
|
57
51
|
rest = __rest(option, ["options"]);
|
|
58
52
|
return Object.assign(Object.assign({}, rest), {
|
|
59
53
|
items: transformOptionsToItems(options)
|
|
60
54
|
});
|
|
61
55
|
}
|
|
62
56
|
const _a = option,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
disabled
|
|
68
|
-
} = _a,
|
|
57
|
+
label = _a.label,
|
|
58
|
+
value = _a.value,
|
|
59
|
+
contentRenderProps = _a.contentRenderProps,
|
|
60
|
+
disabled = _a.disabled,
|
|
69
61
|
rest = __rest(_a, ["label", "value", "contentRenderProps", "disabled"]);
|
|
70
62
|
return Object.assign(Object.assign({}, rest), {
|
|
71
63
|
disabled,
|
|
@@ -6,21 +6,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.kindFlattenOptions = kindFlattenOptions;
|
|
7
7
|
const typeGuards_1 = require("./typeGuards");
|
|
8
8
|
function kindFlattenOptions(_ref) {
|
|
9
|
-
let
|
|
10
|
-
options
|
|
11
|
-
} = _ref;
|
|
9
|
+
let options = _ref.options;
|
|
12
10
|
const flattenOptions = {};
|
|
13
11
|
function flatten(option) {
|
|
14
12
|
if ((0, typeGuards_1.isBaseOption)(option)) {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
hidden
|
|
23
|
-
} = option;
|
|
13
|
+
const value = option.value,
|
|
14
|
+
label = option.label,
|
|
15
|
+
contentRenderProps = option.contentRenderProps,
|
|
16
|
+
disabled = option.disabled,
|
|
17
|
+
afterContent = option.afterContent,
|
|
18
|
+
beforeContent = option.beforeContent,
|
|
19
|
+
hidden = option.hidden;
|
|
24
20
|
flattenOptions[value] = {
|
|
25
21
|
value,
|
|
26
22
|
label,
|
|
@@ -32,9 +28,7 @@ function kindFlattenOptions(_ref) {
|
|
|
32
28
|
};
|
|
33
29
|
return;
|
|
34
30
|
}
|
|
35
|
-
const
|
|
36
|
-
options
|
|
37
|
-
} = option;
|
|
31
|
+
const options = option.options;
|
|
38
32
|
for (let idx = 0; idx < options.length; idx++) {
|
|
39
33
|
flatten(options[idx]);
|
|
40
34
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -34,33 +36,45 @@ const constants_2 = require("./constants");
|
|
|
34
36
|
const helpers_1 = require("./helpers");
|
|
35
37
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
36
38
|
function ChipChoiceRow(_a) {
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
39
|
+
var filters = _a.filters,
|
|
40
|
+
onChange = _a.onChange,
|
|
41
|
+
_a$showClearButton = _a.showClearButton,
|
|
42
|
+
showClearButtonProp = _a$showClearButton === void 0 ? true : _a$showClearButton,
|
|
43
|
+
_a$showAddButton = _a.showAddButton,
|
|
44
|
+
showAddButton = _a$showAddButton === void 0 ? true : _a$showAddButton,
|
|
45
|
+
className = _a.className,
|
|
46
|
+
value = _a.value,
|
|
47
|
+
defaultValueProp = _a.defaultValue,
|
|
48
|
+
_a$size = _a.size,
|
|
49
|
+
size = _a$size === void 0 ? constants_2.CHIP_CHOICE_ROW_SIZE.S : _a$size,
|
|
50
|
+
visibleFiltersProp = _a.visibleFilters,
|
|
51
|
+
onVisibleFiltersChange = _a.onVisibleFiltersChange,
|
|
49
52
|
rest = __rest(_a, ["filters", "onChange", "showClearButton", "showAddButton", "className", "value", "defaultValue", "size", "visibleFilters", "onVisibleFiltersChange"]);
|
|
50
|
-
const
|
|
51
|
-
t
|
|
52
|
-
} = (0, locale_1.useLocale)('Chips');
|
|
53
|
+
const _ref = (0, locale_1.useLocale)('Chips'),
|
|
54
|
+
t = _ref.t;
|
|
53
55
|
const defaultValue = (0, react_1.useMemo)(() => defaultValueProp !== null && defaultValueProp !== void 0 ? defaultValueProp : {}, [defaultValueProp]);
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
const _ref2 = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, newState => {
|
|
57
|
+
const result = typeof newState === 'function' ? newState(state) : newState;
|
|
58
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(result);
|
|
59
|
+
}),
|
|
60
|
+
_ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
61
|
+
state = _ref3[0],
|
|
62
|
+
setState = _ref3[1];
|
|
63
|
+
const _ref4 = (0, uncontrollable_1.useUncontrolledProp)(visibleFiltersProp, Object.keys(state), newState => {
|
|
64
|
+
const result = typeof newState === 'function' ? newState(addListValue) : newState;
|
|
65
|
+
onVisibleFiltersChange === null || onVisibleFiltersChange === void 0 ? void 0 : onVisibleFiltersChange(result);
|
|
66
|
+
}),
|
|
67
|
+
_ref5 = (0, _slicedToArray2.default)(_ref4, 2),
|
|
68
|
+
addListValue = _ref5[0],
|
|
69
|
+
setAddListValue = _ref5[1];
|
|
70
|
+
const _ref6 = (0, react_1.useState)(''),
|
|
71
|
+
_ref7 = (0, _slicedToArray2.default)(_ref6, 2),
|
|
72
|
+
openedChip = _ref7[0],
|
|
73
|
+
setOpenedChip = _ref7[1];
|
|
74
|
+
const _ref8 = (0, react_1.useState)(false),
|
|
75
|
+
_ref9 = (0, _slicedToArray2.default)(_ref8, 2),
|
|
76
|
+
addListOpen = _ref9[0],
|
|
77
|
+
setAddListOpen = _ref9[1];
|
|
64
78
|
const handleChange = (fieldId, value) => {
|
|
65
79
|
setState(state => Object.assign(Object.assign({}, state), {
|
|
66
80
|
[fieldId]: value
|
|
@@ -81,20 +95,19 @@ function ChipChoiceRow(_a) {
|
|
|
81
95
|
setState(defaultState);
|
|
82
96
|
setAddListValue([]);
|
|
83
97
|
};
|
|
84
|
-
const {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
pinnedFilters
|
|
96
|
-
nonPinnedFilters
|
|
97
|
-
}), [filters]);
|
|
98
|
+
const _ref0 = (0, react_1.useMemo)(() => filters.reduce((res, filter) => {
|
|
99
|
+
if (filter.pinned) {
|
|
100
|
+
res.pinnedFilters.push(filter);
|
|
101
|
+
} else {
|
|
102
|
+
res.nonPinnedFilters.push(filter);
|
|
103
|
+
}
|
|
104
|
+
return res;
|
|
105
|
+
}, {
|
|
106
|
+
pinnedFilters: [],
|
|
107
|
+
nonPinnedFilters: []
|
|
108
|
+
}), [filters]),
|
|
109
|
+
pinnedFilters = _ref0.pinnedFilters,
|
|
110
|
+
nonPinnedFilters = _ref0.nonPinnedFilters;
|
|
98
111
|
const visibleFilters = (0, react_1.useMemo)(() => addListValue.reduce((res, filterId) => {
|
|
99
112
|
const filter = nonPinnedFilters.find(filter => filter.id === filterId);
|
|
100
113
|
if (filter) {
|
|
@@ -133,7 +146,7 @@ function ChipChoiceRow(_a) {
|
|
|
133
146
|
setAddListOpen(false);
|
|
134
147
|
handleChipOpen(filter.id)(true);
|
|
135
148
|
},
|
|
136
|
-
'data-test-id':
|
|
149
|
+
'data-test-id': "".concat(constants_1.CHIP_CHOICE_ROW_IDS.addButtonOption, "-").concat((_b = filter['data-test-id']) !== null && _b !== void 0 ? _b : index)
|
|
137
150
|
});
|
|
138
151
|
return res;
|
|
139
152
|
}, []), [addListValue, handleChipOpen, nonPinnedFilters, setAddListValue]);
|
|
@@ -49,10 +49,8 @@ const helpers_1 = require("../helpers");
|
|
|
49
49
|
value1: new Date('11.03.2025'),
|
|
50
50
|
value2: new Date('11.03.2025')
|
|
51
51
|
}])('should return true for values: $value1 and $value2', _ref => {
|
|
52
|
-
let
|
|
53
|
-
|
|
54
|
-
value2
|
|
55
|
-
} = _ref;
|
|
52
|
+
let value1 = _ref.value1,
|
|
53
|
+
value2 = _ref.value2;
|
|
56
54
|
(0, vitest_1.expect)((0, helpers_1.areValuesEqual)(value1, value2)).toBeTruthy();
|
|
57
55
|
});
|
|
58
56
|
vitest_1.it.each([{
|
|
@@ -104,10 +102,8 @@ const helpers_1 = require("../helpers");
|
|
|
104
102
|
value1: new Date('23.02.2025'),
|
|
105
103
|
value2: new Date('8.03.2025')
|
|
106
104
|
}])('should return false for values: $value1 and $value2', _ref2 => {
|
|
107
|
-
let
|
|
108
|
-
|
|
109
|
-
value2
|
|
110
|
-
} = _ref2;
|
|
105
|
+
let value1 = _ref2.value1,
|
|
106
|
+
value2 = _ref2.value2;
|
|
111
107
|
(0, vitest_1.expect)((0, helpers_1.areValuesEqual)(value1, value2)).toBeFalsy();
|
|
112
108
|
});
|
|
113
109
|
});
|
|
@@ -26,18 +26,19 @@ const constants_1 = require("../../constants");
|
|
|
26
26
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
27
27
|
/** Чип с состоянием выбран/не выбран */
|
|
28
28
|
function ChipToggle(_a) {
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
29
|
+
var icon = _a.icon,
|
|
30
|
+
_a$size = _a.size,
|
|
31
|
+
size = _a$size === void 0 ? constants_1.SIZE.S : _a$size,
|
|
32
|
+
label = _a.label,
|
|
33
|
+
checked = _a.checked,
|
|
34
|
+
disabled = _a.disabled,
|
|
35
|
+
loading = _a.loading,
|
|
36
|
+
onChange = _a.onChange,
|
|
37
|
+
className = _a.className,
|
|
38
|
+
_a$tabIndex = _a.tabIndex,
|
|
39
|
+
tabIndex = _a$tabIndex === void 0 ? 0 : _a$tabIndex,
|
|
40
|
+
_a$truncateVariant = _a.truncateVariant,
|
|
41
|
+
truncateVariant = _a$truncateVariant === void 0 ? 'middle' : _a$truncateVariant,
|
|
41
42
|
rest = __rest(_a, ["icon", "size", "label", "checked", "disabled", "loading", "onChange", "className", "tabIndex", "truncateVariant"]);
|
|
42
43
|
const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
|
|
43
44
|
const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
|
|
@@ -15,13 +15,12 @@ const icons_1 = require("@snack-uikit/icons");
|
|
|
15
15
|
const constants_1 = require("../../constants");
|
|
16
16
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
17
17
|
exports.ButtonClearValue = (0, react_1.forwardRef)((_ref, ref) => {
|
|
18
|
-
let
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
tabIndex = -1,
|
|
22
|
-
onKeyDown,
|
|
23
|
-
'data-test-id'
|
|
24
|
-
} = _ref;
|
|
18
|
+
let size = _ref.size,
|
|
19
|
+
onClick = _ref.onClick,
|
|
20
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
21
|
+
tabIndex = _ref$tabIndex === void 0 ? -1 : _ref$tabIndex,
|
|
22
|
+
onKeyDown = _ref.onKeyDown,
|
|
23
|
+
dataTestId = _ref['data-test-id'];
|
|
25
24
|
const handleClick = event => {
|
|
26
25
|
event.stopPropagation();
|
|
27
26
|
onClick(event);
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Chips",
|
|
7
|
-
"version": "0.30.2-preview-
|
|
7
|
+
"version": "0.30.2-preview-74429015.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@snack-uikit/button": "0.19.19",
|
|
40
|
-
"@snack-uikit/calendar": "0.14.2-preview-
|
|
40
|
+
"@snack-uikit/calendar": "0.14.2-preview-74429015.0",
|
|
41
41
|
"@snack-uikit/divider": "3.2.12",
|
|
42
|
-
"@snack-uikit/dropdown": "0.5.8-preview-
|
|
42
|
+
"@snack-uikit/dropdown": "0.5.8-preview-74429015.0",
|
|
43
43
|
"@snack-uikit/icons": "0.27.7",
|
|
44
|
-
"@snack-uikit/list": "0.33.3-preview-
|
|
44
|
+
"@snack-uikit/list": "0.33.3-preview-74429015.0",
|
|
45
45
|
"@snack-uikit/loaders": "0.9.11",
|
|
46
|
-
"@snack-uikit/tooltip": "0.18.15-preview-
|
|
47
|
-
"@snack-uikit/truncate-string": "0.7.14-preview-
|
|
46
|
+
"@snack-uikit/tooltip": "0.18.15-preview-74429015.0",
|
|
47
|
+
"@snack-uikit/truncate-string": "0.7.14-preview-74429015.0",
|
|
48
48
|
"@snack-uikit/utils": "4.0.2",
|
|
49
49
|
"classnames": "2.5.1",
|
|
50
50
|
"fuzzy-search": "3.2.1",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@snack-uikit/locale": "*"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "d3215f7071f7e99365d9da19a2485d8c39cf3aeb"
|
|
61
61
|
}
|