Lazy set moment locale (#8785)

components/locale-provider/__tests__/index.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import { mount } from 'enzyme';
 import moment from 'moment';
@@ -37,8 +38,9 @@ import srRS from '../sr_RS';
 import isIS from '../is_IS';
 import arEG from '../ar_EG';
 import ukUA from '../uk_UA';
+import zhCN from '../zh_CN';
 
-const locales = [enUS, ptBR, ptPT, ruRU, esES, svSE, frBE, deDE, nlNL, caES, csCZ, koKR, etEE, skSK, jaJP, trTR, zhTW, fiFI, plPL, bgBG, enGB, frFR, nlBE, itIT, viVN, thTH, faIR, elGR, nbNO, srRS, isIS, arEG, ukUA];
+const locales = [enUS, ptBR, ptPT, ruRU, esES, svSE, frBE, deDE, nlNL, caES, csCZ, koKR, etEE, skSK, jaJP, trTR, zhTW, fiFI, plPL, bgBG, enGB, frFR, nlBE, itIT, viVN, thTH, faIR, elGR, nbNO, srRS, isIS, arEG, ukUA, zhCN];
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
@@ -83,16 +85,22 @@ const App = () => (
 );
 
 describe('Locale Provider', () => {
+  beforeAll(() => {
+    MockDate.set(moment('2017-09-18T03:30:07.795Z').valueOf() + (new Date().getTimezoneOffset() * 60 * 1000));
+  });
+
+  afterAll(() => {
+    MockDate.reset();
+  });
+
   locales.forEach((locale) => {
     it(`should display the text as ${locale.locale}`, () => {
-      MockDate.set(moment('2017-09-18T03:30:07.795Z').valueOf() + (new Date().getTimezoneOffset() * 60 * 1000));
       const wrapper = mount(
         <LocaleProvider locale={locale}>
           <App />
         </LocaleProvider>
       );
       expect(wrapper.render()).toMatchSnapshot();
-      MockDate.reset();
     });
   });
 
@@ -114,10 +122,36 @@ describe('Locale Provider', () => {
         </LocaleProvider>
       );
       const currentConfirmNode = document.querySelectorAll('.ant-confirm')[document.querySelectorAll('.ant-confirm').length - 1];
-      const cancelButtonText = currentConfirmNode.querySelectorAll('.ant-btn:not(.ant-btn-primary) span')[0].innerHTML;
-      const okButtonText = currentConfirmNode.querySelectorAll('.ant-btn-primary span')[0].innerHTML;
+      let cancelButtonText = currentConfirmNode.querySelectorAll('.ant-btn:not(.ant-btn-primary) span')[0].innerHTML;
+      let okButtonText = currentConfirmNode.querySelectorAll('.ant-btn-primary span')[0].innerHTML;
+      if (locale.locale === 'zh-cn') {
+        cancelButtonText = cancelButtonText.replace(' ', '');
+        okButtonText = okButtonText.replace(' ', '');
+      }
       expect(cancelButtonText).toBe(locale.Modal.cancelText);
       expect(okButtonText).toBe(locale.Modal.okText);
     });
   });
+
+  it('set moment locale when locale changes', () => {
+    class Test extends React.Component {
+      state = {
+        locale: zhCN,
+      }
+
+      render() {
+        return (
+          <LocaleProvider locale={this.state.locale}>
+            <div>
+              <DatePicker defaultValue={moment()} open />
+            </div>
+          </LocaleProvider>
+        );
+      }
+    }
+    const wrapper = mount(<Test />);
+    expect(wrapper.render()).toMatchSnapshot();
+    wrapper.setState({ locale: frFR });
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/locale-provider/ar_EG.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('ar');
-
 import Pagination from 'rc-pagination/lib/locale/ar_EG';
 import DatePicker from '../date-picker/locale/ar_EG';
 import TimePicker from '../time-picker/locale/ar_EG';

components/locale-provider/bg_BG.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('bg');
-
 import Pagination from 'rc-pagination/lib/locale/bg_BG';
 import DatePicker from '../date-picker/locale/bg_BG';
 import TimePicker from '../time-picker/locale/bg_BG';

components/locale-provider/ca_ES.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('ca');
-
 import Pagination from 'rc-pagination/lib/locale/ca_ES';
 import DatePicker from '../date-picker/locale/ca_ES';
 import TimePicker from '../time-picker/locale/ca_ES';

components/locale-provider/cs_CZ.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('cs');
-
 import Pagination from 'rc-pagination/lib/locale/cs_CZ';
 import DatePicker from '../date-picker/locale/cs_CZ';
 import TimePicker from '../time-picker/locale/cs_CZ';

components/locale-provider/de_DE.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('de');
-
 import Pagination from 'rc-pagination/lib/locale/de_DE';
 import DatePicker from '../date-picker/locale/de_DE';
 import TimePicker from '../time-picker/locale/de_DE';

components/locale-provider/el_GR.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('el');
-
 import Pagination from 'rc-pagination/lib/locale/el_GR';
 import DatePicker from '../date-picker/locale/el_GR';
 import TimePicker from '../time-picker/locale/el_GR';

components/locale-provider/en_GB.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('en-gb');
-
 import Pagination from 'rc-pagination/lib/locale/en_GB';
 import DatePicker from '../date-picker/locale/en_GB';
 import TimePicker from '../time-picker/locale/en_GB';

components/locale-provider/en_US.tsx

@@ -1,5 +1,3 @@
 import defaultLocale from './default';
-import * as moment from 'moment';
-moment.locale('en');
 
 export default defaultLocale;

components/locale-provider/et_EE.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('et');
-
 import Pagination from 'rc-pagination/lib/locale/et_EE';
 import DatePicker from '../date-picker/locale/et_EE';
 import TimePicker from '../time-picker/locale/et_EE';

components/locale-provider/fa_IR.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('fa');
-
 import Pagination from 'rc-pagination/lib/locale/fa_IR';
 import DatePicker from '../date-picker/locale/fa_IR';
 import TimePicker from '../time-picker/locale/fa_IR';

components/locale-provider/fi_FI.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('fi');
-
 import Pagination from 'rc-pagination/lib/locale/fi_FI';
 import DatePicker from '../date-picker/locale/fi_FI';
 import TimePicker from '../time-picker/locale/fi_FI';

components/locale-provider/fr_BE.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('fr');
-
 import Pagination from 'rc-pagination/lib/locale/fr_BE';
 import DatePicker from '../date-picker/locale/fr_BE';
 import TimePicker from '../time-picker/locale/fr_BE';

components/locale-provider/fr_FR.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('fr');
-
 import Pagination from 'rc-pagination/lib/locale/fr_FR';
 import DatePicker from '../date-picker/locale/fr_FR';
 import TimePicker from '../time-picker/locale/fr_FR';

components/locale-provider/index.tsx

@@ -1,28 +1,42 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import * as moment from 'moment';
 import { ModalLocale, changeConfirmLocale } from '../modal/locale';
 
+export interface Locale {
+  locale: string;
+  Pagination?: Object;
+  DatePicker?: Object;
+  TimePicker?: Object;
+  Calendar?: Object;
+  Table?: Object;
+  Modal?: ModalLocale;
+  Popconfirm?: Object;
+  Transfer?: Object;
+  Select?: Object;
+  Upload?: Object;
+}
+
 export interface LocaleProviderProps {
-  locale: {
-    Pagination?: Object,
-    DatePicker?: Object,
-    TimePicker?: Object,
-    Calendar?: Object,
-    Table?: Object,
-    Modal?: ModalLocale,
-    Popconfirm?: Object,
-    Transfer?: Object,
-    Select?: Object,
-    Upload?: Object,
-  };
+  locale: Locale;
   children?: React.ReactElement<any>;
 }
 
+function setMomentLocale(locale: Locale) {
+  if (locale && locale.locale) {
+    moment.locale(locale.locale);
+  }
+}
+
 export default class LocaleProvider extends React.Component<LocaleProviderProps, any> {
   static propTypes = {
     locale: PropTypes.object,
   };
 
+  static defaultProps = {
+    locale: {},
+  };
+
   static childContextTypes = {
     antLocale: PropTypes.object,
   };
@@ -37,15 +51,24 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
   }
 
   componentWillMount() {
+    setMomentLocale(this.props.locale);
     this.componentDidUpdate();
   }
 
+  componentWillReceiveProps(nextProps: LocaleProviderProps) {
+    const { locale } = this.props;
+    const nextLocale = nextProps.locale;
+    if (locale.locale !== nextLocale.locale) {
+      setMomentLocale(nextProps.locale);
+    }
+  }
+
   componentDidUpdate() {
     const { locale } = this.props;
     changeConfirmLocale(locale && locale.Modal);
   }
 
-  componentWillUnMount() {
+  componentWillUnmount() {
     changeConfirmLocale();
   }
 

components/locale-provider/is_IS.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('is');
-
 import Pagination from 'rc-pagination/lib/locale/is_IS';
 import DatePicker from '../date-picker/locale/is_IS';
 import TimePicker from '../time-picker/locale/is_IS';

components/locale-provider/it_IT.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('it');
-
 import Pagination from 'rc-pagination/lib/locale/it_IT';
 import DatePicker from '../date-picker/locale/it_IT';
 import TimePicker from '../time-picker/locale/it_IT';

components/locale-provider/ja_JP.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('ja');
-
 import Pagination from 'rc-pagination/lib/locale/ja_JP';
 import DatePicker from '../date-picker/locale/ja_JP';
 import TimePicker from '../time-picker/locale/ja_JP';

components/locale-provider/ko_KR.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('ko');
-
 import Pagination from 'rc-pagination/lib/locale/ko_KR';
 import DatePicker from '../date-picker/locale/ko_KR';
 import TimePicker from '../time-picker/locale/ko_KR';

components/locale-provider/nb_NO.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('nb');
-
 import Pagination from 'rc-pagination/lib/locale/nb_NO';
 import DatePicker from '../date-picker/locale/nb_NO';
 import TimePicker from '../time-picker/locale/nb_NO';

components/locale-provider/nl_BE.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('nl-be');
-
 import Pagination from 'rc-pagination/lib/locale/nl_BE';
 import DatePicker from '../date-picker/locale/nl_BE';
 import TimePicker from '../time-picker/locale/nl_BE';

components/locale-provider/nl_NL.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('nl');
-
 import Pagination from 'rc-pagination/lib/locale/nl_NL';
 import DatePicker from '../date-picker/locale/nl_NL';
 import TimePicker from '../time-picker/locale/nl_NL';

components/locale-provider/pl_PL.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('pl');
-
 import Pagination from 'rc-pagination/lib/locale/pl_PL';
 import DatePicker from '../date-picker/locale/pl_PL';
 import TimePicker from '../time-picker/locale/pl_PL';

components/locale-provider/pt_BR.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('pt-br');
-
 import Pagination from 'rc-pagination/lib/locale/pt_BR';
 import DatePicker from '../date-picker/locale/pt_BR';
 import TimePicker from '../time-picker/locale/pt_BR';

components/locale-provider/pt_PT.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('pt');
-
 import Pagination from 'rc-pagination/lib/locale/pt_PT';
 import DatePicker from '../date-picker/locale/pt_PT';
 import TimePicker from '../time-picker/locale/pt_PT';

components/locale-provider/ru_RU.tsx

@@ -1,10 +1,3 @@
-/**
- * Created by Andrey Gayvoronsky on 13/04/16.
- */
-
-import * as moment from 'moment';
-moment.locale('ru');
-
 import Pagination from 'rc-pagination/lib/locale/ru_RU';
 import DatePicker from '../date-picker/locale/ru_RU';
 import TimePicker from '../time-picker/locale/ru_RU';

components/locale-provider/sk_SK.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('sk');
-
 import Pagination from 'rc-pagination/lib/locale/sk_SK';
 import DatePicker from '../date-picker/locale/sk_SK';
 import TimePicker from '../time-picker/locale/sk_SK';

components/locale-provider/sr_RS.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('sr');
-
 import Pagination from 'rc-pagination/lib/locale/sr_RS';
 import DatePicker from '../date-picker/locale/sr_RS';
 import TimePicker from '../time-picker/locale/sr_RS';

components/locale-provider/sv_SE.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('sv');
-
 import Pagination from 'rc-pagination/lib/locale/sv_SE';
 import DatePicker from '../date-picker/locale/sv_SE';
 import TimePicker from '../time-picker/locale/sv_SE';

components/locale-provider/th_TH.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('th');
-
 import Pagination from 'rc-pagination/lib/locale/th_TH';
 import DatePicker from '../date-picker/locale/th_TH';
 import TimePicker from '../time-picker/locale/th_TH';

components/locale-provider/tr_TR.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('tr');
-
 import Pagination from 'rc-pagination/lib/locale/en_US';
 import DatePicker from '../date-picker/locale/tr_TR';
 import TimePicker from '../time-picker/locale/tr_TR';

components/locale-provider/uk_UA.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('uk');
-
 import Pagination from 'rc-pagination/lib/locale/uk_UA';
 import DatePicker from '../date-picker/locale/uk_UA';
 import TimePicker from '../time-picker/locale/uk_UA';

components/locale-provider/vi_VN.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('vi');
-
 import Pagination from 'rc-pagination/lib/locale/vi_VN';
 import DatePicker from '../date-picker/locale/vi_VN';
 import TimePicker from '../time-picker/locale/vi_VN';

components/locale-provider/zh_CN.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('zh-cn');
-
 import Pagination from 'rc-pagination/lib/locale/zh_CN';
 import DatePicker from '../date-picker/locale/zh_CN';
 import TimePicker from '../time-picker/locale/zh_CN';

components/locale-provider/zh_TW.tsx

@@ -1,6 +1,3 @@
-import * as moment from 'moment';
-moment.locale('zh-tw');
-
 import Pagination from 'rc-pagination/lib/locale/zh_TW';
 import DatePicker from '../date-picker/locale/zh_TW';
 import TimePicker from '../time-picker/locale/zh_TW';