[improvement] Loading: jsx (#2540)

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -39,7 +39,7 @@ exports[`create a AddressEdit 1`] = `
         <div class="van-picker__confirm">确认</div>
       </div>
       <div class="van-picker__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;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 class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;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 class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">

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

@@ -8,9 +8,9 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
   <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--loading">
-      <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><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 class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><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>
     </button> <button class="van-button van-button--danger van-button--normal van-button--loading">
-      <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><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 class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><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>
     </button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
   <div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>

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

@@ -3,12 +3,12 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;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 class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;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 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 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>
 `;

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

@@ -86,7 +86,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-picker">
       <!---->
       <div class="van-picker__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;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 class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;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 class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column column1" style="height:220px;">

packages/pull-refresh/test/__snapshots__/index.spec.js.snap

@@ -28,7 +28,7 @@ exports[`change head content when pulling down 3`] = `
     <div class="van-pull-refresh__head">
       <!---->
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><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> <span>释放即可刷新...</span>
+        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><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> <span>释放即可刷新...</span>
       </div>
     </div>
   </div>
@@ -41,7 +41,7 @@ exports[`change head content when pulling down 4`] = `
     <div class="van-pull-refresh__head">
       <!---->
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><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> <span>释放即可刷新...</span>
+        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><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> <span>释放即可刷新...</span>
       </div>
     </div>
   </div>

packages/submit-bar/test/__snapshots__/demo.spec.js.snap

@@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-submit-bar__bar">
         <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button class="van-button van-button--danger van-button--large van-button--square van-button--loading">
-          <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><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 class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><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>
         </button>
       </div>
     </div>

packages/switch-cell/test/__snapshots__/demo.spec.js.snap

@@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value">
           <div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
             <div class="van-switch__node">
-              <div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;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 class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;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>

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

@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
       <div class="van-switch__node">
-        <div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;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 class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;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>