2016-09-09 13:55:21 +08:00
|
|
|
import React from 'react';
|
2016-07-07 20:25:03 +08:00
|
|
|
import { PropTypes } from 'react';
|
2016-09-09 13:55:21 +08:00
|
|
|
import moment from 'moment';
|
2015-11-11 00:15:12 +08:00
|
|
|
import FullCalendar from 'rc-calendar/lib/FullCalendar';
|
2016-09-09 13:55:21 +08:00
|
|
|
import defaultLocale from './locale/zh_CN';
|
2016-01-05 14:42:06 +08:00
|
|
|
import { PREFIX_CLS } from './Constants';
|
2015-11-12 21:24:53 +08:00
|
|
|
import Header from './Header';
|
2016-06-22 13:18:43 +08:00
|
|
|
import assign from 'object-assign';
|
2015-11-11 00:15:12 +08:00
|
|
|
|
2016-01-14 16:46:38 +08:00
|
|
|
function noop() { return null; }
|
2015-11-11 00:15:12 +08:00
|
|
|
|
2016-01-14 16:46:38 +08:00
|
|
|
function zerofixed(v) {
|
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
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface CalendarContext {
|
2016-08-19 17:11:06 +08:00
|
|
|
antLocale?: {
|
|
|
|
Calendar?: any
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface CalendarProps {
|
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2016-09-09 13:55:21 +08:00
|
|
|
value?: moment.Moment;
|
|
|
|
defaultValue?: moment.Moment;
|
2016-08-19 17:11:06 +08:00
|
|
|
mode?: 'month' | 'year';
|
|
|
|
fullscreen?: boolean;
|
2016-09-09 13:55:21 +08:00
|
|
|
dateCellRender?: (date: moment.Moment) => React.ReactNode;
|
|
|
|
monthCellRender?: (date: moment.Moment) => React.ReactNode;
|
2016-08-19 17:11:06 +08:00
|
|
|
locale?: any;
|
|
|
|
style?: React.CSSProperties;
|
2016-09-09 13:55:21 +08:00
|
|
|
onPanelChange?: (date: moment.Moment, mode: string) => void;
|
2016-08-19 17:11:06 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class Calendar extends React.Component<CalendarProps, any> {
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
|
|
|
monthCellRender: noop,
|
|
|
|
dateCellRender: noop,
|
2016-03-31 17:37:24 +08:00
|
|
|
locale: {},
|
2016-03-29 14:01:10 +08:00
|
|
|
fullscreen: true,
|
|
|
|
prefixCls: PREFIX_CLS,
|
|
|
|
onPanelChange: noop,
|
|
|
|
mode: 'month',
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
monthCellRender: PropTypes.func,
|
|
|
|
dateCellRender: PropTypes.func,
|
|
|
|
fullscreen: PropTypes.bool,
|
|
|
|
locale: PropTypes.object,
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
className: PropTypes.string,
|
|
|
|
style: PropTypes.object,
|
|
|
|
onPanelChange: PropTypes.func,
|
2016-09-09 13:55:21 +08:00
|
|
|
value: PropTypes.object,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2016-03-31 17:37:24 +08:00
|
|
|
static contextTypes = {
|
|
|
|
antLocale: PropTypes.object,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-31 17:37:24 +08:00
|
|
|
|
2016-08-19 17:11:06 +08:00
|
|
|
context: CalendarContext;
|
|
|
|
|
2015-11-12 21:24:53 +08:00
|
|
|
constructor(props) {
|
2015-11-16 20:10:29 +08:00
|
|
|
super(props);
|
2015-11-12 21:24:53 +08:00
|
|
|
this.state = {
|
2016-09-09 13:55:21 +08:00
|
|
|
value: props.value || props.defaultValue || moment(),
|
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
|
|
|
|
2015-11-15 15:46:05 +08:00
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
if ('value' in nextProps) {
|
|
|
|
this.setState({
|
2016-09-09 13:55:21 +08:00
|
|
|
value: nextProps.value,
|
2015-11-15 15:46:05 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2016-03-31 17:37:24 +08:00
|
|
|
getLocale = () => {
|
|
|
|
const props = this.props;
|
|
|
|
const context = this.context;
|
2016-09-09 13:55:21 +08:00
|
|
|
let locale = defaultLocale;
|
2016-03-31 17:37:24 +08:00
|
|
|
if (context && context.antLocale && context.antLocale.Calendar) {
|
|
|
|
locale = context.antLocale.Calendar;
|
|
|
|
}
|
|
|
|
// 统一合并为完整的 Locale
|
2016-06-22 13:18:43 +08:00
|
|
|
const result = assign({}, locale, props.locale);
|
2016-07-13 11:14:24 +08:00
|
|
|
result.lang = assign({}, locale.lang, props.locale.lang);
|
2016-03-31 17:37:24 +08:00
|
|
|
return result;
|
|
|
|
}
|
|
|
|
|
2016-09-09 13:55:21 +08:00
|
|
|
monthCellRender = (value) => {
|
2015-11-11 12:22:14 +08:00
|
|
|
const prefixCls = this.props.prefixCls;
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
|
|
|
<div className={`${prefixCls}-month`}>
|
|
|
|
<div className={`${prefixCls}-value`}>
|
2016-09-09 13:55:21 +08:00
|
|
|
{value.localeData().monthsShort(value)}
|
2016-01-07 14:21:29 +08:00
|
|
|
</div>
|
|
|
|
<div className={`${prefixCls}-content`}>
|
|
|
|
{this.props.monthCellRender(value)}
|
|
|
|
</div>
|
2015-11-13 22:34:49 +08:00
|
|
|
</div>
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2015-11-11 00:15:12 +08:00
|
|
|
}
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2016-03-23 19:50:44 +08:00
|
|
|
dateCellRender = (value) => {
|
2015-11-11 12:22:14 +08:00
|
|
|
const prefixCls = this.props.prefixCls;
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
|
|
|
<div className={`${prefixCls}-date`}>
|
|
|
|
<div className={`${prefixCls}-value`}>
|
2016-09-09 13:55:21 +08:00
|
|
|
{zerofixed(value.date())}
|
2016-01-07 14:21:29 +08:00
|
|
|
</div>
|
|
|
|
<div className={`${prefixCls}-content`}>
|
|
|
|
{this.props.dateCellRender(value)}
|
|
|
|
</div>
|
2015-11-13 22:34:49 +08:00
|
|
|
</div>
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2015-11-11 00:15:12 +08:00
|
|
|
}
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2016-03-23 19:50:44 +08:00
|
|
|
setValue = (value) => {
|
2015-11-15 21:40:01 +08:00
|
|
|
if (!('value' in this.props) && this.state.value !== value) {
|
2015-11-12 23:51:38 +08:00
|
|
|
this.setState({ value });
|
|
|
|
}
|
2015-11-15 21:40:01 +08:00
|
|
|
this.props.onPanelChange(value, this.state.mode);
|
2015-11-12 21:24:53 +08:00
|
|
|
}
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2016-03-23 19:50:44 +08:00
|
|
|
setType = (type) => {
|
2015-11-13 20:32:54 +08:00
|
|
|
const mode = (type === 'date') ? 'month' : 'year';
|
|
|
|
if (this.state.mode !== mode) {
|
|
|
|
this.setState({ mode });
|
|
|
|
this.props.onPanelChange(this.state.value, mode);
|
|
|
|
}
|
2015-11-12 21:24:53 +08:00
|
|
|
}
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2015-11-11 00:15:12 +08:00
|
|
|
render() {
|
|
|
|
const props = this.props;
|
2016-01-05 14:42:06 +08:00
|
|
|
const { value, mode } = this.state;
|
2016-03-31 17:37:24 +08:00
|
|
|
const { prefixCls, style, className, fullscreen } = props;
|
2015-11-13 20:32:54 +08:00
|
|
|
const type = (mode === 'year') ? 'month' : 'date';
|
2016-03-31 17:37:24 +08:00
|
|
|
const locale = this.getLocale();
|
2015-11-11 00:15:12 +08:00
|
|
|
|
2015-11-15 21:40:01 +08:00
|
|
|
let cls = className || '';
|
|
|
|
if (fullscreen) {
|
2016-02-17 18:04:42 +08:00
|
|
|
cls += (` ${prefixCls}-fullscreen`);
|
2015-11-15 21:40:01 +08:00
|
|
|
}
|
|
|
|
|
2015-11-12 21:24:53 +08:00
|
|
|
return (
|
2015-11-15 21:40:01 +08:00
|
|
|
<div className={cls} style={style}>
|
2015-11-12 21:24:53 +08:00
|
|
|
<Header
|
2015-11-12 23:51:38 +08:00
|
|
|
fullscreen={fullscreen}
|
2015-11-12 21:24:53 +08:00
|
|
|
type={type}
|
|
|
|
value={value}
|
2015-11-16 20:10:29 +08:00
|
|
|
locale={locale.lang}
|
2015-11-13 21:24:25 +08:00
|
|
|
prefixCls={prefixCls}
|
2016-03-23 19:50:44 +08:00
|
|
|
onTypeChange={this.setType}
|
2016-06-06 13:54:10 +08:00
|
|
|
onValueChange={this.setValue}
|
|
|
|
/>
|
2015-11-12 21:24:53 +08:00
|
|
|
<FullCalendar
|
|
|
|
{...props}
|
2015-12-27 23:39:33 +08:00
|
|
|
Select={noop}
|
2015-11-16 20:10:29 +08:00
|
|
|
locale={locale.lang}
|
2015-11-12 21:24:53 +08:00
|
|
|
type={type}
|
2015-11-13 21:24:25 +08:00
|
|
|
prefixCls={prefixCls}
|
2015-11-12 21:24:53 +08:00
|
|
|
showHeader={false}
|
|
|
|
value={value}
|
2016-03-23 19:50:44 +08:00
|
|
|
monthCellRender={this.monthCellRender}
|
2016-06-06 13:54:10 +08:00
|
|
|
dateCellRender={this.dateCellRender}
|
|
|
|
/>
|
2015-11-12 21:24:53 +08:00
|
|
|
</div>
|
|
|
|
);
|
2015-11-11 00:15:12 +08:00
|
|
|
}
|
|
|
|
}
|