chowa
Version:
UI component library based on React
176 lines (175 loc) • 6.43 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 scrollbar_1 = require("../scrollbar");
class Time extends React.PureComponent {
constructor(props) {
super(props);
this.cellHeight = 30;
this.state = {
hour: undefined,
minute: undefined,
second: undefined
};
}
componentDidMount() {
const { value, defaultValue } = this.props;
if (moment.isMoment(value) || moment.isMoment(defaultValue)) {
this.updateScrollbarAndValue(value || defaultValue);
}
}
componentDidUpdate(preProps) {
if (!utils_1.isSameMoment(preProps.value, this.props.value)) {
this.updateScrollbarAndValue(this.props.value);
}
}
updateScrollbarAndValue(mom) {
const { secondable } = this.props;
if (!moment.isMoment(mom)) {
this.setState({
hour: undefined,
minute: undefined,
second: undefined
}, () => {
this.hourScrollbar.scrollToTop();
this.minuteScrollbar.scrollToTop();
if (secondable) {
this.secondScrollbar.scrollToTop();
}
});
}
else {
this.selectHourHandler(mom.hour());
this.selectMinuteHandler(mom.minute());
if (secondable) {
this.selectSecondHandler(mom.second());
}
}
}
onChangeHandler() {
const { hour, minute, second } = this.state;
const { onChange, secondable } = this.props;
if (hour === undefined || minute === undefined || (second === undefined && secondable)) {
return;
}
if (onChange) {
onChange(secondable
? moment().hour(hour).minute(minute).second(second)
: moment().hour(hour).minute(minute));
}
}
selectHourHandler(hour) {
if (hour === this.state.hour) {
return;
}
this.setState({
hour
}, () => {
this.hourScrollbar.scrollTop(hour * this.cellHeight);
this.onChangeHandler();
});
}
selectMinuteHandler(minute) {
if (minute === this.state.minute) {
return;
}
this.setState({
minute
}, () => {
this.minuteScrollbar.scrollTop(minute * this.cellHeight);
this.onChangeHandler();
});
}
selectSecondHandler(second) {
if (second === this.state.second) {
return;
}
this.setState({
second
}, () => {
this.secondScrollbar.scrollTop(second * this.cellHeight);
this.onChangeHandler();
});
}
renderHourNodes() {
const { hour } = this.state;
const nodes = [];
for (let i = 0; i < 24; i++) {
const cellClass = classnames_1.default({
[utils_1.preClass('time-cell')]: true,
[utils_1.preClass('time-selected')]: i === hour
});
nodes.push(React.createElement("li", { key: `hour${i}`, className: cellClass, onClick: this.selectHourHandler.bind(this, i) }, utils_1.padZero(i)));
}
return (React.createElement(scrollbar_1.default, { className: utils_1.preClass('time-hour-wrapper'), ref: (ins) => {
this.hourScrollbar = ins;
} },
React.createElement("ul", { className: utils_1.preClass('time-hour-selector') }, nodes)));
}
renderMinuteNodes() {
const { minute } = this.state;
const nodes = [];
for (let i = 0; i < 60; i++) {
const cellClass = classnames_1.default({
[utils_1.preClass('time-cell')]: true,
[utils_1.preClass('time-selected')]: i === minute
});
nodes.push(React.createElement("li", { key: `minute${i}`, className: cellClass, onClick: this.selectMinuteHandler.bind(this, i) }, utils_1.padZero(i)));
}
return (React.createElement(scrollbar_1.default, { className: utils_1.preClass('time-minute-wrapper'), ref: (ins) => {
this.minuteScrollbar = ins;
} },
React.createElement("ul", { className: utils_1.preClass('time-minute-selector') }, nodes)));
}
renderSecondNodes() {
const { second } = this.state;
const nodes = [];
for (let i = 0; i < 60; i++) {
const cellClass = classnames_1.default({
[utils_1.preClass('time-cell')]: true,
[utils_1.preClass('time-selected')]: i === second
});
nodes.push(React.createElement("li", { key: `second${i}`, className: cellClass, onClick: this.selectSecondHandler.bind(this, i) }, utils_1.padZero(i)));
}
return (React.createElement(scrollbar_1.default, { className: utils_1.preClass('time-second-wrapper'), ref: (ins) => {
this.secondScrollbar = ins;
} },
React.createElement("ul", { className: utils_1.preClass('time-second-selector') }, nodes)));
}
render() {
const { className, secondable, style } = this.props;
const componentClass = classnames_1.default({
[utils_1.preClass('time')]: true,
[utils_1.preClass('time-with-second')]: secondable,
[className]: utils_1.isExist(className)
});
return (React.createElement("div", { style: style, className: componentClass },
this.renderHourNodes(),
this.renderMinuteNodes(),
secondable && this.renderSecondNodes()));
}
}
Time.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
defaultValue: PropTypes.object,
value: PropTypes.object,
onChange: PropTypes.func,
secondable: PropTypes.bool
};
Time.defaultProps = {
secondable: true
};
exports.default = Time;