antd-color-editor
Version:
An open-source color editor for designing color system
187 lines (184 loc) • 6.13 kB
JavaScript
var _templateObject, _templateObject2, _templateObject3;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { useThemeMode } from 'antd-style';
import { useControls, useCreateStore } from 'leva';
import { memo } from 'react';
import styled from 'styled-components';
import { AccessBlock, AccessibilityTag, LevaPanel, PanelGroup, genScaleTestList } 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(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0 12px;\n"])));
var ColorAvatar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-block;\n\n width: 24px;\n height: 24px;\n margin-right: 8px;\n\n border-radius: 3px;\n"])));
var SubShowcase = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n\n margin-top: 4px;\n padding: 12px;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n"])), 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: {
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
marginBottom: 8,
padding: '0 12px'
},
children: [/*#__PURE__*/_jsxs("div", {
style: {
alignItems: 'center',
display: 'flex'
},
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;