chowa
Version:
UI component library based on React
158 lines (157 loc) • 5.83 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 icon_1 = require("../icon");
class InputNumber extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.value || props.defaultValue,
isFocus: false,
inputValue: ''
};
[
'onFocusHandler',
'onBlurHandler',
'onChangeHandler',
'doAddition',
'doSubtraction',
'onKeyDownHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (preProps.value !== this.props.value && this.props.value !== this.state.result) {
this.setState({ result: this.props.value || 0 });
}
}
onFocusHandler() {
const { result } = this.state;
this.setState({
isFocus: true,
inputValue: result.toString()
});
}
onBlurHandler() {
const { inputValue } = this.state;
const matchNumber = inputValue.match(/\d+(\.\d+)?/);
if (matchNumber !== null) {
this.compileResult(parseFloat(matchNumber[0]));
}
this.setState({
isFocus: false,
inputValue: ''
});
}
onChangeHandler(e) {
this.setState({
inputValue: e.target.value
});
utils_1.stopReactPropagation(e);
}
doAddition() {
const { result } = this.state;
const { step } = this.props;
this.compileResult(typeof result === 'number' ? result + step : step);
}
doSubtraction() {
const { result } = this.state;
const { step } = this.props;
this.compileResult(typeof result === 'number' ? result - step : -step);
}
compileResult(result) {
const { min, max, onChange, step } = this.props;
if (typeof result === 'number') {
if (utils_1.isExist(min) && result < min) {
return;
}
if (utils_1.isExist(max) && result > max) {
return;
}
}
const precision = step - parseInt(step.toString(), 10) === 0 ?
0 : (step - parseInt(step.toString(), 10)).toString().length - 2;
this.setState({
result: precision === 0 ? Math.floor(result) : parseFloat(result.toFixed(precision))
}, () => {
if (onChange) {
onChange(result);
}
});
}
onKeyDownHandler(e) {
switch (e.keyCode) {
case 9:
return;
case 38:
case 39:
this.doAddition();
break;
case 37:
case 40:
this.doSubtraction();
break;
}
utils_1.stopReactPropagation(e);
e.preventDefault();
}
render() {
const { disabled, formatter, max, min, editable, className, style, tabIndex } = this.props;
const { result, isFocus, inputValue } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass('input-number')]: true,
[utils_1.preClass('input-number-focused')]: isFocus,
[utils_1.preClass('input-number-disabled')]: disabled,
[className]: utils_1.isExist(className)
});
const increaseClass = classnames_1.default({
[utils_1.preClass('input-number-btn')]: true,
[utils_1.preClass('input-number-btn-disabled')]: result === max || disabled
});
const subtractClass = classnames_1.default({
[utils_1.preClass('input-number-btn')]: true,
[utils_1.preClass('input-number-btn-disabled')]: result === min || disabled
});
return (React.createElement("div", { style: style, className: componentClass, tabIndex: disabled ? -1 : tabIndex, onKeyDown: disabled ? null : this.onKeyDownHandler },
React.createElement("input", { onFocus: this.onFocusHandler, onBlur: this.onBlurHandler, onChange: this.onChangeHandler, type: 'text', tabIndex: -1, className: utils_1.preClass('input-number-input'), readOnly: !editable, disabled: disabled, value: isFocus ? inputValue : utils_1.isExist(formatter) ? formatter(result) : result }),
React.createElement("div", { className: utils_1.preClass('input-number-operate') },
React.createElement("button", { className: increaseClass, tabIndex: -1, onClick: disabled ? null : this.doAddition },
React.createElement(icon_1.default, { type: 'arrow-top' })),
React.createElement("button", { className: subtractClass, tabIndex: -1, onClick: disabled ? null : this.doSubtraction },
React.createElement(icon_1.default, { type: 'arrow-down' })))));
}
}
InputNumber.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
tabIndex: PropTypes.number,
disabled: PropTypes.bool,
onChange: PropTypes.func,
defaultValue: PropTypes.number,
value: PropTypes.number,
step: PropTypes.number,
max: PropTypes.number,
min: PropTypes.number,
formatter: PropTypes.func,
editable: PropTypes.bool
};
InputNumber.defaultProps = {
disabled: false,
tabIndex: 0,
step: 1,
editable: true,
defaultValue: 0
};
exports.default = InputNumber;