@itcase/ui 1.8.177 → 1.8.178
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/{DatePicker_cjs_Jt22mPR8.js → DatePicker_cjs_C4EKZl4o.js} +1 -1
- package/dist/{DatePicker_es_CbKQCO3U.js → DatePicker_es_B7Th76gy.js} +1 -1
- package/dist/{Input_cjs_CJOik_SP.js → Input_cjs_KgFCCi2U.js} +2 -2
- package/dist/{Input_es_Dboktsxf.js → Input_es_I8GPoibb.js} +2 -2
- package/dist/SelectContainer_cjs_BOMkYSVf.js +583 -0
- package/dist/SelectContainer_es_gcm20n4I.js +566 -0
- package/dist/cjs/components/Dadata.js +1 -1
- package/dist/cjs/components/DatePeriod.js +59 -37
- package/dist/cjs/components/DatePicker.js +2 -2
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/Select.js +40 -588
- package/dist/components/Dadata.js +1 -1
- package/dist/components/DatePeriod.js +60 -38
- package/dist/components/DatePicker.js +2 -2
- package/dist/components/Input.js +1 -1
- package/dist/components/Select.js +21 -573
- package/dist/css/components/DatePeriod/DatePeriod.css +54 -92
- package/dist/css/styles/bundles.css +54 -92
- package/dist/types/components/DatePeriod/DatePeriod.appearance.d.ts +21 -4
- package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts +1 -2
- package/dist/types/components/DatePeriod/appearance/datePeriodShape.d.ts +10 -0
- package/dist/types/components/DatePeriod/appearance/datePeriodSize.d.ts +9 -0
- package/dist/types/components/DatePeriod/appearance/datePeriodSurface.d.ts +2 -4
- package/package.json +1 -1
|
@@ -5,36 +5,41 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var luxon = require('luxon');
|
|
7
7
|
var common = require('@itcase/common');
|
|
8
|
-
var DatePicker = require('../../
|
|
8
|
+
var DatePicker = require('../../DatePicker_cjs_C4EKZl4o.js');
|
|
9
9
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
var ChipsGroup = require('../../ChipsGroup_cjs_B182e4c8.js');
|
|
12
|
-
require('
|
|
13
|
-
require('
|
|
14
|
-
require('
|
|
12
|
+
require('react-select');
|
|
13
|
+
require('../../Icon_cjs_Xsu3KUlK.js');
|
|
14
|
+
var SelectContainer = require('../../SelectContainer_cjs_BOMkYSVf.js');
|
|
15
15
|
require('lodash/camelCase');
|
|
16
16
|
require('lodash/maxBy');
|
|
17
17
|
require('lodash/upperFirst');
|
|
18
18
|
require('../context/Notifications.js');
|
|
19
|
-
require('uuid');
|
|
20
19
|
require('../context/UIContext.js');
|
|
20
|
+
require('../../Group_cjs_CFzdSMKV.js');
|
|
21
|
+
require('date-fns/locale');
|
|
22
|
+
require('react-datepicker');
|
|
23
|
+
require('../hooks/useStyles/useStyles.js');
|
|
24
|
+
require('../hooks.js');
|
|
25
|
+
require('../hooks/useStyles/styleAttributes.js');
|
|
26
|
+
require('uuid');
|
|
21
27
|
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
22
28
|
require('react-responsive');
|
|
23
29
|
require('../utils/setViewportProperty.js');
|
|
24
|
-
require('../hooks.js');
|
|
25
|
-
require('../hooks/useStyles/styleAttributes.js');
|
|
26
30
|
require('../../Button_cjs_CYWNdPTJ.js');
|
|
27
|
-
require('../../Icon_cjs_Xsu3KUlK.js');
|
|
28
|
-
require('react-inlinesvg');
|
|
29
|
-
require('../hoc/urlWithAssetPrefix.js');
|
|
30
|
-
require('../context/UrlAssetPrefix.js');
|
|
31
31
|
require('../../Link_cjs_qKXVfU8e.js');
|
|
32
|
-
require('../../Text_cjs_DaH5tVvz.js');
|
|
33
32
|
require('../../Loader_cjs_CRiUlTC3.js');
|
|
34
|
-
require('../../
|
|
33
|
+
require('../../Text_cjs_DaH5tVvz.js');
|
|
34
|
+
require('../../Input_cjs_KgFCCi2U.js');
|
|
35
35
|
require('../../Label_cjs_RHq5CRw5.js');
|
|
36
36
|
require('@itcase/icons/default');
|
|
37
37
|
require('lodash/castArray');
|
|
38
|
+
require('react-inlinesvg');
|
|
39
|
+
require('../hoc/urlWithAssetPrefix.js');
|
|
40
|
+
require('../context/UrlAssetPrefix.js');
|
|
41
|
+
require('react-select/creatable');
|
|
42
|
+
require('../../Divider_cjs_DrmV2ezS.js');
|
|
38
43
|
|
|
39
44
|
const datePeriodAppearanceShape = {
|
|
40
45
|
circular: {
|
|
@@ -42,22 +47,32 @@ const datePeriodAppearanceShape = {
|
|
|
42
47
|
},
|
|
43
48
|
rounded: {
|
|
44
49
|
shape: 'rounded',
|
|
50
|
+
chipsShape: 'rounded',
|
|
51
|
+
selectShape: 'rounded',
|
|
45
52
|
},
|
|
46
53
|
roundedXL: {
|
|
47
54
|
shape: 'rounded',
|
|
48
55
|
shapeStrength: '2m',
|
|
56
|
+
chipsShape: 'rounded',
|
|
57
|
+
selectShape: 'rounded',
|
|
49
58
|
},
|
|
50
59
|
roundedL: {
|
|
51
60
|
shape: 'rounded',
|
|
52
61
|
shapeStrength: '1_5m',
|
|
62
|
+
chipsShape: 'rounded',
|
|
63
|
+
selectShape: 'rounded',
|
|
53
64
|
},
|
|
54
65
|
roundedM: {
|
|
55
66
|
shape: 'rounded',
|
|
56
67
|
shapeStrength: '1m',
|
|
68
|
+
chipsShape: 'rounded',
|
|
69
|
+
selectShape: 'rounded',
|
|
57
70
|
},
|
|
58
71
|
roundedS: {
|
|
59
72
|
shape: 'rounded',
|
|
60
73
|
shapeStrength: '0_5m',
|
|
74
|
+
chipsShape: 'rounded',
|
|
75
|
+
selectShape: 'rounded',
|
|
61
76
|
},
|
|
62
77
|
};
|
|
63
78
|
|
|
@@ -65,14 +80,23 @@ const datePeriodAppearanceSize = {
|
|
|
65
80
|
sizeL: {
|
|
66
81
|
size: 'l',
|
|
67
82
|
chipsAppearanceSize: 'sizeXL',
|
|
68
|
-
datePickerAppearanceSize: '
|
|
69
|
-
datePickerInputAppearanceSize: '
|
|
83
|
+
datePickerAppearanceSize: 'sizeL',
|
|
84
|
+
datePickerInputAppearanceSize: 'sizeL',
|
|
85
|
+
selectAppearanceSize: 'sizeL',
|
|
70
86
|
},
|
|
71
87
|
sizeM: {
|
|
72
88
|
size: 'm',
|
|
73
89
|
chipsAppearanceSize: 'sizeL',
|
|
74
90
|
datePickerAppearanceSize: 'sizeM',
|
|
75
91
|
datePickerInputAppearanceSize: 'sizeM',
|
|
92
|
+
selectAppearanceSize: 'sizeM',
|
|
93
|
+
},
|
|
94
|
+
sizeS: {
|
|
95
|
+
size: 's',
|
|
96
|
+
chipsAppearanceSize: 'sizeM',
|
|
97
|
+
datePickerAppearanceSize: 'sizeS',
|
|
98
|
+
datePickerInputAppearanceSize: 'sizeS',
|
|
99
|
+
selectAppearanceSize: 'sizeS',
|
|
76
100
|
},
|
|
77
101
|
};
|
|
78
102
|
|
|
@@ -80,18 +104,16 @@ const datePeriodAppearanceSurface = {
|
|
|
80
104
|
surfacePrimary: {
|
|
81
105
|
fill: 'surfacePrimary',
|
|
82
106
|
chipsAppearance: 'surfacePrimary ghost',
|
|
83
|
-
chipsShape: 'rounded',
|
|
84
107
|
datePickerAppearance: 'surfacePrimary',
|
|
85
108
|
datePickerInputAppearance: 'defaultPrimary',
|
|
86
|
-
|
|
109
|
+
selectAppearance: 'defaultPrimary solid',
|
|
87
110
|
},
|
|
88
111
|
surfaceSecondary: {
|
|
89
112
|
fill: 'surfaceSecondary',
|
|
90
113
|
chipsAppearance: 'surfacePrimary ghost',
|
|
91
|
-
chipsShape: 'rounded',
|
|
92
114
|
datePickerAppearance: 'surfacePrimary',
|
|
93
115
|
datePickerInputAppearance: 'defaultPrimary',
|
|
94
|
-
|
|
116
|
+
selectAppearance: 'defaultPrimary solid',
|
|
95
117
|
},
|
|
96
118
|
};
|
|
97
119
|
|
|
@@ -108,10 +130,10 @@ const datePeriodConfig = {
|
|
|
108
130
|
},
|
|
109
131
|
};
|
|
110
132
|
function DatePeriod(props) {
|
|
111
|
-
const { appearance, className, datePeriodIntervalsList = Object.values(common.DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
|
|
133
|
+
const { appearance, className, datePeriodIntervalsList = Object.values(common.DATE_PERIOD_INTERVALS), datePeriodSelectOptions, datePeriodSelectValue, selectPlaceholder, datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onChangeDatePeriodSelect, onKeyDown, } = props;
|
|
112
134
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
|
|
113
135
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
114
|
-
const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover,
|
|
136
|
+
const { fillClass, chipsAppearance, chipsAppearanceSize, selectAppearance, selectAppearanceSize, chipsShape, selectShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
115
137
|
const onClickPeriodChips = React.useCallback((selectedPeriodItem) => {
|
|
116
138
|
const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
|
|
117
139
|
const dateEndIso = selectedPeriodItem.dateIntervalsList[1];
|
|
@@ -131,22 +153,22 @@ function DatePeriod(props) {
|
|
|
131
153
|
return (dateStartIso === normalizedDatePeriodValueStart &&
|
|
132
154
|
dateEndIso === normalizedDatePeriodValueEnd);
|
|
133
155
|
}, [datePeriodValueEnd, datePeriodValueStart]);
|
|
134
|
-
return (jsxRuntime.
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
156
|
+
return (jsxRuntime.jsxs("div", { className: clsx(className, 'date-period', sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`), children: [jsxRuntime.jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: [jsxRuntime.jsx(ChipsGroup.ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: datePeriodIntervalsList.map((datePeriodItem) => (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))) }), jsxRuntime.jsx(DatePicker.DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
|
|
157
|
+
appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
|
|
158
|
+
dateFormat: 'dd/MM/yyyy',
|
|
159
|
+
monthsShown: monthsShown,
|
|
160
|
+
selectsRange: selectsRange,
|
|
161
|
+
showWeekNumbers: showWeekNumbers,
|
|
162
|
+
isClearable: false,
|
|
163
|
+
isStartDefaultNull: true,
|
|
164
|
+
onKeyDown: onKeyDown,
|
|
165
|
+
}, endValue: datePeriodValueEnd, inputProps: {
|
|
166
|
+
appearance: `${datePickerInputAppearance} ${datePickerInputAppearanceSize} ghost`,
|
|
167
|
+
className: `date-period__datepicker-input date-period__datepicker-input_size_${sizeClass} `,
|
|
168
|
+
fillHover: datePickerInputFillHover,
|
|
169
|
+
textSize: datePickerInputTextSize,
|
|
170
|
+
placeholder: 'Выбрать период',
|
|
171
|
+
}, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }), jsxRuntime.jsx(SelectContainer.SelectContainer, { appearance: `${selectAppearance} ${selectAppearanceSize}`, className: "date-period__select", width: "180px", minWidth: "180px", options: datePeriodSelectOptions, placeholder: selectPlaceholder, shape: selectShape, value: datePeriodSelectValue, isSearchable: true, onChange: onChangeDatePeriodSelect })] }));
|
|
150
172
|
}
|
|
151
173
|
|
|
152
174
|
exports.DatePeriod = DatePeriod;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_C4EKZl4o.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
30
30
|
require('../../Link_cjs_qKXVfU8e.js');
|
|
31
31
|
require('../../Text_cjs_DaH5tVvz.js');
|
|
32
32
|
require('../../Loader_cjs_CRiUlTC3.js');
|
|
33
|
-
require('../../
|
|
33
|
+
require('../../Input_cjs_KgFCCi2U.js');
|
|
34
34
|
require('../../Label_cjs_RHq5CRw5.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
|