@itcase/ui 1.8.24 → 1.8.27
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/{ChipsGroup_cjs_CTh6644i.js → ChipsGroup_cjs_Ct-NrPmJ.js} +2 -1
- package/dist/{ChipsGroup_es_BFxBhYNB.js → ChipsGroup_es_BNuhlSG6.js} +2 -1
- package/dist/cjs/components/Chips.js +1 -1
- package/dist/cjs/components/DatePeriod.js +40 -14
- package/dist/components/Chips.js +1 -1
- package/dist/components/DatePeriod.js +40 -14
- package/dist/types/components/Chips/Chips.interface.d.ts +2 -2
- package/dist/types/components/DatePeriod/DatePeriod.appearance.d.ts +2 -1
- package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts +25 -37
- package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.interface.d.ts +4 -1
- package/package.json +7 -5
|
@@ -52,6 +52,7 @@ var chipsAppearanceSecondary = {
|
|
|
52
52
|
},
|
|
53
53
|
};
|
|
54
54
|
|
|
55
|
+
/* eslint-disable perfectionist/sort-objects */
|
|
55
56
|
var chipsAppearanceSize = {
|
|
56
57
|
sizeM: {
|
|
57
58
|
size: 'm',
|
|
@@ -146,7 +147,7 @@ function Chips(props) {
|
|
|
146
147
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
147
148
|
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: isActive && labelTextActiveColor, textColorHover: !isDisabled && !isActive
|
|
148
149
|
? labelTextHoverColor
|
|
149
|
-
: labelTextActiveHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), badgeValue && (jsxRuntime.jsx(Tooltip.Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor,
|
|
150
|
+
: labelTextActiveHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), badgeValue && (jsxRuntime.jsx(Tooltip.Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
|
|
150
151
|
}
|
|
151
152
|
|
|
152
153
|
function ChipsGroup(props) {
|
|
@@ -50,6 +50,7 @@ var chipsAppearanceSecondary = {
|
|
|
50
50
|
},
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
+
/* eslint-disable perfectionist/sort-objects */
|
|
53
54
|
var chipsAppearanceSize = {
|
|
54
55
|
sizeM: {
|
|
55
56
|
size: 'm',
|
|
@@ -144,7 +145,7 @@ function Chips(props) {
|
|
|
144
145
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
145
146
|
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: isActive && labelTextActiveColor, textColorHover: !isDisabled && !isActive
|
|
146
147
|
? labelTextHoverColor
|
|
147
|
-
: labelTextActiveHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), badgeValue && (jsx(Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor,
|
|
148
|
+
: labelTextActiveHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), badgeValue && (jsx(Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
|
|
148
149
|
}
|
|
149
150
|
|
|
150
151
|
function ChipsGroup(props) {
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
5
6
|
var clsx = require('clsx');
|
|
7
|
+
var luxon = require('luxon');
|
|
8
|
+
var common = require('@itcase/common');
|
|
6
9
|
var DatePicker = require('../../DatePicker_cjs_DamcZFbX.js');
|
|
7
10
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var ChipsGroup = require('../../
|
|
9
|
-
require('react');
|
|
11
|
+
var ChipsGroup = require('../../ChipsGroup_cjs_Ct-NrPmJ.js');
|
|
10
12
|
require('date-fns/locale');
|
|
11
13
|
require('react-datepicker');
|
|
12
14
|
require('../hooks/useStyles/useStyles.js');
|
|
@@ -15,7 +17,6 @@ require('lodash/maxBy');
|
|
|
15
17
|
require('lodash/upperFirst');
|
|
16
18
|
require('../context/Notifications.js');
|
|
17
19
|
require('uuid');
|
|
18
|
-
require('@itcase/common');
|
|
19
20
|
require('../context/UIContext.js');
|
|
20
21
|
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
21
22
|
require('react-responsive');
|
|
@@ -32,9 +33,7 @@ require('../../Label_cjs_ByGAWJcj.js');
|
|
|
32
33
|
require('@itcase/icons/default');
|
|
33
34
|
require('lodash/castArray');
|
|
34
35
|
|
|
35
|
-
var datePeriodAppearance = {
|
|
36
|
-
dev: {},
|
|
37
|
-
};
|
|
36
|
+
var datePeriodAppearance = {};
|
|
38
37
|
|
|
39
38
|
var datePeriodConfig = {
|
|
40
39
|
appearance: datePeriodAppearance,
|
|
@@ -43,21 +42,48 @@ var datePeriodConfig = {
|
|
|
43
42
|
},
|
|
44
43
|
};
|
|
45
44
|
function DatePeriod(props) {
|
|
46
|
-
var className = props.className, appearance = props.appearance, isSkeleton = props.isSkeleton,
|
|
45
|
+
var className = props.className, appearance = props.appearance, _a = props.datePeriodIntervalsList, datePeriodIntervalsList = _a === void 0 ? Object.values(common.DATE_PERIOD_INTERVALS) : _a, datePeriodValueEnd = props.datePeriodValueEnd, datePeriodValueStart = props.datePeriodValueStart, isSkeleton = props.isSkeleton, onChangeDatePeriod = props.onChangeDatePeriod;
|
|
47
46
|
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
48
47
|
var _a;
|
|
49
48
|
return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
50
49
|
}, {});
|
|
51
50
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
52
|
-
var
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
var _b = propsGenerator, fillClass = _b.fillClass, _c = _b.chipsAppearance, chipsAppearance = _c === void 0 ? 'surfacePrimary sizeM' : _c, chipsShape = _b.chipsShape, _d = _b.datePickerAppearance, datePickerAppearance = _d === void 0 ? 'sizeM' : _d, _e = _b.datePickerInputAppearance, datePickerInputAppearance = _e === void 0 ? 'defaultPrimary' : _e, datePickerInputFillHover = _b.datePickerInputFillHover, _f = _b.datePickerInputSize, datePickerInputSize = _f === void 0 ? 'm' : _f, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
|
|
52
|
+
var onClickPeriodChips = React.useCallback(function (selectedPeriodItem) {
|
|
53
|
+
var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
|
|
54
|
+
var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
|
|
55
|
+
onChangeDatePeriod(dateStartIso, dateEndIso);
|
|
56
|
+
}, [onChangeDatePeriod]);
|
|
57
|
+
var onChangeDatePicker = React.useCallback(function (dateStart, dateEnd) {
|
|
58
|
+
var dateStartIso = null;
|
|
59
|
+
var dateEndIso = null;
|
|
60
|
+
if (dateStart) {
|
|
61
|
+
dateStartIso = luxon.DateTime.fromJSDate(dateStart).toISODate();
|
|
62
|
+
}
|
|
63
|
+
if (dateEnd) {
|
|
64
|
+
dateEndIso = luxon.DateTime.fromJSDate(dateEnd).toISODate();
|
|
65
|
+
}
|
|
66
|
+
onChangeDatePeriod(dateStartIso, dateEndIso);
|
|
67
|
+
}, [onChangeDatePeriod]);
|
|
68
|
+
var checkIsChipsActive = React.useCallback(function (targetPeriodItem) {
|
|
69
|
+
var dateStartIso = targetPeriodItem.dateIntervalsList[0];
|
|
70
|
+
var dateEndIso = targetPeriodItem.dateIntervalsList[1];
|
|
71
|
+
return (dateStartIso === datePeriodValueStart &&
|
|
72
|
+
dateEndIso === datePeriodValueEnd);
|
|
73
|
+
}, [datePeriodValueEnd, datePeriodValueStart]);
|
|
74
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxRuntime.jsxs(ChipsGroup.ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: chipsAppearance, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsxRuntime.jsx(DatePicker.DatePickerInput, { datePickerProps: {
|
|
75
|
+
appearance: datePickerAppearance,
|
|
76
|
+
selectsRange: true,
|
|
77
|
+
showWeekNumbers: true,
|
|
78
|
+
isClearable: false,
|
|
79
|
+
isStartDefaultNull: true,
|
|
80
|
+
}, endValue: datePeriodValueEnd, inputProps: {
|
|
81
|
+
className: "date-period__datepicker-input date-period__datepicker-input_size_".concat(datePickerInputSize),
|
|
56
82
|
appearance: "".concat(datePickerInputAppearance, " ghost"),
|
|
57
|
-
textSize: datePickerInputTextSize,
|
|
58
83
|
fillHover: datePickerInputFillHover,
|
|
59
|
-
|
|
60
|
-
|
|
84
|
+
textSize: datePickerInputTextSize,
|
|
85
|
+
placeholder: 'Выбрать период',
|
|
86
|
+
}, value: datePeriodValueStart, onChange: onChangeDatePicker })] }) }));
|
|
61
87
|
}
|
|
62
88
|
|
|
63
89
|
exports.DatePeriod = DatePeriod;
|
package/dist/components/Chips.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../
|
|
1
|
+
export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_BNuhlSG6.js';
|
|
2
2
|
import '../tslib.es6_es_Bwu1Cn-t.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import { useCallback } from 'react';
|
|
3
4
|
import clsx from 'clsx';
|
|
5
|
+
import { DateTime } from 'luxon';
|
|
6
|
+
import { DATE_PERIOD_INTERVALS } from '@itcase/common';
|
|
4
7
|
import { D as DatePickerInput } from '../DatePicker_es_Bm_onmmb.js';
|
|
5
8
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { b as ChipsGroup, C as Chips } from '../
|
|
7
|
-
import 'react';
|
|
9
|
+
import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_BNuhlSG6.js';
|
|
8
10
|
import 'date-fns/locale';
|
|
9
11
|
import 'react-datepicker';
|
|
10
12
|
import '../hooks/useStyles/useStyles.js';
|
|
@@ -13,7 +15,6 @@ import 'lodash/maxBy';
|
|
|
13
15
|
import 'lodash/upperFirst';
|
|
14
16
|
import '../context/Notifications.js';
|
|
15
17
|
import 'uuid';
|
|
16
|
-
import '@itcase/common';
|
|
17
18
|
import '../context/UIContext.js';
|
|
18
19
|
import '../hooks/useMediaQueries/useMediaQueries.js';
|
|
19
20
|
import 'react-responsive';
|
|
@@ -30,9 +31,7 @@ import '../Label_es_BtwZ3a2V.js';
|
|
|
30
31
|
import '@itcase/icons/default';
|
|
31
32
|
import 'lodash/castArray';
|
|
32
33
|
|
|
33
|
-
var datePeriodAppearance = {
|
|
34
|
-
dev: {},
|
|
35
|
-
};
|
|
34
|
+
var datePeriodAppearance = {};
|
|
36
35
|
|
|
37
36
|
var datePeriodConfig = {
|
|
38
37
|
appearance: datePeriodAppearance,
|
|
@@ -41,21 +40,48 @@ var datePeriodConfig = {
|
|
|
41
40
|
},
|
|
42
41
|
};
|
|
43
42
|
function DatePeriod(props) {
|
|
44
|
-
var className = props.className, appearance = props.appearance, isSkeleton = props.isSkeleton,
|
|
43
|
+
var className = props.className, appearance = props.appearance, _a = props.datePeriodIntervalsList, datePeriodIntervalsList = _a === void 0 ? Object.values(DATE_PERIOD_INTERVALS) : _a, datePeriodValueEnd = props.datePeriodValueEnd, datePeriodValueStart = props.datePeriodValueStart, isSkeleton = props.isSkeleton, onChangeDatePeriod = props.onChangeDatePeriod;
|
|
45
44
|
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
46
45
|
var _a;
|
|
47
46
|
return (__assign(__assign({}, resultConfig), (_a = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
48
47
|
}, {});
|
|
49
48
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
var _b = propsGenerator, fillClass = _b.fillClass, _c = _b.chipsAppearance, chipsAppearance = _c === void 0 ? 'surfacePrimary sizeM' : _c, chipsShape = _b.chipsShape, _d = _b.datePickerAppearance, datePickerAppearance = _d === void 0 ? 'sizeM' : _d, _e = _b.datePickerInputAppearance, datePickerInputAppearance = _e === void 0 ? 'defaultPrimary' : _e, datePickerInputFillHover = _b.datePickerInputFillHover, _f = _b.datePickerInputSize, datePickerInputSize = _f === void 0 ? 'm' : _f, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
|
|
50
|
+
var onClickPeriodChips = useCallback(function (selectedPeriodItem) {
|
|
51
|
+
var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
|
|
52
|
+
var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
|
|
53
|
+
onChangeDatePeriod(dateStartIso, dateEndIso);
|
|
54
|
+
}, [onChangeDatePeriod]);
|
|
55
|
+
var onChangeDatePicker = useCallback(function (dateStart, dateEnd) {
|
|
56
|
+
var dateStartIso = null;
|
|
57
|
+
var dateEndIso = null;
|
|
58
|
+
if (dateStart) {
|
|
59
|
+
dateStartIso = DateTime.fromJSDate(dateStart).toISODate();
|
|
60
|
+
}
|
|
61
|
+
if (dateEnd) {
|
|
62
|
+
dateEndIso = DateTime.fromJSDate(dateEnd).toISODate();
|
|
63
|
+
}
|
|
64
|
+
onChangeDatePeriod(dateStartIso, dateEndIso);
|
|
65
|
+
}, [onChangeDatePeriod]);
|
|
66
|
+
var checkIsChipsActive = useCallback(function (targetPeriodItem) {
|
|
67
|
+
var dateStartIso = targetPeriodItem.dateIntervalsList[0];
|
|
68
|
+
var dateEndIso = targetPeriodItem.dateIntervalsList[1];
|
|
69
|
+
return (dateStartIso === datePeriodValueStart &&
|
|
70
|
+
dateEndIso === datePeriodValueEnd);
|
|
71
|
+
}, [datePeriodValueEnd, datePeriodValueStart]);
|
|
72
|
+
return (jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsx(Chips, { appearance: chipsAppearance, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsx(DatePickerInput, { datePickerProps: {
|
|
73
|
+
appearance: datePickerAppearance,
|
|
74
|
+
selectsRange: true,
|
|
75
|
+
showWeekNumbers: true,
|
|
76
|
+
isClearable: false,
|
|
77
|
+
isStartDefaultNull: true,
|
|
78
|
+
}, endValue: datePeriodValueEnd, inputProps: {
|
|
79
|
+
className: "date-period__datepicker-input date-period__datepicker-input_size_".concat(datePickerInputSize),
|
|
54
80
|
appearance: "".concat(datePickerInputAppearance, " ghost"),
|
|
55
|
-
textSize: datePickerInputTextSize,
|
|
56
81
|
fillHover: datePickerInputFillHover,
|
|
57
|
-
|
|
58
|
-
|
|
82
|
+
textSize: datePickerInputTextSize,
|
|
83
|
+
placeholder: 'Выбрать период',
|
|
84
|
+
}, value: datePeriodValueStart, onChange: onChangeDatePicker })] }) }));
|
|
59
85
|
}
|
|
60
86
|
|
|
61
87
|
export { DatePeriod, datePeriodAppearance, datePeriodConfig };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
-
import { AlignDirectionProps, AlignProps, AppearanceKeysDefault, BorderColorProps, BorderTypeProps, FillHoverProps, FillProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, TextWeightProps } from '@itcase/types';
|
|
2
|
+
import { AlignDirectionProps, AlignProps, AppearanceKeysDefault, BorderColorProps, BorderTypeProps, CompositeAppearanceKey, FillHoverProps, FillProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, TextWeightProps } from '@itcase/types';
|
|
3
3
|
import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
|
|
4
4
|
interface ChipsThemeColor {
|
|
5
5
|
[key: number | string | symbol]: any;
|
|
@@ -33,7 +33,7 @@ interface ChipsConfig {
|
|
|
33
33
|
}
|
|
34
34
|
interface ChipsProps extends ChipsThemeColor, StyleAttributes {
|
|
35
35
|
[key: number | string | symbol]: any;
|
|
36
|
-
appearance?:
|
|
36
|
+
appearance?: CompositeAppearanceKey;
|
|
37
37
|
children?: ReactNode;
|
|
38
38
|
className?: string;
|
|
39
39
|
cursor?: string;
|
|
@@ -1,45 +1,33 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { AppearanceKeysDefault,
|
|
1
|
+
import type { DatePeriodItem } from '@itcase/common/types';
|
|
2
|
+
import type { AppearanceKeysDefault, CompositeAppearanceKey, DateIso, FillHoverProps, FillProps, ShapeProps, SizeOptionProps, SizePXProps, TextSizeProps } from '@itcase/types';
|
|
3
3
|
import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
|
|
4
|
-
|
|
5
|
-
[key: number | string | symbol]: any;
|
|
4
|
+
type DatePeriodThemeColor = {
|
|
6
5
|
fill?: FillProps;
|
|
7
6
|
fillHover?: FillHoverProps;
|
|
8
|
-
icon?: ElementType;
|
|
9
|
-
iconFill?: FillProps;
|
|
10
|
-
iconFillHover?: FillHoverProps;
|
|
11
|
-
iconFillSize?: IconFillSizeProps;
|
|
12
|
-
iconItemFill?: ItemColorProps;
|
|
13
|
-
iconShape?: ShapeProps;
|
|
14
|
-
iconSize?: IconSizeProps;
|
|
15
|
-
iconSrc?: string;
|
|
16
7
|
shape?: ShapeProps;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
type AppearanceKeys = AppearanceKeysDefault & {};
|
|
22
|
-
export type DatePeriodAppearanceType = {
|
|
23
|
-
[key in AppearanceKeys]?: DatePeriodThemeColor;
|
|
8
|
+
size?: SizePXProps;
|
|
9
|
+
};
|
|
10
|
+
type DatePeriodAppearanceType = {
|
|
11
|
+
[key in AppearanceKeysDefault]?: DatePeriodThemeColor;
|
|
24
12
|
};
|
|
25
|
-
|
|
26
|
-
[key: number | string | symbol]: any;
|
|
13
|
+
type DatePeriodConfig = {
|
|
27
14
|
appearance: DatePeriodAppearanceType | undefined;
|
|
28
15
|
setAppearance: (appearanceConfig: DatePeriodAppearanceType) => void;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
before?: ReactNode;
|
|
16
|
+
};
|
|
17
|
+
type DatePeriodProps = DatePeriodThemeColor & StyleAttributes & {
|
|
18
|
+
appearance?: CompositeAppearanceKey;
|
|
19
|
+
chipsAppearance?: CompositeAppearanceKey;
|
|
20
|
+
chipsShape?: ShapeProps;
|
|
35
21
|
className?: string;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
22
|
+
datePeriodIntervalsList: DatePeriodItem[];
|
|
23
|
+
datePeriodValueEnd: DateIso | null;
|
|
24
|
+
datePeriodValueStart: DateIso | null;
|
|
25
|
+
datePickerAppearance?: CompositeAppearanceKey;
|
|
26
|
+
datePickerInputAppearance?: CompositeAppearanceKey;
|
|
27
|
+
datePickerInputFillHover?: FillHoverProps;
|
|
28
|
+
datePickerInputSize?: SizeOptionProps;
|
|
29
|
+
datePickerInputTextSize?: TextSizeProps;
|
|
30
|
+
isSkeleton?: boolean;
|
|
31
|
+
onChangeDatePeriod: (dateStartIso: DateIso | null, dateEndIso: DateIso | null) => void;
|
|
32
|
+
};
|
|
33
|
+
export type { DatePeriodThemeColor, DatePeriodAppearanceType, DatePeriodConfig, DatePeriodProps, };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.27",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
},
|
|
97
97
|
"dependencies": {
|
|
98
98
|
"@emotion/is-prop-valid": "^1.3.1",
|
|
99
|
-
"@itcase/common": "^1.2.
|
|
99
|
+
"@itcase/common": "^1.2.27",
|
|
100
100
|
"@itcase/icons": "^1.1.3",
|
|
101
101
|
"@itcase/storybook-config": "^1.1.13",
|
|
102
102
|
"@itcase/tokens-am": "^1.1.9",
|
|
@@ -106,10 +106,11 @@
|
|
|
106
106
|
"date-fns": "^4.1.0",
|
|
107
107
|
"eslint-import-resolver-alias": "^1.1.2",
|
|
108
108
|
"eslint-plugin-import": "^2.31.0",
|
|
109
|
-
"framer-motion": "^12.17.
|
|
109
|
+
"framer-motion": "^12.17.3",
|
|
110
110
|
"js-cookie": "^3.0.5",
|
|
111
111
|
"lodash": "^4.17.21",
|
|
112
|
-
"
|
|
112
|
+
"luxon": "^3.6.1",
|
|
113
|
+
"motion": "^12.17.3",
|
|
113
114
|
"rc-slider": "^11.1.8",
|
|
114
115
|
"react": "^18.3.1",
|
|
115
116
|
"react-dadata": "^2.27.4",
|
|
@@ -136,7 +137,7 @@
|
|
|
136
137
|
"@commitlint/config-conventional": "^19.8.1",
|
|
137
138
|
"@itcase/config": "^1.0.47",
|
|
138
139
|
"@itcase/lint": "^1.1.15",
|
|
139
|
-
"@itcase/types": "^1.0.
|
|
140
|
+
"@itcase/types": "^1.0.5",
|
|
140
141
|
"@rollup/plugin-alias": "^5.1.1",
|
|
141
142
|
"@rollup/plugin-babel": "^6.0.4",
|
|
142
143
|
"@rollup/plugin-commonjs": "^28.0.3",
|
|
@@ -150,6 +151,7 @@
|
|
|
150
151
|
"@semantic-release/release-notes-generator": "14.0.3",
|
|
151
152
|
"@types/js-cookie": "^3.0.6",
|
|
152
153
|
"@types/lodash": "^4.17.17",
|
|
154
|
+
"@types/luxon": "^3.6.2",
|
|
153
155
|
"@types/react": "^19",
|
|
154
156
|
"@types/react-datepicker": "^7.0.0",
|
|
155
157
|
"@types/react-dom": "^19.0.2",
|