tachybase_todo/packages/plugins/theme-editor/src/client/antd-token-previewer/ThemeSelect.tsx
被雨水过滤的空气-Rain 4812cc5692
feat: support custome themes (#2228)
* feat: create custom-theme plugin

* feat: add custom-theme

* chore: add plugin name and description

* chore: add deps

* chore: optimize deps

* refactor: rename

* chore: add antd-token-previewer

* chore: add deps in plugin

* feat: add theme-editor

* feat: add theme-editor

* feat: add settings

* feat: add theme collection

* refactor: migration to the components folder

* feat: add ThemeList

* refactor: be better

* feat: export createStyles

* feat: implement ThemeCard (T-723)

* style: optimize style

* feat: add ThemeEditorProvider

* feat: add ToEditTheme

* chore: add isBuiltIn field

* feat: implement WYSIWYG

* refactor: migrate i18n

* feat: support to save config

* feat: add validation rule

* refactor: remove useless code

* refactor: optimize GlobalThemeProvider

* feat: add CurrentUserSettingsMenuProvider

* feat: support switching themes

* refactor: migrate CurrentUserProvider to app root

* feat: add InitializeTheme

* fix: fix preview demo

* fix: filter themes

* fix: not valid when editing theme

* fix: should restore the previous theme when closing theme editor

* fix: fix algorithm

* fix: the theme that was just saved should be applied

* refactor: loacl antd-token-previewer

* fix: should be based on the current theme when editing themes

* feat: support to edit theme

* perf: reduce executions

* feat: add animation

* fix: fix the type error of useRequest

* feat: remove built-in themes

* chore: reinstall deps

* fix: fix version of deps

* fix: delete client.d.ts to fix build error

* chore: reinstall deps

* fix: fix build

* fix: fix build

* fix: avoid build errors

* fix: fix crashing

* fix: use value instead of defaultValue

* fix: avoid error

* fix: avoid closure

* fix: fix build

* fix: fix style of login page

* refactor(page): fix style

* fix: fix style of PageHeader

* refactor: fix style of Drawer

* refactor: add FormDialog to loacl

* refactor: fix style of SchemaSettings.ModalItem

* refactor: fix style of pm/Card

* fix: fix text color of pm/Marketplace

* fix: fix table error

* refactor: fix style of collection-manager/summary

* refactor: fix style of fields drawer

* chore: reinstall deps

* fix: fix build

* fix: fix build of custom-theme

* fix: should export Plugin

* refactor: fix style of GraphDrawPage

* chore: upgrade plugin version

* refactor: fix style of Modal by using antd App

* refactor: fix style of FormDialog by using local version

* refactor(workflow): refactor style using antd-style in workflow

* fix(workflow): fix style of workflow

* fix: fix size

* refactor: add --nb-header-height

* feat: remove theme configuration from system settings

* refactor: migrate useUpdateThemeSettings to a new file

* refactor: rename theme to themeId

* feat: add updateSystemThemeSettings

* refactor: migrate utils function

* feat: use localStorage to avoid theme invalid in login page

* fix: fix style of login page

* fix: fix style of Drawer

* feat: optimize style of theme card

* fix: should use a empty object to reset theme

* fix: fix test of Page

* fix: fix test of Application

* fix: change backgroundColor of login page

* fix: fix all style of modal

* fix: fix gap between blocks (T-896)

* fix: fix color of font (T-905)

* fix: fix build

* fix: fix can not scroll in Drawer (T-897)

* fix: fix width of built-in plugins page (T-900)

* fix: fix style of import Modal (T-907)

* fix: fix style of calendar (T-908)

* fix: fix style of kanban (T-909)

* fix: fix style of Gantt (T-910)

* fix: fix style of Collapse (T-915)

* fix: fix style of mobile (T-916)

* fix: fix style of PageHeader (T-958)

* fix: optimize background color of Drawer

* fix: fix style of notification

* fix: fix T-1000

* fix: fix style of LinkageHeader (T-1003)

* fix: fix T-1004

* fix: fix style of scroll bar of chart (T-911)

* fix: fix style of workflow drawer (T-997)

* fix: fix T-922

* fix: fix T-924

* refactor: rename custom-theme to theme-editor

* fix: fix T-999

* fix: fix T-1011

* fix: fix error

* fix: optimize dark mode (T-921)

* fix: fix style of markdown (T-1020)

* fix: fix style of data template (T-1025)

* fix: fix style of rich text (T-1026)

* fix: fix style of a

* fix: fix style of XButton (T-1028)

* fix: fix T-1027

* fix: fix color of variable tag (T-1030)

* chore: translation

* feat: add a modal before create new theme (T-1024)

* feat: highlight card when editing theme (T-1031)

* feat: support to change theme name (T-1023)

* fix: api.auth.getOption('theme')

* fix: fix T-1032

* fix: fix feedback in feishu group

* refactor: code review

* fix: fix test

* chore: rename

* fix: useNotificationMiddleware

* refactor: revert

* fix: fix build

* fix: notification

* refactor: migrate CurrentUserProvider from Application to NocoBaseBuildInPlugin

* fix: fix test

* refactor: fix code review

* chore: avoid test error

---------

Co-authored-by: chenos <chenlinxh@gmail.com>
2023-07-16 12:46:25 +08:00

213 lines
6.1 KiB
TypeScript

import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu } from 'antd';
import classNames from 'classnames';
import type { FC, ReactNode } from 'react';
import React, { useMemo } from 'react';
import type { Theme } from './interface';
import makeStyle from './utils/makeStyle';
interface ThemeItem extends Theme {
icon?: ReactNode;
closable?: boolean;
fixed?: boolean;
}
export type ThemeSelectProps = {
onEnabledThemeChange: (themes: string[]) => void;
onShownThemeChange: (themes: string[], selectTheme: string, info: { type: 'select' | 'deselect' }) => void;
enabledThemes: string[];
shownThemes: string[];
themes: ThemeItem[];
showAddTheme?: boolean;
};
const useStyle = makeStyle('ThemeSelect', (token) => ({
'.previewer-theme-select': {
padding: `${token.paddingXXS}px ${token.paddingXS}px`,
borderRadius: 4,
backgroundColor: 'rgba(0, 0, 0, 0.02)',
height: token.controlHeight,
display: 'flex',
alignItems: 'center',
overflow: 'hidden',
[`${token.rootCls}-btn.previewer-theme-select-add-btn`]: {
minWidth: 0,
width: 16,
height: 16,
fontSize: 8,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
marginInlineStart: token.marginSM,
boxShadow: 'none',
},
'.previewer-theme-select-tag': {
height: 22,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
boxSizing: 'border-box',
borderRadius: 4,
backgroundColor: token.colorBgContainer,
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
paddingInline: 10,
fontSize: token.fontSizeSM,
position: 'relative',
cursor: 'pointer',
// transition: `all ${token.motionDurationMid}`,
'&:not(:last-child)': {
marginInlineEnd: token.marginXS,
},
'&.previewer-theme-select-tag-active': {
border: `${token.lineWidth}px ${token.lineType} ${token['blue-1']}`,
backgroundColor: 'rgba(22,119,255,0.10)',
color: token.colorPrimary,
'&::after': {
content: '""',
borderStartEndRadius: 2,
position: 'absolute',
insetInlineEnd: 2,
top: 2,
width: 6,
height: 6,
background: `linear-gradient(to right top, transparent, transparent 50%, ${token.colorPrimary} 50%, ${token.colorPrimary} 100%)`,
},
},
'.previewer-theme-select-tag-close-btn': {
position: 'absolute',
top: -2,
insetInlineEnd: -2,
width: 12,
height: 12,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: token.colorBgContainer,
boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
borderRadius: '50%',
opacity: 0,
pointerEvents: 'none',
zIndex: 2,
color: token.colorIcon,
'> .anticon': {
fontSize: 6,
},
},
'&:hover': {
'.previewer-theme-select-tag-close-btn': {
opacity: 1,
pointerEvents: 'initial',
},
},
},
},
'.previewer-theme-select-dropdown': {
'.previewer-theme-select-dropdown-title': {
[`${token.rootCls}-dropdown-menu-item-group-title`]: {
fontSize: token.fontSizeSM,
paddingBottom: token.padding,
paddingTop: 10,
},
},
},
}));
const ThemeSelect: FC<ThemeSelectProps> = (props) => {
const { onEnabledThemeChange, onShownThemeChange, enabledThemes, shownThemes, themes, showAddTheme } = props;
const [wrapSSR, hashId] = useStyle();
const dropdownItems = useMemo(
() => [
{
disabled: true,
label: '添加主题即可预览',
className: 'previewer-theme-select-dropdown-title',
type: 'group',
key: 'add-theme-to-preview',
},
...themes
.filter((theme) => !shownThemes.includes(theme.key))
.map((theme) => ({
icon: theme.icon,
value: theme.key,
label: theme.name,
key: theme.key,
onClick: () => {
onShownThemeChange([...shownThemes, theme.key], theme.key, {
type: 'select',
});
},
})),
],
[themes, shownThemes, onShownThemeChange],
);
const shownThemeEntities = useMemo(
() => themes.filter((theme) => shownThemes.includes(theme.key)),
[themes, shownThemes],
);
return wrapSSR(
<div className={classNames('previewer-theme-select', hashId)}>
{shownThemeEntities.map((theme) => (
<span
onClick={() => {
if (theme.fixed) {
return;
}
onEnabledThemeChange(
enabledThemes.includes(theme.key)
? enabledThemes.filter((item) => item !== theme.key)
: [...enabledThemes, theme.key],
);
}}
key={theme.key}
className={classNames('previewer-theme-select-tag', {
'previewer-theme-select-tag-active': enabledThemes.includes(theme.key),
})}
>
{theme.name}
{theme.closable && (
<span
className="previewer-theme-select-tag-close-btn"
onClick={(e) => {
e.stopPropagation();
onEnabledThemeChange(enabledThemes.filter((item) => item !== theme.key));
onShownThemeChange(
shownThemes.filter((item) => item !== theme.key),
theme.key,
{ type: 'deselect' },
);
}}
>
<CloseOutlined />
</span>
)}
</span>
))}
{showAddTheme && (
<Dropdown
placement="bottomRight"
trigger={['click']}
overlay={<Menu items={dropdownItems} />}
overlayClassName={classNames('previewer-theme-select-dropdown', hashId)}
>
<Button type="primary" shape="circle" className="previewer-theme-select-add-btn" icon={<PlusOutlined />} />
</Dropdown>
)}
</div>,
);
};
export default ThemeSelect;