2022-11-30 11:05:41 +08:00
|
|
|
import React from 'react';
|
2022-12-08 17:44:49 +08:00
|
|
|
import { FloatButton } from 'antd';
|
|
|
|
import { FormattedMessage } from 'dumi';
|
2022-11-22 17:00:28 +08:00
|
|
|
import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons';
|
2022-11-30 11:05:41 +08:00
|
|
|
import ThemeIcon from './ThemeIcon';
|
2022-11-22 17:00:28 +08:00
|
|
|
|
2022-12-08 17:44:49 +08:00
|
|
|
export type ThemeName = 'light' | 'dark' | 'compact';
|
2022-11-22 17:00:28 +08:00
|
|
|
|
|
|
|
export type ThemeSwitchProps = {
|
2022-12-08 17:44:49 +08:00
|
|
|
value?: ThemeName[];
|
|
|
|
onChange: (value: ThemeName[]) => void;
|
2022-11-22 17:00:28 +08:00
|
|
|
};
|
|
|
|
|
2022-12-08 17:44:49 +08:00
|
|
|
const ThemeSwitch: React.FC<ThemeSwitchProps> = ({ value, onChange }) => (
|
|
|
|
<FloatButton.Group trigger="click" icon={<ThemeIcon />}>
|
|
|
|
<FloatButton
|
|
|
|
icon={<Light />}
|
|
|
|
type={!value.includes('dark') ? 'primary' : 'default'}
|
|
|
|
onClick={() => {
|
|
|
|
if (value.includes('dark')) {
|
|
|
|
onChange(value.filter((theme) => theme !== 'dark'));
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
tooltip={<FormattedMessage id="app.theme.switch.default" />}
|
|
|
|
/>
|
|
|
|
<FloatButton
|
|
|
|
icon={<DarkTheme />}
|
|
|
|
type={value.includes('dark') ? 'primary' : 'default'}
|
|
|
|
onClick={() => {
|
|
|
|
if (!value.includes('dark')) {
|
|
|
|
onChange([...value, 'dark']);
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
tooltip={<FormattedMessage id="app.theme.switch.dark" />}
|
|
|
|
/>
|
|
|
|
<FloatButton
|
|
|
|
icon={<CompactTheme />}
|
|
|
|
type={value.includes('compact') ? 'primary' : 'default'}
|
|
|
|
onClick={() => {
|
|
|
|
if (value.includes('compact')) {
|
|
|
|
onChange(value.filter((theme) => theme !== 'compact'));
|
|
|
|
} else {
|
|
|
|
onChange([...value, 'compact']);
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
tooltip={<FormattedMessage id="app.theme.switch.compact" />}
|
|
|
|
/>
|
|
|
|
</FloatButton.Group>
|
|
|
|
);
|
2022-11-22 17:00:28 +08:00
|
|
|
|
|
|
|
export default ThemeSwitch;
|