Skip to content

Commit fa6ce32

Browse files
wd055denis-vlasov
wd055
and
denis-vlasov
authored
feat: add date picker string type (#205)
Co-authored-by: denis-vlasov <[email protected]>
1 parent 556db15 commit fa6ce32

File tree

50 files changed

+391
-13
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+391
-13
lines changed

‎docs/input-props-map.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
## Supported input props map
22

3-
| Config type | Config name | Storybook | Type | Original component |
4-
| :---------- | :---------- | :----------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- | :----------------------------------------------------------------------------- |
5-
| `array` | `select` | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/array-select--select) | [MultiSelectProps](../src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx#L10) | https://github.com/gravity-ui/uikit/tree/main/src/components/Select |
6-
| `boolean` | `base` | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/boolean-base--base) | [CheckboxProps](../src/lib/kit/components/Inputs/Checkbox/Checkbox.tsx#L12) | https://github.com/gravity-ui/uikit/tree/main/src/components/Checkbox |
7-
| `number` | `base` | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/number-base--base) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
8-
| `string` | `base` | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-base--base) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
9-
| `string` | `password` | [Password](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-password--password) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
10-
| `string` | `select` | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-select--select) | [SelectProps](../src/lib/kit/components/Inputs/Select/Select.tsx#L12) | https://github.com/gravity-ui/uikit/tree/main/src/components/Select |
11-
| `string` | `textarea` | [TextArea](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-textarea--text-area) | [TextAreaProps](../src/lib/kit/components/Inputs/TextArea/TextArea.tsx#L7) | https://github.com/gravity-ui/uikit/tree/main/src/components/controls/TextArea |
3+
| Config type | Config name | Storybook | Type | Original component |
4+
| :---------- | :----------- | :--------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- |
5+
| `array` | `select` | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/array-select--select) | [MultiSelectProps](../src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx#L10) | https://github.com/gravity-ui/uikit/tree/main/src/components/Select |
6+
| `boolean` | `base` | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/boolean-base--base) | [CheckboxProps](../src/lib/kit/components/Inputs/Checkbox/Checkbox.tsx#L12) | https://github.com/gravity-ui/uikit/tree/main/src/components/Checkbox |
7+
| `number` | `base` | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/number-base--base) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
8+
| `string` | `base` | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-base--base) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
9+
| `string` | `password` | [Password](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-password--password) | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9) | https://github.com/gravity-ui/uikit/tree/main/src/components/Text |
10+
| `string` | `select` | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-select--select) | [SelectProps](../src/lib/kit/components/Inputs/Select/Select.tsx#L12) | https://github.com/gravity-ui/uikit/tree/main/src/components/Select |
11+
| `string` | `textarea` | [TextArea](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-textarea--text-area) | [TextAreaProps](../src/lib/kit/components/Inputs/TextArea/TextArea.tsx#L7) | https://github.com/gravity-ui/uikit/tree/main/src/components/controls/TextArea |
12+
| `string` | `date_input` | [DatePicker](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-dateinput--date-input) | [DatePickerProps](https://preview.gravity-ui.com/date-components/?path=/docs/components-datepicker--docs) | https://github.com/gravity-ui/date-components/tree/main/src/components/DatePicker |

‎docs/spec.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
131131
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
132132
| viewSpec.generateRandomValueButton | `boolean` | | Shows a button that allows you to generate a random value depending on the passed [function generateRandomValue](./lib.md#dynamicfield) |
133133
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |
134+
| viewSpec.dateInput | `object` | | [Parameters](#dateinput) additional options for the date picker |
134135

135136
#### SizeParams
136137

@@ -162,6 +163,15 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
162163
| readAsMethod | `'readAsArrayBuffer'` `'readAsBinaryString'` `'readAsDataURL'` `'readAsText'` | | File reading method |
163164
| ignoreText | `boolean` | | For `true`, will show the `File uploaded` stub instead of the field value |
164165

166+
#### DateInput
167+
168+
| Property | Type | Required | Description |
169+
| :----------- | :--------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------- |
170+
| outputFormat | `string` \| string \| date \| timestamp \| date_time | | Format returning string (for backend and logic). [Available formats](https://day.js.org/docs/en/display/format) |
171+
| printFormat | `string` | | Format print string (for view in read form). [Available formats](https://day.js.org/docs/en/display/format) |
172+
173+
You can provide all props of [original component](https://preview.gravity-ui.com/date-components/?path=/docs/components-datepicker--docs) through [viewSpec.inputProps](./input-props-map.md).
174+
165175
#### TextContentParams
166176

167177
| Property | Type | Required | Description |

‎package-lock.json‎

Lines changed: 59 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
"dependencies": {
4646
"@bem-react/classname": "^1.6.0",
4747
"@gravity-ui/components": "^3.0.0",
48+
"@gravity-ui/date-components": "^2.5.0",
49+
"@gravity-ui/date-utils": "^2.5.3",
4850
"@gravity-ui/i18n": "^1.2.0",
4951
"@gravity-ui/icons": "^2.8.1",
5052
"lodash": "^4.17.20"

‎src/lib/core/types/specs.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,10 @@ export interface StringSpec<
174174
readAsMethod?: ReadAsMethod;
175175
ignoreText?: boolean;
176176
};
177+
dateInput?: {
178+
outputFormat?: string;
179+
printFormat?: string;
180+
};
177181
copy?: boolean;
178182
selectParams?: {
179183
filterPlaceholder?: string;

‎src/lib/kit/components/Inputs/DateInput/DateInput.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import '../../../styles/variables';
2+
3+
.#{$ns}date-input {
4+
width: 100%;
5+
}

‎src/lib/kit/components/Inputs/DateInput/DateInput.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React, {useCallback} from 'react';
2+
3+
import {DatePicker, DatePickerProps} from '@gravity-ui/date-components';
4+
import {StringInputProps} from '../../../../core';
5+
import {DateTime, dateTimeParse} from '@gravity-ui/date-utils';
6+
import {block} from '../../../utils';
7+
8+
import './DateInput.scss';
9+
10+
export const DEFAULT_DATE_FORMAT = 'DD-MM-YYYY';
11+
12+
const b = block('date-input');
13+
14+
export interface DateProps
15+
extends Omit<DatePickerProps, 'value' | 'disabled' | 'placeholder' | 'qa'> {}
16+
17+
export const DateInput: React.FC<StringInputProps<DateProps>> = ({
18+
name,
19+
input,
20+
spec,
21+
inputProps,
22+
}) => {
23+
const {value, onChange, onBlur, onFocus} = input;
24+
const dateInput = spec.viewSpec.dateInput;
25+
const outputFormat = dateInput?.outputFormat;
26+
27+
const onUpdate = useCallback(
28+
(date: DateTime | null) => {
29+
if (!date) {
30+
onChange(undefined as any);
31+
} else {
32+
switch (outputFormat) {
33+
case 'date_time':
34+
onChange(date as any);
35+
break;
36+
case 'date':
37+
onChange(date.toDate() as any);
38+
break;
39+
case 'timestamp':
40+
onChange({
41+
seconds: Math.floor(date?.toDate().getTime() / 1000),
42+
nanos: 0,
43+
} as any);
44+
break;
45+
case 'string':
46+
case undefined:
47+
case '':
48+
onChange(date.toISOString());
49+
break;
50+
default:
51+
onChange(date.format(outputFormat));
52+
break;
53+
}
54+
}
55+
},
56+
[outputFormat],
57+
);
58+
59+
const props: DatePickerProps = {
60+
hasClear: true,
61+
format: dateInput?.printFormat || DEFAULT_DATE_FORMAT,
62+
...inputProps,
63+
onBlur: onBlur as (e: React.FocusEvent<HTMLElement>) => void,
64+
onFocus: onFocus as (e: React.FocusEvent<HTMLElement>) => void,
65+
value: value
66+
? dateTimeParse((value as any).seconds ? (value as any).seconds * 1000 : value) || null
67+
: null,
68+
onUpdate,
69+
disabled: spec.viewSpec.disabled,
70+
placeholder: spec.viewSpec.placeholder,
71+
};
72+
73+
return <DatePicker className={b()} data-qa={name} {...props} />;
74+
};
75+
76+
export default DateInput;

‎src/lib/kit/components/Inputs/DateInput/__snapshots__/DateInput.visual.test.tsx-snapshots/DateInput-default-dark-chromium-linux.png‎

6.97 KB
Loading

‎src/lib/kit/components/Inputs/DateInput/__snapshots__/DateInput.visual.test.tsx-snapshots/DateInput-default-dark-webkit-linux.png‎

4.81 KB
Loading

‎src/lib/kit/components/Inputs/DateInput/__snapshots__/DateInput.visual.test.tsx-snapshots/DateInput-default-light-chromium-linux.png‎

6.6 KB
Loading

0 commit comments

Comments
 (0)