fivetran / fivetran/jsonforms-antd-renderers
Add support for configurable default timezones and other Date Libraries
- Dominant language
- TypeScript
- Stars
- 23
- Forks
- 4
- PR merge metrics
- No merged PRs in 30d
Description
The current implementation of the [DateTimeControl](https://github.com/great-expectations/jsonforms-antd-renderers/blob/main/src/controls/DateTimeControl.tsx) does not allow for configuring the default timezone in any manner. It also does not allow the end user to BTODL (bring their own date library). The [AntD DatePicker](https://ant.design/components/date-picker/) allows for [using custom date libraries](https://ant.design/docs/react/use-custom-date-library) if the consumer prefers something like moment, date-fns or luxon.
The complications of trying to implement this inside the library in its current form come in 2 flavors.
1. The user will need to supply a config object to the component for their library of choice so we can use `DatePicker. generatePicker(). This can be made generic in component relatively easy via the `GenerateConfig` helper from `rc-picker`.
2. The jsonforms field that we are targeting with this control is a `string` formatted as a `datetime`. This means that the value coming in from the form's data or `initialValue` need to be parsed from a string into the relevant flavor of date object for their library of choice (antd uses dayjs by default, which is why that is what is used in that first implementation). This means that along with the config object for the form the end user will need to supply a parse function to convert the datetime string into their (potentially timezone aware/included) date library object. Maybe something along the lines of:
```tsx
...
import type { GenerateConfig } from 'rc-picker/lib/generate'
import generatePicker from 'antd/es/date-picker/generatePicker'
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
import dayjs from 'dayjs'
import type { Dayjs } from "dayjs"
type DateTimeConfig = {
generateConfig: GenerateConfig
/**
* Parse a string value into the date type expected by the generate config
*/
parseDate: (dateString: string) => T
timezone?: string
format?: string
}
type ControlProps = Omit & {
uischema: ControlUISchema & {
options?: DateTimeControlOptions & {
dateConfig?: DateTimeConfig
}
}
}
const DEFAULT_PROPS: DateTimeControlOptions = {
format: { format: "YYYY-MM-DD HH:mm:ss", type: "mask" },
} as const
// Default config using dayjs
const defaultDateConfig: DateTimeConfig = {
generateConfig: dayjsGenerateConfig,
parseDate: (dateString: string) => dayjs(dateString),
}
...
export function DateTimeControl({
...
// Use provided generate config to create picker
const DatePicker = generatePicker(dateConfig.generateConfig)
// Parse initial value using the provided parser
const initialValue = schema.default ?
dateConfig.parseDate(schema.default as string) :
undefined
...
```
The types here would really need to go in `ui-schemas` with the rest of the DateTimeControlOptions but this shoule convey the idea.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.