zent
Version:
一套前端设计语言和基于React的实现
83 lines (82 loc) • 3.75 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import cx from 'classnames';
import ColorBoard from './ColorBoard';
import SketchPresetColors from './SketchPresetColors';
import Popover from '../popover';
import { DisabledContext } from '../disabled';
var prefixCls = 'zent-color-picker';
var ColorPicker = (function (_super) {
__extends(ColorPicker, _super);
function ColorPicker() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
popVisible: false,
};
_this.handleChange = function (color) {
var _a = _this.props, onChange = _a.onChange, showAlpha = _a.showAlpha;
var transColor = color;
if (typeof color === 'object') {
transColor = showAlpha ? color.rgba : color.hex;
}
onChange(transColor);
};
_this.handleVisibleChange = function (visible) {
if (_this.disabled) {
return;
}
_this.setState({
popVisible: visible,
});
};
return _this;
}
Object.defineProperty(ColorPicker.prototype, "disabled", {
get: function () {
var _a = this.props.disabled, disabled = _a === void 0 ? this.context.value : _a;
return disabled;
},
enumerable: false,
configurable: true
});
ColorPicker.prototype.render = function () {
var _a;
var _b = this.props, color = _b.color, showAlpha = _b.showAlpha, className = _b.className, wrapperClassName = _b.wrapperClassName, type = _b.type, presetColors = _b.presetColors;
var popVisible = this.state.popVisible;
var openClassName = popVisible ? prefixCls + "--open" : '';
var backgroundColor = color;
return (_jsxs(Popover, __assign({ className: cx(prefixCls + "-popover", className), position: Popover.Position.AutoBottomLeft, cushion: 5, visible: popVisible, onVisibleChange: this.handleVisibleChange }, { children: [_jsx(Popover.Trigger.Click, __assign({ toggle: true }, { children: _jsx("div", __assign({ className: cx(prefixCls, wrapperClassName, openClassName, (_a = {},
_a[prefixCls + "_disabled"] = this.disabled,
_a)), tabIndex: 0, "data-zv": '10.0.17' }, { children: _jsx("div", __assign({ className: prefixCls + "__text", "data-zv": '10.0.17' }, { children: _jsx("div", { className: prefixCls + "__preview", style: { backgroundColor: backgroundColor }, "data-zv": '10.0.17' }, void 0) }), void 0) }), void 0) }), void 0), _jsx(Popover.Content, { children: type === 'simple' ? (_jsx(SketchPresetColors, { colors: presetColors, onClick: this.handleChange, type: type }, void 0)) : (_jsx(ColorBoard, { color: color, showAlpha: showAlpha, onChange: this.handleChange, type: type }, void 0)) }, void 0)] }), void 0));
};
ColorPicker.defaultProps = {
showAlpha: false,
onChange: function () { },
className: '',
wrapperClassName: '',
type: 'default',
presetColors: [
'#FFFFFF',
'#F8F8F8',
'#F2F2F2',
'#999999',
'#444444',
'#FF4444',
'#FF6500',
'#FF884D',
'#FFCD00',
'#3FBD00',
'#3FBC87',
'#00CD98',
'#5197FF',
'#BADCFF',
'#FFEFB8',
],
};
ColorPicker.ColorBoard = ColorBoard;
ColorPicker.contextType = DisabledContext;
return ColorPicker;
}(PureComponent));
export { ColorPicker };
export default ColorPicker;