chowa
Version:
UI component library based on React
154 lines (153 loc) • 5.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 utils_1 = require("../utils");
const textarea_1 = require("./textarea");
const input_number_1 = require("./input-number");
class Input extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.value || props.defaultValue || '',
showClear: false
};
[
'onChangeHandler',
'onKeyDownHandler',
'clearResult',
'onMouseEnterHandler',
'onMouseLeaveHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onMouseEnterHandler() {
this.setState({ showClear: true });
}
onMouseLeaveHandler() {
this.setState({ showClear: false });
}
componentDidUpdate(preProps) {
if (this.props.value !== preProps.value && this.state.result !== this.props.value) {
this.setState({ result: this.props.value || '' });
}
}
clearResult(e) {
this.setState({ result: '' });
this.inputEle.value = '';
const ev = Object.assign(e, {
target: this.inputEle,
currentTarget: this.inputEle
});
this.onChangeHandler(ev);
utils_1.stopReactPropagation(e);
}
onChangeHandler(e) {
if (this.props.onChange) {
this.props.onChange(e);
}
this.setState({
result: e.target.value
});
}
onKeyDownHandler(e) {
if (e.keyCode === 13 && this.props.onPressEnter) {
this.props.onPressEnter(e);
}
if (this.props.onKeyDown) {
this.props.onKeyDown(e);
}
}
focus() {
this.inputEle.focus();
}
blur() {
this.inputEle.blur();
}
renderInput(single) {
const { className, size, disabled, placeholder, tabIndex, style } = this.props;
const { result } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass('input')]: true,
[utils_1.preClass(`input-${size}`)]: size !== 'default',
[className]: utils_1.isExist(className) && single
});
return (React.createElement("input", Object.assign({}, utils_1.otherProps(Input.propTypes, this.props), { style: single ? style : undefined, className: componentClass, disabled: disabled, placeholder: placeholder, value: result, onChange: this.onChangeHandler, onKeyDown: this.onKeyDownHandler, tabIndex: disabled ? -1 : tabIndex, ref: (ele) => {
this.inputEle = ele;
} })));
}
render() {
const { addonBefore, addonAfter, prefix, suffix, clearable, prepend, append, size, className, style } = this.props;
const { result, showClear } = this.state;
if (!utils_1.isExist(addonBefore)
&& !utils_1.isExist(addonAfter)
&& !utils_1.isExist(prefix)
&& !utils_1.isExist(suffix)
&& !utils_1.isExist(clearable)
&& !utils_1.isExist(prepend)
&& !utils_1.isExist(append)) {
return this.renderInput(true);
}
else {
const wrapperClass = classnames_1.default({
[utils_1.preClass('input-wrapper')]: true,
[utils_1.preClass(`input-wrapper-${size}`)]: size !== 'default',
[className]: utils_1.isExist(className)
});
return (React.createElement("div", { className: wrapperClass, style: style },
prepend && prepend,
addonBefore &&
React.createElement("span", { className: utils_1.preClass('input-addon') }, addonBefore),
React.createElement("div", { onMouseEnter: clearable ? this.onMouseEnterHandler : null, onMouseLeave: clearable ? this.onMouseLeaveHandler : null, className: utils_1.preClass('input-fix-wrapper') },
prefix &&
React.createElement("span", { className: utils_1.preClass('input-fix') }, prefix),
this.renderInput(false),
(clearable || suffix) &&
React.createElement("span", { className: utils_1.preClass('input-fix') },
clearable &&
React.createElement(utils_1.ClearButton, { absolute: false, visible: showClear && !!result, onClick: this.clearResult }),
suffix)),
addonAfter &&
React.createElement("span", { className: utils_1.preClass('input-addon') }, addonAfter),
append && append));
}
}
}
Input.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
size: PropTypes.oneOf(['small', 'default', 'large']),
tabIndex: PropTypes.number,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
addonBefore: PropTypes.node,
addonAfter: PropTypes.node,
prefix: PropTypes.node,
suffix: PropTypes.node,
append: PropTypes.node,
prepend: PropTypes.node,
onPressEnter: PropTypes.func,
onChange: PropTypes.func,
clearable: PropTypes.bool,
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
Input.defaultProps = {
tabIndex: 0,
disabled: false,
size: 'default',
clearable: false
};
Input.Textarea = textarea_1.default;
Input.Number = input_number_1.default;
exports.default = Input;