Merge pull request #438 from vicdurai/vic_translation_for_calendar_co…

…mponent_issue-324

feat(datetimepicker): add support for multiple languages

src/components/DateTimePicker/DateTimePicker.tsx

@@ -1,13 +1,19 @@
-import { enUS, ptBR } from 'date-fns/locale'
+import * as locales from 'date-fns/locale'
 import React, { ReactNode, CSSProperties } from 'react'
 import InputGroup from 'react-bootstrap/InputGroup'
 import DatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker'
 
 import { Icon } from '../Icon'
 import 'react-datepicker/dist/react-datepicker.css'
 
-registerLocale('enUS', enUS)
-registerLocale('ptBR', ptBR)
+// 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')
 

src/components/Dropdown/Dropdown.tsx

@@ -40,6 +40,7 @@ const Dropdown = (props: Props) => {
       style={item.style}
       key={item.key || `dropdown-item-${i.toString()}`}
       eventKey={item.eventKey || `dropdown-event-${i.toString()}`}
+      onClick={item.onClick}
     >
       {item.text}
     </DropdownRB.Item>

stories/datetimepicker.stories.tsx

@@ -1,7 +1,8 @@
 import { storiesOf } from '@storybook/react'
+import * as locales from 'date-fns/locale'
 import React, { useState } from 'react'
 
-import { DateTimePicker } from '../src'
+import { DateTimePicker, Dropdown } from '../src'
 
 storiesOf('DateTimePickers', module)
   .addParameters({
@@ -289,3 +290,38 @@ storiesOf('DateTimePickers', module)
       </div>
     )
   })
+  .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 (
+      <div>
+        <Dropdown text={language} items={items} />
+        <DateTimePicker
+          locale={language}
+          selected={startDate}
+          onChange={(date) => setStartDate(date)}
+        />
+      </div>
+    )
+  })