Skip to content

Commit 54f265f

Browse files
ONLY-yoursONLY-yours
authored
⚡ feat: ProEditor ConvigProvider 优化改造，Prefix 动态获取 (#120)
* ⚡ feat: 更新所有组件的Prefix * ⚡ feat: 支持全组件暗黑模式切换
1 parent b521db3 commit 54f265f

105 files changed

Lines changed: 3473 additions & 3994 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/guide/data-management.zh-CN.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ group:
1111

1212
## 概念要素
1313

14-
| 概念名词 | 解释 |
15-
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
16-
| store | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。 |
17-
| state | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。 |
18-
| action | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。 |
19-
| reducer | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。 |
14+
| 概念名词 | 解释 |
15+
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
16+
| store | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。 |
17+
| state | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。 |
18+
| action | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。 |
19+
| reducer | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。 |
2020
| selector | 选择器 (selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 |
21-
| slice | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。 |
21+
| slice | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。 |
2222

2323
## 结构分层
2424

@@ -295,7 +295,7 @@ const crudSlice = (set, get) => ({
295295

296296
此外，将数据变更逻辑下沉为 reducer 后， reducer 层面也会带来相应的好处。由于 reducer 只是一个纯函数，因此可以非常方便地实现相应的单元测试。而结合 AI ，我们可以实现一句话需求的 reducer 实现，同时也可以实现一键产出测试代码。在 reducer 上的研发与维护成本将会大大降低。
297297

298-
| 功能实现 | 单元测试 |
298+
| 功能实现 | 单元测试 |
299299
| ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
300300
| ![](https://gw.alipayobjects.com/zos/kitchen/qcmFMlllP/f588a003-6317-4ef2-9728-491c9bda3c05.png) | ![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/261315145-01f8542f-e748-4334-b8fa-67b929fa1795.png) |
301301

‎src/ActionGroup/index.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
RedoOutlined,
66
UndoOutlined,
77
} from '@ant-design/icons';
8-
import { ActionIcon, ActionIconProps, getPrefixCls } from '@ant-design/pro-editor';
8+
import { ActionIcon, ActionIconProps, ConfigProvider } from '@ant-design/pro-editor';
99
import { Divider, Dropdown, DropdownProps } from 'antd';
1010
import { useStyle } from './style';
1111

@@ -123,8 +123,7 @@ const ActionGroup = (props: ActionGroupProps) => {
123123
dropdownProps,
124124
dropdownMenuTrigger,
125125
} = props;
126-
const prefixCls = getPrefixCls('action-group');
127-
const { styles, cx } = useStyle({ prefixCls, direction, type });
126+
const { styles, cx } = useStyle({ direction, type });
128127

129128
const DefalutItemConfig = [
130129
{ icon: <FullscreenOutlined />, onClick: onFullScreenClick },
@@ -200,4 +199,12 @@ const ActionGroup = (props: ActionGroupProps) => {
200199
);
201200
};
202201

203-
export { ActionGroup };
202+
const WrapperActionGroup = (props: ActionGroupProps) => {
203+
return (
204+
<ConfigProvider>
205+
<ActionGroup {...props} />
206+
</ConfigProvider>
207+
);
208+
};
209+
210+
export { WrapperActionGroup as ActionGroup };

‎src/ActionGroup/index.zh-CN.md‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,29 @@ demo:
1818

1919
## API
2020

21-
| 属性名 | 类型 | 描述 |
22-
| ------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
23-
| className | `string` | 自定义的 classname |
24-
| style | `React.CSSProperties` | 自定义 style |
25-
| items | `[]<ActionIconItem>` | 生成按钮的配置 config |
26-
| dropdownMenu | `[]<ActionGroupItem>` | 生成 drowDownMenuList 内容的 config |
21+
| 属性名 | 类型 | 描述 |
22+
| ------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
23+
| className | `string` | 自定义的 classname |
24+
| style | `React.CSSProperties` | 自定义 style |
25+
| items | `[]<ActionIconItem>` | 生成按钮的配置 config |
26+
| dropdownMenu | `[]<ActionGroupItem>` | 生成 drowDownMenuList 内容的 config |
2727
| dropdownProps | `[]<ActionGroupItem \| { type: 'divider' }>` | 给 dropdownMenu 设置的自定义 Props，支持除了 Menu 外其余所有 antd dropdown Props 的设置 |
28-
| dropdownMenuTrigger | `React.ReactNode` | 用于自定义 dropdownMenu 下拉的触发 Dom，默认为 DashOutlined 的 Icon |
29-
| render | `(defalutDom: React.ReactNode, config: Array<ButtonConfig>) => React.ReactNode` | 用于渲染自定义能力的 render 方法 |
30-
| onFullScreenClick | `() => void` | 全屏按钮点击的回调 |
31-
| onUndoClick | `() => void` | 撤销按钮点击的回调 |
32-
| onRedoClick | `() => void` | 重做按钮点击的回调 |
33-
| onDeleteClick | `() => void` | 删除按钮点击的回调 |
34-
| type | `'ghost' \| 'block' \| 'pure'` | 整体的样式 |
35-
| direction | `'row' \| 'column'` | 图标排列时候的方向 |
36-
| size | `'default' \| 'large' \| number` | 图标尺寸 |
28+
| dropdownMenuTrigger | `React.ReactNode` | 用于自定义 dropdownMenu 下拉的触发 Dom，默认为 DashOutlined 的 Icon |
29+
| render | `(defalutDom: React.ReactNode, config: Array<ButtonConfig>) => React.ReactNode` | 用于渲染自定义能力的 render 方法 |
30+
| onFullScreenClick | `() => void` | 全屏按钮点击的回调 |
31+
| onUndoClick | `() => void` | 撤销按钮点击的回调 |
32+
| onRedoClick | `() => void` | 重做按钮点击的回调 |
33+
| onDeleteClick | `() => void` | 删除按钮点击的回调 |
34+
| type | `'ghost' \| 'block' \| 'pure'` | 整体的样式 |
35+
| direction | `'row' \| 'column'` | 图标排列时候的方向 |
36+
| size | `'default' \| 'large' \| number` | 图标尺寸 |
3737

3838
### ActionGroupItem
3939

40-
| 属性名 | 类型 | 描述 |
41-
| ------- | --------------------- | ----------- |
42-
| icon | `React.ReactNode` | 展示的 icon |
40+
| 属性名 | 类型 | 描述 |
41+
| ------- | --------------------- | ---------------------- |
42+
| icon | `React.ReactNode` | 展示的 icon |
4343
| style | `React.CSSProperties` | 每个配置按钮的单独样式 |
44-
| key | `key` | 每个按钮单独的 key |
45-
| onClick | `() => void` | 按钮点击事件的回调 |
44+
| key | `key` | 每个按钮单独的 key |
45+
| onClick | `() => void` | 按钮点击事件的回调 |
4646
| label | `string` | 用于展示按钮的提示文案 |

‎src/ActionGroup/style.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { createStyles } from '../theme';
22

3-
export const useStyle = createStyles(({ token, css, cx }, { prefixCls, type, direction }) => {
3+
export const useStyle = createStyles(({ token, css, cx, prefixCls }, { type, direction }) => {
44
const typeStylish = css`
55
background-color: ${type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary};
66
border: 1px solid ${type === 'block' ? 'transparent' : token.colorBorder};
77
`;
88

9+
const prefix = `${prefixCls}-${token.editorPrefix}-action-group`;
10+
911
return {
1012
content: cx(
11-
`${prefixCls}-content`,
13+
`${prefix}-content`,
1214
css`
1315
${type !== 'pure' && typeStylish};
1416
width: fit-content;
@@ -20,7 +22,7 @@ export const useStyle = createStyles(({ token, css, cx }, { prefixCls, type, dir
2022
`,
2123
),
2224
button: cx(
23-
`${prefixCls}-action-btn`,
25+
`${prefix}-action-btn`,
2426
css`
2527
box-shadow: none;
2628
border: none;

‎src/ActionIcon/ActionIcon.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ describe('ActionIcon', () => {
1414
);
1515
expect(container).toMatchSnapshot();
1616
const icon = await findByTestId('smile');
17-
expect(icon.className.includes('studio-btn-icon')).toBeTruthy();
17+
expect(icon.className.includes('ant-btn-icon')).toBeTruthy();
18+
expect(icon.className.includes('ant-editor-icon')).toBeTruthy();
1819
});
1920
});

‎src/ActionIcon/ActionIcon.tsx‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { ButtonProps, TooltipProps } from 'antd';
22
import { Button, Tooltip } from 'antd';
33
import type { CSSProperties, FC } from 'react';
44
import { ConfigProvider } from '../ConfigProvider';
5-
import { getPrefixCls } from '../theme';
65
import { useStyles } from './style';
76

87
/**
@@ -46,7 +45,7 @@ export interface ActionIconProps extends Omit<ButtonProps, 'title' | 'size'> {
4645
arrow?: boolean;
4746
}
4847

49-
const ActionIcon: FC<ActionIconProps> = ({
48+
const BaseActionIcon: FC<ActionIconProps> = ({
5049
placement,
5150
title,
5251
icon,
@@ -56,11 +55,9 @@ const ActionIcon: FC<ActionIconProps> = ({
5655
arrow = false,
5756
size = 'default',
5857
tooltipDelay = 0.5,
59-
prefixCls: customPrefixCls,
6058
...restProps
6159
}) => {
62-
const prefixCls = getPrefixCls('actionicon', customPrefixCls);
63-
const { styles, theme: token, cx } = useStyles({ size, prefixCls });
60+
const { styles, cx } = useStyles({ size });
6461

6562
const Icon = (
6663
<Button
@@ -75,16 +72,7 @@ const ActionIcon: FC<ActionIconProps> = ({
7572
);
7673

7774
return (
78-
<ConfigProvider
79-
componentToken={{
80-
Button: {
81-
colorText: token.colorTextTertiary,
82-
// TODO： Token 的提供不太合理，需要改造
83-
colorBgTextHover: token.colorFillSecondary,
84-
colorBgTextActive: token.colorFill,
85-
},
86-
}}
87-
>
75+
<>
8876
{!title ? (
8977
Icon
9078
) : (
@@ -98,6 +86,26 @@ const ActionIcon: FC<ActionIconProps> = ({
9886
{Icon}
9987
</Tooltip>
10088
)}
89+
</>
90+
);
91+
};
92+
93+
const ActionIcon = (props: ActionIconProps) => {
94+
const { size } = props || {};
95+
const { theme: token } = useStyles({ size });
96+
97+
return (
98+
<ConfigProvider
99+
componentToken={{
100+
Button: {
101+
colorText: token.colorTextTertiary,
102+
// TODO： Token 的提供不太合理，需要改造
103+
colorBgTextHover: token.colorFillSecondary,
104+
colorBgTextActive: token.colorFill,
105+
},
106+
}}
107+
>
108+
<BaseActionIcon {...props} />
101109
</ConfigProvider>
102110
);
103111
};

‎src/ActionIcon/__snapshots__/ActionIcon.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ exports[`ActionIcon > 可正常渲染 1`] = `
2929
3030
<div>
3131
<button
32-
class="studio-btn studio-btn-text studio-btn-icon-only studio-actionicon emotion-0"
32+
class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon emotion-0"
3333
type="button"
3434
>
3535
<span
36-
class="studio-btn-icon"
36+
class="ant-btn-icon"
3737
>
3838
<span
3939
aria-label="smile"
@@ -88,12 +88,12 @@ exports[`ActionIcon > 带有标题 1`] = `
8888
8989
<div>
9090
<button
91-
class="studio-btn studio-btn-text studio-btn-icon-only studio-actionicon emotion-0"
91+
class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon emotion-0"
9292
data-testid="smile"
9393
type="button"
9494
>
9595
<span
96-
class="studio-btn-icon"
96+
class="ant-btn-icon"
9797
>
9898
<span
9999
aria-label="smile"

‎src/ActionIcon/index.zh-CN.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ demo:
2121

2222
## API
2323

24-
| 参数 | 说明 | 类型 | 默认值 |
25-
| :-------- | :--- | :----------------------------------------- | :---- |
26-
| cursor | 鼠标类型 | `CSSProperties['cursor']` | - |
27-
| title | 动作提示 | `TooltipProps['title']` | - |
28-
| placement | 提示位置 | `TooltipProps['placement']` | - |
29-
| icon | 图标 | `ButtonProps['icon']` | - |
30-
| onClick | 点击回调 | `ButtonProps['onClick']` | - |
31-
| size | 图标尺寸 | `'default' \| 'large' \|'small' \| number` | small |
24+
| 参数 | 说明 | 类型 | 默认值 |
25+
| :-------- | :------- | :----------------------------------------- | :----- |
26+
| cursor | 鼠标类型 | `CSSProperties['cursor']` | - |
27+
| title | 动作提示 | `TooltipProps['title']` | - |
28+
| placement | 提示位置 | `TooltipProps['placement']` | - |
29+
| icon | 图标 | `ButtonProps['icon']` | - |
30+
| onClick | 点击回调 | `ButtonProps['onClick']` | - |
31+
| size | 图标尺寸 | `'default' \| 'large' \|'small' \| number` | small |
3232

3333
其他 API 参考 antd Button Props .

‎src/ActionIcon/style.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createStyles } from '../theme';
22

3-
export const useStyles = createStyles(({ token, css, cx }, { size, className, prefixCls }) => {
3+
export const useStyles = createStyles(({ token, css, cx, prefixCls }, { size, className }) => {
4+
const prefix = `${prefixCls}-${token.editorPrefix}-icon`;
45
const sizeBoundary =
56
typeof size === 'number'
67
? css`
@@ -28,7 +29,7 @@ export const useStyles = createStyles(({ token, css, cx }, { size, className, pr
2829
`;
2930

3031
return {
31-
container: cx(prefixCls, button, sizeBoundary, className),
32+
container: cx(prefix, button, sizeBoundary, className),
3233
tooltip: css`
3334
pointer-events: none;
3435
`,

0 commit comments

Comments
 (0)