@antv/s2-react-components
Version:
React components for S2
55 lines • 3.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPickerPanel = void 0;
const tslib_1 = require("tslib");
const icons_1 = require("@ant-design/icons");
const s2_1 = require("@antv/s2");
const antd_1 = require("antd");
const react_1 = tslib_1.__importDefault(require("react"));
const react_color_1 = require("react-color");
const common_1 = require("../../../common");
const reset_button_1 = require("../../common/reset-button");
const color_box_1 = require("../color-box");
const useHistoryColorList_1 = require("../hooks/useHistoryColorList");
require("./index.less");
const PRE_CLASS = `${s2_1.S2_PREFIX_CLS}-color-picker-panel`;
/**
* 自定义颜色选择面板
*/
exports.ColorPickerPanel = react_1.default.memo((props) => {
const { primaryColor, maxHistoryColorCount, onChange } = props;
const historyColorList = (0, useHistoryColorList_1.useHistoryColorList)(primaryColor, maxHistoryColorCount);
const [customPickerColor, setCustomPickerColor] = react_1.default.useState(primaryColor !== null && primaryColor !== void 0 ? primaryColor : common_1.DEFAULT_THEME_COLOR_LIST[0]);
react_1.default.useEffect(() => {
if (primaryColor) {
setCustomPickerColor(primaryColor);
}
}, [primaryColor]);
return (react_1.default.createElement("div", { className: PRE_CLASS },
react_1.default.createElement("div", { className: `${PRE_CLASS}-header` },
react_1.default.createElement("span", { className: `${PRE_CLASS}-header-title` }, (0, s2_1.i18n)('颜色编辑')),
react_1.default.createElement(reset_button_1.ResetButton, { onClick: () => {
onChange === null || onChange === void 0 ? void 0 : onChange(common_1.DEFAULT_THEME_COLOR_LIST[0]);
} })),
react_1.default.createElement("div", { className: `${PRE_CLASS}-section` },
react_1.default.createElement("div", { className: `${PRE_CLASS}-section-title` }, (0, s2_1.i18n)('推荐主题色')),
react_1.default.createElement("div", { className: `${PRE_CLASS}-section-color-list` }, common_1.DEFAULT_THEME_COLOR_LIST.map((color) => {
return (react_1.default.createElement(color_box_1.ColorBox, { color: color, key: color, onClick: () => {
onChange === null || onChange === void 0 ? void 0 : onChange(color);
} }));
}))),
react_1.default.createElement("div", { className: `${PRE_CLASS}-section` },
react_1.default.createElement("div", { className: `${PRE_CLASS}-section-title` }, (0, s2_1.i18n)('最近使用')),
react_1.default.createElement("div", { className: `${PRE_CLASS}-section-color-list` }, historyColorList.map((color) => {
return (react_1.default.createElement(color_box_1.ColorBox, { color: color, key: color, onClick: () => {
onChange === null || onChange === void 0 ? void 0 : onChange(color);
} }));
}))),
react_1.default.createElement(antd_1.Collapse, { className: `${PRE_CLASS}-collapse`, expandIcon: ({ isActive }) => (react_1.default.createElement(icons_1.CaretRightOutlined, { rotate: isActive ? 90 : -90 })) },
react_1.default.createElement(antd_1.Collapse.Panel, { key: "custom", header: react_1.default.createElement("span", { className: `${PRE_CLASS}-collapse-title` }, (0, s2_1.i18n)('自定义')) },
react_1.default.createElement(react_color_1.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);
} })))));
});
exports.ColorPickerPanel.displayName = 'ColorPickerPanel';
//# sourceMappingURL=index.js.map