fix: locale should follow LocaleProvider, close: #4495 (#4503)

* fix: locale should follow LocaleProvider, close: #4495

* test: update snapshot

* fix: fix some bugs

components/_util/getLocale.tsx

@@ -1,6 +1,6 @@
 import assign from 'object-assign';
 
-export default function getLocale(props, context, componentName, getDefaultLocale) {
+export function getComponentLocale(props, context, componentName, getDefaultLocale) {
   const locale = context && context.antLocale && context.antLocale[componentName] ?
     context.antLocale[componentName] : getDefaultLocale();
 
@@ -8,3 +8,12 @@ export default function getLocale(props, context, componentName, getDefaultLocal
   result.lang = assign({}, locale.lang, props.locale.lang);
   return result;
 }
+
+export function getLocaleCode(context) {
+  const localeCode = context.antLocale && context.antLocale.locale;
+  // Had use LocaleProvide but didn't set locale
+  if (context.antLocale && context.antLocale.exist && !localeCode) {
+    return 'zh-cn';
+  }
+  return localeCode;
+}

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -45,8 +45,8 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
           <div
             class="ant-select-selection-selected-value"
             style="display:block;opacity:1;"
-            title="Nov">
-            Nov
+            title="11月">
+            11月
           </div>
         </div>
         <span
@@ -105,64 +105,64 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
             <th
               class="ant-fullcalendar-column-header"
               role="columnheader"
-              title="Sun">
+              title="周一">
               <span
                 class="ant-fullcalendar-column-header-inner">
-                Su
+                一
               </span>
             </th>
             <th
               class="ant-fullcalendar-column-header"
               role="columnheader"
-              title="Mon">
+              title="周二">
               <span
                 class="ant-fullcalendar-column-header-inner">
-                Mo
+                二
               </span>
             </th>
             <th
               class="ant-fullcalendar-column-header"
               role="columnheader"
-              title="Tue">
+              title="周三">
               <span
                 class="ant-fullcalendar-column-header-inner">
-                Tu
+                三
               </span>
             </th>
             <th
               class="ant-fullcalendar-column-header"
               role="columnheader"
-              title="Wed">
+              title="周四">
               <span
                 class="ant-fullcalendar-column-header-inner">
-                We
+                四
               </span>
             </th>
             <th
               class="ant-fullcalendar-column-header"
               role="columnheader"
-              title="Thu">
+              title="周五">
               <span
                 class="ant-fullcalendar-column-header-inner">
-                Th
+                五
               </span>
             </th>
             <th
               class="ant-fullcalendar-column-header"
               role="columnheader"
-              title="Fri">
+              title="周六">
               <span
                 class="ant-fullcalendar-column-header-inner">
-                Fr
+                六
               </span>
             </th>
             <th
               class="ant-fullcalendar-column-header"
               role="columnheader"
-              title="Sat">
+              title="周日">
               <span
                 class="ant-fullcalendar-column-header-inner">
-                Sa
+                日
               </span>
             </th>
           </tr>
@@ -171,20 +171,6 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
           class="ant-fullcalendar-tbody">
           <tr
             role="row">
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
-              role="gridcell"
-              title="2016-10-30">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  30
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
             <td
               class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
               role="gridcell"
@@ -269,9 +255,6 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
-          </tr>
-          <tr
-            role="row">
             <td
               class="ant-fullcalendar-cell"
               role="gridcell"
@@ -286,6 +269,9 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
+          </tr>
+          <tr
+            role="row">
             <td
               class="ant-fullcalendar-cell"
               role="gridcell"
@@ -370,9 +356,6 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
-          </tr>
-          <tr
-            role="row">
             <td
               class="ant-fullcalendar-cell"
               role="gridcell"
@@ -387,6 +370,9 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
+          </tr>
+          <tr
+            role="row">
             <td
               class="ant-fullcalendar-cell"
               role="gridcell"
@@ -471,9 +457,6 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
-          </tr>
-          <tr
-            role="row">
             <td
               class="ant-fullcalendar-cell"
               role="gridcell"
@@ -488,6 +471,9 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
+          </tr>
+          <tr
+            role="row">
             <td
               class="ant-fullcalendar-cell"
               role="gridcell"
@@ -572,9 +558,6 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
-          </tr>
-          <tr
-            role="row">
             <td
               class="ant-fullcalendar-cell"
               role="gridcell"
@@ -589,6 +572,9 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
+          </tr>
+          <tr
+            role="row">
             <td
               class="ant-fullcalendar-cell"
               role="gridcell"
@@ -673,9 +659,6 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
-          </tr>
-          <tr
-            role="row">
             <td
               class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
               role="gridcell"
@@ -690,6 +673,9 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
+          </tr>
+          <tr
+            role="row">
             <td
               class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
               role="gridcell"
@@ -774,6 +760,20 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
                   class="ant-fullcalendar-content" />
               </div>
             </td>
+            <td
+              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+              role="gridcell"
+              title="2016-12-11">
+              <div
+                class="ant-fullcalendar-date">
+                <div
+                  class="ant-fullcalendar-value">
+                  11
+                </div>
+                <div
+                  class="ant-fullcalendar-content" />
+              </div>
+            </td>
           </tr>
         </tbody>
       </table>

components/calendar/index.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
 import { PREFIX_CLS } from './Constants';
 import Header from './Header';
-import getLocale from '../_util/getLocale';
+import { getComponentLocale, getLocaleCode } from '../_util/getLocale';
 declare const require: Function;
 
 function noop() { return null; }
@@ -22,21 +22,28 @@ export interface CalendarContext {
   };
 }
 
+export type CalendarMode = 'month' | 'year';
+
 export interface CalendarProps {
   prefixCls?: string;
   className?: string;
   value?: moment.Moment;
   defaultValue?: moment.Moment;
-  mode?: 'month' | 'year';
+  mode?: CalendarMode;
   fullscreen?: boolean;
   dateCellRender?: (date: moment.Moment) => React.ReactNode;
   monthCellRender?: (date: moment.Moment) => React.ReactNode;
   locale?: any;
   style?: React.CSSProperties;
-  onPanelChange?: (date: moment.Moment, mode: string) => void;
+  onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
 }
 
-export default class Calendar extends React.Component<CalendarProps, any> {
+export interface CalendarState {
+  value?: moment.Moment;
+  mode?: CalendarMode;
+}
+
+export default class Calendar extends React.Component<CalendarProps, CalendarState> {
   static defaultProps = {
     locale: {},
     fullscreen: true,
@@ -62,8 +69,11 @@ export default class Calendar extends React.Component<CalendarProps, any> {
 
   context: CalendarContext;
 
-  constructor(props) {
-    super(props);
+  constructor(props, context) {
+    super(props, context);
+    // Make sure that moment locale had be set correctly.
+    getComponentLocale(props, context, 'Calendar', () => require('./locale/zh_CN'));
+
     const value = props.value || props.defaultValue || moment();
     if (!moment.isMoment(value)) {
       throw new Error(
@@ -77,7 +87,7 @@ export default class Calendar extends React.Component<CalendarProps, any> {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: CalendarProps) {
     if ('value' in nextProps) {
       this.setState({
         value: nextProps.value,
@@ -135,14 +145,15 @@ export default class Calendar extends React.Component<CalendarProps, any> {
   }
 
   render() {
-    const props = this.props;
-    const { value, mode } = this.state;
+    const { state, props, context } = this;
+    const { value, mode } = state;
+    const localeCode = getLocaleCode(context);
+    if (value && localeCode) {
+      value.locale(localeCode);
+    }
     const { prefixCls, style, className, fullscreen } = props;
     const type = (mode === 'year') ? 'month' : 'date';
-    const locale = getLocale(
-      props, this.context, 'Calendar',
-      () => require('./locale/zh_CN')
-    );
+    const locale = getComponentLocale(props, context, 'Calendar', () => require('./locale/zh_CN'));
 
     let cls = className || '';
     if (fullscreen) {

components/date-picker/RangePicker.tsx

@@ -5,8 +5,12 @@ import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
 import assign from 'object-assign';
 import Icon from '../icon';
+import { getLocaleCode } from '../_util/getLocale';
 
 export default class RangePicker extends React.Component<any, any> {
+  static contextTypes = {
+      antLocale: React.PropTypes.object,
+  };
   static defaultProps = {
     prefixCls: 'ant-calendar',
     allowClear: true,
@@ -96,13 +100,23 @@ export default class RangePicker extends React.Component<any, any> {
   }
 
   render() {
-    const props = this.props;
+    const { state, props, context } = this;
+    const { value, open } = state;
+    const localeCode = getLocaleCode(context);
+    if (value && localeCode) {
+      if (value[0]) {
+        value[0].locale(localeCode);
+      }
+      if (value[1]) {
+        value[1].locale(localeCode);
+      }
+    }
+
     const {
       disabledDate, disabledTime, showTime, showToday,
       ranges, prefixCls, popupStyle,
       style, onOk, locale, format,
     } = props;
-    const state = this.state;
 
     const calendarClassName = classNames({
       [`${prefixCls}-time`]: showTime,
@@ -117,7 +131,7 @@ export default class RangePicker extends React.Component<any, any> {
       onOk: this.handleChange,
     };
     if (props.timePicker) {
-      pickerChangeHandler.onChange = value => this.handleChange(value);
+      pickerChangeHandler.onChange = changedValue => this.handleChange(changedValue);
     } else {
       calendarHandler = {};
     }
@@ -151,16 +165,16 @@ export default class RangePicker extends React.Component<any, any> {
       pickerStyle.minWidth = 300;
     }
 
-    const clearIcon = (!props.disabled && props.allowClear && state.value && (state.value[0] || state.value[1]))
+    const clearIcon = (!props.disabled && props.allowClear && value && (value[0] || value[1]))
       ? <Icon
         type="cross-circle"
         className={`${prefixCls}-picker-clear`}
         onClick={this.clearSelection}
       /> : null;
 
-    const input = ({ value }) => {
-      const start = value[0];
-      const end = value[1];
+    const input = ({ value: inputValue }) => {
+      const start = inputValue[0];
+      const end = inputValue[1];
       return (
         <span className={props.pickerInputClass} disabled={props.disabled}>
           <input
@@ -190,8 +204,8 @@ export default class RangePicker extends React.Component<any, any> {
           {...props}
           {...pickerChangeHandler}
           calendar={calendar}
-          value={state.value}
-          open={state.open}
+          value={value}
+          open={open}
           onOpenChange={this.handleOpenChange}
           prefixCls={`${prefixCls}-picker-container`}
           style={popupStyle}

components/date-picker/createPicker.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import omit from 'omit.js';
 import assign from 'object-assign';
 import Icon from '../icon';
+import { getLocaleCode } from '../_util/getLocale';
 
 export interface PickerProps {
   value?: moment.Moment;
@@ -15,6 +16,9 @@ export interface PickerProps {
 export default function createPicker(TheCalendar) {
   // use class typescript error
   const CalenderWrapper = React.createClass<any, any>({
+    contextTypes: {
+      antLocale: React.PropTypes.object,
+    },
     getDefaultProps() {
       return {
         prefixCls: 'ant-calendar',
@@ -88,9 +92,9 @@ export default function createPicker(TheCalendar) {
     },
 
     render() {
+      const { value, tempValue } = this.state;
       const props = omit(this.props, ['onChange']);
-      const prefixCls = props.prefixCls;
-      const locale = props.locale;
+      const { prefixCls, locale } = props;
 
       const placeholder = ('placeholder' in props)
         ? props.placeholder : locale.lang.placeholder;
@@ -108,8 +112,8 @@ export default function createPicker(TheCalendar) {
       if (props.showTime) {
         calendarHandler = {
           // fix https://github.com/ant-design/ant-design/issues/1902
-          onSelect: (value) => {
-            this.handleTempChange(value);
+          onSelect: (selectedValue) => {
+            this.handleTempChange(selectedValue);
           },
         };
       } else {
@@ -142,19 +146,19 @@ export default function createPicker(TheCalendar) {
         pickerStyle.minWidth = 154;
       }
 
-      const clearIcon = (!props.disabled && props.allowClear && this.state.value) ?
+      const clearIcon = (!props.disabled && props.allowClear && value) ?
         <Icon
           type="cross-circle"
           className={`${prefixCls}-picker-clear`}
           onClick={this.clearSelection}
         /> : null;
 
-      const input = ({ value }) => (
+      const input = ({ value: inputValue }) => (
         <span>
           <input
             disabled={props.disabled}
             readOnly
-            value={(value && value.format(props.format)) || ''}
+            value={(inputValue && inputValue.format(props.format)) || ''}
             placeholder={placeholder}
             className={props.pickerInputClass}
           />
@@ -163,6 +167,11 @@ export default function createPicker(TheCalendar) {
         </span>
       );
 
+      const pickerValue = tempValue || value;
+      const localeCode = getLocaleCode(this.context);
+      if (pickerValue && localeCode) {
+        pickerValue.locale(localeCode);
+      }
       return (
         <span className={props.pickerClass} style={assign({}, props.style, pickerStyle)}>
           <RcDatePicker
@@ -170,7 +179,7 @@ export default function createPicker(TheCalendar) {
             {...pickerChangeHandler}
             onOpenChange={this.handleOpenChange}
             calendar={calendar}
-            value={this.state.tempValue || this.state.value}
+            value={pickerValue}
             prefixCls={`${prefixCls}-picker-container`}
             style={props.popupStyle}
           >

components/date-picker/wrapPicker.tsx

@@ -3,7 +3,7 @@ import { PropTypes } from 'react';
 import TimePickerPanel from 'rc-time-picker/lib/Panel';
 import classNames from 'classnames';
 import warning from '../_util/warning';
-import getLocale from '../_util/getLocale';
+import { getComponentLocale } from '../_util/getLocale';
 declare const require: Function;
 
 function getColumns({ showHour, showMinute, showSecond }) {
@@ -73,7 +73,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
         [`${inputPrefixCls}-sm`]: props.size === 'small',
       });
 
-      const locale = getLocale(
+      const locale = getComponentLocale(
         props, this.context, 'DatePicker',
         () => require('./locale/zh_CN')
       );

components/locale-provider/en_US.tsx

@@ -7,6 +7,7 @@ import TimePicker from '../time-picker/locale/en_US';
 import Calendar from '../calendar/locale/en_US';
 
 export default {
+  locale: 'en',
   Pagination,
   DatePicker,
   TimePicker,

components/locale-provider/es_ES.tsx

@@ -3,6 +3,7 @@ import DatePicker from '../date-picker/locale/en_US';
 import TimePicker from '../time-picker/locale/en_US';
 
 export default {
+  locale: 'en',
   Pagination,
   DatePicker,
   TimePicker,

components/locale-provider/index.tsx

@@ -27,7 +27,10 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
 
   getChildContext() {
     return {
-      antLocale: this.props.locale,
+      antLocale: {
+        ...this.props.locale,
+        exist: true,
+      },
     };
   }
 

components/locale-provider/pt_BR.tsx

@@ -8,6 +8,7 @@ import TimePicker from '../time-picker/locale/pt_BR';
 import Calendar from '../calendar/locale/pt_BR';
 
 export default {
+  locale: 'pt-br',
   Pagination,
   DatePicker,
   TimePicker,

components/locale-provider/ru_RU.tsx

@@ -12,6 +12,7 @@ import TimePicker from '../time-picker/locale/ru_RU';
 import Calendar from '../calendar/locale/ru_RU';
 
 export default {
+  locale: 'ru',
   Pagination,
   DatePicker,
   TimePicker,