kitchen-color-studio/es/ColorStudio/components/StepFliter.js

an open-source color editor for designing color system

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.withConfig({
  displayName: "View",
  componentId: "kitchen-color-studio__sc-7b79ci-0"
})(["padding:0 12px;"]);
var ColorAvatar = styled.div.withConfig({
  displayName: "ColorAvatar",
  componentId: "kitchen-color-studio__sc-7b79ci-1"
})(["width:12px;height:12px;border-radius:3px;"]);
var SelectPanel = styled(Select).withConfig({
  displayName: "SelectPanel",
  componentId: "kitchen-color-studio__sc-7b79ci-2"
})(["border-radius:3px;"]);

/******************************************************
 ************************* Dom *************************
 ******************************************************/

var StepFliter = /*#__PURE__*/memo(function (_ref) {
  var config = _ref.config,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? {
      title: 'nuname',
      type: 'normal',
      color: '#1677FF'
    } : _ref$color,
    defaultFliter = _ref.defaultFliter,
    onChange = _ref.onChange;
  var generate = new GenerateScale(config);
  var colorList = generate.gen(color.color, {
    theme: 'light',
    neutral: color.type === 'neutral'
  });
  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;