@salutejs/plasma-new-hope 0.147.0-canary.1439.10901624274.0 → 0.147.0-canary.1440.10900331749.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +5 -5
- package/cjs/components/Autocomplete/Autocomplete.styles.js +5 -5
- package/cjs/components/Autocomplete/Autocomplete.styles.js.map +1 -1
- package/cjs/components/Autocomplete/{Autocomplete.styles_192fzgs.css → Autocomplete.styles_4wbmok.css} +1 -1
- package/cjs/components/Autocomplete/Autocomplete.tokens.js +0 -2
- package/cjs/components/Autocomplete/Autocomplete.tokens.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +3 -3
- package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +11 -11
- package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/{Combobox.styles_1s09ifw.css → Combobox.styles_iq2uzw.css} +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +0 -2
- package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +3 -3
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +3 -3
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +30 -6
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/cjs/components/DatePicker/hooks/useDatePicker.js +48 -5
- package/cjs/components/DatePicker/hooks/useDatePicker.js.map +1 -1
- package/cjs/components/DatePicker/utils/dateHelper.js +10 -1
- package/cjs/components/DatePicker/utils/dateHelper.js.map +1 -1
- package/cjs/components/Pagination/Pagination.css +17 -17
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +17 -17
- package/cjs/components/Select/Select.css +17 -17
- package/cjs/components/Select/Select.styles.js +3 -3
- package/cjs/components/Select/Select.styles.js.map +1 -1
- package/cjs/components/Select/{Select.styles_1nzals0.css → Select.styles_hzoeqc.css} +1 -1
- package/cjs/components/Select/Select.tokens.js +1 -5
- package/cjs/components/Select/Select.tokens.js.map +1 -1
- package/cjs/components/Select/ui/Inner/Inner.css +17 -17
- package/cjs/components/Select/ui/Inner/ui/Item/Item.css +17 -17
- package/cjs/components/Select/ui/Target/Target.css +12 -12
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +12 -12
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +15 -29
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/{es/components/Select/ui/Target/ui/Textfield/Textfield.styles_11yj58s.css → cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles_rtzthp.css} +2 -2
- package/cjs/components/TextArea/variations/_view/base.js +1 -1
- package/cjs/components/TextArea/variations/_view/base.js.map +1 -1
- package/cjs/components/TextArea/variations/_view/base_jjtr9h.css +1 -0
- package/cjs/index.css +27 -27
- package/emotion/cjs/components/Autocomplete/Autocomplete.styles.js +5 -5
- package/emotion/cjs/components/Autocomplete/Autocomplete.tokens.js +0 -2
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +6 -6
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +0 -2
- package/emotion/cjs/components/DatePicker/DatePicker.template-doc.mdx +12 -9
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +30 -6
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/emotion/cjs/components/DatePicker/hooks/useDatePicker.js +48 -5
- package/emotion/cjs/components/DatePicker/utils/dateHelper.js +10 -1
- package/emotion/cjs/components/Select/Select.styles.js +6 -6
- package/emotion/cjs/components/Select/Select.tokens.js +1 -5
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +21 -27
- package/emotion/cjs/components/TextArea/variations/_view/base.js +1 -1
- package/emotion/es/components/Autocomplete/Autocomplete.styles.js +5 -5
- package/emotion/es/components/Autocomplete/Autocomplete.tokens.js +0 -2
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.styles.js +6 -6
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.tokens.js +0 -2
- package/emotion/es/components/DatePicker/DatePicker.template-doc.mdx +12 -9
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +30 -6
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/emotion/es/components/DatePicker/hooks/useDatePicker.js +48 -5
- package/emotion/es/components/DatePicker/utils/dateHelper.js +10 -1
- package/emotion/es/components/Select/Select.styles.js +6 -6
- package/emotion/es/components/Select/Select.tokens.js +1 -5
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +21 -27
- package/emotion/es/components/TextArea/variations/_view/base.js +1 -1
- package/es/components/Autocomplete/Autocomplete.css +5 -5
- package/es/components/Autocomplete/Autocomplete.styles.js +5 -5
- package/es/components/Autocomplete/Autocomplete.styles.js.map +1 -1
- package/es/components/Autocomplete/{Autocomplete.styles_192fzgs.css → Autocomplete.styles_4wbmok.css} +1 -1
- package/es/components/Autocomplete/Autocomplete.tokens.js +0 -2
- package/es/components/Autocomplete/Autocomplete.tokens.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.css +3 -3
- package/es/components/Combobox/ComboboxNew/Combobox.styles.js +11 -11
- package/es/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/{Combobox.styles_1s09ifw.css → Combobox.styles_iq2uzw.css} +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.tokens.js +0 -2
- package/es/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +3 -3
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +3 -3
- package/es/components/DatePicker/RangeDate/RangeDate.js +30 -6
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/es/components/DatePicker/hooks/useDatePicker.js +48 -5
- package/es/components/DatePicker/hooks/useDatePicker.js.map +1 -1
- package/es/components/DatePicker/utils/dateHelper.js +10 -1
- package/es/components/DatePicker/utils/dateHelper.js.map +1 -1
- package/es/components/Pagination/Pagination.css +17 -17
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +17 -17
- package/es/components/Select/Select.css +17 -17
- package/es/components/Select/Select.styles.js +3 -3
- package/es/components/Select/Select.styles.js.map +1 -1
- package/es/components/Select/{Select.styles_1nzals0.css → Select.styles_hzoeqc.css} +1 -1
- package/es/components/Select/Select.tokens.js +1 -5
- package/es/components/Select/Select.tokens.js.map +1 -1
- package/es/components/Select/ui/Inner/Inner.css +17 -17
- package/es/components/Select/ui/Inner/ui/Item/Item.css +17 -17
- package/es/components/Select/ui/Target/Target.css +12 -12
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +12 -12
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +15 -29
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/{cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles_11yj58s.css → es/components/Select/ui/Target/ui/Textfield/Textfield.styles_rtzthp.css} +2 -2
- package/es/components/TextArea/variations/_view/base.js +1 -1
- package/es/components/TextArea/variations/_view/base.js.map +1 -1
- package/es/components/TextArea/variations/_view/base_jjtr9h.css +1 -0
- package/es/index.css +27 -27
- package/package.json +2 -2
- package/styled-components/cjs/components/Autocomplete/Autocomplete.styles.js +2 -2
- package/styled-components/cjs/components/Autocomplete/Autocomplete.tokens.js +0 -2
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +2 -2
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +0 -2
- package/styled-components/cjs/components/DatePicker/DatePicker.template-doc.mdx +12 -9
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +30 -6
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/styled-components/cjs/components/DatePicker/hooks/useDatePicker.js +48 -5
- package/styled-components/cjs/components/DatePicker/utils/dateHelper.js +10 -1
- package/styled-components/cjs/components/Select/Select.styles.js +2 -2
- package/styled-components/cjs/components/Select/Select.tokens.js +1 -5
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +9 -15
- package/styled-components/cjs/components/TextArea/variations/_view/base.js +1 -1
- package/styled-components/es/components/Autocomplete/Autocomplete.styles.js +2 -2
- package/styled-components/es/components/Autocomplete/Autocomplete.tokens.js +0 -2
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js +2 -2
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js +0 -2
- package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx +12 -9
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +30 -6
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/styled-components/es/components/DatePicker/hooks/useDatePicker.js +48 -5
- package/styled-components/es/components/DatePicker/utils/dateHelper.js +10 -1
- package/styled-components/es/components/Select/Select.styles.js +2 -2
- package/styled-components/es/components/Select/Select.tokens.js +1 -5
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +9 -15
- package/styled-components/es/components/TextArea/variations/_view/base.js +1 -1
- package/types/components/Autocomplete/Autocomplete.styles.d.ts.map +1 -1
- package/types/components/Autocomplete/Autocomplete.tokens.d.ts +0 -2
- package/types/components/Autocomplete/Autocomplete.tokens.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts +0 -2
- package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/hooks/useDatePicker.d.ts.map +1 -1
- package/types/components/DatePicker/utils/dateHelper.d.ts +10 -1
- package/types/components/DatePicker/utils/dateHelper.d.ts.map +1 -1
- package/types/components/Select/Select.styles.d.ts.map +1 -1
- package/types/components/Select/Select.tokens.d.ts +1 -5
- package/types/components/Select/Select.tokens.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts.map +1 -1
- package/cjs/components/TextArea/variations/_view/base_8npjyq.css +0 -1
- package/es/components/TextArea/variations/_view/base_8npjyq.css +0 -1
@@ -122,7 +122,11 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
122
122
|
_useState8 = _slicedToArray(_useState7, 2),
|
123
123
|
calendarFirstValue = _useState8[0],
|
124
124
|
setCalendarFirstValue = _useState8[1];
|
125
|
-
var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)(
|
125
|
+
var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
|
126
|
+
value: defaultFirstDate,
|
127
|
+
format: format,
|
128
|
+
lang: lang
|
129
|
+
})),
|
126
130
|
_useState10 = _slicedToArray(_useState9, 2),
|
127
131
|
inputFirstValue = _useState10[0],
|
128
132
|
setInputFirstValue = _useState10[1];
|
@@ -130,7 +134,11 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
130
134
|
_useState12 = _slicedToArray(_useState11, 2),
|
131
135
|
calendarSecondValue = _useState12[0],
|
132
136
|
setCalendarSecondValue = _useState12[1];
|
133
|
-
var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)(
|
137
|
+
var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
|
138
|
+
value: defaultSecondDate,
|
139
|
+
format: format,
|
140
|
+
lang: lang
|
141
|
+
})),
|
134
142
|
_useState14 = _slicedToArray(_useState13, 2),
|
135
143
|
inputSecondValue = _useState14[0],
|
136
144
|
setInputSecondValue = _useState14[1];
|
@@ -249,17 +257,33 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
249
257
|
}, [opened]);
|
250
258
|
(0, _react.useEffect)(function () {
|
251
259
|
setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
|
252
|
-
setInputFirstValue((0, _dateHelper.formatInputValue)(
|
260
|
+
setInputFirstValue((0, _dateHelper.formatInputValue)({
|
261
|
+
value: defaultFirstDate,
|
262
|
+
format: format,
|
263
|
+
lang: lang
|
264
|
+
}));
|
253
265
|
}, [defaultFirstDate]);
|
254
266
|
(0, _react.useEffect)(function () {
|
255
267
|
setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
|
256
|
-
setInputSecondValue((0, _dateHelper.formatInputValue)(
|
268
|
+
setInputSecondValue((0, _dateHelper.formatInputValue)({
|
269
|
+
value: defaultSecondDate,
|
270
|
+
format: format,
|
271
|
+
lang: lang
|
272
|
+
}));
|
257
273
|
}, [defaultSecondDate]);
|
258
274
|
(0, _react.useEffect)(function () {
|
259
275
|
setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
|
260
|
-
setInputFirstValue((0, _dateHelper.formatInputValue)(
|
276
|
+
setInputFirstValue((0, _dateHelper.formatInputValue)({
|
277
|
+
value: defaultFirstDate,
|
278
|
+
format: format,
|
279
|
+
lang: lang
|
280
|
+
}));
|
261
281
|
setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
|
262
|
-
setInputSecondValue((0, _dateHelper.formatInputValue)(
|
282
|
+
setInputSecondValue((0, _dateHelper.formatInputValue)({
|
283
|
+
value: defaultSecondDate,
|
284
|
+
format: format,
|
285
|
+
lang: lang
|
286
|
+
}));
|
263
287
|
}, [format, lang]);
|
264
288
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
265
289
|
ref: rootRef,
|
@@ -92,7 +92,11 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
92
92
|
_useState4 = _slicedToArray(_useState3, 2),
|
93
93
|
calendarValue = _useState4[0],
|
94
94
|
setCalendarValue = _useState4[1];
|
95
|
-
var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)(
|
95
|
+
var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
|
96
|
+
value: defaultDate,
|
97
|
+
format: format,
|
98
|
+
lang: lang
|
99
|
+
})),
|
96
100
|
_useState6 = _slicedToArray(_useState5, 2),
|
97
101
|
inputValue = _useState6[0],
|
98
102
|
setInputValue = _useState6[1];
|
@@ -158,11 +162,19 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
158
162
|
}, [opened]);
|
159
163
|
(0, _react.useEffect)(function () {
|
160
164
|
setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
|
161
|
-
setInputValue((0, _dateHelper.formatInputValue)(
|
165
|
+
setInputValue((0, _dateHelper.formatInputValue)({
|
166
|
+
value: defaultDate,
|
167
|
+
format: format,
|
168
|
+
lang: lang
|
169
|
+
}));
|
162
170
|
}, [defaultDate]);
|
163
171
|
(0, _react.useEffect)(function () {
|
164
172
|
setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
|
165
|
-
setInputValue((0, _dateHelper.formatInputValue)(
|
173
|
+
setInputValue((0, _dateHelper.formatInputValue)({
|
174
|
+
value: defaultDate,
|
175
|
+
format: format,
|
176
|
+
lang: lang
|
177
|
+
}));
|
166
178
|
}, [format, lang]);
|
167
179
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
168
180
|
view: view,
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.useDatePicker = void 0;
|
7
7
|
var _DatePicker = /*#__PURE__*/require("../DatePicker.tokens");
|
8
8
|
var _dateHelper = /*#__PURE__*/require("../utils/dateHelper");
|
9
|
+
var _datejs = /*#__PURE__*/require("../../../utils/datejs");
|
9
10
|
var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
|
10
11
|
var currentValue = _ref.currentValue,
|
11
12
|
setInputValue = _ref.setInputValue,
|
@@ -44,10 +45,43 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
|
|
44
45
|
var newValue = maskWithFormat ? (0, _dateHelper.getMaskedDateOnInput)(value, format, dateFormatDelimiter(), currentValue) : value;
|
45
46
|
if (!format) {
|
46
47
|
setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue));
|
47
|
-
|
48
|
+
setInputValue((0, _dateHelper.formatInputValue)({
|
49
|
+
value: newValue,
|
50
|
+
format: format,
|
51
|
+
lang: lang
|
52
|
+
}));
|
53
|
+
onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
|
54
|
+
return;
|
55
|
+
}
|
56
|
+
|
57
|
+
/**
|
58
|
+
* NOTE: если в формате даты есть месяц в полном названии или сокращенном,
|
59
|
+
* нужно дополнительно проводить валидацию на полноту введенной даты.
|
60
|
+
* Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
|
61
|
+
*/
|
62
|
+
var hasMonthFullName = /M{3,4}/g.test(format);
|
63
|
+
var isValidMonth;
|
64
|
+
var isLengthEqual;
|
65
|
+
if (hasMonthFullName) {
|
66
|
+
_datejs.customDayjs.locale(lang);
|
67
|
+
var firstIndexOfMonth = format.indexOf('M');
|
68
|
+
var lastIndexOfMonth = newValue.indexOf(dateFormatDelimiter(), firstIndexOfMonth);
|
69
|
+
var fullMonthName = !lastIndexOfMonth ? newValue.slice(firstIndexOfMonth) : newValue.slice(firstIndexOfMonth, lastIndexOfMonth);
|
70
|
+
var monthFormatting = format.replace(/[^M]/g, '');
|
71
|
+
isValidMonth = (0, _datejs.customDayjs)("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
|
72
|
+
isLengthEqual = format.length - 4 === newValue.length - fullMonthName.length;
|
73
|
+
}
|
74
|
+
if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
|
48
75
|
setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format, lang));
|
49
76
|
}
|
50
|
-
setInputValue((0, _dateHelper.formatInputValue)(
|
77
|
+
setInputValue((0, _dateHelper.formatInputValue)({
|
78
|
+
value: newValue,
|
79
|
+
format: format,
|
80
|
+
lang: lang,
|
81
|
+
hasMonthFullName: hasMonthFullName,
|
82
|
+
isValidMonth: isValidMonth,
|
83
|
+
isLengthEqual: isLengthEqual
|
84
|
+
}));
|
51
85
|
onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
|
52
86
|
};
|
53
87
|
var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
|
@@ -61,8 +95,13 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
|
|
61
95
|
}
|
62
96
|
if (isCalendarValue) {
|
63
97
|
setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
|
64
|
-
setInputValue((0, _dateHelper.formatInputValue)(
|
65
|
-
|
98
|
+
setInputValue((0, _dateHelper.formatInputValue)({
|
99
|
+
value: date,
|
100
|
+
format: format,
|
101
|
+
lang: lang
|
102
|
+
}));
|
103
|
+
onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
|
104
|
+
return;
|
66
105
|
}
|
67
106
|
var formatString = applyFormat ? format : undefined;
|
68
107
|
var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(date, formatString, lang),
|
@@ -70,7 +109,11 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
|
|
70
109
|
isError = _getDateFromFormat.isError,
|
71
110
|
isSuccess = _getDateFromFormat.isSuccess;
|
72
111
|
setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
|
73
|
-
setInputValue((0, _dateHelper.formatInputValue)(
|
112
|
+
setInputValue((0, _dateHelper.formatInputValue)({
|
113
|
+
value: newDate,
|
114
|
+
format: format,
|
115
|
+
lang: lang
|
116
|
+
}));
|
74
117
|
onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
|
75
118
|
};
|
76
119
|
return {
|
@@ -5,10 +5,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
|
7
7
|
var _datejs = /*#__PURE__*/require("../../../utils/datejs");
|
8
|
-
var formatInputValue = exports.formatInputValue = function formatInputValue(
|
8
|
+
var formatInputValue = exports.formatInputValue = function formatInputValue(_ref) {
|
9
|
+
var value = _ref.value,
|
10
|
+
format = _ref.format,
|
11
|
+
lang = _ref.lang,
|
12
|
+
hasMonthFullName = _ref.hasMonthFullName,
|
13
|
+
isValidMonth = _ref.isValidMonth,
|
14
|
+
isLengthEqual = _ref.isLengthEqual;
|
9
15
|
if (!value || !lang) {
|
10
16
|
return '';
|
11
17
|
}
|
18
|
+
if (hasMonthFullName && (!isValidMonth || !isLengthEqual)) {
|
19
|
+
return String(value);
|
20
|
+
}
|
12
21
|
if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
|
13
22
|
return (0, _datejs.customDayjs)(value, format).locale(lang).format(format);
|
14
23
|
}
|
@@ -21,7 +21,7 @@ var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["
|
|
21
21
|
}, /*#__PURE__*/String(_Popover.popoverClasses.target));
|
22
22
|
var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
|
23
23
|
componentId: "plasma-new-hope__sc-le54jv-1"
|
24
|
-
})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";
|
24
|
+
})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], _Select.constants.background, _Select.constants.boxShadow, _Select.tokens.borderRadius, function (_ref2) {
|
25
25
|
var listWidth = _ref2.listWidth;
|
26
26
|
return listWidth || '100%';
|
27
27
|
}, function (_ref3) {
|
@@ -30,7 +30,7 @@ var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
|
|
30
30
|
}, function (_ref4) {
|
31
31
|
var listOverflow = _ref4.listOverflow;
|
32
32
|
return listOverflow || 'initial';
|
33
|
-
},
|
33
|
+
}, function (_ref5) {
|
34
34
|
var isInnerUl = _ref5.isInnerUl;
|
35
35
|
return isInnerUl ? "calc(var(".concat(_Select.tokens.padding, ") * -1) 0 0 var(").concat(_Select.tokens.padding, ")") : 0;
|
36
36
|
}, _Select.tokens.padding);
|
@@ -58,9 +58,6 @@ var tokens = exports.tokens = {
|
|
58
58
|
targetTextfieldBackgroundColor: '--plasma-select-target-textfield-background-color',
|
59
59
|
targetTextfieldBackgroundColorOpened: '--plasma-select-target-textfield-background-color-opened',
|
60
60
|
targetTextfieldBorderColor: '--plasma-select-target-textfield-border-color',
|
61
|
-
targetTextfieldBorderColorHover: '--plasma-select-target-textfield-border-color-hover',
|
62
|
-
targetTextfieldBorderOpenedColor: '--plasma-select-target-textfield-border-opened-color',
|
63
|
-
targetTextfieldBorderSize: '--plasma-select-target-textfield-border-size',
|
64
61
|
targetButtonPadding: '--plasma-select-target-button-padding',
|
65
62
|
targetTextfieldPadding: '--plasma-select-target-textfield-padding',
|
66
63
|
targetTextfieldChipPadding: '--plasma-select-target-textfield-chip-padding',
|
@@ -77,8 +74,6 @@ var tokens = exports.tokens = {
|
|
77
74
|
chipCloseIconSize: '--plasma-select-chip-close-icon-size',
|
78
75
|
chipClearContentMarginLeft: '--plasma-select-chip-clear-content-margin-left',
|
79
76
|
chipClearContentMarginRight: '--plasma-select-chip-clear-content-margin-right',
|
80
|
-
popoverBorderColor: '--plasma-select-popover-border-color',
|
81
|
-
popoverBorderWidth: '--plasma-select-popover-border-width',
|
82
77
|
labelOffset: '--plasma-select-label-offset',
|
83
78
|
innerLabelGap: '--plasma-select-inner-label-gap',
|
84
79
|
helperTextColor: '--plasma-select-helper-text-color',
|
@@ -99,6 +94,7 @@ var constants = exports.constants = {
|
|
99
94
|
textfieldOuterLabelColor: '--text-primary',
|
100
95
|
textfieldInnerLabelColor: '--text-secondary',
|
101
96
|
textfieldPlaceholderColor: '--text-secondary',
|
97
|
+
textfieldBorderSize: '0.0625rem',
|
102
98
|
opacity: '0.4',
|
103
99
|
fontFamily: '--plasma-typo-body-xs-font-family',
|
104
100
|
fontSize: '--plasma-typo-body-xs-font-size',
|
@@ -16,28 +16,22 @@ var mergedButtonConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonCo
|
|
16
16
|
var Button = /*#__PURE__*/(0, _engines.component)(mergedButtonConfig);
|
17
17
|
var TextfieldWrapper = exports.TextfieldWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
18
18
|
componentId: "plasma-new-hope__sc-1akl2tk-0"
|
19
|
-
})(["display:inline;.", "{
|
19
|
+
})(["display:inline;.", "{background:", ";padding:", ";}.", "::before{box-shadow:none !important;}"], _Select.classes.textfieldTarget, function (_ref) {
|
20
20
|
var opened = _ref.opened;
|
21
21
|
return opened ? "var(".concat(_Select.tokens.targetTextfieldBackgroundColorOpened, ")") : "var(".concat(_Select.tokens.targetTextfieldBackgroundColor, ")");
|
22
22
|
}, function (_ref2) {
|
23
23
|
var value = _ref2.value;
|
24
24
|
return Array.isArray(value) && !(0, _utils.isEmpty)(value) ? "0 var(".concat(_Select.tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(_Select.tokens.targetTextfieldPadding, ")");
|
25
|
-
}, function (_ref3) {
|
26
|
-
var opened = _ref3.opened;
|
27
|
-
return opened ? "var(".concat(_Select.tokens.targetTextfieldBorderSize, ") solid var(").concat(_Select.tokens.targetTextfieldBorderOpenedColor, ")") : "var(".concat(_Select.tokens.targetTextfieldBorderSize, ") solid var(").concat(_Select.tokens.targetTextfieldBorderColor, ")");
|
28
|
-
}, _Select.classes.textfieldTarget, function (_ref4) {
|
29
|
-
var opened = _ref4.opened;
|
30
|
-
return opened ? "var(".concat(_Select.tokens.targetTextfieldBorderSize, ") solid var(").concat(_Select.tokens.targetTextfieldBorderOpenedColor, ")") : "var(".concat(_Select.tokens.targetTextfieldBorderSize, ") solid var(").concat(_Select.tokens.targetTextfieldBorderColorHover, ")");
|
31
25
|
}, _Select.classes.selectWithoutBoxShadow);
|
32
26
|
var StyledButton = exports.StyledButton = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
|
33
27
|
componentId: "plasma-new-hope__sc-1akl2tk-1"
|
34
|
-
})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");box-shadow:inset 0 0 0 ", " var(", ");text-align:left;", ""], _Button.buttonTokens.buttonColor, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorHover, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorActive, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonHeight, function (
|
35
|
-
var renderTarget =
|
28
|
+
})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");box-shadow:inset 0 0 0 ", " var(", ");text-align:left;", ""], _Button.buttonTokens.buttonColor, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorHover, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorActive, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonHeight, function (_ref3) {
|
29
|
+
var renderTarget = _ref3.renderTarget;
|
36
30
|
return renderTarget ? 'auto' : "var(".concat(_Select.tokens.targetHeight, ")");
|
37
|
-
}, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.targetTextfieldPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Select.tokens.fontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Select.constants.opacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor, _Select.
|
38
|
-
outlineOffset: _Select.
|
31
|
+
}, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.targetTextfieldPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Select.tokens.fontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Select.constants.opacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor, _Select.constants.textfieldBorderSize, _Select.tokens.targetTextfieldBorderColor, /*#__PURE__*/(0, _mixins.addFocus)({
|
32
|
+
outlineOffset: _Select.constants.textfieldBorderSize,
|
39
33
|
outlineSize: _Select.constants.focusSize,
|
40
|
-
outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.borderRadius, ") - ").concat(_Select.
|
34
|
+
outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.borderRadius, ") - ").concat(_Select.constants.textfieldBorderSize, ")"),
|
41
35
|
outlineColor: /*#__PURE__*/"var(".concat(_Select.constants.focusColor, ")")
|
42
36
|
}));
|
43
37
|
var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDisclosureDownCentered).withConfig({
|
@@ -51,9 +45,9 @@ var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.wi
|
|
51
45
|
})(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], _Select.classes.arrowInverse);
|
52
46
|
var ChipWrapper = exports.ChipWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
53
47
|
componentId: "plasma-new-hope__sc-1akl2tk-5"
|
54
|
-
})(["width:100%;display:flex;min-width:0;padding:", ";gap:0.25rem;overflow-x:scroll;border-top-right-radius:var(", ");border-bottom-right-radius:var(", ");-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"], function (
|
55
|
-
var multiselect =
|
56
|
-
value =
|
48
|
+
})(["width:100%;display:flex;min-width:0;padding:", ";gap:0.25rem;overflow-x:scroll;border-top-right-radius:var(", ");border-bottom-right-radius:var(", ");-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"], function (_ref4) {
|
49
|
+
var multiselect = _ref4.multiselect,
|
50
|
+
value = _ref4.value;
|
57
51
|
return "calc(".concat(_Select.constants.focusSize, " + ").concat(multiselect && value && value.length > 0 ? "var(".concat(_Select.tokens.focusOffset, ")") : 0, ")");
|
58
52
|
}, _Select.tokens.chipBorderRadius, _Select.tokens.chipBorderRadius);
|
59
53
|
var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
|
@@ -10,4 +10,4 @@ var styledContainer = _TextArea.classes.styledContainer,
|
|
10
10
|
styledTextAreaWrapper = _TextArea.classes.styledTextAreaWrapper,
|
11
11
|
styledHelpers = _TextArea.classes.styledHelpers;
|
12
12
|
var exclusionSelectors = 'not([disabled]):not([readonly]):not(:focus-within)';
|
13
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{transition:box-shadow 0.1s ease-in-out;border-radius:var(", ");
|
13
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{transition:box-shadow 0.1s ease-in-out;border-radius:var(", ");box-shadow:inset 0 0 0 var(", ",1px) var(", ");}.", "{transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");}&:hover:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:hover:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:hover:", " .", " + .", "{background-color:var(", ");}&:active:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:active:", " .", " + .", "{background-color:var(", ");}"], /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderRadius, _TextArea.tokens.borderSize, _TextArea.tokens.borderColor, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColor, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.inputBackgroundColorFocus, _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorFocus, /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderSize, _TextArea.tokens.borderColorFocus, /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorFocus, exclusionSelectors, /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderSize, _TextArea.tokens.borderColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorHover, _TextArea.tokens.inputBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorActive, _TextArea.tokens.inputBackgroundColorActive, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorActive);
|
@@ -13,10 +13,10 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
|
|
13
13
|
});
|
14
14
|
export var Ul = /*#__PURE__*/styled.ul.withConfig({
|
15
15
|
componentId: "plasma-new-hope__sc-ff6pwi-1"
|
16
|
-
})(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");height:auto;max-height:", ";overflow-y:scroll;
|
16
|
+
})(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");height:auto;max-height:", ";overflow-y:scroll;margin:0;padding:var(", ");"], tokens.background, tokens.boxShadow, tokens.borderRadius, function (_ref2) {
|
17
17
|
var listMaxHeight = _ref2.listMaxHeight;
|
18
18
|
return listMaxHeight || 'none';
|
19
|
-
}, tokens.
|
19
|
+
}, tokens.padding);
|
20
20
|
export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
|
21
21
|
componentId: "plasma-new-hope__sc-ff6pwi-2"
|
22
22
|
})(["color:", ";margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");opacity:var(", ");cursor:", ";"], function (_ref3) {
|
@@ -65,8 +65,6 @@ export var tokens = {
|
|
65
65
|
boxShadow: '--plasma-autocomplete-box-shadow',
|
66
66
|
borderRadius: '--plasma-autocomplete-border-radius',
|
67
67
|
padding: '--plasma-autocomplete-padding',
|
68
|
-
dropdownBorderColor: '--plasma-select-dropdown-border-color',
|
69
|
-
dropdownBorderWidth: '--plasma-select-dropdown-border-width',
|
70
68
|
itemPadding: '--plasma-autocomplete-item-padding',
|
71
69
|
itemBorderRadius: '--plasma-autocomplete-item-border-radius',
|
72
70
|
itemFontFamily: '--plasma-autocomplete-item-font-family',
|
@@ -8,7 +8,7 @@ var mergedConfig = /*#__PURE__*/mergeConfig(emptyStateConfig);
|
|
8
8
|
var EmptyState = /*#__PURE__*/component(mergedConfig);
|
9
9
|
export var Ul = /*#__PURE__*/styled.ul.withConfig({
|
10
10
|
componentId: "plasma-new-hope__sc-2kddkg-0"
|
11
|
-
})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";
|
11
|
+
})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ") 0;.", "{box-shadow:none;}"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
|
12
12
|
var listWidth = _ref.listWidth;
|
13
13
|
return listWidth || '100%';
|
14
14
|
}, function (_ref2) {
|
@@ -17,7 +17,7 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
|
|
17
17
|
}, function (_ref3) {
|
18
18
|
var listOverflow = _ref3.listOverflow;
|
19
19
|
return listOverflow || 'initial';
|
20
|
-
},
|
20
|
+
}, function (_ref4) {
|
21
21
|
var isInnerUl = _ref4.isInnerUl;
|
22
22
|
return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 0") : 0;
|
23
23
|
}, tokens.padding, classes.emptyStateWrapper);
|
@@ -21,8 +21,6 @@ export var tokens = {
|
|
21
21
|
fontWeight: '--plasma-combobox-font-weight',
|
22
22
|
fontLetterSpacing: '--plasma-combobox-font-letter-spacing',
|
23
23
|
fontLineHeight: '--plasma-combobox-font-line-height',
|
24
|
-
dropdownBorderColor: '--plasma-select-dropdown-border-color',
|
25
|
-
dropdownBorderWidth: '--plasma-select-dropdown-border-width',
|
26
24
|
itemHeight: '--plasma-combobox-item-height',
|
27
25
|
itemBorderRadius: '--plasma-combobox-item-border-radius',
|
28
26
|
itemPadding: '--plasma-combobox-item-padding',
|
@@ -37,15 +37,18 @@ export function App() {
|
|
37
37
|
|
38
38
|
### Формат даты
|
39
39
|
Формат даты задается с помощью свойства `format`.
|
40
|
-
| Обозначение | Отображение
|
41
|
-
|
42
|
-
| DD | 01-31
|
43
|
-
| D | 1-31
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
40
|
+
| Обозначение | Отображение | Описание |
|
41
|
+
|-------------|---------------------------------------|----------------------------------|
|
42
|
+
| DD | 01-31 | Дни месяца, 2 цифры |
|
43
|
+
| D | 1-31 | Дни месяца |
|
44
|
+
| MMMM | January...December / январь...декабрь | Месяц года, полное название |
|
45
|
+
| MMM | Jan...Dec / янв...дек | Месяц года, сокращенное название |
|
46
|
+
| MM | 01-12 | Месяц года, 2 цифры |
|
47
|
+
| M | 1-12 | Месяц года |
|
48
|
+
| YYYY | 2024 | Год из 4 цифр |
|
49
|
+
| YY | 24 | Год из 2 цифр |
|
50
|
+
| Q | 1-4 | Квартал |
|
51
|
+
|
49
52
|
При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату.
|
50
53
|
Свойство `maskWithFormat` позволяет маскировать ввод:
|
51
54
|
|
@@ -113,7 +113,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
113
113
|
_useState8 = _slicedToArray(_useState7, 2),
|
114
114
|
calendarFirstValue = _useState8[0],
|
115
115
|
setCalendarFirstValue = _useState8[1];
|
116
|
-
var _useState9 = useState(formatInputValue(
|
116
|
+
var _useState9 = useState(formatInputValue({
|
117
|
+
value: defaultFirstDate,
|
118
|
+
format: format,
|
119
|
+
lang: lang
|
120
|
+
})),
|
117
121
|
_useState10 = _slicedToArray(_useState9, 2),
|
118
122
|
inputFirstValue = _useState10[0],
|
119
123
|
setInputFirstValue = _useState10[1];
|
@@ -121,7 +125,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
121
125
|
_useState12 = _slicedToArray(_useState11, 2),
|
122
126
|
calendarSecondValue = _useState12[0],
|
123
127
|
setCalendarSecondValue = _useState12[1];
|
124
|
-
var _useState13 = useState(formatInputValue(
|
128
|
+
var _useState13 = useState(formatInputValue({
|
129
|
+
value: defaultSecondDate,
|
130
|
+
format: format,
|
131
|
+
lang: lang
|
132
|
+
})),
|
125
133
|
_useState14 = _slicedToArray(_useState13, 2),
|
126
134
|
inputSecondValue = _useState14[0],
|
127
135
|
setInputSecondValue = _useState14[1];
|
@@ -240,17 +248,33 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
240
248
|
}, [opened]);
|
241
249
|
useEffect(function () {
|
242
250
|
setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
|
243
|
-
setInputFirstValue(formatInputValue(
|
251
|
+
setInputFirstValue(formatInputValue({
|
252
|
+
value: defaultFirstDate,
|
253
|
+
format: format,
|
254
|
+
lang: lang
|
255
|
+
}));
|
244
256
|
}, [defaultFirstDate]);
|
245
257
|
useEffect(function () {
|
246
258
|
setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
|
247
|
-
setInputSecondValue(formatInputValue(
|
259
|
+
setInputSecondValue(formatInputValue({
|
260
|
+
value: defaultSecondDate,
|
261
|
+
format: format,
|
262
|
+
lang: lang
|
263
|
+
}));
|
248
264
|
}, [defaultSecondDate]);
|
249
265
|
useEffect(function () {
|
250
266
|
setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
|
251
|
-
setInputFirstValue(formatInputValue(
|
267
|
+
setInputFirstValue(formatInputValue({
|
268
|
+
value: defaultFirstDate,
|
269
|
+
format: format,
|
270
|
+
lang: lang
|
271
|
+
}));
|
252
272
|
setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
|
253
|
-
setInputSecondValue(formatInputValue(
|
273
|
+
setInputSecondValue(formatInputValue({
|
274
|
+
value: defaultSecondDate,
|
275
|
+
format: format,
|
276
|
+
lang: lang
|
277
|
+
}));
|
254
278
|
}, [format, lang]);
|
255
279
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
256
280
|
ref: rootRef,
|
@@ -83,7 +83,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
83
83
|
_useState4 = _slicedToArray(_useState3, 2),
|
84
84
|
calendarValue = _useState4[0],
|
85
85
|
setCalendarValue = _useState4[1];
|
86
|
-
var _useState5 = useState(formatInputValue(
|
86
|
+
var _useState5 = useState(formatInputValue({
|
87
|
+
value: defaultDate,
|
88
|
+
format: format,
|
89
|
+
lang: lang
|
90
|
+
})),
|
87
91
|
_useState6 = _slicedToArray(_useState5, 2),
|
88
92
|
inputValue = _useState6[0],
|
89
93
|
setInputValue = _useState6[1];
|
@@ -149,11 +153,19 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
149
153
|
}, [opened]);
|
150
154
|
useEffect(function () {
|
151
155
|
setCalendarValue(formatCalendarValue(defaultDate, format, lang));
|
152
|
-
setInputValue(formatInputValue(
|
156
|
+
setInputValue(formatInputValue({
|
157
|
+
value: defaultDate,
|
158
|
+
format: format,
|
159
|
+
lang: lang
|
160
|
+
}));
|
153
161
|
}, [defaultDate]);
|
154
162
|
useEffect(function () {
|
155
163
|
setCalendarValue(formatCalendarValue(defaultDate, format, lang));
|
156
|
-
setInputValue(formatInputValue(
|
164
|
+
setInputValue(formatInputValue({
|
165
|
+
value: defaultDate,
|
166
|
+
format: format,
|
167
|
+
lang: lang
|
168
|
+
}));
|
157
169
|
}, [format, lang]);
|
158
170
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
159
171
|
view: view,
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { classes } from '../DatePicker.tokens';
|
2
2
|
import { formatCalendarValue, formatInputValue, getDateFromFormat, getMaskedDateOnInput } from '../utils/dateHelper';
|
3
|
+
import { customDayjs } from '../../../utils/datejs';
|
3
4
|
export var useDatePicker = function useDatePicker(_ref) {
|
4
5
|
var currentValue = _ref.currentValue,
|
5
6
|
setInputValue = _ref.setInputValue,
|
@@ -38,10 +39,43 @@ export var useDatePicker = function useDatePicker(_ref) {
|
|
38
39
|
var newValue = maskWithFormat ? getMaskedDateOnInput(value, format, dateFormatDelimiter(), currentValue) : value;
|
39
40
|
if (!format) {
|
40
41
|
setCalendarValue(formatCalendarValue(newValue));
|
41
|
-
|
42
|
+
setInputValue(formatInputValue({
|
43
|
+
value: newValue,
|
44
|
+
format: format,
|
45
|
+
lang: lang
|
46
|
+
}));
|
47
|
+
onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
|
48
|
+
return;
|
49
|
+
}
|
50
|
+
|
51
|
+
/**
|
52
|
+
* NOTE: если в формате даты есть месяц в полном названии или сокращенном,
|
53
|
+
* нужно дополнительно проводить валидацию на полноту введенной даты.
|
54
|
+
* Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
|
55
|
+
*/
|
56
|
+
var hasMonthFullName = /M{3,4}/g.test(format);
|
57
|
+
var isValidMonth;
|
58
|
+
var isLengthEqual;
|
59
|
+
if (hasMonthFullName) {
|
60
|
+
customDayjs.locale(lang);
|
61
|
+
var firstIndexOfMonth = format.indexOf('M');
|
62
|
+
var lastIndexOfMonth = newValue.indexOf(dateFormatDelimiter(), firstIndexOfMonth);
|
63
|
+
var fullMonthName = !lastIndexOfMonth ? newValue.slice(firstIndexOfMonth) : newValue.slice(firstIndexOfMonth, lastIndexOfMonth);
|
64
|
+
var monthFormatting = format.replace(/[^M]/g, '');
|
65
|
+
isValidMonth = customDayjs("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
|
66
|
+
isLengthEqual = format.length - 4 === newValue.length - fullMonthName.length;
|
67
|
+
}
|
68
|
+
if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
|
42
69
|
setCalendarValue(formatCalendarValue(newValue, format, lang));
|
43
70
|
}
|
44
|
-
setInputValue(formatInputValue(
|
71
|
+
setInputValue(formatInputValue({
|
72
|
+
value: newValue,
|
73
|
+
format: format,
|
74
|
+
lang: lang,
|
75
|
+
hasMonthFullName: hasMonthFullName,
|
76
|
+
isValidMonth: isValidMonth,
|
77
|
+
isLengthEqual: isLengthEqual
|
78
|
+
}));
|
45
79
|
onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
|
46
80
|
};
|
47
81
|
var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
|
@@ -55,8 +89,13 @@ export var useDatePicker = function useDatePicker(_ref) {
|
|
55
89
|
}
|
56
90
|
if (isCalendarValue) {
|
57
91
|
setCalendarValue(formatCalendarValue(date, format, lang));
|
58
|
-
setInputValue(formatInputValue(
|
59
|
-
|
92
|
+
setInputValue(formatInputValue({
|
93
|
+
value: date,
|
94
|
+
format: format,
|
95
|
+
lang: lang
|
96
|
+
}));
|
97
|
+
onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
|
98
|
+
return;
|
60
99
|
}
|
61
100
|
var formatString = applyFormat ? format : undefined;
|
62
101
|
var _getDateFromFormat = getDateFromFormat(date, formatString, lang),
|
@@ -64,7 +103,11 @@ export var useDatePicker = function useDatePicker(_ref) {
|
|
64
103
|
isError = _getDateFromFormat.isError,
|
65
104
|
isSuccess = _getDateFromFormat.isSuccess;
|
66
105
|
setCalendarValue(formatCalendarValue(newDate, format, lang));
|
67
|
-
setInputValue(formatInputValue(
|
106
|
+
setInputValue(formatInputValue({
|
107
|
+
value: newDate,
|
108
|
+
format: format,
|
109
|
+
lang: lang
|
110
|
+
}));
|
68
111
|
onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
|
69
112
|
};
|
70
113
|
return {
|
@@ -1,8 +1,17 @@
|
|
1
1
|
import { customDayjs } from '../../../utils/datejs';
|
2
|
-
export var formatInputValue = function formatInputValue(
|
2
|
+
export var formatInputValue = function formatInputValue(_ref) {
|
3
|
+
var value = _ref.value,
|
4
|
+
format = _ref.format,
|
5
|
+
lang = _ref.lang,
|
6
|
+
hasMonthFullName = _ref.hasMonthFullName,
|
7
|
+
isValidMonth = _ref.isValidMonth,
|
8
|
+
isLengthEqual = _ref.isLengthEqual;
|
3
9
|
if (!value || !lang) {
|
4
10
|
return '';
|
5
11
|
}
|
12
|
+
if (hasMonthFullName && (!isValidMonth || !isLengthEqual)) {
|
13
|
+
return String(value);
|
14
|
+
}
|
6
15
|
if (format && customDayjs(value, format, true).isValid()) {
|
7
16
|
return customDayjs(value, format).locale(lang).format(format);
|
8
17
|
}
|
@@ -13,7 +13,7 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
|
|
13
13
|
}, /*#__PURE__*/String(popoverClasses.target));
|
14
14
|
export var Ul = /*#__PURE__*/styled.ul.withConfig({
|
15
15
|
componentId: "plasma-new-hope__sc-le54jv-1"
|
16
|
-
})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";
|
16
|
+
})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref2) {
|
17
17
|
var listWidth = _ref2.listWidth;
|
18
18
|
return listWidth || '100%';
|
19
19
|
}, function (_ref3) {
|
@@ -22,7 +22,7 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
|
|
22
22
|
}, function (_ref4) {
|
23
23
|
var listOverflow = _ref4.listOverflow;
|
24
24
|
return listOverflow || 'initial';
|
25
|
-
},
|
25
|
+
}, function (_ref5) {
|
26
26
|
var isInnerUl = _ref5.isInnerUl;
|
27
27
|
return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 var(").concat(tokens.padding, ")") : 0;
|
28
28
|
}, tokens.padding);
|