@itcase/ui 1.8.24 → 1.8.25
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 +77 -10
- package/dist/components/Chips.js +1 -1
- package/dist/components/DatePeriod.js +77 -11
- package/dist/types/components/Chips/Chips.interface.d.ts +2 -2
- package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts +30 -37
- package/dist/types/components/DatePeriod/datePeriodIntervals.d.ts +3 -0
- package/dist/types/components/DatePeriod/index.d.ts +1 -0
- package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.interface.d.ts +4 -1
- package/package.json +4 -2
|
@@ -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,12 @@
|
|
|
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');
|
|
6
8
|
var DatePicker = require('../../DatePicker_cjs_DamcZFbX.js');
|
|
7
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var ChipsGroup = require('../../
|
|
9
|
-
require('react');
|
|
10
|
+
var ChipsGroup = require('../../ChipsGroup_cjs_Ct-NrPmJ.js');
|
|
10
11
|
require('date-fns/locale');
|
|
11
12
|
require('react-datepicker');
|
|
12
13
|
require('../hooks/useStyles/useStyles.js');
|
|
@@ -36,6 +37,44 @@ var datePeriodAppearance = {
|
|
|
36
37
|
dev: {},
|
|
37
38
|
};
|
|
38
39
|
|
|
40
|
+
/* eslint-disable perfectionist/sort-objects */
|
|
41
|
+
var DATE_PERIOD_INTERVALS = (function () {
|
|
42
|
+
var now = luxon.DateTime.local();
|
|
43
|
+
var today = now.toISODate();
|
|
44
|
+
var yesterday = now.minus({ days: 1 }).toISODate();
|
|
45
|
+
var backWeek = now.minus({ days: 6 }).toISODate();
|
|
46
|
+
var backMonth = now.minus({ months: 1, days: -1 }).toISODate();
|
|
47
|
+
var backQuarter = now.minus({ months: 3, days: -1 }).toISODate();
|
|
48
|
+
// NOTE: "Choice" wait in options list the objects with "value" and "label"
|
|
49
|
+
return {
|
|
50
|
+
today: {
|
|
51
|
+
label: 'Сегодня',
|
|
52
|
+
value: 'today',
|
|
53
|
+
dateIntervalsList: [today, today],
|
|
54
|
+
},
|
|
55
|
+
yesterday: {
|
|
56
|
+
label: 'Вчера',
|
|
57
|
+
value: 'yesterday',
|
|
58
|
+
dateIntervalsList: [yesterday, yesterday],
|
|
59
|
+
},
|
|
60
|
+
backWeek: {
|
|
61
|
+
label: 'Неделя',
|
|
62
|
+
value: 'backWeek',
|
|
63
|
+
dateIntervalsList: [backWeek, today],
|
|
64
|
+
},
|
|
65
|
+
backMonth: {
|
|
66
|
+
label: 'Месяц',
|
|
67
|
+
value: 'backMonth',
|
|
68
|
+
dateIntervalsList: [backMonth, today],
|
|
69
|
+
},
|
|
70
|
+
backQuarter: {
|
|
71
|
+
label: 'Квартал',
|
|
72
|
+
value: 'backQuarter',
|
|
73
|
+
dateIntervalsList: [backQuarter, today],
|
|
74
|
+
},
|
|
75
|
+
};
|
|
76
|
+
})();
|
|
77
|
+
|
|
39
78
|
var datePeriodConfig = {
|
|
40
79
|
appearance: datePeriodAppearance,
|
|
41
80
|
setAppearance: function (appearanceConfig) {
|
|
@@ -43,23 +82,51 @@ var datePeriodConfig = {
|
|
|
43
82
|
},
|
|
44
83
|
};
|
|
45
84
|
function DatePeriod(props) {
|
|
46
|
-
var className = props.className, appearance = props.appearance, isSkeleton = props.isSkeleton,
|
|
85
|
+
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;
|
|
47
86
|
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
48
87
|
var _a;
|
|
49
88
|
return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
50
89
|
}, {});
|
|
51
90
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
52
|
-
var
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
91
|
+
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;
|
|
92
|
+
var onClickPeriodChips = React.useCallback(function (selectedPeriodItem) {
|
|
93
|
+
var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
|
|
94
|
+
var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
|
|
95
|
+
onChangeDatePeriod(dateStartIso, dateEndIso);
|
|
96
|
+
}, [onChangeDatePeriod]);
|
|
97
|
+
var onChangeDatePicker = React.useCallback(function (dateStart, dateEnd) {
|
|
98
|
+
var dateStartIso = null;
|
|
99
|
+
var dateEndIso = null;
|
|
100
|
+
if (dateStart) {
|
|
101
|
+
dateStartIso = luxon.DateTime.fromJSDate(dateStart).toISODate();
|
|
102
|
+
}
|
|
103
|
+
if (dateEnd) {
|
|
104
|
+
dateEndIso = luxon.DateTime.fromJSDate(dateEnd).toISODate();
|
|
105
|
+
}
|
|
106
|
+
onChangeDatePeriod(dateStartIso, dateEndIso);
|
|
107
|
+
}, [onChangeDatePeriod]);
|
|
108
|
+
var checkIsChipsActive = React.useCallback(function (targetPeriodItem) {
|
|
109
|
+
var dateStartIso = targetPeriodItem.dateIntervalsList[0];
|
|
110
|
+
var dateEndIso = targetPeriodItem.dateIntervalsList[1];
|
|
111
|
+
return (dateStartIso === datePeriodValueStart &&
|
|
112
|
+
dateEndIso === datePeriodValueEnd);
|
|
113
|
+
}, [datePeriodValueEnd, datePeriodValueStart]);
|
|
114
|
+
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: {
|
|
115
|
+
appearance: datePickerAppearance,
|
|
116
|
+
selectsRange: true,
|
|
117
|
+
showWeekNumbers: true,
|
|
118
|
+
isClearable: false,
|
|
119
|
+
isStartDefaultNull: true,
|
|
120
|
+
}, endValue: datePeriodValueEnd, inputProps: {
|
|
121
|
+
className: "date-period__datepicker-input date-period__datepicker-input_size_".concat(datePickerInputSize),
|
|
56
122
|
appearance: "".concat(datePickerInputAppearance, " ghost"),
|
|
57
|
-
textSize: datePickerInputTextSize,
|
|
58
123
|
fillHover: datePickerInputFillHover,
|
|
59
|
-
|
|
60
|
-
|
|
124
|
+
textSize: datePickerInputTextSize,
|
|
125
|
+
placeholder: 'Выбрать период',
|
|
126
|
+
}, value: datePeriodValueStart, onChange: onChangeDatePicker })] }) }));
|
|
61
127
|
}
|
|
62
128
|
|
|
129
|
+
exports.DATE_PERIOD_INTERVALS = DATE_PERIOD_INTERVALS;
|
|
63
130
|
exports.DatePeriod = DatePeriod;
|
|
64
131
|
exports.datePeriodAppearance = datePeriodAppearance;
|
|
65
132
|
exports.datePeriodConfig = datePeriodConfig;
|
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,11 @@
|
|
|
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';
|
|
4
6
|
import { D as DatePickerInput } from '../DatePicker_es_Bm_onmmb.js';
|
|
5
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { b as ChipsGroup, C as Chips } from '../
|
|
7
|
-
import 'react';
|
|
8
|
+
import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_BNuhlSG6.js';
|
|
8
9
|
import 'date-fns/locale';
|
|
9
10
|
import 'react-datepicker';
|
|
10
11
|
import '../hooks/useStyles/useStyles.js';
|
|
@@ -34,6 +35,44 @@ var datePeriodAppearance = {
|
|
|
34
35
|
dev: {},
|
|
35
36
|
};
|
|
36
37
|
|
|
38
|
+
/* eslint-disable perfectionist/sort-objects */
|
|
39
|
+
var DATE_PERIOD_INTERVALS = (function () {
|
|
40
|
+
var now = DateTime.local();
|
|
41
|
+
var today = now.toISODate();
|
|
42
|
+
var yesterday = now.minus({ days: 1 }).toISODate();
|
|
43
|
+
var backWeek = now.minus({ days: 6 }).toISODate();
|
|
44
|
+
var backMonth = now.minus({ months: 1, days: -1 }).toISODate();
|
|
45
|
+
var backQuarter = now.minus({ months: 3, days: -1 }).toISODate();
|
|
46
|
+
// NOTE: "Choice" wait in options list the objects with "value" and "label"
|
|
47
|
+
return {
|
|
48
|
+
today: {
|
|
49
|
+
label: 'Сегодня',
|
|
50
|
+
value: 'today',
|
|
51
|
+
dateIntervalsList: [today, today],
|
|
52
|
+
},
|
|
53
|
+
yesterday: {
|
|
54
|
+
label: 'Вчера',
|
|
55
|
+
value: 'yesterday',
|
|
56
|
+
dateIntervalsList: [yesterday, yesterday],
|
|
57
|
+
},
|
|
58
|
+
backWeek: {
|
|
59
|
+
label: 'Неделя',
|
|
60
|
+
value: 'backWeek',
|
|
61
|
+
dateIntervalsList: [backWeek, today],
|
|
62
|
+
},
|
|
63
|
+
backMonth: {
|
|
64
|
+
label: 'Месяц',
|
|
65
|
+
value: 'backMonth',
|
|
66
|
+
dateIntervalsList: [backMonth, today],
|
|
67
|
+
},
|
|
68
|
+
backQuarter: {
|
|
69
|
+
label: 'Квартал',
|
|
70
|
+
value: 'backQuarter',
|
|
71
|
+
dateIntervalsList: [backQuarter, today],
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
})();
|
|
75
|
+
|
|
37
76
|
var datePeriodConfig = {
|
|
38
77
|
appearance: datePeriodAppearance,
|
|
39
78
|
setAppearance: function (appearanceConfig) {
|
|
@@ -41,21 +80,48 @@ var datePeriodConfig = {
|
|
|
41
80
|
},
|
|
42
81
|
};
|
|
43
82
|
function DatePeriod(props) {
|
|
44
|
-
var className = props.className, appearance = props.appearance, isSkeleton = props.isSkeleton,
|
|
83
|
+
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
84
|
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
46
85
|
var _a;
|
|
47
86
|
return (__assign(__assign({}, resultConfig), (_a = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
48
87
|
}, {});
|
|
49
88
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
89
|
+
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;
|
|
90
|
+
var onClickPeriodChips = useCallback(function (selectedPeriodItem) {
|
|
91
|
+
var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
|
|
92
|
+
var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
|
|
93
|
+
onChangeDatePeriod(dateStartIso, dateEndIso);
|
|
94
|
+
}, [onChangeDatePeriod]);
|
|
95
|
+
var onChangeDatePicker = useCallback(function (dateStart, dateEnd) {
|
|
96
|
+
var dateStartIso = null;
|
|
97
|
+
var dateEndIso = null;
|
|
98
|
+
if (dateStart) {
|
|
99
|
+
dateStartIso = DateTime.fromJSDate(dateStart).toISODate();
|
|
100
|
+
}
|
|
101
|
+
if (dateEnd) {
|
|
102
|
+
dateEndIso = DateTime.fromJSDate(dateEnd).toISODate();
|
|
103
|
+
}
|
|
104
|
+
onChangeDatePeriod(dateStartIso, dateEndIso);
|
|
105
|
+
}, [onChangeDatePeriod]);
|
|
106
|
+
var checkIsChipsActive = useCallback(function (targetPeriodItem) {
|
|
107
|
+
var dateStartIso = targetPeriodItem.dateIntervalsList[0];
|
|
108
|
+
var dateEndIso = targetPeriodItem.dateIntervalsList[1];
|
|
109
|
+
return (dateStartIso === datePeriodValueStart &&
|
|
110
|
+
dateEndIso === datePeriodValueEnd);
|
|
111
|
+
}, [datePeriodValueEnd, datePeriodValueStart]);
|
|
112
|
+
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: {
|
|
113
|
+
appearance: datePickerAppearance,
|
|
114
|
+
selectsRange: true,
|
|
115
|
+
showWeekNumbers: true,
|
|
116
|
+
isClearable: false,
|
|
117
|
+
isStartDefaultNull: true,
|
|
118
|
+
}, endValue: datePeriodValueEnd, inputProps: {
|
|
119
|
+
className: "date-period__datepicker-input date-period__datepicker-input_size_".concat(datePickerInputSize),
|
|
54
120
|
appearance: "".concat(datePickerInputAppearance, " ghost"),
|
|
55
|
-
textSize: datePickerInputTextSize,
|
|
56
121
|
fillHover: datePickerInputFillHover,
|
|
57
|
-
|
|
58
|
-
|
|
122
|
+
textSize: datePickerInputTextSize,
|
|
123
|
+
placeholder: 'Выбрать период',
|
|
124
|
+
}, value: datePeriodValueStart, onChange: onChangeDatePicker })] }) }));
|
|
59
125
|
}
|
|
60
126
|
|
|
61
|
-
export { DatePeriod, datePeriodAppearance, datePeriodConfig };
|
|
127
|
+
export { DATE_PERIOD_INTERVALS, 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,38 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { AppearanceKeysDefault, FillHoverProps, FillProps, IconFillSizeProps, IconSizeProps, ItemColorProps, ShapeProps, SizePXProps, TextColorProps, TextSizeProps, TextWeightProps } from '@itcase/types';
|
|
1
|
+
import type { AppearanceKeysDefault, CompositeAppearanceKey, DateIso, FillHoverProps, FillProps, ShapeProps, SizeOptionProps, SizePXProps, TextSizeProps } from '@itcase/types';
|
|
3
2
|
import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
type DatePeriodValue = 'today' | 'yesterday' | 'backWeek' | 'backMonth' | 'backQuarter';
|
|
4
|
+
type DatePeriodItem = {
|
|
5
|
+
dateIntervalsList: [DateIso, DateIso];
|
|
6
|
+
label: string;
|
|
7
|
+
value: DatePeriodValue;
|
|
8
|
+
};
|
|
9
|
+
type DatePeriodThemeColor = {
|
|
6
10
|
fill?: FillProps;
|
|
7
11
|
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
12
|
shape?: ShapeProps;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
type AppearanceKeys = AppearanceKeysDefault & {};
|
|
22
|
-
export type DatePeriodAppearanceType = {
|
|
23
|
-
[key in AppearanceKeys]?: DatePeriodThemeColor;
|
|
13
|
+
size?: SizePXProps;
|
|
14
|
+
};
|
|
15
|
+
type DatePeriodAppearanceType = {
|
|
16
|
+
[key in AppearanceKeysDefault]?: DatePeriodThemeColor;
|
|
24
17
|
};
|
|
25
|
-
|
|
26
|
-
[key: number | string | symbol]: any;
|
|
18
|
+
type DatePeriodConfig = {
|
|
27
19
|
appearance: DatePeriodAppearanceType | undefined;
|
|
28
20
|
setAppearance: (appearanceConfig: DatePeriodAppearanceType) => void;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
before?: ReactNode;
|
|
21
|
+
};
|
|
22
|
+
type DatePeriodProps = DatePeriodThemeColor & StyleAttributes & {
|
|
23
|
+
appearance?: CompositeAppearanceKey;
|
|
24
|
+
chipsAppearance?: CompositeAppearanceKey;
|
|
25
|
+
chipsShape?: ShapeProps;
|
|
35
26
|
className?: string;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
27
|
+
datePeriodIntervalsList: DatePeriodItem[];
|
|
28
|
+
datePeriodValueEnd: DateIso | null;
|
|
29
|
+
datePeriodValueStart: DateIso | null;
|
|
30
|
+
datePickerAppearance?: CompositeAppearanceKey;
|
|
31
|
+
datePickerInputAppearance?: CompositeAppearanceKey;
|
|
32
|
+
datePickerInputFillHover?: FillHoverProps;
|
|
33
|
+
datePickerInputSize?: SizeOptionProps;
|
|
34
|
+
datePickerInputTextSize?: TextSizeProps;
|
|
35
|
+
isSkeleton?: boolean;
|
|
36
|
+
onChangeDatePeriod: (dateStartIso: DateIso | null, dateEndIso: DateIso | null) => void;
|
|
37
|
+
};
|
|
38
|
+
export type { DatePeriodValue, DatePeriodItem, 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.25",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -109,6 +109,7 @@
|
|
|
109
109
|
"framer-motion": "^12.17.0",
|
|
110
110
|
"js-cookie": "^3.0.5",
|
|
111
111
|
"lodash": "^4.17.21",
|
|
112
|
+
"luxon": "^3.6.1",
|
|
112
113
|
"motion": "^12.17.0",
|
|
113
114
|
"rc-slider": "^11.1.8",
|
|
114
115
|
"react": "^18.3.1",
|
|
@@ -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",
|