chowa
Version:
UI component library based on React
62 lines (61 loc) • 2.01 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 utils_1 = require("../utils");
const tool_1 = require("./tool");
class ColorInput extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.hsbToStr(props.value)
};
[
'onInputChangeHandler',
'onBlurHandler',
'onKeyDownHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (!utils_1.isEqual(preProps.value, this.props.value)) {
this.setState({ result: this.props.hsbToStr(this.props.value) });
}
}
onInputChangeHandler(e) {
this.setState({ result: e.target.value });
}
onBlurHandler() {
const { result } = this.state;
if (!tool_1.isStrColor(result)) {
this.setState({ result: this.props.hsbToStr(this.props.value) });
}
else {
const value = tool_1.anyToHsb(result);
this.setState({ result: this.props.hsbToStr(value) });
if (this.props.onChange) {
this.props.onChange(value);
}
}
}
onKeyDownHandler(e) {
if (e.keyCode === 13) {
this.inputEle.blur();
}
}
render() {
const { result } = this.state;
return (React.createElement("input", { ref: (ele) => {
this.inputEle = ele;
}, tabIndex: -1, spellCheck: false, value: result, onChange: this.onInputChangeHandler, onBlur: this.onBlurHandler, onKeyDown: this.onKeyDownHandler, className: utils_1.preClass('color-input') }));
}
}
exports.default = ColorInput;