chowa
Version:
UI component library based on React
89 lines (88 loc) • 4.4 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const moment = require("moment");
const classnames_1 = require("classnames");
const i18n_1 = require("../../i18n");
const utils_1 = require("../../utils");
const tool_1 = require("../tool");
const row_event_layout_1 = require("./row-event-layout");
class FullMonth extends React.PureComponent {
constructor(props) {
super(props);
this.state = Object.assign({}, this.compileRenderParams(props.value, props.events));
}
componentDidUpdate(preProps) {
if (!preProps.value.isSame(this.props.value)
|| !utils_1.isEqual(preProps.events, this.props.events)) {
this.setState(Object.assign({}, this.compileRenderParams(this.props.value, this.props.events)));
}
}
compileRenderParams(value, events) {
const begin = value.clone().startOf('month');
const end = value.clone().endOf('month');
const startDay = begin.day() === 0 ? 6 : begin.day() - 1;
const endDay = end.day() === 0 ? 0 : 7 - end.day();
if (startDay > 0) {
begin.subtract(startDay, 'day');
}
if (endDay > 0) {
end.add(endDay, 'day');
}
const amount = end.diff(begin, 'day') + 1;
const renderMoms = [];
const renderEvents = [];
for (let i = 0; i < amount / 7; i++) {
const startIndex = i * 7;
const rowMoms = [];
for (let j = 0; j < 7; j++) {
const mom = begin.clone().add(startIndex + j, 'day');
rowMoms.push(mom);
}
renderMoms.push(rowMoms);
renderEvents.push(tool_1.compileRowEvents(events, rowMoms, 'day'));
}
return {
renderMoms,
renderEvents,
activeDay: undefined,
activeEvent: undefined
};
}
renderDay(mom, key) {
const { value, appendable, onContextMenu } = this.props;
const currentValue = moment();
const dayClass = classnames_1.default({
[utils_1.preClass('full-calendar-num')]: true,
[utils_1.preClass('full-calendar-dark')]: !mom.isSame(value, 'month'),
[utils_1.preClass('full-calendar-active')]: mom.isSame(currentValue, 'day')
});
return (React.createElement("div", { onContextMenu: appendable ? onContextMenu.bind(this, mom, undefined) : null, className: utils_1.preClass('full-calendar-mode-detail-wrapper'), key: key },
React.createElement("div", { className: utils_1.preClass('full-calendar-mode-detail') },
React.createElement("span", { className: dayClass }, mom.date()))));
}
render() {
const { renderMoms, renderEvents } = this.state;
const { editable, onContextMenu } = this.props;
const wrapperClass = classnames_1.default({
[utils_1.preClass('full-calendar-mode-wrapper')]: true,
[utils_1.preClass('full-calendar-mode-month')]: true
});
return (React.createElement("div", { className: wrapperClass },
React.createElement("dl", { className: utils_1.preClass('full-calendar-header') },
React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => i18n.weeks.map((val, key) => (React.createElement("dd", { key: key, className: utils_1.preClass('full-calendar-header-title') }, val))))),
React.createElement("div", { className: utils_1.preClass('full-calendar-body') }, renderMoms.map((row, key) => (React.createElement("div", { className: utils_1.preClass('full-calendar-row-wrapper'), key: key },
React.createElement("div", { className: utils_1.preClass('full-calendar-row-bg') }, row.map((mom, colKey) => (this.renderDay(mom, colKey)))),
React.createElement("div", { className: utils_1.preClass('full-calendar-row-content') },
React.createElement(row_event_layout_1.default, { onContextMenu: onContextMenu, eventsMatrix: renderEvents[key], colAmount: 7, editable: editable }))))))));
}
}
exports.default = FullMonth;