From 734ee1ffc59c04812d8aa8df6120b5890faec49e Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 24 Dec 2020 00:22:22 +0800
Subject: [PATCH] refactor(cascader): new icon loading impl use new base
 loading

---
 src/_base/loading/src/Loading.vue           | 10 ++--
 src/_base/selection/src/Suffix.vue          |  1 +
 src/cascader/src/CascaderOption.vue         | 21 ++++-----
 src/cascader/src/styles/themed-base.cssr.js | 51 +++++++++------------
 4 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/src/_base/loading/src/Loading.vue b/src/_base/loading/src/Loading.vue
index 2d28bbed0..2366e6a31 100644
--- a/src/_base/loading/src/Loading.vue
+++ b/src/_base/loading/src/Loading.vue
@@ -11,15 +11,15 @@
         v-if="show"
         key="loading"
         class="n-base-loading-circular n-base-loading__icon"
-        :viewBox="`0 0 ${radius * 2} ${radius * 2}`"
+        :viewBox="`0 0 ${(radius * 2) / scale} ${(radius * 2) / scale}`"
       >
         <circle
           :style="{
             strokeWidth
           }"
           class="n-base-loading-circular-path"
-          :cx="radius"
-          :cy="radius"
+          :cx="radius / scale"
+          :cy="radius / scale"
           fill="none"
           :r="radius - strokeWidth / 2"
         />
@@ -43,6 +43,10 @@ export default {
   },
   mixins: [withCssr(styles)],
   props: {
+    scale: {
+      type: Number,
+      default: 1
+    },
     radius: {
       type: Number,
       default: 100
diff --git a/src/_base/selection/src/Suffix.vue b/src/_base/selection/src/Suffix.vue
index a9c0daae4..dd09ec5ec 100644
--- a/src/_base/selection/src/Suffix.vue
+++ b/src/_base/selection/src/Suffix.vue
@@ -3,6 +3,7 @@
     :theme="theme"
     class="n-base-selection__mark"
     :stroke-width="20"
+    :scale="0.8"
     :show="loading"
   >
     <n-base-clear-button
diff --git a/src/cascader/src/CascaderOption.vue b/src/cascader/src/CascaderOption.vue
index a5054ad73..5229df17d 100644
--- a/src/cascader/src/CascaderOption.vue
+++ b/src/cascader/src/CascaderOption.vue
@@ -21,21 +21,21 @@
     <span class="n-cascader-option__label">{{ label }}</span>
     <div class="n-cascader-option__suffix">
       <div class="n-cascader-option-icon-placeholder">
-        <n-icon-switch-transition v-if="!isLeaf">
-          <n-base-loading
-            v-if="isLoading"
-            key="loading"
-            class="n-cascader-option-icon"
-            :theme="NCascader.mergedTheme"
-          />
+        <n-base-loading
+          v-if="!isLeaf"
+          :scale="0.8"
+          :stroke-width="20"
+          :show="isLoading"
+          class="n-cascader-option-icon"
+          :theme="NCascader.mergedTheme"
+        >
           <n-icon
-            v-else
             key="arrow"
             class="n-cascader-option-icon n-cascader-option-icon--arrow"
           >
             <chevron-right-icon />
           </n-icon>
-        </n-icon-switch-transition>
+        </n-base-loading>
         <transition
           v-else-if="!multiple && leafOnly"
           name="n-fade-in-scale-up-transition"
@@ -55,7 +55,7 @@
 <script>
 import { computed, inject, toRef } from 'vue'
 import { NCheckbox } from '../../checkbox'
-import { NBaseLoading, NIconSwitchTransition } from '../../_base'
+import { NBaseLoading } from '../../_base'
 import { ChevronRightIcon, CheckmarkIcon } from '../../_base/icons'
 import { useMemo } from 'vooks'
 
@@ -64,7 +64,6 @@ export default {
   components: {
     NCheckbox,
     NBaseLoading,
-    NIconSwitchTransition,
     ChevronRightIcon,
     CheckmarkIcon
   },
diff --git a/src/cascader/src/styles/themed-base.cssr.js b/src/cascader/src/styles/themed-base.cssr.js
index 9112eecbb..d3f918ed5 100644
--- a/src/cascader/src/styles/themed-base.cssr.js
+++ b/src/cascader/src/styles/themed-base.cssr.js
@@ -1,29 +1,30 @@
 import { c, cTB, cB, cE, cM } from '../../../_utils/cssr'
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
-import iconSwitchTransition from '../../../_styles/transitions/icon-switch'
 import { depx, pxfy } from 'seemly'
 
 export default
 c([
   ({ props }) => {
     const {
-      cubicBezierEaseInOut,
-      transformDebounceScale
-    } = props.$global
-    const {
-      arrowColor,
-      optionTextColor,
-      optionTextColorMatched,
-      optionTextColorDisabled,
-      optionCheckMarkColor,
-      menuColor,
-      menuBoxShadow,
-      menuBorderColor,
-      menuBorderRadius,
-      optionColorHover,
-      optionHeight,
-      optionFontSize
-    } = props.$local
+      $local: {
+        arrowColor,
+        optionTextColor,
+        optionTextColorMatched,
+        optionTextColorDisabled,
+        optionCheckMarkColor,
+        menuColor,
+        menuBoxShadow,
+        menuBorderColor,
+        menuBorderRadius,
+        optionColorHover,
+        optionHeight,
+        optionFontSize
+      },
+      $global: {
+        cubicBezierEaseInOut,
+        transformDebounceScale
+      }
+    } = props
     const menuHeight = pxfy(depx(optionHeight) * 6.6)
     return cTB(
       'cascader-menu',
@@ -119,19 +120,13 @@ c([
             justifyContent: 'center'
           }),
           cB('cascader-option-icon-placeholder', {
+            lineHeight: 0,
             position: 'relative',
             width: '16px',
             height: '16px',
             fontSize: '16px'
           }, [
-            cB('cascader-option-icon', {
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0
-            }, [
-              iconSwitchTransition(),
+            cB('cascader-option-icon', [
               cM('checkmark', {
                 color: optionCheckMarkColor
               }, [
@@ -143,9 +138,7 @@ c([
             ])
           ]),
           cM('selected', {
-            raw: `
-              color: ${optionTextColorMatched}
-            `
+            color: optionTextColorMatched
           }),
           cM('active', {
             color: optionTextColorMatched,