kitchen-color-studio/es/ScaleRow/index.js

an open-source color editor for designing color system

import { message, Space } from 'antd';
import { readableColor } from 'polished';
import { memo } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import styled from 'styled-components';
import { colorTypeFormat } from "./..";

/******************************************************
 *********************** Style *************************
 ******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
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 = styled.div.withConfig({
  displayName: "ScaleBox",
  componentId: "kitchen-color-studio__sc-dgyzry-0"
})(["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 = styled(ScaleBox).withConfig({
  displayName: "ScaleBoxWide",
  componentId: "kitchen-color-studio__sc-dgyzry-1"
})(["width:180px;font-family:var(--leva-fonts-mono);font-size:var(--leva-fontSizes-root);"]);
var ScaleItem = styled.div.withConfig({
  displayName: "ScaleItem",
  componentId: "kitchen-color-studio__sc-dgyzry-2"
})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;"]);
var ScaleRowTitle = styled.div.withConfig({
  displayName: "ScaleRowTitle",
  componentId: "kitchen-color-studio__sc-dgyzry-3"
})(["display:flex;align-items:center;width:64px;height:32px;"]);
var Text = styled.div.withConfig({
  displayName: "Text",
  componentId: "kitchen-color-studio__sc-dgyzry-4"
})(["opacity:0.5;"]);

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

var ScaleRow = /*#__PURE__*/memo(function (_ref) {
  var title = _ref.title,
    scale = _ref.scale,
    solidScale = _ref.solidScale,
    colorType = _ref.colorType,
    showDetail = _ref.showDetail,
    alpha = _ref.alpha;
  var isDark = title.includes('dark');
  var style = {};
  switch (title) {
    case 'lightA':
      style = {
        backgroundColor: '#fff',
        background: AlphaLightBg
      };
      break;
    case 'darkA':
      style = {
        backgroundColor: '#000',
        background: AlphaDarkBg
      };
      break;
    default:
      break;
  }
  return /*#__PURE__*/_jsxs(Space, {
    direction: !showDetail ? 'horizontal' : 'vertical',
    size: 2,
    children: [/*#__PURE__*/_jsx(ScaleRowTitle, {
      style: showDetail ? {} : {
        padding: 8
      },
      children: /*#__PURE__*/_jsx(Text, {
        children: title
      })
    }, "title"), scale.map(function (color, index) {
      if (!showDetail) return /*#__PURE__*/_jsx(CopyToClipboard, {
        text: color,
        children: /*#__PURE__*/_jsx(ScaleBox, {
          onClick: function onClick() {
            return message.success(color);
          },
          style: style,
          title: color,
          children: /*#__PURE__*/_jsx(ScaleItem, {
            style: {
              backgroundColor: color
            }
          })
        })
      }, color);
      // ------showDetail

      var text = colorTypeFormat(color, colorType, isDark);
      text = text.replace(/ /g, '');
      return /*#__PURE__*/_jsx(CopyToClipboard, {
        text: text,
        children: /*#__PURE__*/_jsx(ScaleBoxWide, {
          onClick: function onClick() {
            return message.success(text);
          },
          style: style,
          title: color,
          children: /*#__PURE__*/_jsx(ScaleItem, {
            style: {
              backgroundColor: color,
              color: readableColor(String(alpha ? solidScale === null || solidScale === void 0 ? void 0 : solidScale[index] : color), alpha ? solidScale === null || solidScale === void 0 ? void 0 : solidScale[isDark ? 0 : solidScale.length - 1] : scale[isDark ? 0 : scale.length - 1], alpha ? solidScale === null || solidScale === void 0 ? void 0 : solidScale[isDark ? solidScale.length - 1 : 0] : scale[isDark ? scale.length - 1 : 0], true)
            },
            children: /*#__PURE__*/_jsx("div", {
              children: text
            })
          })
        })
      }, color + index);
    })]
  });
});
export default ScaleRow;