fix: Calendar select can't switch

This commit is contained in:
zy410419243 2019-03-12 13:35:39 +08:00
parent 753cb421c0
commit d53e003b62
3 changed files with 11 additions and 15 deletions

View File

@ -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>
);

View File

@ -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"
@ -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"

View File

@ -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,
@ -100,7 +99,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
}
this.state = {
value,
mode: props.mode,
mode: props.mode || 'month',
};
}
@ -145,19 +144,16 @@ 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);
}
setType = (mode: CalendarMode) => {
this.setState({ mode });
this.onPanelChange(this.state.value, mode);
};
onHeaderValueChange = (value: moment.Moment) => {
this.setValue(value, 'changePanel');
};
onHeaderTypeChange = (type: string) => {
onHeaderTypeChange = (type: CalendarMode) => {
this.setType(type);
};
@ -246,7 +242,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}