antd-color-editor/es/ScaleRow/index.js

An open-source color editor for designing color system

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Space, message } 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(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  position: relative;\n\n  width: 48px;\n  height: 32px;\n\n  background-position:\n    0 0,\n    0 8px,\n    8px -8px,\n    -8px 0;\n  background-size: 16px 16px;\n\n  &:active {\n    transform: scale(0.95);\n  }\n"])));
var ScaleBoxWide = styled(ScaleBox)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 180px;\n  font-family: var(--leva-fonts-mono);\n  font-size: var(--leva-fontSizes-root);\n"])));
var ScaleItem = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n  height: 100%;\n"])));
var ScaleRowTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 64px;\n  height: 32px;\n"])));
var Text = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  opacity: 0.5;\n"])));

/******************************************************
 ************************* 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 = {
          background: AlphaLightBg,
          backgroundColor: '#fff'
        };
        break;
      }
    case 'darkA':
      {
        style = {
          background: AlphaDarkBg,
          backgroundColor: '#000'
        };
        break;
      }
    default:
      {
        break;
      }
  }
  return /*#__PURE__*/_jsxs(Space, {
    direction: showDetail ? 'vertical' : 'horizontal',
    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(' ', '');
      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;