From aa7d5ec01ea7725176d75ed7f51a69503fd65b73 Mon Sep 17 00:00:00 2001 From: LukasBoll Date: Wed, 22 Sep 2021 19:43:01 +0200 Subject: [PATCH] add localization --- content/docs/date-time-picker.mdx | 56 ++++++--- src/components/docs/date-time-picker.js | 148 ++++++++++++++++++++---- 2 files changed, 170 insertions(+), 34 deletions(-) diff --git a/content/docs/date-time-picker.mdx b/content/docs/date-time-picker.mdx index 6a23f31b..9b6da921 100644 --- a/content/docs/date-time-picker.mdx +++ b/content/docs/date-time-picker.mdx @@ -1,6 +1,6 @@ --- id: date-time-picker -title: Date and Time Pickers +title: Date and Time Picker description: Configure Date and Time Picker --- @@ -18,7 +18,8 @@ import { DateTimeUiOptionSchema, TimeOptionTable, DateOptionTable, - DateTimeOptionTable + DateTimeOptionTable, + LocalizationExample } from '../../src/components/docs/date-time-picker'; JSON Forms supports JSON Schema's "date", "time" and "date-time" formats. Additional options to customize the "date", "time" and "date-time" pickers are offered for the React Material renderer set. @@ -35,7 +36,7 @@ A string control will also be rendered as a time picker by setting the property ### Options -The React Material renderer set offers additional UI Schema options to customize the appearance of the time picker text input as well as the picker itself. +The React Material renderer set offers additional UI Schema options to customize the appearance of the time picker text input as well as the picker itself. Please also refer to the localization section of this page to get information on how to customize the locales. The following example showcases some of the options. @@ -45,33 +46,62 @@ The picker presents itself in `am/pm` format. ## Date Picker -There are two ways to integrate the Date Picker. It can be embedded via the schema or the UI schema. The Date Picker supports a variety of options, that can be configured in the UI schema. +The date picker will be used when `format: "date"` is specified for a string property in the JSON Schema. Alternatively `format: "date"` can also be specified via the UI Schema options. ### Schema Based -An Input Field will be displayed as Date Picker by setting the format of the corresponding field to “date” in the schema. +A control will be rendered as a date picker when the format of the corresponding string property is set to "date" in the JSON Schema. ### UI Schema Based -An Input Field will also be displayed as Date Picker by setting the property "format" to "date" in the options in the UI schema. +A string control will also be rendered as a date picker by setting the property "format" to "date" in the UI Schema options. ### Options -An overview over the options can be seen in the example and the table below. Please note, that these options are only available for the Material Ui Renderer Set. - +The React Material renderer set offers additional UI Schema options to customize the appearance of the date picker text input as well as the picker itself. Please also refer to the localization section of this page to get information on how to customize the locales. +The following example showcases some of the options. Only Year and month are selected as views, this means the user is only able to pick a year and a month, but not the day. We are also only saving the year and month to the data as we configured it in the dateFormat options. + ## Date-Time Picker -There are two ways to integrate the Date-Time Picker. It can be embedded via the schema or the UI schema. The Time Picker supports a variety of options, that can be configured in the UI schema. +The date-time picker will be used when `format: "date-time"` is specified for a string property in the JSON Schema. Alternatively `format: "date-time"` can also be specified via the UI Schema options. ### Schema Based -An Input Field will be displayed as Date-Time Picker by setting the format of the corresponding field to date-time in the schema. +A control will be rendered as a date-time picker when the format of the corresponding string property is set to "date-time" in the JSON Schema. ### UI Schema Based -An Input Field will also be displayed as Date-Time Picker by setting the property "format" to "date-time" in the options in the UI schema. +A string control will also be rendered as a date-time picker by setting the property "format" to "date-time" in the UI Schema options. ### Options -An overview over the options can be seen in the example and the table below. Please note, that these options are only available for the Material Ui Renderer Set. - +The React Material renderer set offers additional UI Schema options to customize the appearance of the date-time picker text input as well as the picker itself. Please also refer to the localization section of this page to get information on how to customize the locales. +The following example showcases some of the options. +The text input is configured to only show the day, month and year, while hours and minutes are also saved into the data. +The time picker presents itself in `am/pm` format. + + +## Localization + +The Material Renderer set let’s you customize the picker´s modal by selecting a locale. For this JSON Forms is using the dayjs library. You need to import dayjs and set the global “locale” variable. In the example below we import dayjs, the locals for English and German and set the global “locale” variable to English. You can do this anywhere in your application. +```js +import dayjs from 'dayjs'; +import 'dayjs/locale/de'; +import 'dayjs/locale/en'; + +dayjs.locale("en"); +``` +JSON Forms will now use the global variable for the picker´s modal. You can use JSON Forms in your preferred way. For example, like in the code snippet below. +```js + +``` +You can see the result in the example below. It is also possible to switch between different locales like we did in our example. + + \ No newline at end of file diff --git a/src/components/docs/date-time-picker.js b/src/components/docs/date-time-picker.js index 0d49d732..f147fe8f 100644 --- a/src/components/docs/date-time-picker.js +++ b/src/components/docs/date-time-picker.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Demo } from '../common/Demo'; import TableCell from '@material-ui/core/TableCell/TableCell'; @@ -6,6 +6,20 @@ import TableHead from '@material-ui/core/TableHead/TableHead'; import Table from '@material-ui/core/Table/Table'; import TableBody from '@material-ui/core/TableBody/TableBody'; import TableRow from '@material-ui/core/TableRow/TableRow'; +import Select from '@material-ui/core/Select'; +import MenuItem from '@material-ui/core/MenuItem'; +import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; + +import { JsonForms } from '@jsonforms/react'; +import { + materialCells, + materialRenderers, +} from '@jsonforms/material-renderers'; + +import dayjs from 'dayjs'; +import 'dayjs/locale/de'; +import 'dayjs/locale/en'; export const TimeSchemaInput = { schema: { @@ -77,7 +91,7 @@ export const TimeUiSchemaOptionsInput = { options: { format: 'time', ampm: true, - timeFormat: 'HH:mm', + timeFormat: 'HH', timeSaveFormat: 'HH:mm', clearLabel: 'Clear it!', cancelLabel: 'Abort', @@ -85,7 +99,7 @@ export const TimeUiSchemaOptionsInput = { } }, data: { - time: '13:37' + time: '13:00' }, }; @@ -282,6 +296,96 @@ export const DateTimeUiOptionSchema = () => ( /> ); + +export const DateSchemaGerman = { + schema: { + properties: { + }, + }, + uischema: { + type: 'Control', + scope: '#/properties/date', + label: 'Year Month Picker', + options: { + format: 'date', + clearLabel: 'Zurücksetzen', + cancelLabel: 'Abbrechen', + okLabel: 'Ok' + }, + }, + data: { + date: new Date().toISOString().substr(0, 10), + }, +}; + +function sleep (time) { + return new Promise((resolve) => setTimeout(resolve, time)); +} + + +const ReloadJsonForms = ({reload,data}) => { + sleep(50).then(() => { + reload(); + }); + return {}} + /> +} + +export const LocalizationExample = () => { + + const [data, setData] = useState(DateSchemaInput.data); + const [local, setLocal] = useState('en'); + const [reloadJsForms, setreloadJsForms] = useState(false); + + dayjs.locale(local); + + return ( +
+ + + {reloadJsForms===true?{setreloadJsForms(false)}}/>: + local == "en"? + setData(data)} + />: setData(data)} + />} + +
+ ); +}; + export const TimeOptionTable = () => (

Time Picker Options

@@ -293,10 +397,6 @@ export const TimeOptionTable = () => ( - - ampm - If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used - timeFormat The time format used for the text input, can be different from the save format @@ -306,6 +406,10 @@ export const TimeOptionTable = () => ( The format in which the time is saved in the data. Note that if you specify a format which is incompatible with JSON Schema's "time" format then you should use the UI Schema based invocation, otherwise the control will be marked with an error. + + ampm + If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used + clearLabel Label of the "clear" action in the time picker modal @@ -337,11 +441,12 @@ export const DateOptionTable = () => ( dateFormat - Defines the used format + The date format used for the text input, can be different from the save format dateSaveFormat - Defines the format the date is saved + The format in which the date is saved in the data. Note that if you specify a format which is incompatible with JSON Schema's "date" format then + you should use the UI Schema based invocation, otherwise the control will be marked with an error. views @@ -349,15 +454,15 @@ export const DateOptionTable = () => ( clearLabel - Label of the clear-input option + Label of the "clear" action in the time picker modal cancelLabel - Label of the cancle option + Label of the "cancel" action in the time picker modal okLabel - Label of the confirm option + Label of the "confirm" action in the time picker modal @@ -377,29 +482,30 @@ export const DateTimeOptionTable = () => ( - - ampm - If set to true, 12-hour format is used, otherwise 24-hour time format is used. - dateTimeFormat - Defines the used format + The date-time format used for the text input, can be different from the save format dateTimeSaveFormat - Defines the save format of the date + The format in which the time is saved in the data. Note that if you specify a format which is incompatible with JSON Schema's "time" format then + you should use the UI Schema based invocation, otherwise the control will be marked with an error. + + + ampm + If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used clearLabel - Label of the clear-input option + Label of the "clear" action in the time picker modal cancelLabel - Label of the cancle option + Label of the "cancel" action in the time picker modal okLabel - Label of the confirm option + Label of the "confirm" action in the time picker modal