From 5e7fafa39f55ea35cf0d72121543b73067c30103 Mon Sep 17 00:00:00 2001
From: kalykun <984757534@qq.com>
Date: Thu, 9 Sep 2021 22:48:34 +0800
Subject: [PATCH] feat(config-provider): add global config of the Empty
 component (#1118)

* feat(config-provider): add golbal config of the Empty component

* Fix code

* Code optimization

* Code optimization

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>
---
 CHANGELOG.en-US.md                            |  1 +
 CHANGELOG.zh-CN.md                            |  1 +
 src/config-provider/src/internal-interface.ts |  2 ++
 src/empty/src/Empty.tsx                       | 25 ++++++++++++++++---
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 57bd6a1ec..521aa0dde 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -8,6 +8,7 @@
 - `n-tree` add `check-strategy` prop.
 - `n-date-picker` add `input-readonly` prop, closes [#1120](https://github.com/TuSimple/naive-ui/issues/1120).
 - `n-time-picker` add `input-readonly` prop, closes [#1120](https://github.com/TuSimple/naive-ui/issues/1120).
+- `n-config-provider` add golbal config of the `Empty` component, closes [#1092](https://github.com/TuSimple/naive-ui/issues/1092).
 
 ### Fixes
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 9b25ae070..0d8f6fc94 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -8,6 +8,7 @@
 - `n-tree` 增加 `check-strategy` 文档属性
 - `n-date-picker` 新增 `input-readonly` 属性，关闭 [#1120](https://github.com/TuSimple/naive-ui/issues/1120)
 - `n-time-picker` 新增 `input-readonly` 属性，关闭 [#1120](https://github.com/TuSimple/naive-ui/issues/1120)
+- `n-config-provider` 增加 `Empty` 组件的全局配置，关闭 [#1092](https://github.com/TuSimple/naive-ui/issues/1092)
 
 ### Fixes
 
diff --git a/src/config-provider/src/internal-interface.ts b/src/config-provider/src/internal-interface.ts
index f37525086..e70383177 100644
--- a/src/config-provider/src/internal-interface.ts
+++ b/src/config-provider/src/internal-interface.ts
@@ -84,6 +84,7 @@ import { Size as ButtonSize } from '../../button/src/interface'
 import { DataTableRenderFilter, DataTableRenderSorter } from '../../data-table'
 import { IconPlacement } from '../../dialog/src/interface'
 import type { GlobalTheme, GlobalThemeOverrides } from './interface'
+import type { EmptyProps } from '../../empty'
 
 export interface GlobalThemeWithoutCommon {
   Alert?: AlertTheme
@@ -182,6 +183,7 @@ export interface GlobalComponentConfig {
   DynamicInput?: {
     buttonSize?: ButtonSize
   }
+  Empty?: Pick<EmptyProps, 'description' | 'renderIcon'>
 }
 
 export interface GlobalIconConfig {
diff --git a/src/empty/src/Empty.tsx b/src/empty/src/Empty.tsx
index 55d09dd90..68c850cd7 100644
--- a/src/empty/src/Empty.tsx
+++ b/src/empty/src/Empty.tsx
@@ -4,7 +4,9 @@ import {
   computed,
   PropType,
   CSSProperties,
-  renderSlot
+  renderSlot,
+  inject,
+  VNodeChild
 } from 'vue'
 import { EmptyIcon } from '../../_internal/icons'
 import { useConfig, useLocale, useTheme } from '../../_mixins'
@@ -14,6 +16,7 @@ import { NBaseIcon } from '../../_internal'
 import { emptyLight } from '../styles'
 import type { EmptyTheme } from '../styles'
 import style from './styles/index.cssr'
+import { configProviderInjectionKey } from '../../config-provider/src/ConfigProvider'
 
 const emptyProps = {
   ...(useTheme.props as ThemeProps<EmptyTheme>),
@@ -28,7 +31,8 @@ const emptyProps = {
   size: {
     type: String as PropType<'small' | 'medium' | 'large' | 'huge'>,
     default: 'medium'
-  }
+  },
+  renderIcon: Function as PropType<() => VNodeChild>
 }
 
 export type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>
@@ -47,10 +51,23 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     const { localeRef } = useLocale('Empty')
+    const NConfigProvider = inject(configProviderInjectionKey, null)
+    const mergedDescriptionRef = computed(() => {
+      return (
+        props.description ??
+        NConfigProvider?.mergedComponentPropsRef.value?.Empty?.description
+      )
+    })
+    const mergedRenderIconRef = computed(
+      () =>
+        NConfigProvider?.mergedComponentPropsRef.value?.Empty?.renderIcon ||
+        (() => <EmptyIcon />)
+    )
     return {
       mergedClsPrefix: mergedClsPrefixRef,
+      mergedRenderIcon: mergedRenderIconRef,
       localizedDescription: computed(() => {
-        return props.description || localeRef.value.description
+        return mergedDescriptionRef.value || localeRef.value.description
       }),
       cssVars: computed(() => {
         const { size } = props
@@ -85,7 +102,7 @@ export default defineComponent({
         <div class={`${mergedClsPrefix}-empty__icon`}>
           {renderSlot($slots, 'icon', undefined, () => [
             <NBaseIcon clsPrefix={mergedClsPrefix}>
-              {{ default: () => <EmptyIcon /> }}
+              {{ default: this.mergedRenderIcon }}
             </NBaseIcon>
           ])}
         </div>