tachybase_todo/packages/plugins/@nocobase/plugin-theme-editor/src/client/index.tsx
jack zhang 35b06cbfa0
refactor: plugin settings manager (#2712)
* feat: add settingsCenter

* fix: style bug

* chore: optimized code

* refactor: settingCenter Auth

* feat: add aclSnippet option

* refactor: all plugin's setting center api

* feat: add plugin with name

* docs: add settings-center doc

* fix: settings center menu sort by name

* fix: change setting center layout

* fix: change hello sort

* test: add SettingsCenter.ts test case

* fix: bug

* fix: acl bug

* fix: bug

* fix: bug and 404 page

* fix: test bug

* fix: test bug

* fix: bug

* fix: locale

* fix: styling

* fix: rename settingsCenter to pluginSettingsManager

* fix: styling

* fix: e2e bug

* fix: e2e bug

* fix: locale

* feat: update docs

* fix: update

---------

Co-authored-by: chenos <chenlinxh@gmail.com>
2023-11-13 11:01:18 +08:00

91 lines
2.7 KiB
TypeScript

import { Plugin, createStyles, defaultTheme, useCurrentUserSettingsMenu, useGlobalTheme } from '@nocobase/client';
import { ConfigProvider } from 'antd';
import _ from 'lodash';
import React, { useEffect, useMemo } from 'react';
import InitializeTheme from './components/InitializeTheme';
import { ThemeEditorProvider } from './components/ThemeEditorProvider';
import ThemeList from './components/ThemeList';
import { ThemeListProvider } from './components/ThemeListProvider';
import CustomTheme from './components/theme-editor';
import { useThemeSettings } from './hooks/useThemeSettings';
import { NAMESPACE } from './locale';
const useStyles = createStyles(({ css, token }) => {
return {
editor: css`
overflow: hidden;
border-left: 1px solid ${token.colorBorderSecondary};
animation: 0.1s ease-out 0s 1 slideInFromRight;
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
`,
};
});
const CustomThemeProvider = React.memo((props) => {
const { addMenuItem } = useCurrentUserSettingsMenu();
const themeItem = useThemeSettings();
const [open, setOpen] = React.useState(false);
const { theme, setTheme } = useGlobalTheme();
const { styles } = useStyles();
useEffect(() => {
// 在页面右上角中添加一个 Theme 菜单项
addMenuItem(themeItem, { before: 'divider_3' });
}, [addMenuItem, themeItem]);
const contentStyle = useMemo(() => {
return open
? { transform: 'rotate(0)', flexGrow: 1, width: 0, height: '100%' }
: { flexGrow: 1, width: 0, height: '100%' };
}, [open]);
const editor = (
<div style={{ display: 'flex', overflow: 'hidden', height: '100%' }}>
<div style={contentStyle}>{props.children}</div>
{open ? (
<div className={styles.editor}>
<CustomTheme onThemeChange={setTheme} />
</div>
) : null}
</div>
);
if (!theme?.token?.motionUnit) {
_.set(theme, 'token.motionUnit', defaultTheme.token.motionUnit);
}
return (
<ConfigProvider theme={theme}>
<ThemeListProvider>
<InitializeTheme>
<ThemeEditorProvider open={open} setOpen={setOpen}>
{editor}
</ThemeEditorProvider>
</InitializeTheme>
</ThemeListProvider>
</ConfigProvider>
);
});
CustomThemeProvider.displayName = 'CustomThemeProvider';
export class ThemeEditorPlugin extends Plugin {
async load() {
this.app.use(CustomThemeProvider);
this.app.pluginSettingsManager.add(NAMESPACE, {
title: `{{t("Theme editor", {ns:"${NAMESPACE}"})}}`,
icon: 'BgColorsOutlined',
Component: ThemeList,
aclSnippet: 'pm.theme-editor.themes',
});
}
}
export default ThemeEditorPlugin;