From b5be3b4a62a0a676d730e193bb17df943de338ee Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Wed, 23 Dec 2020 22:25:37 +0800
Subject: [PATCH] feat(icon): icon-config-provider (private component)

---
 src/icon/src/Icon.js                    | 31 ++++++++++++++++++-------
 src/icon/src/IconConfigProvider.vue     | 21 +++++++++++++++++
 src/icon/src/common-props.js            |  8 +++++++
 src/icon/src/styles/themed-base.cssr.js | 23 +++++++-----------
 4 files changed, 61 insertions(+), 22 deletions(-)
 create mode 100644 src/icon/src/IconConfigProvider.vue
 create mode 100644 src/icon/src/common-props.js

diff --git a/src/icon/src/Icon.js b/src/icon/src/Icon.js
index c44ae1a62..493de8de3 100644
--- a/src/icon/src/Icon.js
+++ b/src/icon/src/Icon.js
@@ -2,10 +2,16 @@ import { h } from 'vue'
 import { configurable, themeable, withCssr } from '../../_mixins'
 import styles from './styles/index'
 import { formatLength, getSlot } from '../../_utils'
+import commonProps from './common-props'
 
 export default {
   __NAIVE_ICON__: true,
   name: 'Icon',
+  inject: {
+    NIconConfigProvider: {
+      default: null
+    }
+  },
   mixins: [configurable, themeable, withCssr(styles)],
   props: {
     size: {
@@ -25,7 +31,8 @@ export default {
     colorTransition: {
       type: Boolean,
       default: false
-    }
+    },
+    ...commonProps
   },
   computed: {
     styles () {
@@ -34,23 +41,31 @@ export default {
         fontSize: formatLength(size),
         color
       }
+    },
+    mergedDepth () {
+      const { depth } = this
+      if (depth !== undefined) return depth
+      return this.NIconConfigProvider?.depth
     }
   },
   render () {
     const parent = this.$parent
     if (parent && parent.$options.__NAIVE_ICON__) return getSlot(this)
     else {
-      const { mergedTheme, depth, colorTransition } = this
+      const { mergedTheme, mergedDepth, colorTransition } = this
       return h(
         'i',
         {
           ...this.$attrs,
-          class: {
-            'n-icon': true,
-            [`n-${mergedTheme}-theme`]: mergedTheme,
-            [`n-icon--${depth}-depth`]: depth,
-            'n-icon--color-transition': colorTransition || depth !== undefined
-          },
+          class: [
+            'n-icon',
+            {
+              [`n-${mergedTheme}-theme`]: mergedTheme,
+              [`n-icon--${mergedDepth}-depth`]: mergedDepth,
+              'n-icon--color-transition':
+                colorTransition || mergedDepth !== undefined
+            }
+          ],
           style: {
             ...this.styles,
             ...this.mergedStyle
diff --git a/src/icon/src/IconConfigProvider.vue b/src/icon/src/IconConfigProvider.vue
new file mode 100644
index 000000000..7ca2d229b
--- /dev/null
+++ b/src/icon/src/IconConfigProvider.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+// private
+import { provide } from 'vue'
+import commonProps from './common-props'
+
+export default {
+  name: 'NIconConfigProvider',
+  props: {
+    ...commonProps
+  },
+  setup (props) {
+    provide('NIconConfigProvider', props)
+  }
+}
+</script>
diff --git a/src/icon/src/common-props.js b/src/icon/src/common-props.js
new file mode 100644
index 000000000..857466317
--- /dev/null
+++ b/src/icon/src/common-props.js
@@ -0,0 +1,8 @@
+export default {
+  depth: {
+    validator (value) {
+      return [1, 2, 3, 4, 5, '1', '2', '3', '4', '5'].includes(value)
+    },
+    default: undefined
+  }
+}
diff --git a/src/icon/src/styles/themed-base.cssr.js b/src/icon/src/styles/themed-base.cssr.js
index 6f41a2639..67d04aeda 100644
--- a/src/icon/src/styles/themed-base.cssr.js
+++ b/src/icon/src/styles/themed-base.cssr.js
@@ -1,11 +1,15 @@
-import { c, cTB, cM, cB } from '../../../_utils/cssr'
+import { c, cTB, cM } from '../../../_utils/cssr'
 
 export default c([
   ({ props }) => {
     const {
-      color
-    } = props.$local
-    const { cubicBezierEaseInOut } = props.$global
+      $global: {
+        cubicBezierEaseInOut
+      },
+      $local: {
+        color
+      }
+    } = props
     return [
       cTB('icon', {
         raw: `
@@ -34,16 +38,7 @@ export default c([
             opacity: props.$local[`opacity${v}Depth`]
           })
         ]))
-      ]),
-      [1, 2, 3, 4, 5].map(v => cB(`icon-${v}-depth >`, [
-        cTB('icon', {
-          color
-        }, [
-          c('svg', {
-            opacity: props.$local[`opacity${v}Depth`]
-          })
-        ])
-      ]))
+      ])
     ]
   }
 ])