@antv/s2-react-components
Version:
React components for S2
118 lines • 6.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemePanel = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const antd_1 = require("antd");
const react_1 = tslib_1.__importDefault(require("react"));
const common_1 = require("../../common");
const common_2 = require("../common");
const radio_group_1 = require("../common/radio-group/radio-group");
const color_box_1 = require("./color-box");
const color_picker_panel_1 = require("./color-picker-panel");
const icons_1 = require("./icons");
require("./index.less");
const utils_1 = require("./utils");
const PRE_CLASS = `${s2_1.S2_PREFIX_CLS}-theme-panel`;
exports.ThemePanel = react_1.default.memo((props) => {
const { title = (0, s2_1.i18n)('主题风格'), maxHistoryColorCount, disableCustomPrimaryColorPicker = false, defaultOptions: defaultThemePanelOptions, defaultCollapsed = false, children, onChange, onReset, } = props;
const [options, setOptions] = react_1.default.useState(Object.assign({ hierarchyType: 'grid', themeType: common_1.SheetThemeType.DEFAULT, colorType: common_1.SheetThemeColorType.PRIMARY }, defaultThemePanelOptions));
const defaultOptions = react_1.default.useRef(options);
const [customColor, setCustomColor] = react_1.default.useState(common_1.DEFAULT_THEME_COLOR_LIST[0]);
const onResetClick = () => {
const theme = (0, utils_1.generateColorTheme)({
themeType: defaultOptions.current.themeType,
colorType: defaultOptions.current.colorType,
customColor,
});
setOptions(defaultOptions.current);
onReset === null || onReset === void 0 ? void 0 : onReset(defaultOptions.current, options, theme);
};
const renderCustomColorSelectPanel = () => {
return (react_1.default.createElement(color_picker_panel_1.ColorPickerPanel, { maxHistoryColorCount: maxHistoryColorCount, primaryColor: customColor, onChange: setCustomColor }));
};
const renderCustomColorSection = () => {
if (options.colorType !== common_1.SheetThemeColorType.CUSTOM ||
disableCustomPrimaryColorPicker) {
return null;
}
return (react_1.default.createElement("div", { className: `${PRE_CLASS}-custom-color` },
react_1.default.createElement("div", null,
react_1.default.createElement("span", { className: `${PRE_CLASS}-custom-color-title` }, (0, s2_1.i18n)('自定义颜色')),
react_1.default.createElement(antd_1.Popover, { placement: "rightTop", content: renderCustomColorSelectPanel(), trigger: "click" },
react_1.default.createElement(color_box_1.ColorBox, { color: customColor !== null && customColor !== void 0 ? customColor : common_1.DEFAULT_THEME_COLOR_LIST[0] })))));
};
const onOptionsChange = (field) => (e) => {
const newOptions = Object.assign(Object.assign({}, options), { [field]: e.target.value });
setOptions(newOptions);
};
react_1.default.useEffect(() => {
const theme = (0, utils_1.generateColorTheme)({
themeType: options.themeType,
colorType: options.colorType,
customColor,
});
onChange === null || onChange === void 0 ? void 0 : onChange(options, theme);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options, customColor]);
const hierarchyTypeOptions = [
{ label: (0, s2_1.i18n)('平铺'), value: 'grid', component: icons_1.HierarchyGridTypeIcon },
{ label: (0, s2_1.i18n)('树状'), value: 'tree', component: icons_1.HierarchyTreeTypeIcon },
].map(({ label, value, component: Component }) => {
return {
label: (react_1.default.createElement(common_2.TooltipWrapper, { title: label },
react_1.default.createElement(Component, { active: options.hierarchyType === value }))),
value,
};
});
const themeTypeOptions = [
{
label: (0, s2_1.i18n)('多彩风'),
value: common_1.SheetThemeType.COLORFUL,
component: icons_1.ColorfulThemeIcon,
},
{
label: (0, s2_1.i18n)('简约风'),
value: common_1.SheetThemeType.NORMAL,
component: icons_1.NormalThemeIcon,
},
{
label: (0, s2_1.i18n)('极简风'),
value: common_1.SheetThemeType.BASIC,
component: icons_1.BasicThemeIcon,
},
{
label: (0, s2_1.i18n)('斑马纹风'),
value: common_1.SheetThemeType.ZEBRA,
component: icons_1.ZebraThemeIcon,
},
].map(({ label, value, component: Component }) => ({
label: (react_1.default.createElement(common_2.TooltipWrapper, { title: label },
react_1.default.createElement(Component, { active: options.themeType === value }))),
value,
}));
const colorTypeOptions = react_1.default.useMemo(() => {
const defaultOptions = [
{ label: (0, s2_1.i18n)('深色主题'), value: common_1.SheetThemeColorType.PRIMARY },
{ label: (0, s2_1.i18n)('浅色主题'), value: common_1.SheetThemeColorType.SECONDARY },
{ label: (0, s2_1.i18n)('灰色'), value: common_1.SheetThemeColorType.GRAY },
];
if (disableCustomPrimaryColorPicker) {
return defaultOptions;
}
return [
...defaultOptions,
{
label: (0, s2_1.i18n)('自定义'),
value: common_1.SheetThemeColorType.CUSTOM,
},
];
}, [disableCustomPrimaryColorPicker]);
return (react_1.default.createElement(common_2.ResetGroup, { title: title, onResetClick: onResetClick, defaultCollapsed: defaultCollapsed, className: PRE_CLASS },
children,
react_1.default.createElement(radio_group_1.RadioGroup, { label: (0, s2_1.i18n)('类型'), optionType: "button", value: options.hierarchyType, onChange: onOptionsChange('hierarchyType'), options: hierarchyTypeOptions, onlyIcon: true }),
react_1.default.createElement(radio_group_1.RadioGroup, { label: (0, s2_1.i18n)('主题'), optionType: "button", value: options.themeType, onChange: onOptionsChange('themeType'), options: themeTypeOptions, onlyIcon: true }),
react_1.default.createElement(radio_group_1.RadioGroup, { label: (0, s2_1.i18n)('主色系'), optionType: "button", value: options.colorType, onChange: onOptionsChange('colorType'), options: colorTypeOptions, extra: renderCustomColorSection() })));
});
exports.ThemePanel.displayName = 'ThemePanel';
//# sourceMappingURL=theme-panel.js.map