@antv/s2-react-components/esm/components/theme-panel/theme-panel.js

React components for S2

import { S2_PREFIX_CLS, i18n } from '@antv/s2';
import { Popover } from 'antd';
import React from 'react';
import { DEFAULT_THEME_COLOR_LIST, SheetThemeColorType, SheetThemeType, } from '../../common';
import { ResetGroup, TooltipWrapper } from '../common';
import { RadioGroup } from '../common/radio-group/radio-group';
import { ColorBox } from './color-box';
import { ColorPickerPanel } from './color-picker-panel';
import { BasicThemeIcon, ColorfulThemeIcon, HierarchyGridTypeIcon, HierarchyTreeTypeIcon, NormalThemeIcon, ZebraThemeIcon, } from './icons';
import './index.less';
import { generateColorTheme } from './utils';
const PRE_CLASS = `${S2_PREFIX_CLS}-theme-panel`;
export const ThemePanel = React.memo((props) => {
    const { title = i18n('主题风格'), maxHistoryColorCount, disableCustomPrimaryColorPicker = false, defaultOptions: defaultThemePanelOptions, defaultCollapsed = false, children, onChange, onReset, } = props;
    const [options, setOptions] = React.useState(Object.assign({ hierarchyType: 'grid', themeType: SheetThemeType.DEFAULT, colorType: SheetThemeColorType.PRIMARY }, defaultThemePanelOptions));
    const defaultOptions = React.useRef(options);
    const [customColor, setCustomColor] = React.useState(DEFAULT_THEME_COLOR_LIST[0]);
    const onResetClick = () => {
        const theme = 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.createElement(ColorPickerPanel, { maxHistoryColorCount: maxHistoryColorCount, primaryColor: customColor, onChange: setCustomColor }));
    };
    const renderCustomColorSection = () => {
        if (options.colorType !== SheetThemeColorType.CUSTOM ||
            disableCustomPrimaryColorPicker) {
            return null;
        }
        return (React.createElement("div", { className: `${PRE_CLASS}-custom-color` },
            React.createElement("div", null,
                React.createElement("span", { className: `${PRE_CLASS}-custom-color-title` }, i18n('自定义颜色')),
                React.createElement(Popover, { placement: "rightTop", content: renderCustomColorSelectPanel(), trigger: "click" },
                    React.createElement(ColorBox, { color: customColor !== null && customColor !== void 0 ? customColor : DEFAULT_THEME_COLOR_LIST[0] })))));
    };
    const onOptionsChange = (field) => (e) => {
        const newOptions = Object.assign(Object.assign({}, options), { [field]: e.target.value });
        setOptions(newOptions);
    };
    React.useEffect(() => {
        const theme = 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: i18n('平铺'), value: 'grid', component: HierarchyGridTypeIcon },
        { label: i18n('树状'), value: 'tree', component: HierarchyTreeTypeIcon },
    ].map(({ label, value, component: Component }) => {
        return {
            label: (React.createElement(TooltipWrapper, { title: label },
                React.createElement(Component, { active: options.hierarchyType === value }))),
            value,
        };
    });
    const themeTypeOptions = [
        {
            label: i18n('多彩风'),
            value: SheetThemeType.COLORFUL,
            component: ColorfulThemeIcon,
        },
        {
            label: i18n('简约风'),
            value: SheetThemeType.NORMAL,
            component: NormalThemeIcon,
        },
        {
            label: i18n('极简风'),
            value: SheetThemeType.BASIC,
            component: BasicThemeIcon,
        },
        {
            label: i18n('斑马纹风'),
            value: SheetThemeType.ZEBRA,
            component: ZebraThemeIcon,
        },
    ].map(({ label, value, component: Component }) => ({
        label: (React.createElement(TooltipWrapper, { title: label },
            React.createElement(Component, { active: options.themeType === value }))),
        value,
    }));
    const colorTypeOptions = React.useMemo(() => {
        const defaultOptions = [
            { label: i18n('深色主题'), value: SheetThemeColorType.PRIMARY },
            { label: i18n('浅色主题'), value: SheetThemeColorType.SECONDARY },
            { label: i18n('灰色'), value: SheetThemeColorType.GRAY },
        ];
        if (disableCustomPrimaryColorPicker) {
            return defaultOptions;
        }
        return [
            ...defaultOptions,
            {
                label: i18n('自定义'),
                value: SheetThemeColorType.CUSTOM,
            },
        ];
    }, [disableCustomPrimaryColorPicker]);
    return (React.createElement(ResetGroup, { title: title, onResetClick: onResetClick, defaultCollapsed: defaultCollapsed, className: PRE_CLASS },
        children,
        React.createElement(RadioGroup, { label: i18n('类型'), optionType: "button", value: options.hierarchyType, onChange: onOptionsChange('hierarchyType'), options: hierarchyTypeOptions, onlyIcon: true }),
        React.createElement(RadioGroup, { label: i18n('主题'), optionType: "button", value: options.themeType, onChange: onOptionsChange('themeType'), options: themeTypeOptions, onlyIcon: true }),
        React.createElement(RadioGroup, { label: i18n('主色系'), optionType: "button", value: options.colorType, onChange: onOptionsChange('colorType'), options: colorTypeOptions, extra: renderCustomColorSection() })));
});
ThemePanel.displayName = 'ThemePanel';
//# sourceMappingURL=theme-panel.js.map