chowa
Version:
UI component library based on React
180 lines (179 loc) • 7.55 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 icon_1 = require("../icon");
const dropdown_1 = require("../dropdown");
const button_1 = require("../button");
const time_1 = require("./time");
const i18n_1 = require("../i18n");
class TimePicker extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.value || props.defaultValue,
determineResult: props.value || props.defaultValue,
selectorVisible: props.visible || props.defaultVisible,
animDone: false,
showClear: false
};
[
'onChangeHandler',
'determineResultHandler',
'setCurrentTime',
'clearValue',
'onVisibleChangeHandler',
'onTriggerMouseEnterHandler',
'onTriggerMouseLeaveHandler',
'onShowHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (!utils_1.isSameMoment(preProps.value, this.props.value) && !utils_1.isSameMoment(this.props.value, this.state.result)) {
this.setState({
result: this.props.value,
determineResult: this.props.value
});
}
if (preProps.visible !== this.props.visible && this.props.visible !== this.state.selectorVisible) {
this.setState({
selectorVisible: this.props.visible
});
}
}
onTriggerMouseEnterHandler() {
this.setState({
showClear: true
});
}
onTriggerMouseLeaveHandler() {
this.setState({
showClear: false
});
}
clearValue() {
this.onChangeHandler(undefined, true);
}
setCurrentTime() {
const currentTime = moment();
this.onChangeHandler(currentTime);
}
onChangeHandler(value, quickCase = false) {
const { onChange, determinable } = this.props;
const { result, determineResult } = this.state;
if (!determinable) {
if (onChange) {
onChange(value);
}
if (!moment.isMoment(result)) {
this.setState({ selectorVisible: false });
}
}
this.setState({
result: value,
determineResult: quickCase ? value : determineResult
});
}
determineResultHandler() {
const { result } = this.state;
const { onChange } = this.props;
this.setState({
determineResult: result
}, () => {
if (onChange) {
onChange(result);
}
this.setState({ selectorVisible: false });
});
}
onVisibleChangeHandler(v) {
this.setState({
selectorVisible: v,
animDone: false
});
}
onShowHandler() {
this.setState({
animDone: true
});
}
renderContent() {
const { result, animDone } = this.state;
const { secondable, placeholder, clearable, determinable, formatter } = this.props;
const renderValue = moment.isMoment(result) ? formatter(result) : '';
return (React.createElement("div", { className: utils_1.preClass('time-picker-selector-wrapper') },
React.createElement("div", { className: utils_1.preClass('time-picker-header') },
React.createElement("span", null, renderValue || placeholder)),
React.createElement(time_1.default, { value: animDone ? result : undefined, secondable: secondable, onChange: this.onChangeHandler }),
React.createElement("div", { className: utils_1.preClass('time-picker-footer') },
React.createElement(button_1.default, { size: 'small', text: true, onClick: this.setCurrentTime, tabIndex: -1 }, "\u73B0\u5728"),
clearable && React.createElement(button_1.default, { size: 'small', onClick: this.clearValue }, "\u6E05\u7A7A"),
determinable &&
React.createElement(button_1.default, { size: 'small', type: 'primary', disabled: !renderValue, onClick: this.determineResultHandler, tabIndex: -1 }, "\u786E\u5B9A"))));
}
render() {
const { className, style, placeholder, disabled, externalWheelHide, clearable, determinable, formatter, tabIndex } = this.props;
const { result, determineResult, selectorVisible, showClear } = this.state;
const displayValue = determinable ? determineResult : result;
const renderValue = moment.isMoment(displayValue) ? formatter(displayValue) : '';
const componentClass = classnames_1.default({
[utils_1.preClass('time-picker')]: true,
[utils_1.preClass('time-picker-focused')]: selectorVisible,
[utils_1.preClass('time-picker-disabled')]: disabled,
[className]: utils_1.isExist(className)
});
const iconClass = classnames_1.default({
[utils_1.preClass('time-picker-icon')]: true,
[utils_1.preClass('time-picker-icon-active')]: selectorVisible
});
return (React.createElement("div", { onMouseEnter: clearable ? this.onTriggerMouseEnterHandler : null, onMouseLeave: clearable ? this.onTriggerMouseLeaveHandler : null, style: style, className: componentClass },
React.createElement(dropdown_1.default, { role: 'time-picker', trigger: 'focus', disabled: disabled, onShow: this.onShowHandler, visible: selectorVisible, onVisibleChange: this.onVisibleChangeHandler, externalWheelHide: externalWheelHide, content: this.renderContent() },
React.createElement(i18n_1.I18nReceiver, { module: 'TimePicker' }, (i18n) => (React.createElement("input", { placeholder: placeholder || i18n.placehoder, disabled: disabled, value: renderValue, tabIndex: disabled ? -1 : tabIndex, type: 'text', readOnly: true, className: utils_1.preClass('time-picker-input') })))),
React.createElement("div", { className: iconClass },
React.createElement(icon_1.default, { type: 'time' })),
clearable &&
React.createElement(utils_1.ClearButton, { visible: showClear && !!displayValue, onClick: this.clearValue })));
}
}
TimePicker.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
visible: PropTypes.bool,
defaultVisible: PropTypes.bool,
externalWheelHide: PropTypes.bool,
tabIndex: PropTypes.number,
defaultValue: PropTypes.object,
value: PropTypes.object,
formatter: PropTypes.func,
onChange: PropTypes.func,
secondable: PropTypes.bool,
placeholder: PropTypes.string,
disabled: PropTypes.bool,
clearable: PropTypes.bool,
determinable: PropTypes.bool
};
TimePicker.defaultProps = {
visible: false,
defaultVisible: false,
externalWheelHide: true,
tabIndex: 0,
formatter: (mom) => mom.format('HH:mm:ss'),
secondable: true,
disabled: false,
clearable: false,
determinable: true
};
exports.default = TimePicker;