@antv/s2-react-components
Version:
React components for S2
51 lines • 3.42 kB
JavaScript
import { CaretRightOutlined } from '@ant-design/icons';
import { S2_PREFIX_CLS, i18n } from '@antv/s2';
import { Collapse } from 'antd';
import React from 'react';
import { SketchPicker } from 'react-color';
import { DEFAULT_THEME_COLOR_LIST } from '../../../common';
import { ResetButton } from '../../common/reset-button';
import { ColorBox } from '../color-box';
import { useHistoryColorList } from '../hooks/useHistoryColorList';
import './index.less';
const PRE_CLASS = `${S2_PREFIX_CLS}-color-picker-panel`;
/**
* 自定义颜色选择面板
*/
export const ColorPickerPanel = React.memo((props) => {
const { primaryColor, maxHistoryColorCount, onChange } = props;
const historyColorList = useHistoryColorList(primaryColor, maxHistoryColorCount);
const [customPickerColor, setCustomPickerColor] = React.useState(primaryColor !== null && primaryColor !== void 0 ? primaryColor : DEFAULT_THEME_COLOR_LIST[0]);
React.useEffect(() => {
if (primaryColor) {
setCustomPickerColor(primaryColor);
}
}, [primaryColor]);
return (React.createElement("div", { className: PRE_CLASS },
React.createElement("div", { className: `${PRE_CLASS}-header` },
React.createElement("span", { className: `${PRE_CLASS}-header-title` }, i18n('颜色编辑')),
React.createElement(ResetButton, { onClick: () => {
onChange === null || onChange === void 0 ? void 0 : onChange(DEFAULT_THEME_COLOR_LIST[0]);
} })),
React.createElement("div", { className: `${PRE_CLASS}-section` },
React.createElement("div", { className: `${PRE_CLASS}-section-title` }, i18n('推荐主题色')),
React.createElement("div", { className: `${PRE_CLASS}-section-color-list` }, DEFAULT_THEME_COLOR_LIST.map((color) => {
return (React.createElement(ColorBox, { color: color, key: color, onClick: () => {
onChange === null || onChange === void 0 ? void 0 : onChange(color);
} }));
}))),
React.createElement("div", { className: `${PRE_CLASS}-section` },
React.createElement("div", { className: `${PRE_CLASS}-section-title` }, i18n('最近使用')),
React.createElement("div", { className: `${PRE_CLASS}-section-color-list` }, historyColorList.map((color) => {
return (React.createElement(ColorBox, { color: color, key: color, onClick: () => {
onChange === null || onChange === void 0 ? void 0 : onChange(color);
} }));
}))),
React.createElement(Collapse, { className: `${PRE_CLASS}-collapse`, expandIcon: ({ isActive }) => (React.createElement(CaretRightOutlined, { rotate: isActive ? 90 : -90 })) },
React.createElement(Collapse.Panel, { key: "custom", header: React.createElement("span", { className: `${PRE_CLASS}-collapse-title` }, i18n('自定义')) },
React.createElement(SketchPicker, { className: `${PRE_CLASS}-sketch-picker`, width: "100%", presetColors: [], color: customPickerColor, disableAlpha: true, onChange: ({ hex }) => setCustomPickerColor(hex), onChangeComplete: ({ hex }) => {
onChange === null || onChange === void 0 ? void 0 : onChange(hex);
} })))));
});
ColorPickerPanel.displayName = 'ColorPickerPanel';
//# sourceMappingURL=index.js.map