mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +08:00
e96059cd76
* docs: migrate to antd-style * [CodeFactor] Apply fixes * chore: code clean * chore: lint * chore: try cache * chore: try * fix: ssr * chore: code clean --------- Co-authored-by: codefactor-io <support@codefactor.io>
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import { BgColorsOutlined } from '@ant-design/icons';
|
|
import { FloatButton } from 'antd';
|
|
import { CompactTheme, DarkTheme, Motion } from 'antd-token-previewer/es/icons';
|
|
import { FormattedMessage, Link, useLocation } from 'dumi';
|
|
import React from 'react';
|
|
import { useTheme } from 'antd-style';
|
|
import { getLocalizedPathname, isZhCN } from '../../utils';
|
|
import ThemeIcon from './ThemeIcon';
|
|
|
|
export type ThemeName = 'light' | 'dark' | 'compact' | 'motion-off';
|
|
|
|
export type ThemeSwitchProps = {
|
|
value?: ThemeName[];
|
|
onChange: (value: ThemeName[]) => void;
|
|
};
|
|
|
|
const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
|
|
const { value = ['light'], onChange } = props;
|
|
const token = useTheme();
|
|
const { pathname, search } = useLocation();
|
|
|
|
const isMotionOff = value.includes('motion-off');
|
|
|
|
return (
|
|
<FloatButton.Group trigger="click" icon={<ThemeIcon />}>
|
|
<Link
|
|
to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}
|
|
style={{ display: 'block', marginBottom: token.margin }}
|
|
>
|
|
<FloatButton
|
|
icon={<BgColorsOutlined />}
|
|
tooltip={<FormattedMessage id="app.footer.theme" />}
|
|
/>
|
|
</Link>
|
|
<FloatButton
|
|
icon={<DarkTheme />}
|
|
type={value.includes('dark') ? 'primary' : 'default'}
|
|
onClick={() => {
|
|
if (value.includes('dark')) {
|
|
onChange(value.filter((theme) => theme !== 'dark'));
|
|
} else {
|
|
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
|
|
icon={<Motion />}
|
|
type={!isMotionOff ? 'primary' : 'default'}
|
|
onClick={() => {
|
|
if (isMotionOff) {
|
|
onChange(value.filter((theme) => theme !== 'motion-off'));
|
|
} else {
|
|
onChange([...value, 'motion-off']);
|
|
}
|
|
}}
|
|
tooltip={
|
|
<FormattedMessage
|
|
id={isMotionOff ? 'app.theme.switch.motion.off' : 'app.theme.switch.motion.on'}
|
|
/>
|
|
}
|
|
/>
|
|
</FloatButton.Group>
|
|
);
|
|
};
|
|
|
|
export default ThemeSwitch;
|