chowa
Version:
UI component library based on React
184 lines (183 loc) • 6.93 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 calendar_mode_1 = require("../calendar-mode");
const header_1 = require("./header");
const body_1 = require("./body");
const footer_1 = require("./footer");
class MinCalendar extends React.PureComponent {
constructor(props) {
super(props);
const value = props.value || props.defaultValue;
this.state = {
activeMode: props.defaultMode,
date: value,
time: value,
display: moment.isMoment(value) ? value : moment(),
each: moment.isMoment(value) ? value : moment()
};
[
'updateEach',
'updateDisplay',
'updateMode',
'triggerChange',
'onDaySelectHandler',
'onMonthSelectHandler',
'onYearSelectHandler',
'onTimeSelectHandler',
'onClearHandler',
'onConfirmHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (!utils_1.isSameMoment(preProps.value, this.props.value)) {
const { value } = this.props;
if (moment.isMoment(value)) {
this.setState({
date: value,
time: value,
display: value,
each: value
});
}
else {
this.setState({
date: undefined,
time: undefined
});
}
}
}
triggerChange(force = false) {
const { determinable, onChange, timeable, value } = this.props;
const { date, time } = this.state;
if (determinable && !force) {
return;
}
const empty = !moment.isMoment(date) || (timeable && !moment.isMoment(time));
const result = empty ? undefined : date.clone();
if (timeable && !empty) {
result.hour(time.hour())
.minute(time.minute())
.second(time.second());
}
if (utils_1.isSameMoment(value, result)) {
return;
}
if (onChange) {
onChange(result);
}
}
updateEach(each) {
this.setState({ each });
}
updateDisplay(display) {
this.setState({ display });
}
updateMode(activeMode) {
this.setState({ activeMode });
}
onDaySelectHandler(date) {
const { defaultMode } = this.props;
this.setState({
date,
display: date
}, this.triggerChange);
if (defaultMode !== calendar_mode_1.DAY_MODE) {
this.updateMode(defaultMode);
}
}
onMonthSelectHandler(month) {
const { defaultMode } = this.props;
if (defaultMode === calendar_mode_1.MONTH_MODE) {
this.setState({ date: month }, this.triggerChange);
}
else {
this.setState({ date: undefined, display: month });
this.updateMode(defaultMode);
}
}
onYearSelectHandler(year) {
const { defaultMode } = this.props;
if (defaultMode === calendar_mode_1.YEAR_MODE) {
this.setState({ date: year }, this.triggerChange);
}
else {
this.setState({ date: undefined, display: year });
this.updateMode(defaultMode);
}
}
onTimeSelectHandler(time) {
this.setState({ time }, this.triggerChange);
}
onClearHandler() {
this.setState({
date: undefined,
time: undefined
}, () => {
this.triggerChange(true);
if (this.props.onClear) {
this.props.onClear();
}
});
}
onConfirmHandler() {
this.triggerChange(true);
if (this.props.onConfirm) {
this.props.onConfirm();
}
}
render() {
const { className, style, weeksable, disabledDate, rangeDate, secondable, defaultMode, timeable, clearable, determinable } = this.props;
const { activeMode, display, each, date, time } = this.state;
const calendarClass = classnames_1.default({
[utils_1.preClass('min-calendar')]: true,
[utils_1.preClass('min-calendar-with-weeks')]: weeksable,
[className]: utils_1.isExist(className)
});
return (React.createElement("div", { style: style, className: calendarClass },
React.createElement(header_1.default, { mode: activeMode, display: display, each: each, time: time, updateEach: this.updateEach, updateDisplay: this.updateDisplay, updateMode: this.updateMode }),
React.createElement(body_1.default, { values: [date], time: time, each: each, mode: activeMode, defaultMode: defaultMode, display: display, secondable: secondable, weeksable: weeksable, disabledDate: disabledDate, rangeDate: rangeDate, onDateSelect: this.onDaySelectHandler, onMonthSelect: this.onMonthSelectHandler, onYearSelect: this.onYearSelectHandler, onTimeSelect: this.onTimeSelectHandler }),
React.createElement(footer_1.default, { switchable: defaultMode === calendar_mode_1.DAY_MODE && timeable && !weeksable, defaultMode: defaultMode, mode: activeMode, updateMode: this.updateMode, updateDate: this.onDaySelectHandler, updateTime: this.onTimeSelectHandler, clearable: clearable, onClear: this.onClearHandler, determinable: determinable, onConfirm: this.onConfirmHandler, disabled: !moment.isMoment(date) || (timeable ? !moment.isMoment(time) : false), updateable: defaultMode === calendar_mode_1.DAY_MODE })));
}
}
MinCalendar.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
defaultValue: PropTypes.object,
value: PropTypes.object,
defaultMode: PropTypes.oneOf([calendar_mode_1.DAY_MODE, calendar_mode_1.YEAR_MODE, calendar_mode_1.MONTH_MODE]),
weeksable: PropTypes.bool,
timeable: PropTypes.bool,
secondable: PropTypes.bool,
determinable: PropTypes.bool,
disabledDate: PropTypes.object,
rangeDate: PropTypes.object,
onConfirm: PropTypes.func,
onChange: PropTypes.func,
clearable: PropTypes.bool,
onClear: PropTypes.func
};
MinCalendar.defaultProps = {
defaultMode: calendar_mode_1.DAY_MODE,
timeable: false,
weeksable: false,
secondable: true,
clearable: false,
determinable: false
};
exports.default = MinCalendar;