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

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')
 

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) => (
     <DropdownRB.Item
       style={item.style}
       key={item.key || `dropdown-item-${i.toString()}`}
       eventKey={item.eventKey || `dropdown-event-${i.toString()}`}
+      onClick={item.onClick || noop}
     >
       {item.text}
     </DropdownRB.Item>

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)
       </div>
     )
   })
+  .add('Supported languages', () => {
+    const [startDate, setStartDate] = useState(new Date())
+    const [language, setLanguage] = useState('enUS')
+
+    return (
+      <div>
+        <Dropdown
+          text={language}
+          items={[
+            {
+              text: 'enUS',
+              onClick: () => {
+                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')
+              },
+            },
+          ]}
+        />
+        <DateTimePicker
+          locale={language}
+          selected={startDate}
+          onChange={(date) => setStartDate(date)}
+        />
+      </div>
+    )
+  })