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

* fix: locale should follow LocaleProvider, close: #4495 * test: update snapshot * fix: fix some bugs
8 years ago · 0aabdb3d8b
11 changed files with 129 additions and 79 deletions
--- a/components/_util/getLocale.tsx
+++ b/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;
+}
--- a/components/calendar/tests/snapshots/demo.test.js.snap
+++ b/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>
--- a/components/calendar/index.tsx
+++ b/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 interface CalendarState {
+  value?: moment.Moment;
+  mode?: CalendarMode;
 }

-export default class Calendar extends React.Component<CalendarProps, any> {
+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) {
--- a/components/date-picker/RangePicker.tsx
+++ b/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}
--- a/components/date-picker/createPicker.tsx
+++ b/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}
          >
--- a/components/date-picker/wrapPicker.tsx
+++ b/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')
      );
--- a/components/locale-provider/en_US.tsx
+++ b/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,
--- a/components/locale-provider/es_ES.tsx
+++ b/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,
--- a/components/locale-provider/index.tsx
+++ b/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,
+      },
    };
  }

--- a/components/locale-provider/pt_BR.tsx
+++ b/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,
--- a/components/locale-provider/ru_RU.tsx
+++ b/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,