2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2018-08-07 21:07:52 +08:00
|
|
|
import * as PropTypes from 'prop-types';
|
2017-11-17 14:38:54 +08:00
|
|
|
import * as moment from 'moment';
|
2015-11-11 00:15:12 +08:00
|
|
|
import FullCalendar from 'rc-calendar/lib/FullCalendar';
|
2015-11-12 21:24:53 +08:00
|
|
|
import Header from './Header';
|
2018-01-13 19:11:53 +08:00
|
|
|
import enUS from './locale/en_US';
|
2018-12-05 19:12:18 +08:00
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
|
|
import interopDefault from '../_util/interopDefault';
|
2015-11-11 00:15:12 +08:00
|
|
|
|
2017-09-25 22:14:49 +08:00
|
|
|
export { HeaderProps } from './Header';
|
|
|
|
|
2018-12-07 20:02:01 +08:00
|
|
|
function noop() {
|
|
|
|
return null;
|
|
|
|
}
|
2015-11-11 00:15:12 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
function zerofixed(v: number) {
|
2016-07-13 11:14:24 +08:00
|
|
|
if (v < 10) {
|
|
|
|
return `0${v}`;
|
|
|
|
}
|
2016-02-17 18:04:42 +08:00
|
|
|
return `${v}`;
|
2015-11-11 00:15:12 +08:00
|
|
|
}
|
2015-11-13 19:56:34 +08:00
|
|
|
|
2017-01-09 16:25:58 +08:00
|
|
|
export type CalendarMode = 'month' | 'year';
|
|
|
|
|
2016-08-19 17:11:06 +08:00
|
|
|
export interface CalendarProps {
|
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2016-09-09 13:55:21 +08:00
|
|
|
value?: moment.Moment;
|
|
|
|
defaultValue?: moment.Moment;
|
2017-01-09 16:25:58 +08:00
|
|
|
mode?: CalendarMode;
|
2016-08-19 17:11:06 +08:00
|
|
|
fullscreen?: boolean;
|
2016-09-09 13:55:21 +08:00
|
|
|
dateCellRender?: (date: moment.Moment) => React.ReactNode;
|
|
|
|
monthCellRender?: (date: moment.Moment) => React.ReactNode;
|
2017-03-02 13:35:07 +08:00
|
|
|
dateFullCellRender?: (date: moment.Moment) => React.ReactNode;
|
|
|
|
monthFullCellRender?: (date: moment.Moment) => React.ReactNode;
|
2016-08-19 17:11:06 +08:00
|
|
|
locale?: any;
|
|
|
|
style?: React.CSSProperties;
|
2017-01-09 16:25:58 +08:00
|
|
|
onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
|
2017-03-03 15:26:23 +08:00
|
|
|
onSelect?: (date?: moment.Moment) => void;
|
2018-07-27 10:45:49 +08:00
|
|
|
onChange?: (date?: moment.Moment) => void;
|
2017-05-23 17:07:17 +08:00
|
|
|
disabledDate?: (current: moment.Moment) => boolean;
|
2018-12-07 20:02:01 +08:00
|
|
|
validRange?: [moment.Moment, moment.Moment];
|
2017-01-09 16:25:58 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface CalendarState {
|
2017-11-22 11:05:19 +08:00
|
|
|
value: moment.Moment;
|
2017-01-09 16:25:58 +08:00
|
|
|
mode?: CalendarMode;
|
2016-08-19 17:11:06 +08:00
|
|
|
}
|
|
|
|
|
2017-01-09 16:25:58 +08:00
|
|
|
export default class Calendar extends React.Component<CalendarProps, CalendarState> {
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
2016-03-31 17:37:24 +08:00
|
|
|
locale: {},
|
2016-03-29 14:01:10 +08:00
|
|
|
fullscreen: true,
|
2018-12-22 21:21:42 +08:00
|
|
|
mode: 'month' as CalendarMode,
|
2017-03-03 15:26:23 +08:00
|
|
|
onSelect: noop,
|
|
|
|
onPanelChange: noop,
|
2018-07-27 10:45:49 +08:00
|
|
|
onChange: noop,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
monthCellRender: PropTypes.func,
|
|
|
|
dateCellRender: PropTypes.func,
|
2017-03-02 13:35:07 +08:00
|
|
|
monthFullCellRender: PropTypes.func,
|
|
|
|
dateFullCellRender: PropTypes.func,
|
2016-03-29 14:01:10 +08:00
|
|
|
fullscreen: PropTypes.bool,
|
|
|
|
locale: PropTypes.object,
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
className: PropTypes.string,
|
|
|
|
style: PropTypes.object,
|
|
|
|
onPanelChange: PropTypes.func,
|
2018-12-22 21:21:42 +08:00
|
|
|
value: PropTypes.object as PropTypes.Requireable<moment.Moment>,
|
2017-03-03 15:26:23 +08:00
|
|
|
onSelect: PropTypes.func,
|
2018-07-27 10:45:49 +08:00
|
|
|
onChange: PropTypes.func,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
constructor(props: CalendarProps) {
|
|
|
|
super(props);
|
2017-01-09 16:25:58 +08:00
|
|
|
|
2018-03-09 15:04:21 +08:00
|
|
|
const value = props.value || props.defaultValue || interopDefault(moment)();
|
|
|
|
if (!interopDefault(moment).isMoment(value)) {
|
2016-12-02 15:07:33 +08:00
|
|
|
throw new Error(
|
|
|
|
'The value/defaultValue of Calendar must be a moment object after `antd@2.0`, ' +
|
2018-12-07 20:02:01 +08:00
|
|
|
'see: https://u.ant.design/calendar-value',
|
2016-12-02 15:07:33 +08:00
|
|
|
);
|
|
|
|
}
|
2015-11-12 21:24:53 +08:00
|
|
|
this.state = {
|
2016-12-02 15:07:33 +08:00
|
|
|
value,
|
2015-11-13 20:32:54 +08:00
|
|
|
mode: props.mode,
|
2015-11-12 21:24:53 +08:00
|
|
|
};
|
|
|
|
}
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2017-01-09 16:25:58 +08:00
|
|
|
componentWillReceiveProps(nextProps: CalendarProps) {
|
2015-11-15 15:46:05 +08:00
|
|
|
if ('value' in nextProps) {
|
|
|
|
this.setState({
|
2017-11-22 11:05:19 +08:00
|
|
|
value: nextProps.value!,
|
2015-11-15 15:46:05 +08:00
|
|
|
});
|
|
|
|
}
|
2018-02-04 16:50:50 +08:00
|
|
|
if ('mode' in nextProps && nextProps.mode !== this.props.mode) {
|
|
|
|
this.setState({
|
2018-12-07 20:02:01 +08:00
|
|
|
mode: nextProps.mode!,
|
2018-02-04 16:50:50 +08:00
|
|
|
});
|
|
|
|
}
|
2015-11-15 15:46:05 +08:00
|
|
|
}
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
monthCellRender = (value: moment.Moment) => {
|
2018-12-05 19:12:18 +08:00
|
|
|
const { monthCellRender = noop as Function } = this.props;
|
|
|
|
const { prefixCls } = this;
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
|
|
|
<div className={`${prefixCls}-month`}>
|
2018-12-07 20:02:01 +08:00
|
|
|
<div className={`${prefixCls}-value`}>{value.localeData().monthsShort(value)}</div>
|
|
|
|
<div className={`${prefixCls}-content`}>{monthCellRender(value)}</div>
|
2015-11-13 22:34:49 +08:00
|
|
|
</div>
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
dateCellRender = (value: moment.Moment) => {
|
2018-12-05 19:12:18 +08:00
|
|
|
const { dateCellRender = noop as Function } = this.props;
|
|
|
|
const { prefixCls } = this;
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
|
|
|
<div className={`${prefixCls}-date`}>
|
2018-12-07 20:02:01 +08:00
|
|
|
<div className={`${prefixCls}-value`}>{zerofixed(value.date())}</div>
|
|
|
|
<div className={`${prefixCls}-content`}>{dateCellRender(value)}</div>
|
2015-11-13 22:34:49 +08:00
|
|
|
</div>
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
setValue = (value: moment.Moment, way: 'select' | 'changePanel') => {
|
2017-03-03 15:26:23 +08:00
|
|
|
if (!('value' in this.props)) {
|
2015-11-12 23:51:38 +08:00
|
|
|
this.setState({ value });
|
|
|
|
}
|
2017-03-03 15:26:23 +08:00
|
|
|
if (way === 'select') {
|
|
|
|
if (this.props.onSelect) {
|
|
|
|
this.props.onSelect(value);
|
|
|
|
}
|
|
|
|
} else if (way === 'changePanel') {
|
|
|
|
this.onPanelChange(value, this.state.mode);
|
2016-10-24 12:04:26 +08:00
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
setType = (type: string) => {
|
2018-12-07 20:02:01 +08:00
|
|
|
const mode = type === 'date' ? 'month' : 'year';
|
2015-11-13 20:32:54 +08:00
|
|
|
if (this.state.mode !== mode) {
|
|
|
|
this.setState({ mode });
|
2017-03-03 15:26:23 +08:00
|
|
|
this.onPanelChange(this.state.value, mode);
|
2015-11-13 20:32:54 +08:00
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
onHeaderValueChange = (value: moment.Moment) => {
|
2017-03-03 15:26:23 +08:00
|
|
|
this.setValue(value, 'changePanel');
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-03-03 15:26:23 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
onHeaderTypeChange = (type: string) => {
|
2017-03-03 15:26:23 +08:00
|
|
|
this.setType(type);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-03-03 15:26:23 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
onPanelChange(value: moment.Moment, mode: CalendarMode | undefined) {
|
2018-07-27 10:45:49 +08:00
|
|
|
const { onPanelChange, onChange } = this.props;
|
2017-03-03 15:26:23 +08:00
|
|
|
if (onPanelChange) {
|
|
|
|
onPanelChange(value, mode);
|
|
|
|
}
|
2018-07-27 10:45:49 +08:00
|
|
|
if (onChange && value !== this.state.value) {
|
|
|
|
onChange(value);
|
|
|
|
}
|
2017-03-03 15:26:23 +08:00
|
|
|
}
|
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
onSelect = (value: moment.Moment) => {
|
2017-03-03 15:26:23 +08:00
|
|
|
this.setValue(value, 'select');
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-03-03 15:26:23 +08:00
|
|
|
|
2018-02-03 18:54:04 +08:00
|
|
|
getDateRange = (
|
|
|
|
validRange: [moment.Moment, moment.Moment],
|
|
|
|
disabledDate?: (current: moment.Moment) => boolean,
|
|
|
|
) => (current: moment.Moment) => {
|
2018-10-18 23:29:05 +08:00
|
|
|
if (!current) {
|
|
|
|
return false;
|
2018-02-03 18:54:04 +08:00
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
const [startDate, endDate] = validRange;
|
2018-10-18 23:29:05 +08:00
|
|
|
const inRange = !current.isBetween(startDate, endDate, 'days', '[]');
|
|
|
|
if (disabledDate) {
|
2018-12-07 20:02:01 +08:00
|
|
|
return disabledDate(current) || inRange;
|
2018-10-18 23:29:05 +08:00
|
|
|
}
|
|
|
|
return inRange;
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-02-03 18:54:04 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
getDefaultLocale = () => {
|
|
|
|
const result = {
|
|
|
|
...enUS,
|
|
|
|
...this.props.locale,
|
|
|
|
};
|
|
|
|
result.lang = {
|
|
|
|
...result.lang,
|
|
|
|
...(this.props.locale || {}).lang,
|
|
|
|
};
|
|
|
|
return result;
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2017-11-22 11:05:19 +08:00
|
|
|
renderCalendar = (locale: any, localeCode: string) => {
|
2017-10-20 14:54:38 +08:00
|
|
|
const { state, props } = this;
|
2017-01-09 16:25:58 +08:00
|
|
|
const { value, mode } = state;
|
|
|
|
if (value && localeCode) {
|
|
|
|
value.locale(localeCode);
|
|
|
|
}
|
2018-12-05 19:12:18 +08:00
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
2018-12-07 20:02:01 +08:00
|
|
|
style,
|
|
|
|
className,
|
|
|
|
fullscreen,
|
|
|
|
dateFullCellRender,
|
|
|
|
monthFullCellRender,
|
2018-12-05 19:12:18 +08:00
|
|
|
} = props;
|
2018-12-07 20:02:01 +08:00
|
|
|
const type = mode === 'year' ? 'month' : 'date';
|
2015-11-11 00:15:12 +08:00
|
|
|
|
2017-03-02 13:35:07 +08:00
|
|
|
const monthCellRender = monthFullCellRender || this.monthCellRender;
|
|
|
|
const dateCellRender = dateFullCellRender || this.dateCellRender;
|
|
|
|
|
2018-02-03 18:54:04 +08:00
|
|
|
let disabledDate = props.disabledDate;
|
|
|
|
|
|
|
|
if (props.validRange) {
|
|
|
|
disabledDate = this.getDateRange(props.validRange, disabledDate);
|
|
|
|
}
|
|
|
|
|
2015-11-12 21:24:53 +08:00
|
|
|
return (
|
2018-12-05 19:12:18 +08:00
|
|
|
<ConfigConsumer>
|
|
|
|
{({ getPrefixCls }: ConfigConsumerProps) => {
|
|
|
|
const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
|
2017-10-20 14:54:38 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
// To support old version react.
|
|
|
|
// Have to add prefixCls on the instance.
|
|
|
|
// https://github.com/facebook/react/issues/12397
|
|
|
|
this.prefixCls = prefixCls;
|
|
|
|
|
|
|
|
let cls = className || '';
|
|
|
|
if (fullscreen) {
|
2018-12-07 20:02:01 +08:00
|
|
|
cls += ` ${prefixCls}-fullscreen`;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={cls} style={style}>
|
|
|
|
<Header
|
|
|
|
fullscreen={fullscreen}
|
|
|
|
type={type}
|
|
|
|
value={value}
|
|
|
|
locale={locale.lang}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
onTypeChange={this.onHeaderTypeChange}
|
|
|
|
onValueChange={this.onHeaderValueChange}
|
|
|
|
validRange={props.validRange}
|
|
|
|
/>
|
|
|
|
<FullCalendar
|
|
|
|
{...props}
|
|
|
|
disabledDate={disabledDate}
|
|
|
|
Select={noop}
|
|
|
|
locale={locale.lang}
|
|
|
|
type={type}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
showHeader={false}
|
|
|
|
value={value}
|
|
|
|
monthCellRender={monthCellRender}
|
|
|
|
dateCellRender={dateCellRender}
|
|
|
|
onSelect={this.onSelect}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</ConfigConsumer>
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-10-18 23:30:40 +08:00
|
|
|
|
2017-10-20 14:54:38 +08:00
|
|
|
render() {
|
|
|
|
return (
|
2018-12-07 20:02:01 +08:00
|
|
|
<LocaleReceiver componentName="Calendar" defaultLocale={this.getDefaultLocale}>
|
2017-10-20 14:54:38 +08:00
|
|
|
{this.renderCalendar}
|
|
|
|
</LocaleReceiver>
|
|
|
|
);
|
|
|
|
}
|
2015-11-11 00:15:12 +08:00
|
|
|
}
|