From e2f98e59da7c6508a528864c5a17c594fd643bf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 13 May 2019 20:33:22 +0800
Subject: [PATCH] [improvement] Loading: optimize jsx

---
 packages/loading/index.tsx | 66 ++++++++++++++++++++------------------
 packages/utils/color.ts    |  1 +
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/packages/loading/index.tsx b/packages/loading/index.tsx
index c0e2cdb14..8c281eeb4 100644
--- a/packages/loading/index.tsx
+++ b/packages/loading/index.tsx
@@ -1,4 +1,5 @@
 import { use, suffixPx } from '../utils';
+import { GRAY } from '../utils/color';
 import { inherit } from '../utils/functional';
 
 // Types
@@ -16,7 +17,36 @@ export type LoadingProps = {
 };
 
 const [sfc, bem] = use('loading');
-const DEFAULT_COLOR = '#c9c9c9';
+
+function LoadingIcon(h: CreateElement, props: LoadingProps) {
+  if (props.type === 'spinner') {
+    const Spin = [];
+    for (let i = 0; i < 12; i++) {
+      Spin.push(<i />);
+    }
+    return Spin;
+  }
+
+  return (
+    <svg class={bem('circular')} viewBox="25 25 50 50">
+      <circle cx="50" cy="50" r="20" fill="none" />
+    </svg>
+  );
+}
+
+function LoadingText(h: CreateElement, props: LoadingProps, slots: DefaultSlots) {
+  if (slots.default) {
+    const style = props.textSize && {
+      fontSize: suffixPx(props.textSize)
+    };
+
+    return (
+      <span class={bem('text')} style={style}>
+        {slots.default()}
+      </span>
+    );
+  }
+}
 
 function Loading(
   h: CreateElement,
@@ -33,40 +63,12 @@ function Loading(
     style.height = iconSize;
   }
 
-  const Spin = [];
-  if (type === 'spinner') {
-    for (let i = 0; i < 12; i++) {
-      Spin.push(<i />);
-    }
-  }
-
-  const Circular = type === 'circular' && (
-    <svg class={bem('circular')} viewBox="25 25 50 50">
-      <circle cx="50" cy="50" r="20" fill="none" />
-    </svg>
-  );
-
-  function Text() {
-    if (slots.default) {
-      const style = props.textSize && {
-        fontSize: suffixPx(props.textSize)
-      };
-
-      return (
-        <span class={bem('text')} style={style}>
-          {slots.default()}
-        </span>
-      );
-    }
-  }
-
   return (
     <div class={bem([type, { vertical: props.vertical }])} {...inherit(ctx, true)}>
       <span class={bem('spinner', type)} style={style}>
-        {Spin}
-        {Circular}
+        {LoadingIcon(h, props)}
       </span>
-      {Text()}
+      {LoadingText(h, props, slots)}
     </div>
   );
 }
@@ -81,7 +83,7 @@ Loading.props = {
   },
   color: {
     type: String,
-    default: DEFAULT_COLOR
+    default: GRAY
   }
 };
 
diff --git a/packages/utils/color.ts b/packages/utils/color.ts
index 168d0bfcc..a3705bab9 100644
--- a/packages/utils/color.ts
+++ b/packages/utils/color.ts
@@ -2,4 +2,5 @@ export const RED = '#f44';
 export const BLUE = '#1989fa';
 export const GREEN = '#07c160';
 export const WHITE = '#fff';
+export const GRAY = '#c9c9c9';
 export const GRAY_DARK = '#969799';