chowa
Version:
UI component library based on React
142 lines (141 loc) • 5.98 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 i18n_1 = require("../i18n");
const utils_1 = require("../utils");
const calendar_1 = require("../calendar");
const icon_1 = require("../icon");
const dropdown_1 = require("../dropdown");
class RangePicker extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.value || props.defaultValue,
showClear: false,
selectorVisible: props.visible || props.defaultVisible
};
[
'onTriggerMouseEnterHandler',
'onTriggerMouseLeaveHandler',
'onVisibleChangeHandler',
'onChangeHandler',
'clearResult'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (preProps.visible !== this.props.visible) {
this.setState({
selectorVisible: this.props.visible
});
}
if (!utils_1.isEqual(preProps.value, this.props.value)) {
this.setState({
result: this.props.value
});
}
}
onTriggerMouseEnterHandler() {
this.setState({ showClear: true });
}
onTriggerMouseLeaveHandler() {
this.setState({ showClear: false });
}
onVisibleChangeHandler(v) {
this.setState({ selectorVisible: v });
}
onChangeHandler(result) {
this.setState({ result });
if (this.props.onChange) {
this.props.onChange(result);
}
}
clearResult() {
this.onChangeHandler(undefined);
}
renderContent() {
const { result } = this.state;
const { clearable, determinable, timeable, secondable, disabledDate } = this.props;
return (React.createElement(calendar_1.MinRangeClalendar, { onConfirm: this.onVisibleChangeHandler.bind(this, false), value: result, clearable: clearable, determinable: determinable, timeable: timeable, secondable: secondable, disabledDate: disabledDate, onChange: this.onChangeHandler }));
}
render() {
const { className, style, placeholder, disabled, externalWheelHide, clearable, formatter, tabIndex } = this.props;
const { showClear, selectorVisible, result } = this.state;
const [begin, end] = result || [];
const hasBegin = moment.isMoment(begin);
const hasEnd = moment.isMoment(end);
const componentClass = classnames_1.default({
[utils_1.preClass('range-picker')]: true,
[utils_1.preClass('range-picker-focused')]: selectorVisible,
[utils_1.preClass('range-picker-disabled')]: disabled,
[className]: utils_1.isExist(className)
});
const iconClass = classnames_1.default({
[utils_1.preClass('range-picker-icon')]: true,
[utils_1.preClass('range-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', role: 'range-picker', disabled: disabled, content: this.renderContent(), visible: selectorVisible, externalWheelHide: externalWheelHide, onVisibleChange: this.onVisibleChangeHandler },
React.createElement(i18n_1.I18nReceiver, { module: 'DatePicker' }, (i18n) => {
const realFormatter = utils_1.isExist(formatter)
? formatter
: (begin, end) => {
return i18n_1.i18nFormatter(i18n.rangeFormat, {
start: begin.format(i18n.dateFormat),
end: end.format(i18n.dateFormat)
});
};
const value = hasEnd && hasBegin
? realFormatter(begin, end)
: '';
return (React.createElement("input", { placeholder: utils_1.isExist(placeholder) ? placeholder : i18n.rangePlaceholder, value: value, disabled: disabled, type: 'text', tabIndex: disabled ? -1 : tabIndex, onChange: utils_1.stopReactPropagation, className: utils_1.preClass('range-picker-input') }));
})),
React.createElement("div", { className: iconClass },
React.createElement(icon_1.default, { type: 'calendar' })),
clearable &&
React.createElement(utils_1.ClearButton, { visible: showClear && hasBegin && hasEnd, onClick: this.clearResult })));
}
}
RangePicker.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
visible: PropTypes.bool,
defaultVisible: PropTypes.bool,
externalWheelHide: PropTypes.bool,
tabIndex: PropTypes.number,
onChange: PropTypes.func,
placeholder: PropTypes.string,
defaultValue: PropTypes.array,
value: PropTypes.array,
timeable: PropTypes.bool,
disabledDate: PropTypes.object,
formatter: PropTypes.func,
secondable: PropTypes.bool,
disabled: PropTypes.bool,
clearable: PropTypes.bool,
determinable: PropTypes.bool
};
RangePicker.defaultProps = {
visible: false,
defaultVisible: false,
externalWheelHide: true,
tabIndex: 0,
timeable: false,
secondable: true,
disabled: false,
clearable: false,
determinable: true
};
exports.default = RangePicker;