antd-color-editor/lib/ScaleRow/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/ScaleRow/index.tsx
var ScaleRow_exports = {};
__export(ScaleRow_exports, {
  default: () => ScaleRow_default
});
module.exports = __toCommonJS(ScaleRow_exports);
var import_antd = require("antd");
var import_polished = require("polished");
var import_react = require("react");
var import_react_copy_to_clipboard = require("react-copy-to-clipboard");
var import_styled_components = __toESM(require("styled-components"));
var import__ = require("../index");
var AlphaLightBg = "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px";
var AlphaDarkBg = "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px";
var ScaleBox = import_styled_components.default.div`
  cursor: pointer;

  position: relative;

  width: 48px;
  height: 32px;

  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;

  &:active {
    transform: scale(0.95);
  }
`;
var ScaleBoxWide = (0, import_styled_components.default)(ScaleBox)`
  width: 180px;
  font-family: var(--leva-fonts-mono);
  font-size: var(--leva-fontSizes-root);
`;
var ScaleItem = import_styled_components.default.div`
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
`;
var ScaleRowTitle = import_styled_components.default.div`
  display: flex;
  align-items: center;
  width: 64px;
  height: 32px;
`;
var Text = import_styled_components.default.div`
  opacity: 0.5;
`;
var ScaleRow = (0, import_react.memo)(({ title, scale, solidScale, colorType, showDetail, alpha }) => {
  const isDark = title.includes("dark");
  let style = {};
  switch (title) {
    case "lightA": {
      style = { background: AlphaLightBg, backgroundColor: "#fff" };
      break;
    }
    case "darkA": {
      style = { background: AlphaDarkBg, backgroundColor: "#000" };
      break;
    }
    default: {
      break;
    }
  }
  return /* @__PURE__ */ React.createElement(import_antd.Space, { direction: showDetail ? "vertical" : "horizontal", size: 2 }, /* @__PURE__ */ React.createElement(ScaleRowTitle, { key: "title", style: showDetail ? {} : { padding: 8 } }, /* @__PURE__ */ React.createElement(Text, null, title)), scale.map((color, index) => {
    if (!showDetail)
      return /* @__PURE__ */ React.createElement(import_react_copy_to_clipboard.CopyToClipboard, { key: color, text: color }, /* @__PURE__ */ React.createElement(ScaleBox, { onClick: () => import_antd.message.success(color), style, title: color }, /* @__PURE__ */ React.createElement(ScaleItem, { style: { backgroundColor: color } })));
    let text = (0, import__.colorTypeFormat)(color, colorType, isDark);
    text = text.replace(" ", "");
    return /* @__PURE__ */ React.createElement(import_react_copy_to_clipboard.CopyToClipboard, { key: color + index, text }, /* @__PURE__ */ React.createElement(ScaleBoxWide, { onClick: () => import_antd.message.success(text), style, title: color }, /* @__PURE__ */ React.createElement(
      ScaleItem,
      {
        style: {
          backgroundColor: color,
          color: (0, import_polished.readableColor)(
            String(alpha ? solidScale == null ? void 0 : solidScale[index] : color),
            alpha ? solidScale == null ? void 0 : solidScale[isDark ? 0 : solidScale.length - 1] : scale[isDark ? 0 : scale.length - 1],
            alpha ? solidScale == null ? void 0 : solidScale[isDark ? solidScale.length - 1 : 0] : scale[isDark ? scale.length - 1 : 0],
            true
          )
        }
      },
      /* @__PURE__ */ React.createElement("div", null, text)
    )));
  }));
});
var ScaleRow_default = ScaleRow;