antd-color-editor
Version:
An open-source color editor for designing color system
69 lines (65 loc) • 2.56 kB
JavaScript
var _templateObject, _templateObject2, _templateObject3;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Select, Space } from 'antd';
import { memo } from 'react';
import styled from 'styled-components';
import { GenerateScale } from "../..";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Option = Select.Option;
/******************************************************
*********************** Style *************************
******************************************************/
var View = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0 12px;\n"])));
var ColorAvatar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 12px;\n height: 12px;\n border-radius: 3px;\n"])));
var SelectPanel = styled(Select)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-radius: 3px;\n"])));
/******************************************************
************************* Dom *************************
******************************************************/
var StepFliter = /*#__PURE__*/memo(function (_ref) {
var config = _ref.config,
_ref$color = _ref.color,
color = _ref$color === void 0 ? {
color: '#1677FF',
title: 'nuname',
type: 'normal'
} : _ref$color,
defaultFliter = _ref.defaultFliter,
onChange = _ref.onChange;
var generate = new GenerateScale(config);
var colorList = generate.gen(color.color, {
neutral: color.type === 'neutral',
theme: 'light'
});
var defaultValue = defaultFliter || [];
var genOption = colorList.map(function (c, index) {
if (!defaultFliter) defaultValue.push(index);
var label = /*#__PURE__*/_jsxs(Space, {
children: [/*#__PURE__*/_jsx(ColorAvatar, {
style: {
background: c
}
}), index + 1]
});
return /*#__PURE__*/_jsx(Option, {
label: label,
value: index,
children: label
}, index);
});
return /*#__PURE__*/_jsx(View, {
children: /*#__PURE__*/_jsx(SelectPanel, {
defaultValue: defaultValue,
mode: "multiple",
onChange: onChange,
optionLabelProp: "label",
placeholder: "\u7B5B\u9009\u9700\u8981\u7684\u68AF\u5EA6",
size: "small",
style: {
width: '100%'
},
children: genOption
})
});
});
export default StepFliter;