From ab390dbcef6873594c0435fd1b3bf422bc5a52df Mon Sep 17 00:00:00 2001 From: Vignesh Durai Date: Mon, 25 May 2020 03:08:56 -0400 Subject: [PATCH 1/2] feat(datetimepicker.tsx and dropdown.tsx): multiple languages, onClick Added support for multiple languages (supported by the UI at the time of writing) for DateTimePicker. Added story to demonstrate new languages. Also added support for onClick in dropdown.) fix #324 --- .../DateTimePicker/DateTimePicker.tsx | 10 ++- src/components/Dropdown/Dropdown.tsx | 3 + stories/datetimepicker.stories.tsx | 81 ++++++++++++++++++- 3 files changed, 92 insertions(+), 2 deletions(-) diff --git a/src/components/DateTimePicker/DateTimePicker.tsx b/src/components/DateTimePicker/DateTimePicker.tsx index c7cfe707..0514e98b 100644 --- a/src/components/DateTimePicker/DateTimePicker.tsx +++ b/src/components/DateTimePicker/DateTimePicker.tsx @@ -1,4 +1,4 @@ -import { enUS, ptBR } from 'date-fns/locale' +import { enUS, ptBR, arDZ, de, es, fr, it, ja, ru, zhCN } from 'date-fns/locale' import React, { ReactNode } from 'react' import InputGroup from 'react-bootstrap/InputGroup' import DatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker' @@ -8,6 +8,14 @@ import 'react-datepicker/dist/react-datepicker.css' registerLocale('enUS', enUS) registerLocale('ptBR', ptBR) +registerLocale('ar', arDZ) +registerLocale('de', de) +registerLocale('es', es) +registerLocale('fr', fr) +registerLocale('it', it) +registerLocale('ja', ja) +registerLocale('ru', ru) +registerLocale('zr', zhCN) setDefaultLocale('enUS') diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 236350f5..19505724 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -35,11 +35,14 @@ interface Props { const Dropdown = (props: Props) => { const { text, size, id, items, direction, variant, style, alignRight } = props + const noop = () => {} + const getDropdownItem = (item: Item, i: number) => ( {item.text} diff --git a/stories/datetimepicker.stories.tsx b/stories/datetimepicker.stories.tsx index de87429b..041194b7 100644 --- a/stories/datetimepicker.stories.tsx +++ b/stories/datetimepicker.stories.tsx @@ -1,7 +1,7 @@ import { storiesOf } from '@storybook/react' import React, { useState } from 'react' -import { DateTimePicker } from '../src' +import { DateTimePicker, Dropdown } from '../src' storiesOf('DateTimePickers', module) .addParameters({ @@ -289,3 +289,82 @@ storiesOf('DateTimePickers', module) ) }) + .add('Supported languages', () => { + const [startDate, setStartDate] = useState(new Date()) + const [language, setLanguage] = useState('enUS') + + return ( +
+ { + setLanguage('enUS') + }, + }, + { + text: 'ptBR', + onClick: () => { + setLanguage('ptBR') + }, + }, + { + text: 'de', + onClick: () => { + setLanguage('de') + }, + }, + { + text: 'ar', + onClick: () => { + setLanguage('ar') + }, + }, + { + text: 'es', + onClick: () => { + setLanguage('es') + }, + }, + { + text: 'fr', + onClick: () => { + setLanguage('fr') + }, + }, + { + text: 'it', + onClick: () => { + setLanguage('it') + }, + }, + { + text: 'ja', + onClick: () => { + setLanguage('ja') + }, + }, + { + text: 'ru', + onClick: () => { + setLanguage('ru') + }, + }, + { + text: 'zr', + onClick: () => { + setLanguage('zr') + }, + }, + ]} + /> + setStartDate(date)} + /> +
+ ) + }) From 8e42796fce9978d7c32374e927279b333aa8515d Mon Sep 17 00:00:00 2001 From: Vignesh Durai Date: Thu, 4 Jun 2020 12:49:05 -0400 Subject: [PATCH 2/2] feat(datetimepicker, dropdown): support all languages Supports all languages provided by date-fns/locale. Also fixes comments left on PR. re #438 --- .../DateTimePicker/DateTimePicker.tsx | 20 ++--- src/components/Dropdown/Dropdown.tsx | 4 +- stories/datetimepicker.stories.tsx | 87 +++++-------------- 3 files changed, 32 insertions(+), 79 deletions(-) diff --git a/src/components/DateTimePicker/DateTimePicker.tsx b/src/components/DateTimePicker/DateTimePicker.tsx index 0514e98b..7f59d76e 100644 --- a/src/components/DateTimePicker/DateTimePicker.tsx +++ b/src/components/DateTimePicker/DateTimePicker.tsx @@ -1,4 +1,4 @@ -import { enUS, ptBR, arDZ, de, es, fr, it, ja, ru, zhCN } from 'date-fns/locale' +import * as locales from 'date-fns/locale' import React, { ReactNode } from 'react' import InputGroup from 'react-bootstrap/InputGroup' import DatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker' @@ -6,16 +6,14 @@ import DatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker' import { Icon } from '../Icon' import 'react-datepicker/dist/react-datepicker.css' -registerLocale('enUS', enUS) -registerLocale('ptBR', ptBR) -registerLocale('ar', arDZ) -registerLocale('de', de) -registerLocale('es', es) -registerLocale('fr', fr) -registerLocale('it', it) -registerLocale('ja', ja) -registerLocale('ru', ru) -registerLocale('zr', zhCN) +// Generic way to register all available locales +Object.entries(locales).forEach(([key, locale]) => { + registerLocale(key, locale) +}) + +// Additional locales required for the frontend +registerLocale('ar', locales.arDZ) +registerLocale('zr', locales.zhCN) setDefaultLocale('enUS') diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 19505724..8bf818a6 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -35,14 +35,12 @@ interface Props { const Dropdown = (props: Props) => { const { text, size, id, items, direction, variant, style, alignRight } = props - const noop = () => {} - const getDropdownItem = (item: Item, i: number) => ( {item.text} diff --git a/stories/datetimepicker.stories.tsx b/stories/datetimepicker.stories.tsx index 041194b7..3debd3c2 100644 --- a/stories/datetimepicker.stories.tsx +++ b/stories/datetimepicker.stories.tsx @@ -1,4 +1,5 @@ import { storiesOf } from '@storybook/react' +import * as locales from 'date-fns/locale' import React, { useState } from 'react' import { DateTimePicker, Dropdown } from '../src' @@ -292,74 +293,30 @@ storiesOf('DateTimePickers', module) .add('Supported languages', () => { const [startDate, setStartDate] = useState(new Date()) const [language, setLanguage] = useState('enUS') + const items = Object.keys(locales).map((locale) => ({ + text: locale, + onClick: () => { + setLanguage(locale) + }, + })) + const ar = { + text: 'ar', + onClick: () => { + setLanguage('ar') + }, + } + const zr = { + text: 'zr', + onClick: () => { + setLanguage('zr') + }, + } + items.push(ar) + items.push(zr) return (
- { - setLanguage('enUS') - }, - }, - { - text: 'ptBR', - onClick: () => { - setLanguage('ptBR') - }, - }, - { - text: 'de', - onClick: () => { - setLanguage('de') - }, - }, - { - text: 'ar', - onClick: () => { - setLanguage('ar') - }, - }, - { - text: 'es', - onClick: () => { - setLanguage('es') - }, - }, - { - text: 'fr', - onClick: () => { - setLanguage('fr') - }, - }, - { - text: 'it', - onClick: () => { - setLanguage('it') - }, - }, - { - text: 'ja', - onClick: () => { - setLanguage('ja') - }, - }, - { - text: 'ru', - onClick: () => { - setLanguage('ru') - }, - }, - { - text: 'zr', - onClick: () => { - setLanguage('zr') - }, - }, - ]} - /> +