71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { PlusOutlined } from '@ant-design/icons';
|
|
import { defaultTheme, useGlobalTheme, useToken } from '@nocobase/client';
|
|
import { App, Button, Space } from 'antd';
|
|
import React, { useCallback } from 'react';
|
|
import { useTranslation } from '../locale';
|
|
import compatOldTheme from '../utils/compatOldTheme';
|
|
import { useThemeEditorContext } from './ThemeEditorProvider';
|
|
|
|
const ToEditTheme = () => {
|
|
const { theme, setTheme, setCurrentSettingTheme } = useGlobalTheme();
|
|
const { token } = useToken();
|
|
const { setOpen } = useThemeEditorContext();
|
|
const { t } = useTranslation();
|
|
const { modal } = App.useApp();
|
|
|
|
const handleClick = useCallback(() => {
|
|
const m = modal.confirm({
|
|
title: t('Add new theme'),
|
|
closable: true,
|
|
maskClosable: true,
|
|
width: 'fit-content',
|
|
footer: (
|
|
<Space style={{ float: 'right', marginTop: token.margin, justifyContent: 'flex-end' }} wrap>
|
|
<Button
|
|
onClick={() => {
|
|
setCurrentSettingTheme(theme);
|
|
setTheme(compatOldTheme(theme));
|
|
setOpen(true);
|
|
m.destroy();
|
|
}}
|
|
>
|
|
{t('Edit based on current theme')}
|
|
</Button>
|
|
<Button
|
|
type={'primary'}
|
|
onClick={() => {
|
|
setCurrentSettingTheme(theme);
|
|
setTheme(compatOldTheme(defaultTheme));
|
|
setOpen(true);
|
|
m.destroy();
|
|
}}
|
|
>
|
|
{t('Create a brand new theme')}
|
|
</Button>
|
|
</Space>
|
|
),
|
|
});
|
|
}, [modal, setCurrentSettingTheme, setOpen, setTheme, t, theme, token.margin]);
|
|
|
|
return (
|
|
<Button
|
|
type={'dashed'}
|
|
style={{
|
|
width: 240,
|
|
height: 240,
|
|
borderRadius: token.borderRadiusLG,
|
|
borderColor: 'var(--colorSettings)',
|
|
color: 'var(--colorSettings)',
|
|
}}
|
|
icon={<PlusOutlined />}
|
|
onClick={handleClick}
|
|
>
|
|
{t('Add new theme')}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
ToEditTheme.displayName = 'ToEditTheme';
|
|
|
|
export default ToEditTheme;
|