feat(design): Customize ConfigProvider renderEmpty for all components

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     'no-unused-expressions': 'off',
     'jsx-a11y/mouse-events-have-key-events': 'off',
     'react/require-default-props': 'off',
+    'react/self-closing-comp': 'off',
     'no-shadow': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     'global-require': 'warn',

packages/design/src/config-provider/DefaultRenderEmpty.tsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import type { ConfigConsumerProps } from '.';
+import { ConfigContext } from '.';
+import Empty from '../empty';
+
+interface EmptyProps {
+  componentName?: string;
+}
+
+/* refer to: https://github.com/ant-design/ant-design/blob/master/components/config-provider/defaultRenderEmpty.tsx */
+const DefaultRenderEmpty: React.FC<EmptyProps> = props => {
+  const { componentName } = props;
+  const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
+  const prefix = getPrefixCls('empty');
+  switch (componentName) {
+    case 'Select':
+    case 'TreeSelect':
+    case 'Cascader':
+    case 'Transfer':
+    case 'Mentions':
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={`${prefix}-small`} />;
+    default:
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+  }
+};
+
+export type RenderEmptyHandler = (componentName?: string) => React.ReactNode;
+
+export default DefaultRenderEmpty;

packages/design/src/config-provider/index.md

@@ -6,6 +6,7 @@ nav:
 ---
 
 - 🔥 完全继承 antd [ConfigProvider](https://ant.design/components/config-provider-cn) 的能力和 API，可无缝切换。
+- 🌈 定制全局主题和空状态，以符合 OceanBase Design 设计规范。
 - 🆕 默认内嵌 [App 包裹组件](https://ant.design/components/app-cn)，支持 message, notification 和 Modal 等静态方法消费 ConfigProvider 配置。
 - 🆕 新增 `table.selectionColumnWidth` 属性，用于配置表格的展开列宽度。
 - 🆕 新增 `injectStaticFunction` 属性，用于配置 `message`, `notification` 和 `Modal` 静态方法是否可以消费全局配置，默认开启。
@@ -21,8 +22,9 @@ nav:
 <code src="./demo/size.tsx" title="尺寸"></code>
 <code src="./demo/theme.tsx" title="主题"></code>
 <code src="./demo/spin.tsx" title="Spin"></code>
+<code src="../empty/demo/config-provider.tsx" title="空状态"></code>
 
-### 统一样式前缀
+### 样式前缀
 
 - 通过 `prefixCls` 和 `iconPrefixCls` 可设置 antd 组件和图标的统一样式前缀。
 

packages/design/src/config-provider/index.tsx

@@ -16,6 +16,7 @@ import StaticFunction from '../static-function';
 import themeConfig from '../theme';
 import defaultTheme from '../theme/default';
 import darkTheme from '../theme/dark';
+import DefaultRenderEmpty from './DefaultRenderEmpty';
 import type { NavigateFunction } from './navigate';
 import type { Locale } from '../locale';
 
@@ -127,6 +128,10 @@ const ConfigProvider: ConfigProviderType = ({
         },
         mergedTheme
       )}
+      renderEmpty={
+        parentContext.renderEmpty ||
+        (componentName => <DefaultRenderEmpty componentName={componentName} />)
+      }
       {...restProps}
     >
       <ExtendedConfigContext.Provider

packages/design/src/empty/demo/config-provider.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Cascader, List, Select, Space, Table, Transfer, TreeSelect } from '@oceanbase/design';
+
+const style: React.CSSProperties = { width: 200 };
+
+const App: React.FC = () => {
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <h4>Select</h4>
+      <Select style={style} />
+      <h4>TreeSelect</h4>
+      <TreeSelect style={style} treeData={[]} />
+      <h4>Cascader</h4>
+      <Cascader style={style} options={[]} showSearch />
+      <h4>Transfer</h4>
+      <Transfer />
+      <h4>Table</h4>
+      <Table
+        style={{ marginTop: 8 }}
+        columns={[
+          { title: 'Name', dataIndex: 'name', key: 'name' },
+          { title: 'Age', dataIndex: 'age', key: 'age' },
+        ]}
+      />
+      <h4>List</h4>
+      <List />
+    </Space>
+  );
+};
+
+export default App;

packages/design/src/empty/index.md

@@ -6,7 +6,7 @@ nav:
 ---
 
 - 🔥 完全兼容 antd [Empty](https://ant.design/components/Empty-cn) 的能力和 API，可无缝切换。
-- 💄 定制插图、主题和样式，符合 OceanBase Design 设计规范。
+- 💄 定制插图、主题和样式，以符合 OceanBase Design 设计规范。
 - 🆕 新增 `title` 属性，用于设置空状态标题。
 - 🆕 新增 `steps` 属性，用于设置步骤引导。
 - 🆕 新增 `layout` 属性，用于设置空状态布局，默认为 `vertical`。
@@ -27,6 +27,8 @@ nav:
 
 <code src="./demo/with-page-container.tsx" title="和页容器搭配使用"></code>
 
+<code src="./demo/config-provider.tsx" title="全局组件的 Empty 样式"></code>
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |