diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index b4f07c775d..0d07a9ed7a 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -144,14 +144,14 @@ export default class Header extends React.Component { const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls); const yearSelect = this.getYearSelectElement(prefixCls, value.year()); const monthSelect = - type === 'date' + type === 'month' ? this.getMonthSelectElement(prefixCls, value.month(), this.getMonthsLocale(value)) : null; const size = (fullscreen ? 'default' : 'small') as any; const typeSwitch = ( - - + + ); diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap index 6e10b1c3ed..29169dbc1a 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap @@ -120,7 +120,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = ` checked="" class="ant-radio-button-input" type="radio" - value="date" + value="month" /> { expect(onPanelChange).toBeCalled(); expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1); }); + + it('switch should work correctly without prop mode', async () => { + const onPanelChange = jest.fn(); + const date = new Moment(new Date(Date.UTC(2017, 7, 9, 8))); + const wrapper = mount(); + expect(wrapper.state().mode).toBe('month'); + expect(wrapper.find('.ant-fullcalendar-table').length).toBe(1); + expect(wrapper.find('.ant-fullcalendar-month-panel-table').length).toBe(0); + wrapper.find('.ant-radio-button-input[value="year"]').simulate('change'); + expect(wrapper.find('.ant-fullcalendar-table').length).toBe(0); + expect(wrapper.find('.ant-fullcalendar-month-panel-table').length).toBe(1); + expect(onPanelChange).toBeCalled(); + expect(onPanelChange.mock.calls[0][1]).toEqual('year'); + }); }); diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index a64ac79d43..65ae98fb60 100644 --- a/components/calendar/index.tsx +++ b/components/calendar/index.tsx @@ -53,7 +53,6 @@ class Calendar extends React.Component { static defaultProps = { locale: {}, fullscreen: true, - mode: 'month' as CalendarMode, onSelect: noop, onPanelChange: noop, onChange: noop, @@ -100,7 +99,7 @@ class Calendar extends React.Component { } this.state = { value, - mode: props.mode, + mode: props.mode || 'month', }; } @@ -145,20 +144,13 @@ class Calendar extends React.Component { } }; - setType = (type: string) => { - const mode = type === 'date' ? 'month' : 'year'; - if (this.state.mode !== mode) { - this.setState({ mode }); - this.onPanelChange(this.state.value, mode); - } - }; - onHeaderValueChange = (value: moment.Moment) => { this.setValue(value, 'changePanel'); }; - onHeaderTypeChange = (type: string) => { - this.setType(type); + onHeaderTypeChange = (mode: CalendarMode) => { + this.setState({ mode }); + this.onPanelChange(this.state.value, mode); }; onPanelChange(value: moment.Moment, mode: CalendarMode | undefined) { @@ -216,8 +208,6 @@ class Calendar extends React.Component { dateFullCellRender, monthFullCellRender, } = props; - const type = mode === 'year' ? 'month' : 'date'; - const monthCellRender = monthFullCellRender || this.monthCellRender; const dateCellRender = dateFullCellRender || this.dateCellRender; @@ -246,7 +236,7 @@ class Calendar extends React.Component {
{ disabledDate={disabledDate} Select={noop} locale={locale.lang} - type={type} + type={mode === 'year' ? 'month' : 'date'} prefixCls={prefixCls} showHeader={false} value={value} diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index bc7e89f97c..9170a90f11 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -1276,7 +1276,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = ` checked="" class="config-radio-button-input" type="radio" - value="date" + value="month" />