chowa
Version:
UI component library based on React
150 lines (149 loc) • 6.14 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 = require("classnames");
const utils_1 = require("../utils");
const dropdown_1 = require("../dropdown");
const color_adjustment_1 = require("./color-adjustment");
const icon_1 = require("../icon");
class ColorPicker extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.value || props.defaultValue,
selectorVisible: props.visible || props.defaultVisible,
clearVisible: false
};
[
'onChangeHandler',
'onConfirmHandler',
'onVisibleChangeHandler',
'clearResult',
'onMouseEnterHandler',
'onMouseLeaveHandler',
'onKeyboardOperation'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onKeyboardOperation(e) {
const { selectorVisible } = this.state;
if (selectorVisible) {
if (e.keyCode === 9 || e.keyCode === 27) {
return this.setState({ selectorVisible: false });
}
}
else {
if (e.keyCode === 13 || e.keyCode === 40) {
this.setState({ selectorVisible: true });
}
}
}
onMouseEnterHandler() {
this.setState({ clearVisible: true });
}
onMouseLeaveHandler() {
this.setState({ clearVisible: false });
}
componentDidUpdate(preProps) {
if (preProps.value !== this.props.value && this.props.value !== this.state.result) {
this.setState({ result: this.props.value });
}
if (preProps.visible !== this.props.visible && this.props.visible !== this.state.selectorVisible) {
this.setState({ selectorVisible: this.props.visible });
}
}
onChangeHandler(color) {
this.setState({ result: color });
if (this.props.onChange) {
this.props.onChange(color);
}
}
onConfirmHandler() {
this.setState({ selectorVisible: false });
}
onVisibleChangeHandler(v) {
this.setState({ selectorVisible: v });
}
clearResult(e) {
this.onChangeHandler(undefined);
utils_1.stopReactPropagation(e);
}
renderDrop() {
const { result } = this.state;
const { mode, alpha, recommend, determinable, clearable } = this.props;
return (React.createElement("div", { className: utils_1.preClass('color-drop') },
React.createElement(color_adjustment_1.default, { onConfirm: this.onConfirmHandler, onChange: this.onChangeHandler, clearable: clearable, determinable: determinable, recommend: recommend, alpha: alpha, mode: mode, value: result })));
}
render() {
const { clearVisible, result, selectorVisible } = this.state;
const { disabled, externalWheelHide, showArrow, className, clearable, alpha, tabIndex, style } = this.props;
const emptyResult = result === undefined;
const componentClass = classNames({
[utils_1.preClass('color-picker')]: true,
[utils_1.preClass('color-picker-focused')]: selectorVisible,
[utils_1.preClass('color-picker-disabled')]: disabled,
[className]: utils_1.isExist(className)
});
const arrowClass = classNames({
[utils_1.preClass('color-arrow')]: true,
[utils_1.preClass('color-arrow-active')]: selectorVisible
});
const colorClass = classNames({
[utils_1.preClass('color-result')]: true,
[utils_1.preClass('color-with-alpah')]: alpha,
[utils_1.preClass('color-empty-result')]: emptyResult
});
return (React.createElement(dropdown_1.default, { role: 'color-picker', visible: selectorVisible, disabled: disabled, externalWheelHide: externalWheelHide, onVisibleChange: this.onVisibleChangeHandler, content: this.renderDrop(), placement: 'bottom-left' },
React.createElement("div", { style: style, tabIndex: disabled ? -1 : tabIndex, onKeyDown: disabled ? null : this.onKeyboardOperation, onMouseEnter: disabled ? null : this.onMouseEnterHandler, onMouseLeave: disabled ? null : this.onMouseLeaveHandler, className: componentClass },
React.createElement("div", { className: colorClass },
emptyResult && React.createElement(icon_1.default, { type: 'close' }),
!emptyResult &&
React.createElement("div", { className: utils_1.preClass('color-display'), style: { background: result } })),
showArrow &&
React.createElement("span", { className: arrowClass },
React.createElement(icon_1.default, { type: 'arrow-down' })),
clearable &&
React.createElement(utils_1.ClearButton, { visible: clearVisible && !emptyResult, onClick: this.clearResult }))));
}
}
ColorPicker.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
visible: PropTypes.bool,
defaultVisible: PropTypes.bool,
externalWheelHide: PropTypes.bool,
tabIndex: PropTypes.number,
value: PropTypes.string,
defaultValue: PropTypes.string,
mode: PropTypes.oneOf(['rgb', 'hex', 'hsl']),
alpha: PropTypes.bool,
onChange: PropTypes.func,
recommend: PropTypes.array,
determinable: PropTypes.bool,
clearable: PropTypes.bool,
disabled: PropTypes.bool,
showArrow: PropTypes.bool
};
ColorPicker.defaultProps = {
visible: false,
defaultVisible: false,
externalWheelHide: true,
tabIndex: 0,
mode: 'rgb',
alpha: false,
determinable: true,
clearable: false,
disabled: false,
showArrow: true
};
exports.default = ColorPicker;