@salutejs/plasma-new-hope 0.114.0-canary.1332.10195467656.0 → 0.114.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/cjs/components/DatePicker/DatePickerBase.styles.js.map +1 -1
- package/cjs/components/DatePicker/DatePickerBase.styles_192va2p.css +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +4 -4
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles_18z9fw1.css +5 -0
- package/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/cjs/components/DatePicker/SingleDate/variations/_size/base.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +1 -0
- package/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +30 -0
- package/cjs/components/DatePicker/hooks/useKeyboardNavigation.js.map +1 -0
- package/cjs/index.css +4 -4
- package/emotion/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +14 -5
- package/emotion/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/emotion/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +32 -0
- package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +7 -7
- package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/emotion/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.styles.js +15 -6
- package/emotion/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/emotion/es/components/DatePicker/hooks/useKeyboardNavigation.js +26 -0
- package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +7 -7
- package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/es/components/DatePicker/DatePickerBase.styles.js.map +1 -1
- package/es/components/DatePicker/DatePickerBase.styles_192va2p.css +1 -0
- package/es/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.css +4 -4
- package/es/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles_18z9fw1.css +5 -0
- package/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/es/components/DatePicker/SingleDate/variations/_size/base.js.map +1 -1
- package/es/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +1 -0
- package/es/components/DatePicker/hooks/useKeyboardNavigation.js +25 -0
- package/es/components/DatePicker/hooks/useKeyboardNavigation.js.map +1 -0
- package/es/index.css +4 -4
- package/package.json +2 -2
- package/styled-components/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +2 -2
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +32 -0
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/styled-components/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js +3 -3
- package/styled-components/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/styled-components/es/components/DatePicker/hooks/useKeyboardNavigation.js +26 -0
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/types/components/DatePicker/DatePickerBase.styles.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/variations/_size/base.d.ts.map +1 -1
- package/types/components/DatePicker/hooks/useKeyboardNavigation.d.ts +13 -0
- package/types/components/DatePicker/hooks/useKeyboardNavigation.d.ts.map +1 -0
- package/cjs/components/DatePicker/DatePickerBase.styles_1whkrlf.css +0 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles_qt45m5.css +0 -5
- package/cjs/components/DatePicker/SingleDate/variations/_size/base_g7zrur.css +0 -1
- package/es/components/DatePicker/DatePickerBase.styles_1whkrlf.css +0 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles_qt45m5.css +0 -5
- package/es/components/DatePicker/SingleDate/variations/_size/base_g7zrur.css +0 -1
package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { ComponentProps,
|
1
|
+
import React, { ComponentProps, useRef, useState } from 'react';
|
2
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
3
3
|
import { action } from '@storybook/addon-actions';
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
@@ -263,82 +263,3 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
263
263
|
},
|
264
264
|
render: (args) => <StoryRange {...args} />,
|
265
265
|
};
|
266
|
-
|
267
|
-
const StoryDeferred = ({
|
268
|
-
enableContentLeft,
|
269
|
-
enableContentRight,
|
270
|
-
valueError,
|
271
|
-
valueSuccess,
|
272
|
-
size,
|
273
|
-
...rest
|
274
|
-
}: StoryPropsDefault) => {
|
275
|
-
const [isOpen, setIsOpen] = useState(false);
|
276
|
-
|
277
|
-
const [defVal, setDefVal] = useState<Date | undefined>(undefined);
|
278
|
-
|
279
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
280
|
-
|
281
|
-
useEffect(() => {
|
282
|
-
setTimeout(() => {
|
283
|
-
setDefVal(new Date(2024, 5, 14));
|
284
|
-
}, 5000);
|
285
|
-
}, []);
|
286
|
-
|
287
|
-
return (
|
288
|
-
<>
|
289
|
-
<h3>Асинхронная установка даты по умолчанию</h3>
|
290
|
-
<DatePicker
|
291
|
-
defaultDate={defVal}
|
292
|
-
isOpen={isOpen}
|
293
|
-
size={size}
|
294
|
-
valueError={valueError}
|
295
|
-
valueSuccess={valueSuccess}
|
296
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
297
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
298
|
-
onBlur={onBlur}
|
299
|
-
onFocus={onFocus}
|
300
|
-
onToggle={(is) => setIsOpen(is)}
|
301
|
-
onChangeValue={(e, currentValue) => {
|
302
|
-
onChangeValue(e, currentValue);
|
303
|
-
}}
|
304
|
-
onCommitDate={() => setIsOpen(false)}
|
305
|
-
{...rest}
|
306
|
-
/>
|
307
|
-
</>
|
308
|
-
);
|
309
|
-
};
|
310
|
-
|
311
|
-
export const Deferred: StoryObj<StoryPropsDefault> = {
|
312
|
-
argTypes: {
|
313
|
-
defaultDate: {
|
314
|
-
control: {
|
315
|
-
type: 'date',
|
316
|
-
},
|
317
|
-
},
|
318
|
-
labelPlacement: {
|
319
|
-
options: labelPlacements,
|
320
|
-
control: {
|
321
|
-
type: 'inline-radio',
|
322
|
-
},
|
323
|
-
},
|
324
|
-
},
|
325
|
-
args: {
|
326
|
-
label: 'Лейбл',
|
327
|
-
leftHelper: 'Подсказка к полю',
|
328
|
-
placeholder: '30.05.2024',
|
329
|
-
size: 'l',
|
330
|
-
view: 'default',
|
331
|
-
labelPlacement: 'outer',
|
332
|
-
min: new Date(2024, 1, 1),
|
333
|
-
max: new Date(2024, 12, 29),
|
334
|
-
maskWithFormat: false,
|
335
|
-
disabled: false,
|
336
|
-
readOnly: false,
|
337
|
-
textBefore: '',
|
338
|
-
enableContentLeft: true,
|
339
|
-
enableContentRight: true,
|
340
|
-
valueError: false,
|
341
|
-
valueSuccess: false,
|
342
|
-
},
|
343
|
-
render: (args) => <StoryDeferred {...args} />,
|
344
|
-
};
|
package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { ComponentProps,
|
1
|
+
import React, { ComponentProps, useRef, useState } from 'react';
|
2
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
3
3
|
import { action } from '@storybook/addon-actions';
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
@@ -262,82 +262,3 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
262
262
|
},
|
263
263
|
render: (args) => <StoryRange {...args} />,
|
264
264
|
};
|
265
|
-
|
266
|
-
const StoryDeferred = ({
|
267
|
-
enableContentLeft,
|
268
|
-
enableContentRight,
|
269
|
-
valueError,
|
270
|
-
valueSuccess,
|
271
|
-
size,
|
272
|
-
...rest
|
273
|
-
}: StoryPropsDefault) => {
|
274
|
-
const [isOpen, setIsOpen] = useState(false);
|
275
|
-
|
276
|
-
const [defVal, setDefVal] = useState<Date | undefined>(undefined);
|
277
|
-
|
278
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
279
|
-
|
280
|
-
useEffect(() => {
|
281
|
-
setTimeout(() => {
|
282
|
-
setDefVal(new Date(2024, 5, 14));
|
283
|
-
}, 5000);
|
284
|
-
}, []);
|
285
|
-
|
286
|
-
return (
|
287
|
-
<>
|
288
|
-
<h3>Асинхронная установка даты по умолчанию</h3>
|
289
|
-
<DatePicker
|
290
|
-
defaultDate={defVal}
|
291
|
-
isOpen={isOpen}
|
292
|
-
size={size}
|
293
|
-
valueError={valueError}
|
294
|
-
valueSuccess={valueSuccess}
|
295
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
296
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
297
|
-
onBlur={onBlur}
|
298
|
-
onFocus={onFocus}
|
299
|
-
onToggle={(is) => setIsOpen(is)}
|
300
|
-
onChangeValue={(e, currentValue) => {
|
301
|
-
onChangeValue(e, currentValue);
|
302
|
-
}}
|
303
|
-
onCommitDate={() => setIsOpen(false)}
|
304
|
-
{...rest}
|
305
|
-
/>
|
306
|
-
</>
|
307
|
-
);
|
308
|
-
};
|
309
|
-
|
310
|
-
export const Deferred: StoryObj<StoryPropsDefault> = {
|
311
|
-
argTypes: {
|
312
|
-
defaultDate: {
|
313
|
-
control: {
|
314
|
-
type: 'date',
|
315
|
-
},
|
316
|
-
},
|
317
|
-
labelPlacement: {
|
318
|
-
options: labelPlacements,
|
319
|
-
control: {
|
320
|
-
type: 'inline-radio',
|
321
|
-
},
|
322
|
-
},
|
323
|
-
},
|
324
|
-
args: {
|
325
|
-
label: 'Лейбл',
|
326
|
-
leftHelper: 'Подсказка к полю',
|
327
|
-
placeholder: '30.05.2024',
|
328
|
-
size: 'l',
|
329
|
-
view: 'default',
|
330
|
-
labelPlacement: 'outer',
|
331
|
-
min: new Date(2024, 1, 1),
|
332
|
-
max: new Date(2024, 12, 29),
|
333
|
-
maskWithFormat: false,
|
334
|
-
disabled: false,
|
335
|
-
readOnly: false,
|
336
|
-
textBefore: '',
|
337
|
-
enableContentLeft: true,
|
338
|
-
enableContentRight: true,
|
339
|
-
valueError: false,
|
340
|
-
valueSuccess: false,
|
341
|
-
},
|
342
|
-
render: (args) => <StoryDeferred {...args} />,
|
343
|
-
};
|
@@ -9,4 +9,4 @@ export var baseCalendarTokens = /*#__PURE__*/"\n padding-top: var(".concat(to
|
|
9
9
|
// NOTE: переопределение токенов Calendar
|
10
10
|
export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({
|
11
11
|
componentId: "plasma-new-hope__sc-1i6o09y-0"
|
12
|
-
})(["
|
12
|
+
})(["", ""], baseCalendarTokens);
|
@@ -13,6 +13,7 @@ import { cx } from '../../../utils';
|
|
13
13
|
import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
|
14
14
|
import { useDatePicker } from '../hooks/useDatePicker';
|
15
15
|
import { classes } from '../DatePicker.tokens';
|
16
|
+
import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
|
16
17
|
import { base as sizeCSS } from './variations/_size/base';
|
17
18
|
import { base as viewCSS } from './variations/_view/base';
|
18
19
|
import { base as disabledCSS } from './variations/_disabled/base';
|
@@ -172,6 +173,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
172
173
|
}
|
173
174
|
setIsInnerOpen(isCalendarOpen);
|
174
175
|
};
|
176
|
+
var _useKeyNavigation = useKeyNavigation({
|
177
|
+
isCalendarOpen: isInnerOpen,
|
178
|
+
onToggle: handleToggle
|
179
|
+
}),
|
180
|
+
onKeyDown = _useKeyNavigation.onKeyDown;
|
175
181
|
var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
|
176
182
|
ref: rangeRef,
|
177
183
|
dividerIcon: dividerIcon,
|
@@ -215,7 +221,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
215
221
|
onFocusFirstTextfield: onFocusFirstTextfield,
|
216
222
|
onFocusSecondTextfield: onFocusSecondTextfield,
|
217
223
|
onBlurFirstTextfield: onBlurFirstTextfield,
|
218
|
-
onBlurSecondTextfield: onBlurSecondTextfield
|
224
|
+
onBlurSecondTextfield: onBlurSecondTextfield,
|
225
|
+
onKeyDown: onKeyDown
|
219
226
|
}));
|
220
227
|
useEffect(function () {
|
221
228
|
var _rangeRef$current5, _rangeRef$current6;
|
@@ -223,13 +230,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
223
230
|
setSecondInputRef((_rangeRef$current6 = rangeRef.current) === null || _rangeRef$current6 === void 0 ? void 0 : _rangeRef$current6.secondTextField());
|
224
231
|
}, [rangeRef.current]);
|
225
232
|
useEffect(function () {
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
|
231
|
-
setInputSecondValue(formatInputValue(defaultSecondDate, format));
|
232
|
-
}, [defaultSecondDate]);
|
233
|
+
setIsInnerOpen(function (prevOpen) {
|
234
|
+
return prevOpen !== isOpen && isOpen;
|
235
|
+
});
|
236
|
+
}, [isOpen]);
|
233
237
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
234
238
|
ref: rootRef,
|
235
239
|
view: view,
|
@@ -240,7 +244,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
240
244
|
}, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(RangeDatePopover, {
|
241
245
|
calendarValue: [calendarFirstValue, calendarSecondValue],
|
242
246
|
target: RangeComponent,
|
243
|
-
isOpen:
|
247
|
+
isOpen: isInnerOpen,
|
244
248
|
includeEdgeDates: includeEdgeDates,
|
245
249
|
eventList: eventList,
|
246
250
|
disabledList: disabledList,
|
@@ -14,6 +14,7 @@ import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '.
|
|
14
14
|
import { useDatePicker } from '../hooks/useDatePicker';
|
15
15
|
import { classes } from '../DatePicker.tokens';
|
16
16
|
import { StyledCalendar } from '../DatePickerBase.styles';
|
17
|
+
import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
|
17
18
|
import { base as sizeCSS } from './variations/_size/base';
|
18
19
|
import { base as viewCSS } from './variations/_view/base';
|
19
20
|
import { base as disabledCSS } from './variations/_disabled/base';
|
@@ -110,6 +111,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
110
111
|
handleToggle = _useDatePicker.handleToggle,
|
111
112
|
handleChangeValue = _useDatePicker.handleChangeValue,
|
112
113
|
handleCommitDate = _useDatePicker.handleCommitDate;
|
114
|
+
var _useKeyNavigation = useKeyNavigation({
|
115
|
+
isCalendarOpen: isInnerOpen,
|
116
|
+
onToggle: handleToggle
|
117
|
+
}),
|
118
|
+
onKeyDown = _useKeyNavigation.onKeyDown;
|
113
119
|
var DatePickerInput = /*#__PURE__*/React.createElement(StyledInput, _extends({
|
114
120
|
ref: inputRef,
|
115
121
|
className: cx(datePickerErrorClass, datePickerSuccessClass),
|
@@ -127,15 +133,17 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
127
133
|
return handleCommitDate(date, true, false);
|
128
134
|
},
|
129
135
|
onFocus: onFocus,
|
130
|
-
onBlur: onBlur
|
136
|
+
onBlur: onBlur,
|
137
|
+
onKeyDown: onKeyDown
|
131
138
|
}, innerLabelPlacement && {
|
132
139
|
label: label,
|
133
140
|
labelPlacement: labelPlacement
|
134
141
|
}));
|
135
142
|
useEffect(function () {
|
136
|
-
|
137
|
-
|
138
|
-
|
143
|
+
setIsInnerOpen(function (prevOpen) {
|
144
|
+
return prevOpen !== isOpen && isOpen;
|
145
|
+
});
|
146
|
+
}, [isOpen]);
|
139
147
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
140
148
|
view: view,
|
141
149
|
size: size,
|
@@ -144,7 +152,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
144
152
|
readOnly: !disabled && readOnly,
|
145
153
|
ref: ref
|
146
154
|
}, rest), !innerLabelPlacement && label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledPopover, {
|
147
|
-
isOpen:
|
155
|
+
isOpen: isInnerOpen,
|
148
156
|
usePortal: false,
|
149
157
|
onToggle: handleToggle,
|
150
158
|
offset: offset,
|
@@ -3,7 +3,7 @@ import { css } from 'styled-components';
|
|
3
3
|
import { component, mergeConfig } from '../../../engines';
|
4
4
|
import { textFieldConfig, textFieldTokens } from '../../TextField';
|
5
5
|
import { classes, tokens } from '../DatePicker.tokens';
|
6
|
-
import {
|
6
|
+
import { popoverConfig } from '../../Popover';
|
7
7
|
var mergedTextFieldConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
|
8
8
|
var TextField = /*#__PURE__*/component(mergedTextFieldConfig);
|
9
9
|
var mergedPopoverConfig = /*#__PURE__*/mergeConfig(popoverConfig);
|
@@ -15,8 +15,8 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
|
|
15
15
|
// NOTE: переопределение токенов TextField
|
16
16
|
export var StyledInput = /*#__PURE__*/styled(TextField).withConfig({
|
17
17
|
componentId: "plasma-new-hope__sc-1ye0xbz-1"
|
18
|
-
})(["
|
19
|
-
export var base = /*#__PURE__*/css(["display:inline-block
|
18
|
+
})([" ", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.labelInnerPadding, tokens.labelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.contentLabelInnerPadding, textFieldTokens.labelInnerFontFamily, tokens.labelInnerFontFamily, textFieldTokens.labelInnerFontSize, tokens.labelInnerFontSize, textFieldTokens.labelInnerFontStyle, tokens.labelInnerFontStyle, textFieldTokens.labelInnerFontWeight, tokens.labelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.labelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.labelInnerLineHeight, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.datePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.datePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
|
19
|
+
export var base = /*#__PURE__*/css(["display:inline-block;"]);
|
20
20
|
export var StyledLabel = /*#__PURE__*/styled.label.withConfig({
|
21
21
|
componentId: "plasma-new-hope__sc-1ye0xbz-2"
|
22
22
|
})([""]);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../../../DatePicker.tokens';
|
3
3
|
import { StyledLabel, LeftHelper } from '../../SingleDate.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
|
4
|
+
export var base = /*#__PURE__*/css(["width:var(", ");", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.width, StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
|
@@ -0,0 +1,26 @@
|
|
1
|
+
export var keys = {
|
2
|
+
Space: 'Space'
|
3
|
+
};
|
4
|
+
export var useKeyNavigation = function useKeyNavigation(_ref) {
|
5
|
+
var isCalendarOpen = _ref.isCalendarOpen,
|
6
|
+
onToggle = _ref.onToggle;
|
7
|
+
var onKeyDown = function onKeyDown(event) {
|
8
|
+
switch (event.code) {
|
9
|
+
case keys.Space:
|
10
|
+
{
|
11
|
+
if (!isCalendarOpen) {
|
12
|
+
event.preventDefault();
|
13
|
+
onToggle(true, event);
|
14
|
+
}
|
15
|
+
break;
|
16
|
+
}
|
17
|
+
default:
|
18
|
+
{
|
19
|
+
break;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
};
|
23
|
+
return {
|
24
|
+
onKeyDown: onKeyDown
|
25
|
+
};
|
26
|
+
};
|
@@ -7,7 +7,7 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-transparent-
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
l: /*#__PURE__*/css(["", ":26.5rem;", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.875rem;", ":26.5rem;", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":11.75rem;", ":10.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.875rem 1rem 0 1rem;", ":0.5rem;", ":0 0 0 1rem;", ":0.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;"], tokens.width, tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.calendarBorderRadius, tokens.calendarWidth, tokens.calendarYearsPadding, tokens.calendarYearItemBorderRadius, tokens.calendarYearItemWidth, tokens.calendarYearItemHeight, tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearFontWeight, tokens.calendarYearSelectedFontWeight, tokens.calendarMonthsPadding, tokens.calendarMonthItemBorderRadius, tokens.calendarMonthItemWidth, tokens.calendarMonthItemHeight, tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthFontWeight, tokens.calendarMonthSelectedFontWeight, tokens.calendarQuartersPadding, tokens.calendarQuarterItemBorderRadius, tokens.calendarQuarterItemWidth, tokens.calendarQuarterItemHeight, tokens.calendarQuarterFontFamily, tokens.calendarQuarterFontSize, tokens.calendarQuarterFontStyle, tokens.calendarQuarterFontLetterSpacing, tokens.calendarQuarterFontLineHeight, tokens.calendarQuarterFontWeight, tokens.calendarQuarterSelectedFontWeight, tokens.calendarDaysPadding, tokens.calendarDayItemBorderRadius, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayFontWeight, tokens.calendarDaySelectedFontWeight, tokens.calendarHeaderWrapperPadding, tokens.calendarHeaderArrowGap, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderFontWeight, tokens.calendarHeaderFontWeightBold, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonRadius),
|
package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { ComponentProps,
|
1
|
+
import React, { ComponentProps, useRef, useState } from 'react';
|
2
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
3
3
|
import { action } from '@storybook/addon-actions';
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
@@ -263,82 +263,3 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
263
263
|
},
|
264
264
|
render: (args) => <StoryRange {...args} />,
|
265
265
|
};
|
266
|
-
|
267
|
-
const StoryDeferred = ({
|
268
|
-
enableContentLeft,
|
269
|
-
enableContentRight,
|
270
|
-
valueError,
|
271
|
-
valueSuccess,
|
272
|
-
size,
|
273
|
-
...rest
|
274
|
-
}: StoryPropsDefault) => {
|
275
|
-
const [isOpen, setIsOpen] = useState(false);
|
276
|
-
|
277
|
-
const [defVal, setDefVal] = useState<Date | undefined>(undefined);
|
278
|
-
|
279
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
280
|
-
|
281
|
-
useEffect(() => {
|
282
|
-
setTimeout(() => {
|
283
|
-
setDefVal(new Date(2024, 5, 14));
|
284
|
-
}, 5000);
|
285
|
-
}, []);
|
286
|
-
|
287
|
-
return (
|
288
|
-
<>
|
289
|
-
<h3>Асинхронная установка даты по умолчанию</h3>
|
290
|
-
<DatePicker
|
291
|
-
defaultDate={defVal}
|
292
|
-
isOpen={isOpen}
|
293
|
-
size={size}
|
294
|
-
valueError={valueError}
|
295
|
-
valueSuccess={valueSuccess}
|
296
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
297
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
298
|
-
onBlur={onBlur}
|
299
|
-
onFocus={onFocus}
|
300
|
-
onToggle={(is) => setIsOpen(is)}
|
301
|
-
onChangeValue={(e, currentValue) => {
|
302
|
-
onChangeValue(e, currentValue);
|
303
|
-
}}
|
304
|
-
onCommitDate={() => setIsOpen(false)}
|
305
|
-
{...rest}
|
306
|
-
/>
|
307
|
-
</>
|
308
|
-
);
|
309
|
-
};
|
310
|
-
|
311
|
-
export const Deferred: StoryObj<StoryPropsDefault> = {
|
312
|
-
argTypes: {
|
313
|
-
defaultDate: {
|
314
|
-
control: {
|
315
|
-
type: 'date',
|
316
|
-
},
|
317
|
-
},
|
318
|
-
labelPlacement: {
|
319
|
-
options: labelPlacements,
|
320
|
-
control: {
|
321
|
-
type: 'inline-radio',
|
322
|
-
},
|
323
|
-
},
|
324
|
-
},
|
325
|
-
args: {
|
326
|
-
label: 'Лейбл',
|
327
|
-
leftHelper: 'Подсказка к полю',
|
328
|
-
placeholder: '30.05.2024',
|
329
|
-
size: 'l',
|
330
|
-
view: 'default',
|
331
|
-
labelPlacement: 'outer',
|
332
|
-
min: new Date(2024, 1, 1),
|
333
|
-
max: new Date(2024, 12, 29),
|
334
|
-
maskWithFormat: false,
|
335
|
-
disabled: false,
|
336
|
-
readOnly: false,
|
337
|
-
textBefore: '',
|
338
|
-
enableContentLeft: true,
|
339
|
-
enableContentRight: true,
|
340
|
-
valueError: false,
|
341
|
-
valueSuccess: false,
|
342
|
-
},
|
343
|
-
render: (args) => <StoryDeferred {...args} />,
|
344
|
-
};
|
package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { ComponentProps,
|
1
|
+
import React, { ComponentProps, useRef, useState } from 'react';
|
2
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
3
3
|
import { action } from '@storybook/addon-actions';
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
@@ -262,82 +262,3 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
262
262
|
},
|
263
263
|
render: (args) => <StoryRange {...args} />,
|
264
264
|
};
|
265
|
-
|
266
|
-
const StoryDeferred = ({
|
267
|
-
enableContentLeft,
|
268
|
-
enableContentRight,
|
269
|
-
valueError,
|
270
|
-
valueSuccess,
|
271
|
-
size,
|
272
|
-
...rest
|
273
|
-
}: StoryPropsDefault) => {
|
274
|
-
const [isOpen, setIsOpen] = useState(false);
|
275
|
-
|
276
|
-
const [defVal, setDefVal] = useState<Date | undefined>(undefined);
|
277
|
-
|
278
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
279
|
-
|
280
|
-
useEffect(() => {
|
281
|
-
setTimeout(() => {
|
282
|
-
setDefVal(new Date(2024, 5, 14));
|
283
|
-
}, 5000);
|
284
|
-
}, []);
|
285
|
-
|
286
|
-
return (
|
287
|
-
<>
|
288
|
-
<h3>Асинхронная установка даты по умолчанию</h3>
|
289
|
-
<DatePicker
|
290
|
-
defaultDate={defVal}
|
291
|
-
isOpen={isOpen}
|
292
|
-
size={size}
|
293
|
-
valueError={valueError}
|
294
|
-
valueSuccess={valueSuccess}
|
295
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
296
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
297
|
-
onBlur={onBlur}
|
298
|
-
onFocus={onFocus}
|
299
|
-
onToggle={(is) => setIsOpen(is)}
|
300
|
-
onChangeValue={(e, currentValue) => {
|
301
|
-
onChangeValue(e, currentValue);
|
302
|
-
}}
|
303
|
-
onCommitDate={() => setIsOpen(false)}
|
304
|
-
{...rest}
|
305
|
-
/>
|
306
|
-
</>
|
307
|
-
);
|
308
|
-
};
|
309
|
-
|
310
|
-
export const Deferred: StoryObj<StoryPropsDefault> = {
|
311
|
-
argTypes: {
|
312
|
-
defaultDate: {
|
313
|
-
control: {
|
314
|
-
type: 'date',
|
315
|
-
},
|
316
|
-
},
|
317
|
-
labelPlacement: {
|
318
|
-
options: labelPlacements,
|
319
|
-
control: {
|
320
|
-
type: 'inline-radio',
|
321
|
-
},
|
322
|
-
},
|
323
|
-
},
|
324
|
-
args: {
|
325
|
-
label: 'Лейбл',
|
326
|
-
leftHelper: 'Подсказка к полю',
|
327
|
-
placeholder: '30.05.2024',
|
328
|
-
size: 'l',
|
329
|
-
view: 'default',
|
330
|
-
labelPlacement: 'outer',
|
331
|
-
min: new Date(2024, 1, 1),
|
332
|
-
max: new Date(2024, 12, 29),
|
333
|
-
maskWithFormat: false,
|
334
|
-
disabled: false,
|
335
|
-
readOnly: false,
|
336
|
-
textBefore: '',
|
337
|
-
enableContentLeft: true,
|
338
|
-
enableContentRight: true,
|
339
|
-
valueError: false,
|
340
|
-
valueSuccess: false,
|
341
|
-
},
|
342
|
-
render: (args) => <StoryDeferred {...args} />,
|
343
|
-
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DatePickerBase.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,kBAAkB,QAkG9B,CAAC;AAGF,eAAO,MAAM,cAAc,
|
1
|
+
{"version":3,"file":"DatePickerBase.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,kBAAkB,QAkG9B,CAAC;AAGF,eAAO,MAAM,cAAc,qTAE1B,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;
|
1
|
+
{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAQ9D,eAAO,MAAM,mBAAmB,SACtB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EA8QvG,CAAC;AAEN,eAAO,MAAM,qBAAqB;;;mBAhRxB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyS3G,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;
|
1
|
+
{"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SACjB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC,gXAoKlG,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBAtKnB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;CA+LtG,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SingleDate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.styles.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,aAAa,4TAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"SingleDate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.styles.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,aAAa,4TAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HAqEvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAEhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/SingleDate/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/SingleDate/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAwBhB,CAAC"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import type { ChangeEvent, KeyboardEvent, SyntheticEvent } from 'react';
|
2
|
+
interface Props {
|
3
|
+
isCalendarOpen: boolean;
|
4
|
+
onToggle: (isOpen: boolean, event: SyntheticEvent | Event) => void;
|
5
|
+
}
|
6
|
+
export declare const keys: {
|
7
|
+
Space: string;
|
8
|
+
};
|
9
|
+
export declare const useKeyNavigation: ({ isCalendarOpen, onToggle }: Props) => {
|
10
|
+
onKeyDown: (event: ChangeEvent<HTMLInputElement> & KeyboardEvent<HTMLInputElement>) => void;
|
11
|
+
};
|
12
|
+
export {};
|
13
|
+
//# sourceMappingURL=useKeyboardNavigation.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAExE,UAAU,KAAK;IACX,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,KAAK,KAAK,IAAI,CAAC;CACtE;AAED,eAAO,MAAM,IAAI;;CAEhB,CAAC;AAEF,eAAO,MAAM,gBAAgB,iCAAkC,KAAK;uBACtC,YAAY,gBAAgB,CAAC,GAAG,cAAc,gBAAgB,CAAC;CAiB5F,CAAC"}
|