chowa
Version:
UI component library based on React
90 lines (89 loc) • 3.64 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");
const color_saturation_1 = require("./color-saturation");
const color_hue_1 = require("./color-hue");
const color_alpha_1 = require("./color-alpha");
const color_recommend_1 = require("./color-recommend");
const color_input_1 = require("./color-input");
const button_1 = require("../button");
class ColorAdjustment extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: tool_1.anyToHsb(props.value)
};
[
'hsbToStr',
'onChangHandler',
'onClearHandler',
'onConfrimHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onConfrimHandler() {
if (this.props.onChange) {
this.props.onChange(this.hsbToStr(this.state.result));
}
if (this.props.onConfirm) {
this.props.onConfirm();
}
}
onClearHandler() {
if (this.props.onChange) {
this.props.onChange(undefined);
}
}
componentDidUpdate(preProps) {
if (preProps.value !== this.props.value) {
this.setState({ result: tool_1.anyToHsb(this.props.value) });
}
}
onChangHandler(hsb) {
this.setState({ result: hsb });
if (!this.props.determinable && this.props.onChange) {
this.props.onChange(this.hsbToStr(hsb));
}
}
hsbToStr(value) {
const { mode, alpha } = this.props;
switch (mode) {
case 'hex':
return tool_1.toStrHex(value);
case 'rgb':
return tool_1.toStrRgb(value, alpha);
case 'hsl':
return tool_1.toStrHsl(value, alpha);
}
}
render() {
const { alpha, recommend, mode, clearable, determinable } = this.props;
const { result } = this.state;
return (React.createElement("div", { className: utils_1.preClass('color-adjustment') },
React.createElement("div", { className: utils_1.preClass('color-hsb') },
React.createElement(color_saturation_1.default, { value: result, onChange: this.onChangHandler }),
React.createElement(color_hue_1.default, { value: result, onChange: this.onChangHandler })),
alpha && React.createElement(color_alpha_1.default, { value: result, onChange: this.onChangHandler }),
recommend &&
React.createElement(color_recommend_1.default, { colors: recommend, value: result, onChange: this.onChangHandler }),
React.createElement(color_input_1.default, { value: result, onChange: this.onChangHandler, mode: mode, hsbToStr: this.hsbToStr, alpha: alpha }),
(clearable || determinable) &&
React.createElement("div", { className: utils_1.preClass('color-btns') },
clearable &&
React.createElement(button_1.default, { size: 'small', onClick: this.onClearHandler }, "\u6E05\u7A7A"),
determinable &&
React.createElement(button_1.default, { size: 'small', type: 'primary', onClick: this.onConfrimHandler }, "\u786E\u5B9A"))));
}
}
exports.default = ColorAdjustment;