mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-30 12:28:33 +08:00
106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
import * as React from 'react';
|
|
import { Flex } from 'antd';
|
|
import { createStyles } from 'antd-style';
|
|
import classNames from 'classnames';
|
|
|
|
import useLocale from '../../../../hooks/useLocale';
|
|
|
|
export const THEMES = {
|
|
default: 'https://gw.alipayobjects.com/zos/bmw-prod/ae669a89-0c65-46db-b14b-72d1c7dd46d6.svg',
|
|
dark: 'https://gw.alipayobjects.com/zos/bmw-prod/0f93c777-5320-446b-9bb7-4d4b499f346d.svg',
|
|
lark: 'https://gw.alipayobjects.com/zos/bmw-prod/3e899b2b-4eb4-4771-a7fc-14c7ff078aed.svg',
|
|
comic: 'https://gw.alipayobjects.com/zos/bmw-prod/ed9b04e8-9b8d-4945-8f8a-c8fc025e846f.svg',
|
|
v4: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bOiWT4-34jkAAAAAAAAAAAAADrJ8AQ/original',
|
|
} as const;
|
|
|
|
export type THEME = keyof typeof THEMES;
|
|
|
|
const locales = {
|
|
cn: {
|
|
default: '默认',
|
|
dark: '暗黑',
|
|
lark: '知识协作',
|
|
comic: '桃花缘',
|
|
v4: 'V4 主题',
|
|
},
|
|
en: {
|
|
default: 'Default',
|
|
dark: 'Dark',
|
|
lark: 'Document',
|
|
comic: 'Blossom',
|
|
v4: 'V4 Theme',
|
|
},
|
|
};
|
|
|
|
const useStyle = createStyles(({ token, css }) => ({
|
|
themeCard: css`
|
|
border-radius: ${token.borderRadius}px;
|
|
cursor: pointer;
|
|
transition: all ${token.motionDurationSlow};
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
|
|
& > input[type='radio'] {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
img {
|
|
vertical-align: top;
|
|
box-shadow:
|
|
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
&:focus-within,
|
|
&:hover {
|
|
transform: scale(1.04);
|
|
}
|
|
`,
|
|
|
|
themeCardActive: css`
|
|
box-shadow:
|
|
0 0 0 1px ${token.colorBgContainer},
|
|
0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary};
|
|
&,
|
|
&:hover:not(:focus-within) {
|
|
transform: scale(1);
|
|
}
|
|
`,
|
|
}));
|
|
|
|
export interface ThemePickerProps {
|
|
id?: string;
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
}
|
|
|
|
const ThemePicker: React.FC<ThemePickerProps> = (props) => {
|
|
const { value, id, onChange } = props;
|
|
const { styles } = useStyle();
|
|
const [locale] = useLocale(locales);
|
|
return (
|
|
<Flex gap="large" wrap>
|
|
{(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => (
|
|
<Flex vertical gap="small" justify="center" align="center" key={theme}>
|
|
<label
|
|
onClick={() => onChange?.(theme)}
|
|
className={classNames(styles.themeCard, {
|
|
[styles.themeCardActive]: value === theme,
|
|
})}
|
|
>
|
|
<input type="radio" name="theme" id={index === 0 ? id : undefined} />
|
|
<img src={THEMES[theme]} alt={theme} />
|
|
</label>
|
|
<span>{locale[theme]}</span>
|
|
</Flex>
|
|
))}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default ThemePicker;
|