ant-design/components/calendar/index.tsx

280 lines
7.7 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2018-08-07 21:07:52 +08:00
import * as PropTypes from 'prop-types';
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';
import enUS from './locale/en_US';
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
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}`;
}
return `${v}`;
2015-11-11 00:15:12 +08:00
}
2015-11-13 19:56:34 +08:00
export type CalendarMode = 'month' | 'year';
export interface CalendarProps {
prefixCls?: string;
className?: string;
value?: moment.Moment;
defaultValue?: moment.Moment;
mode?: CalendarMode;
fullscreen?: boolean;
dateCellRender?: (date: moment.Moment) => React.ReactNode;
monthCellRender?: (date: moment.Moment) => React.ReactNode;
dateFullCellRender?: (date: moment.Moment) => React.ReactNode;
monthFullCellRender?: (date: moment.Moment) => React.ReactNode;
locale?: any;
style?: React.CSSProperties;
onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
onSelect?: (date?: moment.Moment) => void;
2018-07-27 10:45:49 +08:00
onChange?: (date?: moment.Moment) => void;
disabledDate?: (current: moment.Moment) => boolean;
2018-12-07 20:02:01 +08:00
validRange?: [moment.Moment, moment.Moment];
}
export interface CalendarState {
2017-11-22 11:05:19 +08:00
value: moment.Moment;
mode?: CalendarMode;
}
export default class Calendar extends React.Component<CalendarProps, CalendarState> {
static defaultProps = {
locale: {},
fullscreen: true,
mode: 'month' as CalendarMode,
onSelect: noop,
onPanelChange: noop,
2018-07-27 10:45:49 +08:00
onChange: noop,
2016-07-13 11:14:24 +08:00
};
static propTypes = {
monthCellRender: PropTypes.func,
dateCellRender: PropTypes.func,
monthFullCellRender: PropTypes.func,
dateFullCellRender: PropTypes.func,
fullscreen: PropTypes.bool,
locale: PropTypes.object,
prefixCls: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
onPanelChange: PropTypes.func,
value: PropTypes.object as PropTypes.Requireable<moment.Moment>,
onSelect: PropTypes.func,
2018-07-27 10:45:49 +08:00
onChange: PropTypes.func,
2016-07-13 11:14:24 +08:00
};
prefixCls?: string;
2017-11-22 11:05:19 +08:00
constructor(props: CalendarProps) {
super(props);
2018-03-09 15:04:21 +08:00
const value = props.value || props.defaultValue || interopDefault(moment)();
if (!interopDefault(moment).isMoment(value)) {
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',
);
}
2015-11-12 21:24:53 +08:00
this.state = {
value,
2015-11-13 20:32:54 +08:00
mode: props.mode,
2015-11-12 21:24:53 +08:00
};
}
componentWillReceiveProps(nextProps: CalendarProps) {
if ('value' in nextProps) {
this.setState({
2017-11-22 11:05:19 +08:00
value: nextProps.value!,
});
}
if ('mode' in nextProps && nextProps.mode !== this.props.mode) {
this.setState({
2018-12-07 20:02:01 +08:00
mode: nextProps.mode!,
});
}
}
2017-11-22 11:05:19 +08:00
monthCellRender = (value: moment.Moment) => {
const { monthCellRender = noop as Function } = this.props;
const { prefixCls } = this;
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>
);
2018-12-07 20:02:01 +08:00
};
2017-11-22 11:05:19 +08:00
dateCellRender = (value: moment.Moment) => {
const { dateCellRender = noop as Function } = this.props;
const { prefixCls } = this;
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>
);
2018-12-07 20:02:01 +08:00
};
2017-11-22 11:05:19 +08:00
setValue = (value: moment.Moment, way: 'select' | 'changePanel') => {
if (!('value' in this.props)) {
2015-11-12 23:51:38 +08:00
this.setState({ value });
}
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
};
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 });
this.onPanelChange(this.state.value, mode);
2015-11-13 20:32:54 +08:00
}
2018-12-07 20:02:01 +08:00
};
2017-11-22 11:05:19 +08:00
onHeaderValueChange = (value: moment.Moment) => {
this.setValue(value, 'changePanel');
2018-12-07 20:02:01 +08:00
};
2017-11-22 11:05:19 +08:00
onHeaderTypeChange = (type: string) => {
this.setType(type);
2018-12-07 20:02:01 +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;
if (onPanelChange) {
onPanelChange(value, mode);
}
2018-07-27 10:45:49 +08:00
if (onChange && value !== this.state.value) {
onChange(value);
}
}
2017-11-22 11:05:19 +08:00
onSelect = (value: moment.Moment) => {
this.setValue(value, 'select');
2018-12-07 20:02:01 +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-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
};
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
};
2017-11-22 11:05:19 +08:00
renderCalendar = (locale: any, localeCode: string) => {
const { state, props } = this;
const { value, mode } = state;
if (value && localeCode) {
value.locale(localeCode);
}
const {
prefixCls: customizePrefixCls,
2018-12-07 20:02:01 +08:00
style,
className,
fullscreen,
dateFullCellRender,
monthFullCellRender,
} = props;
2018-12-07 20:02:01 +08:00
const type = mode === 'year' ? 'month' : 'date';
2015-11-11 00:15:12 +08:00
const monthCellRender = monthFullCellRender || this.monthCellRender;
const dateCellRender = dateFullCellRender || this.dateCellRender;
let disabledDate = props.disabledDate;
if (props.validRange) {
disabledDate = this.getDateRange(props.validRange, disabledDate);
}
2015-11-12 21:24:53 +08:00
return (
<ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => {
const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
// 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`;
}
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
};
render() {
return (
2018-12-07 20:02:01 +08:00
<LocaleReceiver componentName="Calendar" defaultLocale={this.getDefaultLocale}>
{this.renderCalendar}
</LocaleReceiver>
);
}
2015-11-11 00:15:12 +08:00
}