Skip to content

Commit

Permalink
add localization
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukasBoll
LukasBoll committed Sep 22, 2021
1 parent f3b8b93 commit aa7d5ec
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 34 deletions.
56 changes: 43 additions & 13 deletions content/docs/date-time-picker.mdx
View file
@@ -1,6 +1,6 @@
---
id: date-time-picker
title: Date and Time Pickers
title: Date and Time Picker
description: Configure Date and Time Picker
---

Expand All @@ -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.
Expand All @@ -35,7 +36,7 @@ A string control will also be rendered as a time picker by setting the property
<TimeUiSchema />

### 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.
<TimeOptionTable />

The following example showcases some of the options.
Expand All @@ -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.
<DateSchema />

### 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.
<DateUiSchema />

### 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.
<DateUiSchemaOptions/>
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.
<DateOptionTable/>
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.
<DateUiSchemaOptions/>

## 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.
<DateTimeSchema />

### 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.
<DateTimeUiSchema />

### 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.
<DateTimeUiOptionSchema />
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.
<DateTimeOptionTable/>
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.
<DateTimeUiOptionSchema />

## 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
<JsonForms
schema={schema}
uischema={uischema}
data={data}
renderers={materialRenderers}
cells={materialCells}
validationMode={currentValidationMode}
/>
```
You can see the result in the example below. It is also possible to switch between different locales like we did in our example.

<LocalizationExample/>
148 changes: 127 additions & 21 deletions src/components/docs/date-time-picker.js
View file
@@ -1,11 +1,25 @@
import React from 'react';
import React, { useState } from 'react';
import { Demo } from '../common/Demo';

import TableCell from '@material-ui/core/TableCell/TableCell';
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: {
Expand Down Expand Up @@ -77,15 +91,15 @@ export const TimeUiSchemaOptionsInput = {
options: {
format: 'time',
ampm: true,
timeFormat: 'HH:mm',
timeFormat: 'HH',
timeSaveFormat: 'HH:mm',
clearLabel: 'Clear it!',
cancelLabel: 'Abort',
okLabel: 'Do it',
}
},
data: {
time: '13:37'
time: '13:00'
},
};

Expand Down Expand Up @@ -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 <JsonForms
data={data}
schema={DateSchemaGerman.schema}
uischema={DateSchemaGerman.uischema}
renderers={materialRenderers}
cells={materialCells}
onChange={({ data, _errors }) => {}}
/>
}

export const LocalizationExample = () => {

const [data, setData] = useState(DateSchemaInput.data);
const [local, setLocal] = useState('en');
const [reloadJsForms, setreloadJsForms] = useState(false);

dayjs.locale(local);

return (
<div style={{padding:"8px"}}>
<Grid
container
direction='column'
justifyContent='space-between'
alignItems="stretch"
>
<Select
value = {local}
onChange={(event) =>{
setreloadJsForms(true);
setLocal(event.target.value);
}}
style={{marginBottom:'20px'}}
>
<MenuItem value={'en'}>en</MenuItem>
<MenuItem value={'de'}>de</MenuItem>
</Select>
{reloadJsForms===true?<ReloadJsonForms data = {data}reload={()=>{setreloadJsForms(false)}}/>:
local == "en"?
<JsonForms
data={data}
schema={DateSchemaUiInput.schema}
uischema={DateSchemaUiInput.uischema}
renderers={materialRenderers}
cells={materialCells}
onChange={({ data, _errors }) => setData(data)}
/>:<JsonForms
data={data}
schema={DateSchemaGerman.schema}
uischema={DateSchemaGerman.uischema}
renderers={materialRenderers}
cells={materialCells}
onChange={({ data, _errors }) => setData(data)}
/>}
</Grid>
</div>
);
};

export const TimeOptionTable = () => (
<div>
<h2>Time Picker Options</h2>
Expand All @@ -293,10 +397,6 @@ export const TimeOptionTable = () => (
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>ampm</TableCell>
<TableCell>If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used</TableCell>
</TableRow>
<TableRow>
<TableCell>timeFormat</TableCell>
<TableCell>The time format used for the text input, can be different from the save format</TableCell>
Expand All @@ -306,6 +406,10 @@ export const TimeOptionTable = () => (
<TableCell>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.</TableCell>
</TableRow>
<TableRow>
<TableCell>ampm</TableCell>
<TableCell>If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used</TableCell>
</TableRow>
<TableRow>
<TableCell>clearLabel</TableCell>
<TableCell>Label of the "clear" action in the time picker modal</TableCell>
Expand Down Expand Up @@ -337,27 +441,28 @@ export const DateOptionTable = () => (
<TableBody>
<TableRow>
<TableCell>dateFormat</TableCell>
<TableCell>Defines the used format</TableCell>
<TableCell>The date format used for the text input, can be different from the save format</TableCell>
</TableRow>
<TableRow>
<TableCell>dateSaveFormat</TableCell>
<TableCell>Defines the format the date is saved</TableCell>
<TableCell>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.</TableCell>
</TableRow>
<TableRow>
<TableCell>views</TableCell>
<TableCell>Array defining which views are displayed. Options: year, month, date</TableCell>
</TableRow>
<TableRow>
<TableCell>clearLabel</TableCell>
<TableCell>Label of the clear-input option</TableCell>
<TableCell>Label of the "clear" action in the time picker modal</TableCell>
</TableRow>
<TableRow>
<TableCell>cancelLabel</TableCell>
<TableCell>Label of the cancle option</TableCell>
<TableCell>Label of the "cancel" action in the time picker modal</TableCell>
</TableRow>
<TableRow>
<TableCell>okLabel</TableCell>
<TableCell>Label of the confirm option</TableCell>
<TableCell>Label of the "confirm" action in the time picker modal</TableCell>
</TableRow>
</TableBody>
</Table>
Expand All @@ -377,29 +482,30 @@ export const DateTimeOptionTable = () => (
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>ampm</TableCell>
<TableCell>If set to true, 12-hour format is used, otherwise 24-hour time format is used.</TableCell>
</TableRow>
<TableRow>
<TableCell>dateTimeFormat</TableCell>
<TableCell>Defines the used format</TableCell>
<TableCell>The date-time format used for the text input, can be different from the save format</TableCell>
</TableRow>
<TableRow>
<TableCell>dateTimeSaveFormat</TableCell>
<TableCell>Defines the save format of the date</TableCell>
<TableCell>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.</TableCell>
</TableRow>
<TableRow>
<TableCell>ampm</TableCell>
<TableCell>If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used</TableCell>
</TableRow>
<TableRow>
<TableCell>clearLabel</TableCell>
<TableCell>Label of the clear-input option</TableCell>
<TableCell>Label of the "clear" action in the time picker modal</TableCell>
</TableRow>
<TableRow>
<TableCell>cancelLabel</TableCell>
<TableCell>Label of the cancle option</TableCell>
<TableCell>Label of the "cancel" action in the time picker modal</TableCell>
</TableRow>
<TableRow>
<TableCell>okLabel</TableCell>
<TableCell>Label of the confirm option</TableCell>
<TableCell>Label of the "confirm" action in the time picker modal</TableCell>
</TableRow>
</TableBody>
</Table>
Expand Down

0 comments on commit aa7d5ec

Please sign in to comment.