antd-color-editor
Version:
An open-source color editor for designing color system
116 lines (110 loc) • 5.85 kB
JavaScript
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/ColorStudio/components/AccessPanel.tsx
var AccessPanel_exports = {};
__export(AccessPanel_exports, {
default: () => AccessPanel_default
});
module.exports = __toCommonJS(AccessPanel_exports);
var import_antd_style = require("antd-style");
var import_leva = require("leva");
var import_react = require("react");
var import_styled_components = __toESM(require("styled-components"));
var import__ = require("../../index");
var PreviewView = import_styled_components.default.div`
padding: 0 12px;
`;
var ColorAvatar = import_styled_components.default.div`
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
border-radius: 3px;
`;
var SubShowcase = import_styled_components.default.div`
position: relative;
margin-top: 4px;
padding: 12px;
background: ${({ color2 }) => color2};
border: 1px solid ${({ theme }) => theme.colorBorderSecondary};
border-radius: 4px;
`;
var AccessPanel = (0, import_react.memo)(({ data }) => {
const { isDarkMode } = (0, import_antd_style.useThemeMode)();
const accessStore = (0, import_leva.useCreateStore)();
const { color1, color2 } = (0, import_leva.useControls)(
{
color1: {
label: "前景色",
value: "#1677FF"
},
color2: {
label: "背景色",
value: isDarkMode ? "#000e5e" : "#f9f9fe"
}
},
{ store: accessStore }
);
const demoPanel = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: accessStore }), /* @__PURE__ */ React.createElement(PreviewView, null, /* @__PURE__ */ React.createElement(import__.AccessBlock, { color1, color2 }), /* @__PURE__ */ React.createElement(SubShowcase, { color2 }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", height: 40, marginBottom: 12 } }, /* @__PURE__ */ React.createElement("div", { style: { background: color1, flex: 1 } }), /* @__PURE__ */ React.createElement("div", { style: { background: color1, flex: 1, opacity: 0.75 } }), /* @__PURE__ */ React.createElement("div", { style: { background: color1, flex: 1, opacity: 0.5 } }), /* @__PURE__ */ React.createElement("div", { style: { background: color1, flex: 1, opacity: 0.25 } })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", height: 1, marginBottom: 12 } }, /* @__PURE__ */ React.createElement("div", { style: { background: color1, flex: 1 } }), /* @__PURE__ */ React.createElement("div", { style: { background: color1, flex: 1, opacity: 0.75 } }), /* @__PURE__ */ React.createElement("div", { style: { background: color1, flex: 1, opacity: 0.5 } }), /* @__PURE__ */ React.createElement("div", { style: { background: color1, flex: 1, opacity: 0.25 } })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h1", { style: { color: color1, lineHeight: 1, textAlign: "justify" } }, "ABCDEFG0123456789"), /* @__PURE__ */ React.createElement("h2", { style: { color: color1, lineHeight: 1, textAlign: "justify" } }, "ABCDEFG0123456789"), /* @__PURE__ */ React.createElement("h3", { style: { color: color1, lineHeight: 1, textAlign: "justify" } }, "ABCDEFG0123456789"), /* @__PURE__ */ React.createElement("p", { style: { color: color1, lineHeight: 1, textAlign: "justify" } }, "ABCDEFG0123456789")))));
const accessPanelGroup = [
{
header: "可读性测试",
panel: demoPanel
},
{
header: "色板测试列表",
panel: data.map((item, index) => /* @__PURE__ */ React.createElement(
"div",
{
key: index,
style: {
alignItems: "center",
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
padding: "0 12px"
}
},
/* @__PURE__ */ React.createElement(
"div",
{
style: {
alignItems: "center",
display: "flex"
}
},
/* @__PURE__ */ React.createElement(ColorAvatar, { style: { background: item.color } }),
/* @__PURE__ */ React.createElement("div", null, item.name)
),
/* @__PURE__ */ React.createElement(import__.AccessibilityTag, { colors: (0, import__.genScaleTestList)(item.scales, [item.color, item.darkColor]) })
))
}
];
return /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: accessPanelGroup });
});
var AccessPanel_default = AccessPanel;