diff --git a/components/_util/getLocale.tsx b/components/_util/getLocale.tsx index 9d6c2136af..57adba7b5a 100644 --- 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; +} diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap index f67ddfe6dc..439a236f5e 100644 --- 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`] = `
- Nov + title="11月"> + 11月
+ title="周一"> - Su + 一 + title="周二"> - Mo + 二 + title="周三"> - Tu + 三 + title="周四"> - We + 四 + title="周五"> - Th + 五 + title="周六"> - Fr + 六 + title="周日"> - Sa + 日 @@ -171,20 +171,6 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = ` class="ant-fullcalendar-tbody"> - -
-
- 30 -
-
-
-
- - + + - - + + - - + + - - + + - - + + + +
+
+ 11 +
+
+
+ diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index 46b76c49bd..df6ef516f3 100644 --- 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 { +export default class Calendar extends React.Component { static defaultProps = { locale: {}, fullscreen: true, @@ -62,8 +69,11 @@ export default class Calendar extends React.Component { 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 { }; } - 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 { } 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) { diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index fc9aef13bf..7043c45318 100644 --- 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 { + static contextTypes = { + antLocale: React.PropTypes.object, + }; static defaultProps = { prefixCls: 'ant-calendar', allowClear: true, @@ -96,13 +100,23 @@ export default class RangePicker extends React.Component { } 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 { 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 { 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])) ? : 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 ( { {...props} {...pickerChangeHandler} calendar={calendar} - value={state.value} - open={state.open} + value={value} + open={open} onOpenChange={this.handleOpenChange} prefixCls={`${prefixCls}-picker-container`} style={popupStyle} diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index aed89a4e0c..4f128ff9bb 100644 --- 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({ + 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) ? : null; - const input = ({ value }) => ( + const input = ({ value: inputValue }) => ( @@ -163,6 +167,11 @@ export default function createPicker(TheCalendar) { ); + const pickerValue = tempValue || value; + const localeCode = getLocaleCode(this.context); + if (pickerValue && localeCode) { + pickerValue.locale(localeCode); + } return ( diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx index 3fd71c6813..6c4eff2c69 100644 --- 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') ); diff --git a/components/locale-provider/en_US.tsx b/components/locale-provider/en_US.tsx index 7381ebe7ae..33f329f8b5 100644 --- 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, diff --git a/components/locale-provider/es_ES.tsx b/components/locale-provider/es_ES.tsx index 87ff987d7f..45052b7ec5 100644 --- 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, diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx index 4e4f083e58..69a95aea9d 100644 --- a/components/locale-provider/index.tsx +++ b/components/locale-provider/index.tsx @@ -27,7 +27,10 @@ export default class LocaleProvider extends React.Component