-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add date picker string type #205
Changes from 3 commits
137922b
48f17ed
ff52f66
2ffc9b3
070b6a0
188f92e
56f1d02
0878828
1c347fa
79cbbdc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,12 @@ | ||
## Supported input props map | ||
|
||
| Config type | Config name | Storybook | Type | Original component | | ||
| :---------- | :---------- | :----------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- | :----------------------------------------------------------------------------- | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| Config type | Config name | Storybook | Type | Original component | | ||
| :---------- | :----------- | :--------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | | ||
| `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 | |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -162,6 +162,12 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; | |
| readAsMethod | `'readAsArrayBuffer'` `'readAsBinaryString'` `'readAsDataURL'` `'readAsText'` | | File reading method | | ||
| ignoreText | `boolean` | | For `true`, will show the `File uploaded` stub instead of the field value | | ||
|
||
#### DateInput | ||
|
||
| Property | Type | Required | Description | | ||
| :----------- | :------- | :------: | :-------------------------------------------------------------------------------------- | | ||
| outputFormat | `string` | | Format returning string. [Available formats](https://day.js.org/docs/en/display/format) | | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think there are two formats needed here, one format that is waiting for the backend, the second format is the one in which we will display the date to the user It is worth considering that the backend can wait for a millisecond string or a timestamp object, I did not see it here https://day.js.org/docs/en/display/format There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. add printFormat |
||
#### TextContentParams | ||
|
||
| Property | Type | Required | Description | | ||
|
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
@import '../../../styles/variables'; | ||
|
||
.#{$ns}date-input { | ||
width: 100%; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import React, {useCallback} from 'react'; | ||
|
||
import {DatePicker, DatePickerProps} from '@gravity-ui/date-components'; | ||
import {StringInputProps} from '../../../../core'; | ||
import {DateTime, dateTimeParse} from '@gravity-ui/date-utils'; | ||
import {block} from '../../../utils'; | ||
|
||
import './DateInput.scss'; | ||
|
||
const b = block('date-input'); | ||
|
||
export interface DateProps | ||
extends Omit<DatePickerProps, 'value' | 'disabled' | 'placeholder' | 'qa'> {} | ||
|
||
export const DateInput: React.FC<StringInputProps<DateProps>> = ({ | ||
name, | ||
input, | ||
spec, | ||
inputProps, | ||
}) => { | ||
const {value, onChange, onBlur, onFocus} = input; | ||
|
||
const onUpdate = useCallback( | ||
(date: DateTime | null) => { | ||
if (!date) { | ||
onChange(''); | ||
} else if (spec.viewSpec.dateInput?.outputFormat) { | ||
onChange(date.format(spec.viewSpec.dateInput.outputFormat)); | ||
} else { | ||
onChange(date.toISOString()); | ||
} | ||
}, | ||
[spec.viewSpec.dateInput?.outputFormat], | ||
); | ||
|
||
const props: DatePickerProps = { | ||
hasClear: true, | ||
...inputProps, | ||
onBlur: onBlur as (e: React.FocusEvent<HTMLElement>) => void, | ||
onFocus: onFocus as (e: React.FocusEvent<HTMLElement>) => void, | ||
value: value ? dateTimeParse(value) || null : null, | ||
onUpdate, | ||
disabled: spec.viewSpec.disabled, | ||
placeholder: spec.viewSpec.placeholder, | ||
}; | ||
|
||
return <DatePicker className={b()} data-qa={name} {...props} />; | ||
}; | ||
|
||
export default DateInput; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import React from 'react'; | ||
|
||
import {DATE_INPUT, VALUE} from './helpers'; | ||
|
||
import {test} from '~playwright/core'; | ||
import {DynamicForm} from '~playwright/core/DynamicForm'; | ||
import {DynamicView} from '~playwright/core/DynamicView'; | ||
|
||
test.describe('DateInput', () => { | ||
test('default', async ({mount, expectScreenshot}) => { | ||
await mount(<DynamicForm spec={DATE_INPUT.default} />); | ||
|
||
await expectScreenshot(); | ||
}); | ||
|
||
test('full', async ({mount, expectScreenshot}) => { | ||
await mount(<DynamicForm spec={DATE_INPUT.full} />); | ||
|
||
await expectScreenshot(); | ||
}); | ||
|
||
test('default value', async ({mount, expectScreenshot}) => { | ||
await mount(<DynamicForm spec={DATE_INPUT.defaultValue} />); | ||
|
||
await expectScreenshot(); | ||
}); | ||
|
||
test('row verbose', async ({mount, expectScreenshot}) => { | ||
await mount(<DynamicForm spec={DATE_INPUT.row_verbose} />); | ||
|
||
await expectScreenshot(); | ||
}); | ||
|
||
test('layout transparent', async ({mount, expectScreenshot}) => { | ||
await mount(<DynamicForm spec={DATE_INPUT.layoutTransparent} />); | ||
|
||
await expectScreenshot(); | ||
}); | ||
}); | ||
|
||
test.describe('DateInput view', () => { | ||
test('default', async ({mount, expectScreenshot}) => { | ||
await mount(<DynamicView spec={DATE_INPUT.default} value={VALUE} />); | ||
|
||
await expectScreenshot(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import {FormValue, SpecTypes, StringSpec} from '../../../../../core'; | ||
|
||
export const DATE_INPUT: Record<string, StringSpec> = { | ||
default: { | ||
type: SpecTypes.String, | ||
viewSpec: { | ||
type: 'date_input', | ||
layout: 'row', | ||
layoutTitle: 'Flag', | ||
}, | ||
}, | ||
full: { | ||
type: SpecTypes.String, | ||
required: true, | ||
viewSpec: { | ||
disabled: true, | ||
type: 'date_input', | ||
layout: 'row', | ||
layoutTitle: 'Flag', | ||
layoutDescription: 'description', | ||
}, | ||
}, | ||
defaultValue: { | ||
defaultValue: '2020-01-01', | ||
type: SpecTypes.String, | ||
viewSpec: { | ||
type: 'date_input', | ||
layout: 'row', | ||
layoutTitle: 'File Input', | ||
}, | ||
}, | ||
layoutTransparent: { | ||
type: SpecTypes.String, | ||
viewSpec: { | ||
type: 'date_input', | ||
layout: 'transparent', | ||
layoutTitle: 'Flag', | ||
}, | ||
}, | ||
row_verbose: { | ||
type: SpecTypes.String, | ||
viewSpec: { | ||
type: 'date_input', | ||
layout: 'row_verbose', | ||
layoutTitle: 'File Input', | ||
layoutDescription: 'description', | ||
}, | ||
}, | ||
}; | ||
|
||
export const VALUE: FormValue = '2020-01-01'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './DateInput'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We also forgot to add a description here that there is such a possibility
https://github.com/gravity-ui/dynamic-forms/blob/add-date-picker/docs/spec.md#stringspec