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

an open-source color editor for designing color system

import { useThemeMode } from 'antd-style';
import { useControls, useCreateStore } from 'leva';
import { memo } from 'react';
import styled from 'styled-components';
import { AccessBlock, AccessibilityTag, genScaleTestList, LevaPanel, PanelGroup } from "../..";

/******************************************************
 *********************** Style *************************
 ******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var PreviewView = styled.div.withConfig({
  displayName: "PreviewView",
  componentId: "kitchen-color-studio__sc-1qptmbw-0"
})(["padding:0 12px;"]);
var ColorAvatar = styled.div.withConfig({
  displayName: "ColorAvatar",
  componentId: "kitchen-color-studio__sc-1qptmbw-1"
})(["display:inline-block;width:24px;height:24px;margin-right:8px;border-radius:3px;"]);
var SubShowcase = styled.div.withConfig({
  displayName: "SubShowcase",
  componentId: "kitchen-color-studio__sc-1qptmbw-2"
})(["position:relative;margin-top:4px;padding:12px;background:", ";border:1px solid ", ";border-radius:4px;"], function (_ref) {
  var color2 = _ref.color2;
  return color2;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colorBorderSecondary;
});

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

var AccessPanel = /*#__PURE__*/memo(function (_ref3) {
  var data = _ref3.data;
  var _useThemeMode = useThemeMode(),
    isDarkMode = _useThemeMode.isDarkMode;
  var accessStore = useCreateStore();
  var _useControls = useControls({
      color1: {
        label: '前景色',
        value: '#1677FF'
      },
      color2: {
        label: '背景色',
        value: isDarkMode ? '#000e5e' : '#f9f9fe'
      }
    }, {
      store: accessStore
    }),
    color1 = _useControls.color1,
    color2 = _useControls.color2;
  var demoPanel = /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(LevaPanel, {
      store: accessStore
    }), /*#__PURE__*/_jsxs(PreviewView, {
      children: [/*#__PURE__*/_jsx(AccessBlock, {
        color1: color1,
        color2: color2
      }), /*#__PURE__*/_jsxs(SubShowcase, {
        color2: color2,
        children: [/*#__PURE__*/_jsxs("div", {
          style: {
            display: 'flex',
            height: 40,
            marginBottom: 12
          },
          children: [/*#__PURE__*/_jsx("div", {
            style: {
              background: color1,
              flex: 1
            }
          }), /*#__PURE__*/_jsx("div", {
            style: {
              background: color1,
              flex: 1,
              opacity: 0.75
            }
          }), /*#__PURE__*/_jsx("div", {
            style: {
              background: color1,
              flex: 1,
              opacity: 0.5
            }
          }), /*#__PURE__*/_jsx("div", {
            style: {
              background: color1,
              flex: 1,
              opacity: 0.25
            }
          })]
        }), /*#__PURE__*/_jsxs("div", {
          style: {
            display: 'flex',
            height: 1,
            marginBottom: 12
          },
          children: [/*#__PURE__*/_jsx("div", {
            style: {
              background: color1,
              flex: 1
            }
          }), /*#__PURE__*/_jsx("div", {
            style: {
              background: color1,
              flex: 1,
              opacity: 0.75
            }
          }), /*#__PURE__*/_jsx("div", {
            style: {
              background: color1,
              flex: 1,
              opacity: 0.5
            }
          }), /*#__PURE__*/_jsx("div", {
            style: {
              background: color1,
              flex: 1,
              opacity: 0.25
            }
          })]
        }), /*#__PURE__*/_jsxs("div", {
          children: [/*#__PURE__*/_jsx("h1", {
            style: {
              color: color1,
              lineHeight: 1,
              textAlign: 'justify'
            },
            children: "ABCDEFG0123456789"
          }), /*#__PURE__*/_jsx("h2", {
            style: {
              color: color1,
              lineHeight: 1,
              textAlign: 'justify'
            },
            children: "ABCDEFG0123456789"
          }), /*#__PURE__*/_jsx("h3", {
            style: {
              color: color1,
              lineHeight: 1,
              textAlign: 'justify'
            },
            children: "ABCDEFG0123456789"
          }), /*#__PURE__*/_jsx("p", {
            style: {
              color: color1,
              lineHeight: 1,
              textAlign: 'justify'
            },
            children: "ABCDEFG0123456789"
          })]
        })]
      })]
    })]
  });
  var accessPanelGroup = [{
    header: '可读性测试',
    panel: demoPanel
  }, {
    header: '色板测试列表',
    panel: data.map(function (item, index) {
      return /*#__PURE__*/_jsxs("div", {
        style: {
          padding: '0 12px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: 8
        },
        children: [/*#__PURE__*/_jsxs("div", {
          style: {
            display: 'flex',
            alignItems: 'center'
          },
          children: [/*#__PURE__*/_jsx(ColorAvatar, {
            style: {
              background: item.color
            }
          }), /*#__PURE__*/_jsx("div", {
            children: item.name
          })]
        }), /*#__PURE__*/_jsx(AccessibilityTag, {
          colors: genScaleTestList(item.scales, [item.color, item.darkColor])
        })]
      }, index);
    })
  }];
  return /*#__PURE__*/_jsx(PanelGroup, {
    panels: accessPanelGroup
  });
});
export default AccessPanel;