[improvement] Steps: jsx (#2623)

packages/steps/index.js

@@ -0,0 +1,57 @@
+import { use } from '../utils';
+import { GREEN } from '../utils/color';
+import Icon from '../icon';
+
+const [sfc, bem] = use('steps');
+
+export default sfc({
+  props: {
+    icon: String,
+    title: String,
+    active: Number,
+    iconClass: String,
+    description: String,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    activeColor: {
+      type: String,
+      default: GREEN
+    }
+  },
+
+  data() {
+    return {
+      steps: []
+    };
+  },
+
+  render(h) {
+    const { icon, title, description, $slots } = this;
+
+    const StatusIcon = ($slots.icon || icon) && (
+      <div class={bem('icon')}>{$slots.icon || <Icon name={icon} class={this.iconClass} />}</div>
+    );
+
+    const StatusMessage = (
+      <div class={bem('message')}>
+        <div class={bem('title')}>{title}</div>
+        <div class={[bem('desc'), 'van-ellipsis']}>{description}</div>
+      </div>
+    );
+
+    return (
+      <div class={bem([this.direction])}>
+        {(title || description) && (
+          <div class={bem('status')}>
+            {StatusIcon}
+            {StatusMessage}
+            {$slots['message-extra']}
+          </div>
+        )}
+        <div class={bem('items', { alone: !title && !description })}>{$slots.default}</div>
+      </div>
+    );
+  }
+});

packages/steps/index.vue

@@ -1,66 +0,0 @@
-<template>
-  <div :class="b([direction])">
-    <div
-      v-if="title || description"
-      :class="b('status')"
-    >
-      <div
-        v-if="icon || $slots.icon"
-        :class="b('icon')"
-      >
-        <slot name="icon">
-          <icon
-            :name="icon"
-            :class="iconClass"
-          />
-        </slot>
-      </div>
-      <div :class="b('message')">
-        <div
-          :class="b('title')"
-          v-text="title"
-        />
-        <div
-          :class="b('desc')"
-          class="van-ellipsis"
-          v-text="description"
-        />
-      </div>
-      <slot name="message-extra" />
-    </div>
-    <div :class="b('items', { alone: !title && !description })">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-import { GREEN } from '../utils/color';
-
-export default create({
-  name: 'steps',
-
-  props: {
-    icon: String,
-    title: String,
-    active: Number,
-    iconClass: String,
-    description: String,
-    direction: {
-      type: String,
-      default: 'horizontal'
-    },
-    activeColor: {
-      type: String,
-      default: GREEN
-    }
-  },
-
-  data() {
-    return {
-      steps: []
-    };
-  }
-});
-</script>

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

@@ -4,7 +4,6 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-steps van-steps--horizontal">
-      <!---->
       <div class="van-steps__items van-steps__items--alone">
         <div class="van-hairline van-step van-step--horizontal van-step--finish">
           <div class="van-step__title">买家下单</div>
@@ -32,7 +31,6 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-steps van-steps--vertical">
-      <!---->
       <div class="van-steps__items van-steps__items--alone">
         <div class="van-hairline van-step van-step--vertical van-step--process">
           <div class="van-step__title" style="color:#f44;">