ant-design/components/calendar/index.tsx

178 lines
4.4 KiB
TypeScript
Raw Normal View History

import React from 'react';
2016-07-07 20:25:03 +08:00
import { PropTypes } from 'react';
import moment from 'moment';
2015-11-11 00:15:12 +08:00
import FullCalendar from 'rc-calendar/lib/FullCalendar';
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
function noop() { return null; }
2015-11-11 00:15:12 +08:00
function zerofixed(v) {
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
2016-09-13 15:31:29 +08:00
export interface CalendarContext {
antLocale?: {
Calendar?: any
};
}
export interface CalendarProps {
prefixCls?: string;
className?: string;
value?: moment.Moment;
defaultValue?: moment.Moment;
mode?: 'month' | 'year';
fullscreen?: boolean;
dateCellRender?: (date: moment.Moment) => React.ReactNode;
monthCellRender?: (date: moment.Moment) => React.ReactNode;
locale?: any;
style?: React.CSSProperties;
onPanelChange?: (date: moment.Moment, mode: string) => void;
}
export default class Calendar extends React.Component<CalendarProps, any> {
static defaultProps = {
monthCellRender: noop,
dateCellRender: noop,
locale: {},
fullscreen: true,
prefixCls: PREFIX_CLS,
onPanelChange: noop,
mode: 'month',
2016-07-13 11:14:24 +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,
value: PropTypes.object,
2016-07-13 11:14:24 +08:00
};
static contextTypes = {
antLocale: PropTypes.object,
2016-07-13 11:14:24 +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 = {
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
};
}
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
this.setState({
value: nextProps.value,
});
}
}
getLocale = () => {
const props = this.props;
const context = this.context;
let locale = defaultLocale;
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);
return result;
}
monthCellRender = (value) => {
2015-11-11 12:22:14 +08:00
const prefixCls = this.props.prefixCls;
return (
<div className={`${prefixCls}-month`}>
<div className={`${prefixCls}-value`}>
{value.localeData().monthsShort(value)}
</div>
<div className={`${prefixCls}-content`}>
{this.props.monthCellRender(value)}
</div>
2015-11-13 22:34:49 +08:00
</div>
);
2015-11-11 00:15:12 +08:00
}
dateCellRender = (value) => {
2015-11-11 12:22:14 +08:00
const prefixCls = this.props.prefixCls;
return (
<div className={`${prefixCls}-date`}>
<div className={`${prefixCls}-value`}>
{zerofixed(value.date())}
</div>
<div className={`${prefixCls}-content`}>
{this.props.dateCellRender(value)}
</div>
2015-11-13 22:34:49 +08:00
</div>
);
2015-11-11 00:15:12 +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
}
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
}
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;
const { prefixCls, style, className, fullscreen } = props;
2015-11-13 20:32:54 +08:00
const type = (mode === 'year') ? 'month' : 'date';
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) {
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}
onTypeChange={this.setType}
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}
monthCellRender={this.monthCellRender}
dateCellRender={this.dateCellRender}
/>
2015-11-12 21:24:53 +08:00
</div>
);
2015-11-11 00:15:12 +08:00
}
}