Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Calendar select can't switch #15338

Merged
merged 11 commits into from
Mar 12, 2019
Merged

fix: Calendar select can't switch #15338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d53e003
fix: Calendar select can't switch
orzyyyy Mar 12, 2019
222c744
test: update snapshots
orzyyyy Mar 12, 2019
81cb4a2
test: update cases for Header
orzyyyy Mar 12, 2019
4f7ee02
test: update snapshot for making sure to switch correct panel
orzyyyy Mar 12, 2019
c5290d2
test: assign value for snapshot
orzyyyy Mar 12, 2019
0d48280
test: leaving snapshots before and after changes
orzyyyy Mar 12, 2019
5b50084
pref: update selector for more acurrate
orzyyyy Mar 12, 2019
e3da847
pref: update date using UTC
orzyyyy Mar 12, 2019
b8a1918
try: to fix stackoverflow in react 15
orzyyyy Mar 12, 2019
c1d58f4
refactor: unify type => mode
orzyyyy Mar 12, 2019
5c1c4e7
test: remove snapshots to fix ci problem in react 15
orzyyyy Mar 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions components/calendar/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,14 +144,14 @@ export default class Header extends React.Component<HeaderProps, any> {
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 = (
<Group onChange={this.onTypeChange} value={type} size={size}>
<Button value="date">{locale.month}</Button>
<Button value="month">{locale.year}</Button>
<Button value="month">{locale.month}</Button>
<Button value="year">{locale.year}</Button>
</Group>
);

Expand Down
16 changes: 8 additions & 8 deletions components/calendar/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -139,7 +139,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down Expand Up @@ -1165,7 +1165,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -1184,7 +1184,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down Expand Up @@ -2208,7 +2208,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -2227,7 +2227,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down Expand Up @@ -3661,7 +3661,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -3680,7 +3680,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down
4 changes: 2 additions & 2 deletions components/calendar/__tests__/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ exports[`Calendar Calendar should support locale 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -139,7 +139,7 @@ exports[`Calendar Calendar should support locale 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down
14 changes: 14 additions & 0 deletions components/calendar/__tests__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,4 +161,18 @@ describe('Calendar', () => {
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(<Calendar onPanelChange={onPanelChange} value={date} />);
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');
orzyyyy marked this conversation as resolved.
Show resolved Hide resolved
});
});
22 changes: 6 additions & 16 deletions components/calendar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
static defaultProps = {
locale: {},
fullscreen: true,
mode: 'month' as CalendarMode,
onSelect: noop,
onPanelChange: noop,
onChange: noop,
Expand Down Expand Up @@ -100,7 +99,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
}
this.state = {
value,
mode: props.mode,
mode: props.mode || 'month',
};
}

Expand Down Expand Up @@ -145,20 +144,13 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
}
};

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) {
Expand Down Expand Up @@ -216,8 +208,6 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
dateFullCellRender,
monthFullCellRender,
} = props;
const type = mode === 'year' ? 'month' : 'date';

const monthCellRender = monthFullCellRender || this.monthCellRender;
const dateCellRender = dateFullCellRender || this.dateCellRender;

Expand Down Expand Up @@ -246,7 +236,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
<div className={cls} style={style}>
<Header
fullscreen={fullscreen}
type={type}
type={mode}
value={value}
locale={locale.lang}
prefixCls={prefixCls}
Expand All @@ -259,7 +249,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
disabledDate={disabledDate}
Select={noop}
locale={locale.lang}
type={type}
type={mode === 'year' ? 'month' : 'date'}
prefixCls={prefixCls}
showHeader={false}
value={value}
Expand Down
24 changes: 12 additions & 12 deletions components/config-provider/__tests__/__snapshots__/components.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1276,7 +1276,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
checked=""
class="config-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="config-radio-button-inner"
Expand All @@ -1295,7 +1295,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
<input
class="config-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="config-radio-button-inner"
Expand Down Expand Up @@ -2264,7 +2264,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
<input
class="config-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="config-radio-button-inner"
Expand All @@ -2284,7 +2284,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
checked=""
class="config-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="config-radio-button-inner"
Expand Down Expand Up @@ -2672,7 +2672,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -2691,7 +2691,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down Expand Up @@ -3660,7 +3660,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -3680,7 +3680,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down Expand Up @@ -4068,7 +4068,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -4087,7 +4087,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down Expand Up @@ -5056,7 +5056,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -5076,7 +5076,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down
4 changes: 2 additions & 2 deletions components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -800,7 +800,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="date"
value="month"
/>
<span
class="ant-radio-button-inner"
Expand All @@ -819,7 +819,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="month"
value="year"
/>
<span
class="ant-radio-button-inner"
Expand Down