From e64dd9b121e2a875d5a8db8638dff07d43979d70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 30 Apr 2019 17:54:32 +0800
Subject: [PATCH] [new feature] Loading: size prop support number type

---
 docs/markdown/v2-progress-tracking.md           |  1 +
 packages/loading/en-US.md                       |  4 ++--
 packages/loading/index.tsx                      | 17 +++++++++--------
 .../test/__snapshots__/index.spec.js.snap       |  2 ++
 packages/loading/test/index.spec.js             | 10 ++++++++++
 packages/loading/zh-CN.md                       |  2 +-
 6 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index b3c287ef3..c0d6cdb1c 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -55,6 +55,7 @@
 
 - 新增`default`插槽
 - 新增`text-size`属性
+- 支持`Number`类型的`size`属性
 
 ## NoticeBar
 
diff --git a/packages/loading/en-US.md b/packages/loading/en-US.md
index 0cc3f6ae8..9d8a037be 100644
--- a/packages/loading/en-US.md
+++ b/packages/loading/en-US.md
@@ -35,11 +35,11 @@ Vue.use(Loading);
 |------|------|------|------|
 | color | Loading color | `String` | `#c9c9c9` |  |
 | type | Can be set to `spinner` | `String` | `circular` |
-| size | Icon size | `String` | `30px` |
+| size | Icon size | `String | Number` | `30px` |
 | text-size | Text font size | `String | Number` | `14px` |
 
 ### Slot
 
 | Name | Description |
 |------|------|
-| default | Loading text |
\ No newline at end of file
+| default | Loading text |
diff --git a/packages/loading/index.tsx b/packages/loading/index.tsx
index 76535153c..b336388c8 100644
--- a/packages/loading/index.tsx
+++ b/packages/loading/index.tsx
@@ -6,8 +6,8 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
 export type LoadingProps = {
-  type: string;
-  size?: string;
+  type: 'circular' | 'spinner';
+  size?: string | number;
   color: string;
   textSize?: string | number;
 };
@@ -23,11 +23,12 @@ function Loading(
 ) {
   const { color, size, type } = props;
 
-  const style = {
-    color,
-    width: size,
-    height: size
-  };
+  const style: { [key: string]: string } = { color };
+  if (size) {
+    const iconSize = suffixPx(size);
+    style.width = iconSize;
+    style.height = iconSize;
+  }
 
   const Spin = [];
   if (type === 'spinner') {
@@ -68,7 +69,7 @@ function Loading(
 }
 
 Loading.props = {
-  size: String,
+  size: [String, Number],
   textSize: [String, Number],
   type: {
     type: String,
diff --git a/packages/loading/test/__snapshots__/index.spec.js.snap b/packages/loading/test/__snapshots__/index.spec.js.snap
index 17965148b..82d65103e 100644
--- a/packages/loading/test/__snapshots__/index.spec.js.snap
+++ b/packages/loading/test/__snapshots__/index.spec.js.snap
@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`size prop 1`] = `<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>`;
+
 exports[`text-size prop 1`] = `<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text" style="font-size: 20px;">Text</span></div>`;
diff --git a/packages/loading/test/index.spec.js b/packages/loading/test/index.spec.js
index 497f6b773..8f9d385e7 100644
--- a/packages/loading/test/index.spec.js
+++ b/packages/loading/test/index.spec.js
@@ -1,6 +1,16 @@
 import { mount } from '../../../test/utils';
 import Loading from '..';
 
+test('size prop', () => {
+  const wrapper = mount(Loading, {
+    propsData: {
+      size: 20
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('text-size prop', () => {
   const wrapper = mount(Loading, {
     propsData: {
diff --git a/packages/loading/zh-CN.md b/packages/loading/zh-CN.md
index 53c7fab3b..9ea169ad6 100644
--- a/packages/loading/zh-CN.md
+++ b/packages/loading/zh-CN.md
@@ -35,7 +35,7 @@ Vue.use(Loading);
 |------|------|------|------|------|
 | color | 颜色 | `String` | `#c9c9c9` | - |
 | type | 类型，可选值为 `spinner` | `String` | `circular` | - |
-| size | 加载图标大小 | `String` | `30px` | - |
+| size | 加载图标大小 | `String | Number` | `30px` | - |
 | text-size | 文字大小 | `String | Number` | `14px` | 2.0.0 |
 
 ### Slot