[improvement] Steps: jsx (#2623)

packages/step/index.js

@@ -0,0 +1,46 @@
+import { use } from '../utils';
+import Icon from '../icon';
+
+const [sfc, bem] = use('step');
+
+export default sfc({
+  beforeCreate() {
+    this.$parent.steps.push(this);
+  },
+
+  computed: {
+    status() {
+      const index = this.$parent.steps.indexOf(this);
+      const { active } = this.$parent;
+
+      if (index < active) {
+        return 'finish';
+      }
+      if (index === active) {
+        return 'process';
+      }
+    }
+  },
+
+  render(h) {
+    const { status } = this;
+    const { activeColor, direction } = this.$parent;
+    const titleStyle = status === 'process' && { color: activeColor };
+
+    return (
+      <div class={['van-hairline', bem([direction, { [status]: status }])]}>
+        <div class={bem('title')} style={titleStyle}>
+          {this.$slots.default}
+        </div>
+        <div class={bem('circle-container')}>
+          {status !== 'process' ? (
+            <i class={bem('circle')} />
+          ) : (
+            <Icon name="checked" style={{ color: activeColor }} />
+          )}
+        </div>
+        <div class={bem('line')} />
+      </div>
+    );
+  }
+});

packages/step/index.vue

@@ -1,57 +0,0 @@
-<template>
-  <div
-    class="van-hairline"
-    :class="b([$parent.direction, { [status]: status }])"
-  >
-    <div
-      :class="b('title')"
-      :style="titleStyle"
-    >
-      <slot />
-    </div>
-    <div :class="b('circle-container')">
-      <i
-        v-if="status !== 'process'"
-        :class="b('circle')"
-      />
-      <icon
-        v-else
-        name="checked"
-        :style="{ color: $parent.activeColor }"
-      />
-    </div>
-    <div :class="b('line')" />
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'step',
-
-  beforeCreate() {
-    this.$parent.steps.push(this);
-  },
-
-  computed: {
-    status() {
-      const index = this.$parent.steps.indexOf(this);
-      const { active } = this.$parent;
-
-      if (index < active) {
-        return 'finish';
-      }
-      if (index === active) {
-        return 'process';
-      }
-    },
-
-    titleStyle() {
-      return this.status === 'process' ? {
-        color: this.$parent.activeColor
-      } : {};
-    }
-  }
-});
-</script>

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;">