chowa
Version:
UI component library based on React
297 lines (296 loc) • 14.1 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.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const moment = require("moment");
const utils_1 = require("../../utils");
const i18n_1 = require("../../i18n");
const calendar_mode_1 = require("../calendar-mode");
const radio_group_1 = require("../../radio-group");
const button_1 = require("../../button");
const button_group_1 = require("../../button-group");
const transition_1 = require("../../transition");
const icon_1 = require("../../icon");
const year_1 = require("./year");
const month_1 = require("./month");
const week_1 = require("./week");
const day_1 = require("./day");
const event_edit_modal_1 = require("./event-edit-modal");
const min_1 = require("../min");
class FullCalendar extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
activeMode: props.defaultMode,
selfValue: moment.isMoment(props.defaultValue)
? props.defaultValue
: moment(),
includeCurrentDay: true,
renderEvents: props.events || props.defaultEvents,
contextmenuVisible: false,
contextmenuStyle: undefined,
contextmenuInfo: {
mom: undefined,
event: undefined
},
editModalVisible: false
};
[
'onModeChangeHandler',
'prePageHandler',
'nextPageHandler',
'selectCurrentDay',
'onContextMenuHandler',
'autoHideContextmenu',
'showEditModal',
'hiddenEditModal',
'deleteEvent',
'appendHandler',
'editHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps, preState) {
if (!utils_1.isEqual(preProps.events, this.props.events) && !utils_1.isEqual(this.props.events, this.state.renderEvents)) {
this.setState({ renderEvents: this.props.events });
}
if (!utils_1.isSameMoment(preState.selfValue, this.state.selfValue)) {
let includeCurrentDay = false;
const { selfValue, activeMode } = this.state;
const currentValue = moment();
switch (activeMode) {
case calendar_mode_1.YEAR_MODE:
includeCurrentDay = currentValue.isSame(selfValue, 'year');
break;
case calendar_mode_1.MONTH_MODE:
includeCurrentDay = currentValue.isSame(selfValue, 'month');
break;
case calendar_mode_1.WEEK_MODE:
includeCurrentDay = currentValue.isSame(selfValue, 'week');
break;
case calendar_mode_1.DAY_MODE:
includeCurrentDay = currentValue.isSame(selfValue, 'day');
break;
}
this.setState({
includeCurrentDay
});
}
}
selectCurrentDay() {
this.setState({ selfValue: moment() });
}
prePageHandler() {
const { selfValue, activeMode } = this.state;
const newValue = selfValue.clone();
switch (activeMode) {
case calendar_mode_1.YEAR_MODE:
return this.setState({
selfValue: newValue.subtract(1, 'year')
});
case calendar_mode_1.MONTH_MODE:
return this.setState({
selfValue: newValue.subtract(1, 'month')
});
case calendar_mode_1.WEEK_MODE:
return this.setState({
selfValue: newValue.subtract(1, 'week')
});
case calendar_mode_1.DAY_MODE:
return this.setState({
selfValue: newValue.subtract(1, 'day')
});
}
}
nextPageHandler() {
const { selfValue, activeMode } = this.state;
const newValue = selfValue.clone();
switch (activeMode) {
case calendar_mode_1.YEAR_MODE:
return this.setState({
selfValue: newValue.add(1, 'year')
});
case calendar_mode_1.MONTH_MODE:
return this.setState({
selfValue: newValue.add(1, 'month')
});
case calendar_mode_1.WEEK_MODE:
return this.setState({
selfValue: newValue.add(1, 'week')
});
case calendar_mode_1.DAY_MODE:
return this.setState({
selfValue: newValue.add(1, 'day')
});
}
}
onModeChangeHandler(mode) {
this.setState({ activeMode: mode });
}
getDisplayDate(i18n) {
const { selfValue, activeMode } = this.state;
const replacer = { weeks: selfValue.week() };
switch (activeMode) {
case calendar_mode_1.YEAR_MODE:
return selfValue.format(i18n.yearFormat);
case calendar_mode_1.MONTH_MODE:
return selfValue.format(i18n.monthFormat);
case calendar_mode_1.WEEK_MODE:
return `${selfValue.format(i18n.yearFormat)} ${i18n_1.i18nFormatter(i18n.weeksFormat, replacer)}`;
case calendar_mode_1.DAY_MODE:
return selfValue.format(i18n.dayFormat);
}
}
onContextMenuHandler(mom, event, e) {
const { left, top } = utils_1.doms.offset(this.wrapperEle);
this.setState({
contextmenuVisible: true,
contextmenuStyle: {
left: e.pageX - left,
top: e.pageY - top
},
contextmenuInfo: {
mom,
event
}
}, () => {
utils_1.doms.on(this.wrapperEle, 'click', this.autoHideContextmenu);
});
e.preventDefault();
}
autoHideContextmenu() {
this.setState({ contextmenuVisible: false });
utils_1.doms.off(this.wrapperEle, 'click', this.autoHideContextmenu);
}
showEditModal() {
this.setState({ editModalVisible: true });
}
hiddenEditModal() {
this.setState({ editModalVisible: false });
}
deleteEvent() {
const { contextmenuInfo, renderEvents } = this.state;
const { onDelete } = this.props;
const newRenderEvents = [].concat(renderEvents);
const deleteEvent = newRenderEvents.splice(contextmenuInfo.event.eventIndex, 1).pop();
this.setState({
renderEvents: newRenderEvents
});
if (onDelete) {
onDelete(deleteEvent);
}
}
appendHandler(event) {
const renderEvents = [].concat(this.state.renderEvents);
renderEvents.push(event);
this.setState({ renderEvents });
if (this.props.onAppend) {
this.props.onAppend(event);
}
}
editHandler(event) {
const { contextmenuInfo } = this.state;
const renderEvents = [].concat(this.state.renderEvents);
renderEvents[contextmenuInfo.event.eventIndex] = Object.assign(Object.assign({}, renderEvents[contextmenuInfo.event.eventIndex]), event);
this.setState({ renderEvents });
if (this.props.onEdit) {
this.props.onEdit(renderEvents[contextmenuInfo.event.eventIndex], contextmenuInfo.event.eventIndex);
}
}
render() {
const { modeSelectable, dateSelectable, editable, appendable, categories, style, className } = this.props;
const { activeMode, includeCurrentDay, selfValue, renderEvents, contextmenuVisible, contextmenuStyle, contextmenuInfo, editModalVisible } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass('full-calendar')]: true,
[className]: utils_1.isExist(className)
});
return (React.createElement("section", { style: style, className: componentClass, ref: (ele) => {
this.wrapperEle = ele;
} },
React.createElement("div", { className: utils_1.preClass('full-calendar-toolbar') },
modeSelectable &&
React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => (React.createElement(radio_group_1.default, { className: utils_1.preClass('full-calendar-mode-selector'), value: activeMode, btn: true, onChange: this.onModeChangeHandler, options: [
{
label: i18n.year,
value: calendar_mode_1.YEAR_MODE
},
{
label: i18n.month,
value: calendar_mode_1.MONTH_MODE
},
{
label: i18n.week,
value: calendar_mode_1.WEEK_MODE
},
{
label: i18n.day,
value: calendar_mode_1.DAY_MODE
}
] }))),
dateSelectable &&
React.createElement("div", { className: utils_1.preClass('full-calendar-changer') },
React.createElement(button_1.default, { disabled: includeCurrentDay, onClick: this.selectCurrentDay },
React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => i18n.today)),
React.createElement(button_group_1.default, null,
React.createElement(button_1.default, { onClick: this.prePageHandler },
React.createElement(icon_1.default, { type: 'arrow-left' })),
React.createElement(button_1.default, { onClick: this.nextPageHandler },
React.createElement(icon_1.default, { type: 'arrow-right' })))),
React.createElement("h3", { className: utils_1.preClass('full-calendar-date') },
React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => this.getDisplayDate(i18n)))),
activeMode === calendar_mode_1.YEAR_MODE &&
React.createElement(year_1.default, { onContextMenu: this.onContextMenuHandler, events: renderEvents, value: selfValue, editable: editable, appendable: appendable }),
activeMode === calendar_mode_1.MONTH_MODE &&
React.createElement(month_1.default, { onContextMenu: this.onContextMenuHandler, events: renderEvents, value: selfValue, editable: editable, appendable: appendable }),
activeMode === calendar_mode_1.WEEK_MODE &&
React.createElement(week_1.default, { onContextMenu: this.onContextMenuHandler, events: renderEvents, value: selfValue, editable: editable, appendable: appendable }),
activeMode === calendar_mode_1.DAY_MODE &&
React.createElement(day_1.default, { onContextMenu: this.onContextMenuHandler, events: renderEvents, value: selfValue, editable: editable, appendable: appendable }),
(editable || appendable) &&
React.createElement(transition_1.default, { visible: contextmenuVisible },
React.createElement("div", { className: utils_1.preClass('full-calendar-contextmenu'), style: contextmenuStyle },
React.createElement("ul", { className: utils_1.preClass('full-calendar-menu') },
contextmenuInfo.event === undefined &&
React.createElement("li", { className: utils_1.preClass('full-calendar-menu-item'), onClick: this.showEditModal },
React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => i18n.contextmenu.createEvent)),
!moment.isMoment(contextmenuInfo.mom) &&
React.createElement("li", { className: utils_1.preClass('full-calendar-menu-item'), onClick: this.showEditModal },
React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => i18n.contextmenu.editEvent)),
!moment.isMoment(contextmenuInfo.mom) &&
React.createElement("li", { className: utils_1.preClass('full-calendar-menu-item'), onClick: this.deleteEvent },
React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => i18n.contextmenu.removeEvent))))),
(editable || appendable) &&
React.createElement(event_edit_modal_1.default, { createMom: contextmenuInfo.mom, editEvent: contextmenuInfo.event, onAppend: this.appendHandler, onEdit: this.editHandler, hiddenEditModal: this.hiddenEditModal, categories: categories, mode: activeMode, visible: editModalVisible })));
}
}
FullCalendar.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
defaultMode: PropTypes.oneOf([calendar_mode_1.YEAR_MODE, calendar_mode_1.MONTH_MODE, calendar_mode_1.WEEK_MODE, calendar_mode_1.DAY_MODE]),
defaultValue: PropTypes.object,
defaultEvents: PropTypes.array,
events: PropTypes.array,
modeSelectable: PropTypes.bool,
dateSelectable: PropTypes.bool,
editable: PropTypes.bool,
appendable: PropTypes.bool
};
FullCalendar.defaultProps = {
defaultMode: calendar_mode_1.MONTH_MODE,
modeSelectable: true,
dateSelectable: true,
editable: false,
appendable: false
};
FullCalendar.Min = min_1.default;
exports.default = FullCalendar;