antd-color-editor/lib/ScalePreview/index.js

An open-source color editor for designing color system

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/ScalePreview/index.tsx
var ScalePreview_exports = {};
__export(ScalePreview_exports, {
  default: () => ScalePreview_default
});
module.exports = __toCommonJS(ScalePreview_exports);
var import_icons = require("@ant-design/icons");
var import_pro_editor = require("@ant-design/pro-editor");
var import_antd = require("antd");
var import_antd_style = require("antd-style");
var import_react = require("react");
var import_styled_components = __toESM(require("styled-components"));
var import_genScalesByConfig = require("../genScalesByConfig");
var import__ = require("../index");
var Collapse = import_pro_editor.CollapseTitle;
var CollapseView = import_styled_components.default.div`
  .studio-collapse-title {
    overflow: auto;
    background: ${({ theme }) => theme.colorBgContainer};
    border-radius: ${({ theme }) => theme.borderRadius}px !important;
  }

  .studio-collapse-title-collapsed,
  .studio-collapse-title-expand {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  }

  .studio-divider {
    margin-top: 8px !important;
    border-color: ${({ theme }) => theme.colorBorderSecondary};
  }
`;
var ColorAvatar = import_styled_components.default.div`
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
`;
var ScalePreview = (0, import_react.memo)(
  ({
    color = {
      color: "#1677FF",
      title: "nuname",
      type: "normal"
    },
    config = import_genScalesByConfig.defaultEditorConfig,
    displayConfig = {
      colorType: "hex",
      showDetail: false
    },
    scales
  }) => {
    const { isDarkMode } = (0, import_antd_style.useThemeMode)();
    const { generateGroup } = (0, import__.useSketchJSON)();
    const ref = (0, import_react.useRef)();
    const { system, stepFliter, generate } = config;
    const { pattern } = system;
    const { colorType, showDetail } = displayConfig;
    const colorsTest = (0, import__.genScaleTestList)(scales, [
      color.color,
      (color == null ? void 0 : color.darkColor) || color.color
    ]);
    return /* @__PURE__ */ React.createElement(CollapseView, { isDarkMode }, /* @__PURE__ */ React.createElement(
      Collapse,
      {
        defaultExpand: true,
        extra: () => /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(
          import_pro_editor.ActionIcon,
          {
            icon: /* @__PURE__ */ React.createElement(import_icons.SketchOutlined, null),
            onClick: () => generateGroup(ref.current),
            title: "复制为 Sketch 素材贴"
          }
        ), scales.dark.length >= 3 && /* @__PURE__ */ React.createElement(import__.AccessibilityTag, { colors: colorsTest })),
        title: /* @__PURE__ */ React.createElement(import_antd.Space, { align: "center", size: 4 }, /* @__PURE__ */ React.createElement(ColorAvatar, { style: { background: color.color } }), pattern.isolateDark && /* @__PURE__ */ React.createElement(ColorAvatar, { style: { background: color.darkColor } }), color.title)
      },
      /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
        import__.ScaleBlock,
        {
          colorType,
          highLights: pattern.isFliterStep ? stepFliter : [],
          isFliterStep: pattern.isFliterStep && !pattern.displayFliterStep,
          midHighLight: generate.step.up,
          scale: scales,
          showDetail
        }
      ))
    ));
  }
);
var ScalePreview_default = ScalePreview;