antd-color-editor
Version:
An open-source color editor for designing color system
97 lines (94 loc) • 4.69 kB
JavaScript
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Space } from 'antd';
import { memo } from 'react';
import styled from 'styled-components';
import { ScaleRow, getAlphaColor } from "./..";
/******************************************************
*********************** Style *************************
******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var ScaleBox = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n\n position: relative;\n\n width: 48px;\n height: 32px;\n\n background-position:\n 0 0,\n 0 8px,\n 8px -8px,\n -8px 0;\n background-size: 16px 16px;\n\n &:active {\n transform: scale(0.95);\n }\n"])));
var ScaleItem = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 100%;\n"])));
var ScaleRowTitle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n width: 64px;\n height: 32px;\n"])));
var Text = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n opacity: 0.5;\n"])));
var ColorView = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: 8px 16px 32px 0;\n"])));
var View = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n"])));
/******************************************************
************************* 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 ? 'vertical' : 'horizontal',
size: 2,
children: [/*#__PURE__*/_jsx(ScaleRowTitle, {
style: showDetail ? {
width: 32
} : {}
}, "scale-num"), Array.from({
length: 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: {
fontWeight: isMidHighlight ? 700 : 400,
opacity: isFliterStep ? isHighlight ? 1 : 0.1 : 0.5
},
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;