Fix internationalization example

Author: onurkerimov

src/components/Calendar/README.md

@@ -3,12 +3,75 @@
 ```jsx inside Markdown
 import * as locales from 'react-date-range/dist/locale';
 
-const [locale, setLocale] = React.useState('ja');
+const nameMapper = {
+  ar: 'Arabic',
+  bg: 'Bulgarian',
+  ca: 'Catalan',
+  cs: 'Czech',
+  cy: 'Welsh',
+  da: 'Danish',
+  de: 'German',
+  el: 'Greek',
+  enGB: 'English (United Kingdom)',
+  enUS: 'English (United States)',
+  eo: 'Esperanto',
+  es: 'Spanish',
+  et: 'Estonian',
+  faIR: 'Persian',
+  fi: 'Finnish',
+  fil: 'Filipino',
+  fr: 'French',
+  hi: 'Hindi',
+  hr: 'Croatian',
+  hu: 'Hungarian',
+  hy: 'Armenian',
+  id: 'Indonesian',
+  is: 'Icelandic',
+  it: 'Italian',
+  ja: 'Japanese',
+  ka: 'Georgian',
+  ko: 'Korean',
+  lt: 'Lithuanian',
+  lv: 'Latvian',
+  mk: 'Macedonian',
+  nb: 'Norwegian Bokmål',
+  nl: 'Dutch',
+  pl: 'Polish',
+  pt: 'Portuguese',
+  ro: 'Romanian',
+  ru: 'Russian',
+  sk: 'Slovak',
+  sl: 'Slovenian',
+  sr: 'Serbian',
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese',
+  zhCN: 'Chinese Simplified',
+  zhTW: 'Chinese Traditional'
+};
 
-<Calendar
-  locale={locales[locale]}
-  date={null}
-  className={'PreviewArea'}
-/>
+const localeOptions = Object.keys(locales)
+  .map(key => ({
+    value: key,
+    label: `${key} - ${nameMapper[key] || ''}`
+  }))
+  .filter(item => nameMapper[item.value]);
 
+const [locale, setLocale] = React.useState('ja');
+<div style={{ display: 'flex', flexFlow: 'column nowrap' }}>
+  <select
+    style={{ margin: '20px auto' }}
+    onChange={e => setLocale(e.target.value)}
+    value={locale}
+  >
+    {localeOptions.map((option, i) => (
+      <option value={option.value} key={i}>
+        {option.label}
+      </option>
+    ))}
+  </select>
+  <Calendar locale={locales[locale]} date={null} />
+</div>;
 ```