From 377635cb9a84e7586d40bf3079e1094f8ccc0a9a Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 25 Jan 2019 20:51:02 +0800
Subject: [PATCH] [improvement] Progress: jsx (#2615)

---
 packages/progress/index.js                    |  86 +++++++++++++++
 packages/progress/index.vue                   | 102 ------------------
 .../test/__snapshots__/demo.spec.js.snap      |  10 +-
 .../test/__snapshots__/index.spec.js.snap     |   4 +-
 4 files changed, 93 insertions(+), 109 deletions(-)
 create mode 100644 packages/progress/index.js
 delete mode 100644 packages/progress/index.vue

diff --git a/packages/progress/index.js b/packages/progress/index.js
new file mode 100644
index 000000000..3f9d2850c
--- /dev/null
+++ b/packages/progress/index.js
@@ -0,0 +1,86 @@
+import { use, isDef } from '../utils';
+import { BLUE, WHITE } from '../utils/color';
+
+const [sfc, bem] = use('progress');
+
+export default sfc({
+  props: {
+    inactive: Boolean,
+    pivotText: String,
+    pivotColor: String,
+    percentage: {
+      type: Number,
+      required: true,
+      validator: value => value >= 0 && value <= 100
+    },
+    showPivot: {
+      type: Boolean,
+      default: true
+    },
+    color: {
+      type: String,
+      default: BLUE
+    },
+    textColor: {
+      type: String,
+      default: WHITE
+    }
+  },
+
+  data() {
+    return {
+      pivotWidth: 0,
+      progressWidth: 0
+    };
+  },
+
+  mounted() {
+    this.getWidth();
+  },
+
+  watch: {
+    showPivot() {
+      this.getWidth();
+    },
+
+    pivotText() {
+      this.getWidth();
+    }
+  },
+
+  methods: {
+    getWidth() {
+      this.progressWidth = this.$el.offsetWidth;
+      this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;
+    }
+  },
+
+  render(h) {
+    const { pivotText, percentage } = this;
+    const text = isDef(pivotText) ? pivotText : percentage + '%';
+    const showPivot = this.showPivot && text;
+    const background = this.inactive ? '#cacaca' : this.color;
+
+    const pivotStyle = {
+      color: this.textColor,
+      background: this.pivotColor || background
+    };
+
+    const portionStyle = {
+      background,
+      width: ((this.progressWidth - this.pivotWidth) * percentage) / 100 + 'px'
+    };
+
+    return (
+      <div class={bem()}>
+        <span class={bem('portion', { 'with-pivot': showPivot })} style={portionStyle}>
+          {showPivot && (
+            <span ref="pivot" style={pivotStyle} class={bem('pivot')}>
+              {text}
+            </span>
+          )}
+        </span>
+      </div>
+    );
+  }
+});
diff --git a/packages/progress/index.vue b/packages/progress/index.vue
deleted file mode 100644
index dd8d0c140..000000000
--- a/packages/progress/index.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <div :class="b()">
-    <span
-      :class="b('portion', { 'with-pivot': showPivot && text })"
-      :style="portionStyle"
-    >
-      <span
-        v-if="showPivot && text"
-        v-text="text"
-        ref="pivot"
-        :style="pivotStyle"
-        :class="b('pivot')"
-      />
-    </span>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-import { BLUE, WHITE } from '../utils/color';
-
-export default create({
-  name: 'progress',
-
-  props: {
-    inactive: Boolean,
-    pivotText: String,
-    pivotColor: String,
-    percentage: {
-      type: Number,
-      required: true,
-      validator: value => value >= 0 && value <= 100
-    },
-    showPivot: {
-      type: Boolean,
-      default: true
-    },
-    color: {
-      type: String,
-      default: BLUE
-    },
-    textColor: {
-      type: String,
-      default: WHITE
-    }
-  },
-
-  data() {
-    return {
-      pivotWidth: 0,
-      progressWidth: 0
-    };
-  },
-
-  computed: {
-    text() {
-      return this.isDef(this.pivotText)
-        ? this.pivotText
-        : this.percentage + '%';
-    },
-
-    currentColor() {
-      return this.inactive ? '#cacaca' : this.color;
-    },
-
-    pivotStyle() {
-      return {
-        color: this.textColor,
-        background: this.pivotColor || this.currentColor
-      };
-    },
-
-    portionStyle() {
-      return {
-        width: (this.progressWidth - this.pivotWidth) * this.percentage / 100 + 'px',
-        background: this.currentColor
-      };
-    }
-  },
-
-  mounted() {
-    this.getWidth();
-  },
-
-  watch: {
-    showPivot() {
-      this.getWidth();
-    },
-
-    pivotText() {
-      this.getWidth();
-    }
-  },
-
-  methods: {
-    getWidth() {
-      this.progressWidth = this.$el.offsetWidth;
-      this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;
-    }
-  }
-});
-</script>
diff --git a/packages/progress/test/__snapshots__/demo.spec.js.snap b/packages/progress/test/__snapshots__/demo.spec.js.snap
index 5260086da..12c10274d 100644
--- a/packages/progress/test/__snapshots__/demo.spec.js.snap
+++ b/packages/progress/test/__snapshots__/demo.spec.js.snap
@@ -3,15 +3,15 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#1989fa;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#1989fa;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span></div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#cacaca;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span></div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f44;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">红色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#f2826a;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#f44;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">红色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:linear-gradient(to right, #be99ff, #7232dd);width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span></div>
   </div>
 </div>
 `;
diff --git a/packages/progress/test/__snapshots__/index.spec.js.snap b/packages/progress/test/__snapshots__/index.spec.js.snap
index 2b20d1053..e54cd5fd8 100644
--- a/packages/progress/test/__snapshots__/index.spec.js.snap
+++ b/packages/progress/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(25, 137, 250);"><!----></span></div>`;
+exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"></span></div>`;
 
-exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(25, 137, 250);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span></div>`;
+exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span></div>`;