Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve(design): ConfigProvider add appProps to control .ant-app style work #824

Merged
merged 1 commit into from
Nov 11, 2024
Merged

improve(design): ConfigProvider add appProps to control .ant-app style work #824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions packages/design/src/config-provider/__tests__/__snapshots__/appProps.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`ConfigProvider appProps > ConfigProvider styleProviderProps.component 1`] = `
<DocumentFragment>
<div>
Child 1
</div>
<div
class="ant-app"
>
<div>
Child 2
</div>
</div>
</DocumentFragment>
`;
17 changes: 17 additions & 0 deletions packages/design/src/config-provider/__tests__/appProps.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react';
import { render } from '@testing-library/react';
import { ConfigProvider } from '@oceanbase/design';

describe('ConfigProvider appProps', () => {
it('ConfigProvider styleProviderProps.component', () => {
const { asFragment } = render(
<ConfigProvider>
<div>Child 1</div>
<ConfigProvider appProps={{ component: 'div' }}>
<div>Child 2</div>
</ConfigProvider>
</ConfigProvider>
);
expect(asFragment()).toMatchSnapshot();
});
});
2 changes: 2 additions & 0 deletions packages/design/src/config-provider/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ nav:
<Alert type="warning" showIcon={true} message="📢 注意: 如果有多个 ConfigProvider，建议在最顶层的 ConfigProvider 开启 `injectStaticFunction` 即可，其他 ConfigProvider 则需要关闭该配置，否则静态方法可能会有冲突。"></Alert>

- 🆕 新增 `styleProviderProps` 属性，一般用于配置 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) 的 `hashPriority` 和 `transformers` 属性实现样式降级，来兼容 Chrome 88 以下的低版本浏览器，详见 [antd v5 样式兼容说明](https://ant-design.antgroup.com/docs/react/compatible-style-cn)。
- 🆕 新增 `appProps` 属性，用于配置内嵌的 [App 组件属性](https://ant-design.antgroup.com/components/app-cn#app)。

## 代码演示

Expand Down Expand Up @@ -55,5 +56,6 @@ export default App;
| table | Table 全局配置 | `{ selectionColumnWidth?: width; className?: string; style?: React.CSSProperties; }` | - | - |
| injectStaticFunction | 用于配置 `message`, `notification` 和 `Modal` 静态方法是否可以消费全局配置 <Alert type="warning" showIcon={true} message="📢 注意: 如果有多个 ConfigProvider，建议在最顶层的 ConfigProvider 开启 `injectStaticFunction` 即可，其他 ConfigProvider 则需要关闭该配置，否则静态方法可能会有冲突。"></Alert> | boolean | true | - |
| styleProviderProps | [StyleProvider 配置](https://github.com/ant-design/cssinjs#styleprovider)，一般用于配置 `hashPriority` 和 `transformers` 属性实现样式降级 | [StyleProviderProps](https://github.com/ant-design/cssinjs/blob/master/src/StyleContext.tsx#L88) | - | - |
| appProps | 内嵌的 App 组件属性 | [AppProps](https://ant-design.antgroup.com/components/app-cn#app) | - | - |

- 更多 API 详见 antd ConfigProvider 文档: https://ant.design/components/config-provider-cn
5 changes: 4 additions & 1 deletion packages/design/src/config-provider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {
ThemeConfig as AntThemeConfig,
} from 'antd/es/config-provider';
import type { ComponentStyleConfig } from 'antd/es/config-provider/context';
import type { AppProps } from 'antd/es/app';
import type { PaginationConfig } from 'antd/es/pagination';
import type { SpinIndicator } from 'antd/es/spin';
import { StyleProvider } from '@ant-design/cssinjs';
Expand Down Expand Up @@ -66,6 +67,7 @@ export interface ConfigProviderProps extends AntConfigProviderProps {
injectStaticFunction?: boolean;
// StyleProvider props
styleProviderProps?: StyleProviderProps;
appProps?: AppProps;
}

export interface ExtendedConfigConsumerProps {
Expand Down Expand Up @@ -99,6 +101,7 @@ const ConfigProvider: ConfigProviderType = ({
tabs,
injectStaticFunction = true,
styleProviderProps,
appProps,
...restProps
}) => {
// inherit from parent ConfigProvider
Expand Down Expand Up @@ -175,7 +178,7 @@ const ConfigProvider: ConfigProviderType = ({
<StyleProvider {...mergedStyleProviderProps}>
{/* Nested App component for static function of message, notification and Modal to consume ConfigProvider config */}
{/* ref: https://ant.design/components/app */}
<App component={false}>
<App component={false} {...appProps}>
{children}
{injectStaticFunction && <StaticFunction />}
</App>
Expand Down
Loading