kitchen-color-studio
Version:
an open-source color editor for designing color system
111 lines (108 loc) • 4.37 kB
JavaScript
import { Space } from 'antd';
import { memo } from 'react';
import styled from 'styled-components';
import { getAlphaColor, ScaleRow } from "./..";
/******************************************************
*********************** Style *************************
******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var ScaleBox = styled.div.withConfig({
displayName: "ScaleBox",
componentId: "kitchen-color-studio__sc-1oflqqm-0"
})(["cursor:pointer;position:relative;width:48px;height:32px;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;&:active{transform:scale(0.95);}"]);
var ScaleItem = styled.div.withConfig({
displayName: "ScaleItem",
componentId: "kitchen-color-studio__sc-1oflqqm-1"
})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;"]);
var ScaleRowTitle = styled.div.withConfig({
displayName: "ScaleRowTitle",
componentId: "kitchen-color-studio__sc-1oflqqm-2"
})(["display:flex;align-items:center;width:64px;height:32px;"]);
var Text = styled.div.withConfig({
displayName: "Text",
componentId: "kitchen-color-studio__sc-1oflqqm-3"
})(["opacity:0.5;"]);
var ColorView = styled.div.withConfig({
displayName: "ColorView",
componentId: "kitchen-color-studio__sc-1oflqqm-4"
})(["padding:8px 16px 32px 0;"]);
var View = styled.div.withConfig({
displayName: "View",
componentId: "kitchen-color-studio__sc-1oflqqm-5"
})(["display:flex;flex:1;align-items:center;justify-content:center;"]);
/******************************************************
************************* Dom *************************
******************************************************/
var ScaleBlock = /*#__PURE__*/memo(function (_ref) {
var scale = _ref.scale,
_ref$colorType = _ref.colorType,
colorType = _ref$colorType === void 0 ? 'hex' : _ref$colorType,
showDetail = _ref.showDetail,
highLights = _ref.highLights,
midHighLight = _ref.midHighLight,
isFliterStep = _ref.isFliterStep;
return /*#__PURE__*/_jsx(View, {
children: /*#__PURE__*/_jsx(ColorView, {
children: /*#__PURE__*/_jsxs(Space, {
direction: showDetail ? 'horizontal' : 'vertical',
size: 2,
children: [/*#__PURE__*/_jsxs(Space, {
direction: !showDetail ? 'horizontal' : 'vertical',
size: 2,
children: [/*#__PURE__*/_jsx(ScaleRowTitle, {
style: showDetail ? {
width: 32
} : {}
}, "scale-num"), new Array(scale.light.length).fill('').map(function (_, index) {
var isHighlight = highLights === null || highLights === void 0 ? void 0 : highLights.includes(index);
var isMidHighlight = midHighLight === index;
return /*#__PURE__*/_jsx(ScaleBox, {
style: showDetail ? {
width: 32
} : {},
children: /*#__PURE__*/_jsx(ScaleItem, {
children: /*#__PURE__*/_jsx(Text, {
style: {
opacity: isFliterStep ? isHighlight ? 1 : 0.1 : 0.5,
fontWeight: isMidHighlight ? 700 : 400
},
children: index + 1
})
})
}, 'num' + index);
})]
}, "scale-title"), /*#__PURE__*/_jsx(ScaleRow, {
colorType: colorType,
scale: scale.light,
showDetail: showDetail,
title: "light"
}, "light"), /*#__PURE__*/_jsx(ScaleRow, {
alpha: true,
colorType: colorType,
scale: scale.light.map(function (c) {
return getAlphaColor(c, '#fff');
}),
showDetail: showDetail,
solidScale: scale.light,
title: "lightA"
}, "lightA"), /*#__PURE__*/_jsx(ScaleRow, {
colorType: colorType,
scale: scale.dark,
showDetail: showDetail,
title: "dark"
}, "dark"), /*#__PURE__*/_jsx(ScaleRow, {
alpha: true,
colorType: colorType,
scale: scale.dark.map(function (c) {
return getAlphaColor(c, '#000');
}),
showDetail: showDetail,
solidScale: scale.dark,
title: "darkA"
}, "darkA")]
})
})
});
});
export default ScaleBlock;