[improvement] Loading: jsx (#2540)

packages/loading/index.js

@@ -0,0 +1,52 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('loading');
+const DEFAULT_COLOR = '#c9c9c9';
+
+export default sfc({
+  props: {
+    size: String,
+    type: {
+      type: String,
+      default: 'circular'
+    },
+    color: {
+      type: String,
+      default: DEFAULT_COLOR
+    }
+  },
+
+  render(h) {
+    const { color, size, type } = this;
+
+    const colorType = color === 'white' || color === 'black' ? color : '';
+
+    const style = {
+      color: color === 'black' ? DEFAULT_COLOR : color,
+      width: size,
+      height: size
+    };
+
+    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>
+    );
+
+    return (
+      <div class={bem([type, colorType])} style={style}>
+        <span class={bem('spinner', type)}>
+          {Spin}
+          {Circular}
+        </span>
+      </div>
+    );
+  }
+});

packages/loading/index.vue

@@ -1,62 +0,0 @@
-<template>
-  <div
-    :class="b([type, colorType])"
-    :style="style"
-  >
-    <span :class="b('spinner', type)">
-      <i
-        v-for="(item, index) in (type === 'spinner' ? 12 : 0)"
-        :key="index"
-      />
-      <svg
-        v-if="type === 'circular'"
-        :class="b('circular')"
-        viewBox="25 25 50 50"
-      >
-        <circle
-          cx="50"
-          cy="50"
-          r="20"
-          fill="none"
-        />
-      </svg>
-    </span>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create-basic';
-
-const DEFAULT_COLOR = '#c9c9c9';
-
-export default create({
-  name: 'loading',
-
-  props: {
-    size: String,
-    type: {
-      type: String,
-      default: 'circular'
-    },
-    color: {
-      type: String,
-      default: DEFAULT_COLOR
-    }
-  },
-
-  computed: {
-    colorType() {
-      const { color } = this;
-      return color === 'white' || color === 'black' ? color : '';
-    },
-
-    style() {
-      return {
-        color: this.color === 'black' ? DEFAULT_COLOR : this.color,
-        width: this.size,
-        height: this.size
-      };
-    }
-  }
-});
-</script>

packages/loading/test/__snapshots__/demo.spec.js.snap

@@ -7,8 +7,8 @@ exports[`renders demo correctly 1`] = `
     <div class="van-loading van-loading--circular van-loading--white" style="color:white;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
   </div>
   <div>
-    <div class="van-loading van-loading--spinner van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <!----></span></div>
+    <div class="van-loading van-loading--spinner van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
-    <div class="van-loading van-loading--spinner van-loading--white" style="color:white;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <!----></span></div>
+    <div class="van-loading van-loading--spinner van-loading--white" style="color:white;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
   </div>
 </div>
 `;