kitchen-color-studio
Version:
an open-source color editor for designing color system
104 lines (100 loc) • 4.1 kB
JavaScript
import { SketchOutlined } from '@ant-design/icons';
import { ActionIcon, CollapseTitle } from '@ant-design/pro-editor';
import { Space } from 'antd';
import { useThemeMode } from 'antd-style';
import { memo, useRef } from 'react';
import styled from 'styled-components';
import { defaultEditorConfig } from "../ColorStudio/config";
import { AccessibilityTag, ScaleBlock, genScaleTestList, useSketchJSON } from "./..";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Collapse = CollapseTitle;
/******************************************************
*********************** Style *************************
******************************************************/
var CollapseView = styled.div.withConfig({
displayName: "CollapseView",
componentId: "kitchen-color-studio__sc-a7cp58-0"
})([".studio-collapse-title{overflow:auto;margin-bottom:8px;padding-top:8px;border-radius:4px !important;}.studio-collapse-title-collapsed,.studio-collapse-title-expand{font-size:14px;font-weight:600;line-height:1;}.studio-divider{margin-top:8px !important;border-color:", ";}"], function (_ref) {
var theme = _ref.theme;
return theme.colorBorder;
});
var ColorAvatar = styled.div.withConfig({
displayName: "ColorAvatar",
componentId: "kitchen-color-studio__sc-a7cp58-1"
})(["display:inline-block;width:16px;height:16px;border-radius:3px;"]);
/******************************************************
************************* Dom *************************
******************************************************/
var ScalePreview = /*#__PURE__*/memo(function (_ref2) {
var _ref2$color = _ref2.color,
color = _ref2$color === void 0 ? {
title: 'nuname',
type: 'normal',
color: '#1677FF'
} : _ref2$color,
_ref2$config = _ref2.config,
config = _ref2$config === void 0 ? defaultEditorConfig : _ref2$config,
_ref2$displayConfig = _ref2.displayConfig,
displayConfig = _ref2$displayConfig === void 0 ? {
colorType: 'hex',
showDetail: false
} : _ref2$displayConfig,
scales = _ref2.scales;
var _useThemeMode = useThemeMode(),
isDarkMode = _useThemeMode.isDarkMode;
var _useSketchJSON = useSketchJSON(),
generateGroup = _useSketchJSON.generateGroup;
var ref = useRef();
var system = config.system,
stepFliter = config.stepFliter,
generate = config.generate;
var pattern = system.pattern;
var colorType = displayConfig.colorType,
showDetail = displayConfig.showDetail;
var colorsTest = genScaleTestList(scales, [color.color, (color === null || color === void 0 ? void 0 : color.darkColor) || color.color]);
return /*#__PURE__*/_jsx(CollapseView, {
isDarkMode: isDarkMode,
children: /*#__PURE__*/_jsx(Collapse, {
defaultExpand: true,
extra: function extra() {
return /*#__PURE__*/_jsxs(Space, {
children: [/*#__PURE__*/_jsx(ActionIcon, {
icon: /*#__PURE__*/_jsx(SketchOutlined, {}),
onClick: function onClick() {
return generateGroup(ref.current);
},
title: '复制为 Sketch 素材贴'
}), scales.dark.length >= 3 && /*#__PURE__*/_jsx(AccessibilityTag, {
colors: colorsTest
})]
});
},
title: /*#__PURE__*/_jsxs(Space, {
align: "center",
size: 4,
children: [/*#__PURE__*/_jsx(ColorAvatar, {
style: {
background: color.color
}
}), pattern.isolateDark && /*#__PURE__*/_jsx(ColorAvatar, {
style: {
background: color.darkColor
}
}), color.title]
}),
children: /*#__PURE__*/_jsx("div", {
ref: ref,
children: /*#__PURE__*/_jsx(ScaleBlock, {
colorType: colorType,
highLights: pattern.isFliterStep ? stepFliter : [],
isFliterStep: pattern.isFliterStep && !pattern.displayFliterStep,
midHighLight: generate.step.up,
scale: scales,
showDetail: showDetail
})
})
})
});
});
export default ScalePreview;