zent
Version:
一套前端设计语言和基于React的实现
108 lines (107 loc) • 4.67 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import reactCSS from './helpers/reactcss';
import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from './common';
import SketchFields from './SketchFields';
import SketchPresetColors from './SketchPresetColors';
var Sketch = function (_a) {
var width = _a.width, rgb = _a.rgb, hex = _a.hex, hsv = _a.hsv, hsl = _a.hsl, onChange = _a.onChange, showAlpha = _a.showAlpha, presetColors = _a.presetColors, renderers = _a.renderers, className = _a.className, type = _a.type;
var styles = reactCSS({
default: {
picker: {
width: width,
padding: '10px 10px 0',
boxSizing: 'initial',
background: '#fff',
borderRadius: '4px',
boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
},
saturation: {
width: '100%',
paddingBottom: '75%',
position: 'relative',
overflow: 'hidden',
},
Saturation: {
radius: '3px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
controls: {
display: 'flex',
},
sliders: {
padding: '4px 0',
flex: '1',
},
color: {
width: '24px',
height: '24px',
position: 'relative',
marginTop: '4px',
marginLeft: '4px',
borderRadius: '3px',
},
activeColor: {
absolute: '0px 0px 0px 0px',
borderRadius: '2px',
background: "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + rgb.a + ")",
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
hue: {
position: 'relative',
height: '10px',
overflow: 'hidden',
},
Hue: {
radius: '2px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
alpha: {
position: 'relative',
height: '10px',
marginTop: '4px',
overflow: 'hidden',
},
Alpha: {
radius: '2px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
},
showAlpha: {
color: {
height: '10px',
},
hue: {
height: '10px',
},
alpha: {
display: 'none',
},
},
}, { showAlpha: !showAlpha });
return (_jsxs("div", __assign({ style: styles.picker, className: className, "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ style: styles.saturation, "data-zv": '10.0.17' }, { children: _jsx(Saturation, { style: styles.Saturation, hsl: hsl, hsv: hsv, onChange: onChange }, void 0) }), void 0), _jsxs("div", __assign({ style: styles.controls, className: "flexbox-fix", "data-zv": '10.0.17' }, { children: [_jsxs("div", __assign({ style: styles.sliders, "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ style: styles.hue, "data-zv": '10.0.17' }, { children: _jsx(Hue, { style: styles.Hue, hsl: hsl, onChange: onChange }, void 0) }), void 0), _jsx("div", __assign({ style: styles.alpha, "data-zv": '10.0.17' }, { children: _jsx(Alpha, { style: styles.Alpha, rgb: rgb, hsl: hsl, renderers: renderers, onChange: onChange }, void 0) }), void 0)] }), void 0), _jsxs("div", __assign({ style: styles.color, "data-zv": '10.0.17' }, { children: [_jsx(Checkboard, {}, void 0), _jsx("div", { style: styles.activeColor, "data-zv": '10.0.17' }, void 0)] }), void 0)] }), void 0), _jsx(SketchFields, { rgb: rgb, hsl: hsl, hex: hex, onChange: onChange, showAlpha: showAlpha }, void 0), _jsx(SketchPresetColors, { colors: presetColors, onClick: onChange, type: type }, void 0)] }), void 0));
};
Sketch.defaultProps = {
presetColors: [
'#FFFFFF',
'#F8F8F8',
'#F2F2F2',
'#999999',
'#444444',
'#FF4444',
'#FF6500',
'#FF884D',
'#FFCD00',
'#3FBD00',
'#3FBC87',
'#00CD98',
'#5197FF',
'#BADCFF',
'#FFEFB8',
],
width: 200,
showAlpha: false,
className: '',
};
var ColorBoard = ColorWrap(Sketch);
export default ColorBoard;