chowa
Version:
UI component library based on React
152 lines (151 loc) • 7.63 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 utils_1 = require("../../utils");
const i18n_1 = require("../../i18n");
const form_1 = require("../../form");
const select_1 = require("../../select");
const input_1 = require("../../input");
const button_1 = require("../../button");
const modal_1 = require("../../modal");
const date_picker_1 = require("../../date-picker");
const radio_group_1 = require("../../radio-group");
const moment = require("moment");
const calendar_mode_1 = require("../calendar-mode");
const eventTypeOptions = [];
[
'primary',
'info',
'danger',
'success',
'warning'
].forEach((type) => {
eventTypeOptions.push({ label: type, value: type });
});
const timeFormatter = (mom) => {
return mom.format('YYYY-MM-DD HH:mm:ss');
};
class EventEditModal extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
editMode: undefined,
start: undefined,
finish: undefined
};
[
'onSubmit',
'onStartChangeHandler',
'onFinishChangeHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onSubmit() {
const { form, onAppend, onEdit, editEvent, hiddenEditModal } = this.props;
const { editMode } = this.state;
form.verify((err, values) => {
if (err) {
return;
}
if (editMode === 'create') {
onAppend(values);
}
else {
if (!utils_1.isEqual(editEvent, values)) {
onEdit(values);
}
}
hiddenEditModal();
});
}
onStartChangeHandler(start) {
this.setState({ start });
}
onFinishChangeHandler(finish) {
this.setState({ finish });
}
componentDidUpdate(preProps) {
if (!utils_1.isSameMoment(preProps.createMom, this.props.createMom, 'hour')
|| !utils_1.isEqual(preProps.editEvent, this.props.editEvent)) {
const editMode = moment.isMoment(this.props.createMom) ? 'create' : 'edit';
const { createMom, editEvent } = this.props;
let start;
let finish;
if (editMode === 'create') {
switch (this.props.mode) {
case calendar_mode_1.YEAR_MODE:
start = createMom.clone().startOf('month');
finish = createMom.clone().endOf('month');
break;
case calendar_mode_1.MONTH_MODE:
start = createMom.clone().startOf('date');
finish = createMom.clone().endOf('date');
break;
case calendar_mode_1.WEEK_MODE:
case calendar_mode_1.DAY_MODE:
start = createMom.clone().startOf('hour');
finish = createMom.clone().endOf('hour');
break;
}
}
else {
start = editEvent.start.clone();
finish = editEvent.finish.clone();
}
this.setState({
editMode,
start,
finish
});
}
if (preProps.visible !== this.props.visible && this.props.visible) {
this.props.form.resetValidator();
}
}
renderForm(i18n) {
const { categories, form, editEvent } = this.props;
const { Validator } = form;
const { start, finish } = this.state;
return (React.createElement(form_1.default, null,
React.createElement(form_1.default.Item, { label: i18n.editModal.startTime },
React.createElement(Validator, { name: 'start', rules: [{ required: true, message: i18n.editModal.startTimeNotice }] },
React.createElement(date_picker_1.default, { value: start, timeable: true, placeholder: i18n.editModal.startTimePlaceholder, onChange: this.onStartChangeHandler, disabledDate: { after: finish }, formatter: timeFormatter }))),
React.createElement(form_1.default.Item, { label: i18n.editModal.finishTime },
React.createElement(Validator, { name: 'finish', rules: [{ required: true, message: i18n.editModal.finishTimeNotice }] },
React.createElement(date_picker_1.default, { value: finish, timeable: true, onChange: this.onFinishChangeHandler, disabledDate: { before: start }, placeholder: i18n.editModal.finishTimePlaceholder, formatter: timeFormatter }))),
React.createElement(form_1.default.Item, { label: i18n.editModal.type },
React.createElement(Validator, { name: 'type', rules: [{ required: true, message: i18n.editModal.typeNotice }] },
React.createElement(radio_group_1.default, { value: utils_1.isExist(editEvent) ? editEvent.type : undefined, options: eventTypeOptions }))),
Array.isArray(categories) &&
React.createElement(form_1.default.Item, { label: i18n.editModal.category },
React.createElement(Validator, { name: 'category', rules: [{ required: true, message: i18n.editModal.categoryNotice }] },
React.createElement(select_1.default, { placeholder: i18n.editModal.categoryPlaceholder, value: utils_1.isExist(editEvent) ? editEvent.category : undefined }, categories.map((category, key) => (React.createElement(select_1.default.Option, Object.assign({}, category, { key: key }))))))),
React.createElement(form_1.default.Item, { label: i18n.editModal.content },
React.createElement(Validator, { name: 'content', rules: [{ required: true, message: i18n.editModal.contentNotice }] },
React.createElement(input_1.default.Textarea, { placeholder: i18n.editModal.contentPlaceholder, value: utils_1.isExist(editEvent) ? editEvent.content : undefined })))));
}
render() {
const { visible, hiddenEditModal, editEvent } = this.props;
return (React.createElement(modal_1.default, { visible: visible, closeOnPressEsc: true, onClose: hiddenEditModal },
React.createElement(modal_1.default.Header, { title: utils_1.isExist(editEvent)
? React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => i18n.editModal.createTitle)
: React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => i18n.editModal.editTitle), onClose: hiddenEditModal }),
React.createElement(modal_1.default.Body, null,
React.createElement(i18n_1.I18nReceiver, { module: 'Calendar' }, (i18n) => this.renderForm(i18n))),
React.createElement(modal_1.default.Footer, null,
React.createElement(button_1.default, { onClick: hiddenEditModal },
React.createElement(i18n_1.I18nReceiver, { module: 'Common' }, (i18n) => i18n.cancel)),
React.createElement(button_1.default, { type: 'primary', onClick: this.onSubmit },
React.createElement(i18n_1.I18nReceiver, { module: 'Common' }, (i18n) => i18n.confirm)))));
}
}
exports.default = form_1.default.createForm()(EventEditModal);