chowa
Version:
UI component library based on React
102 lines (101 loc) • 4.67 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 classnames_1 = require("classnames");
const moment = require("moment");
const utils_1 = require("../utils");
const calendar_1 = require("../calendar");
const icon_1 = require("../icon");
const dropdown_1 = require("../dropdown");
class BasePicker extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.value || props.defaultValue,
selectorVisible: props.visible || props.defaultVisible,
showClear: false
};
[
'closeDropdown',
'onChangeHandler',
'onVisibleChangeHandler',
'clearValue',
'onTriggerMouseEnterHandler',
'onTriggerMouseLeaveHandler'
].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
});
}
if (preProps.visible !== this.props.visible && this.props.visible !== this.state.selectorVisible) {
this.setState({
selectorVisible: this.props.visible
});
}
}
closeDropdown() {
this.setState({ selectorVisible: false });
}
onChangeHandler(result) {
this.setState({
result
}, () => {
if (this.props.onChange) {
this.props.onChange(result);
}
});
}
onVisibleChangeHandler(v) {
this.setState({ selectorVisible: v });
}
clearValue() {
this.setState({ result: undefined });
}
onTriggerMouseEnterHandler() {
this.setState({ showClear: true });
}
onTriggerMouseLeaveHandler() {
this.setState({ showClear: false });
}
renderContent() {
const { timeable, disabledDate, secondable, clearable, determinable, mode, weeksable } = this.props;
const { result } = this.state;
return (React.createElement(calendar_1.MinCalendar, { defaultMode: mode, weeksable: weeksable, timeable: timeable, disabledDate: disabledDate, secondable: secondable, clearable: clearable, onChange: this.onChangeHandler, onConfirm: this.closeDropdown, value: result, determinable: determinable }));
}
render() {
const { className, style, placeholder, timeable, disabled, externalWheelHide, clearable, formatter, tabIndex, prefix } = this.props;
const { result, selectorVisible, showClear } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass(`${prefix}-picker`)]: true,
[utils_1.preClass(`${prefix}-picker-with-time`)]: timeable,
[utils_1.preClass(`${prefix}-picker-focused`)]: selectorVisible,
[utils_1.preClass(`${prefix}-picker-disabled`)]: disabled,
[className]: utils_1.isExist(className)
});
const iconClass = classnames_1.default({
[utils_1.preClass(`${prefix}-picker-icon`)]: true,
[utils_1.preClass(`${prefix}-picker-icon-active`)]: selectorVisible
});
return (React.createElement("div", { style: style, onMouseEnter: clearable ? this.onTriggerMouseEnterHandler : null, onMouseLeave: clearable ? this.onTriggerMouseLeaveHandler : null, className: componentClass },
React.createElement(dropdown_1.default, { trigger: 'focus', disabled: disabled, visible: selectorVisible, externalWheelHide: externalWheelHide, onVisibleChange: this.onVisibleChangeHandler, role: `${prefix}-picker`, content: this.renderContent() },
React.createElement("input", { placeholder: placeholder, value: moment.isMoment(result) ? formatter(result) : '', onChange: utils_1.stopReactPropagation, type: 'text', tabIndex: disabled ? -1 : tabIndex, className: utils_1.preClass(`${prefix}-picker-input`) })),
React.createElement("div", { className: iconClass },
React.createElement(icon_1.default, { type: 'calendar' })),
clearable &&
React.createElement(utils_1.ClearButton, { visible: showClear && utils_1.isExist(result), onClick: this.clearValue })));
}
}
exports.default = BasePicker;