zent
Version:
一套前端设计语言和基于React的实现
53 lines (52 loc) • 2.15 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import reactCSS from './helpers/reactcss';
import { Swatch } from './common';
var prefixCls = 'zent-color-picker';
var SketchPresetColors = function (_a) {
var colors = _a.colors, onClick = _a.onClick, type = _a.type;
var styles = reactCSS({
default: {
colors: {
margin: '0 -10px',
padding: '10px 0 0 10px',
borderTop: '1px solid #eee',
display: 'flex',
flexWrap: 'wrap',
position: 'relative',
},
swatchWrap: {
width: '16px',
height: '16px',
margin: '0 10px 10px 0',
},
swatch: {
borderRadius: '3px',
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',
},
},
'no-presets': {
colors: {
display: 'none',
},
},
}, {
'no-presets': !colors || !colors.length,
});
var handleClick = function (hex, e) {
onClick({
hex: hex,
source: 'hex',
}, e);
};
if (type === 'simple') {
return (_jsx("div", __assign({ className: prefixCls + "-colors-select", "data-zv": '10.0.17' }, { children: colors.map(function (color) { return (_jsx("div", { className: prefixCls + "-colors-select__preview", style: { backgroundColor: color }, onClick: function () { return onClick(color); }, title: color, "data-zv": '10.0.17' }, color)); }) }), void 0));
}
return (_jsx("div", __assign({ style: styles.colors, "data-zv": '10.0.17' }, { children: colors.map(function (colorObjOrString) {
var c = typeof colorObjOrString === 'string'
? { color: colorObjOrString }
: colorObjOrString;
return (_jsx("div", __assign({ style: styles.swatchWrap, "data-zv": '10.0.17' }, { children: _jsx(Swatch, __assign({}, c, { style: styles.swatch, onClick: handleClick }), void 0) }), c.color));
}) }), void 0));
};
export default SketchPresetColors;