From b52a37220f4506dd0d8ac249d40d3b1cd913a1eb Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sun, 13 Jan 2019 08:38:30 +0800
Subject: [PATCH] [improvement] GoodsAction: jsx (#2513)

---
 packages/goods-action-big-btn/index.js        | 39 +++++++++++++++++
 packages/goods-action-big-btn/index.vue       | 43 -------------------
 packages/goods-action-mini-btn/index.js       | 32 ++++++++++++++
 packages/goods-action-mini-btn/index.vue      | 39 -----------------
 packages/goods-action/index.js                |  9 ++++
 packages/goods-action/index.vue               | 13 ------
 .../test/__snapshots__/demo.spec.js.snap      | 20 ++++-----
 7 files changed, 90 insertions(+), 105 deletions(-)
 create mode 100644 packages/goods-action-big-btn/index.js
 delete mode 100644 packages/goods-action-big-btn/index.vue
 create mode 100644 packages/goods-action-mini-btn/index.js
 delete mode 100644 packages/goods-action-mini-btn/index.vue
 create mode 100644 packages/goods-action/index.js
 delete mode 100644 packages/goods-action/index.vue

diff --git a/packages/goods-action-big-btn/index.js b/packages/goods-action-big-btn/index.js
new file mode 100644
index 000000000..8440d9055
--- /dev/null
+++ b/packages/goods-action-big-btn/index.js
@@ -0,0 +1,39 @@
+import { use } from '../utils';
+import Button from '../button';
+import RouterLink from '../mixins/router-link';
+
+const [sfc, bem] = use('goods-action-big-btn');
+
+export default sfc({
+  mixins: [RouterLink],
+
+  props: {
+    text: String,
+    primary: Boolean,
+    loading: Boolean,
+    disabled: Boolean
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('click', event);
+      this.routerLink();
+    }
+  },
+
+  render(h) {
+    return (
+      <Button
+        square
+        class={bem()}
+        size="large"
+        loading={this.loading}
+        disabled={this.disabled}
+        type={this.primary ? 'danger' : 'warning'}
+        onClick={this.onClick}
+      >
+        {this.$slots.default || this.text}
+      </Button>
+    );
+  }
+});
diff --git a/packages/goods-action-big-btn/index.vue b/packages/goods-action-big-btn/index.vue
deleted file mode 100644
index 0de9c451c..000000000
--- a/packages/goods-action-big-btn/index.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <van-button
-    square
-    :class="b()"
-    size="large"
-    :loading="loading"
-    :disabled="disabled"
-    :type="primary ? 'danger' : 'warning'"
-    @click="onClick"
-  >
-    <slot>{{ text }}</slot>
-  </van-button>
-</template>
-
-<script>
-import create from '../utils/create';
-import VanButton from '../button';
-import RouterLink from '../mixins/router-link';
-
-export default create({
-  name: 'goods-action-big-btn',
-
-  mixins: [RouterLink],
-
-  components: {
-    VanButton
-  },
-
-  props: {
-    text: String,
-    primary: Boolean,
-    loading: Boolean,
-    disabled: Boolean
-  },
-
-  methods: {
-    onClick(event) {
-      this.$emit('click', event);
-      this.routerLink();
-    }
-  }
-});
-</script>
diff --git a/packages/goods-action-mini-btn/index.js b/packages/goods-action-mini-btn/index.js
new file mode 100644
index 000000000..19eecb3d0
--- /dev/null
+++ b/packages/goods-action-mini-btn/index.js
@@ -0,0 +1,32 @@
+import { use } from '../utils';
+import Icon from '../icon';
+import RouterLink from '../mixins/router-link';
+
+const [sfc, bem] = use('goods-action-mini-btn');
+
+export default sfc({
+  mixins: [RouterLink],
+
+  props: {
+    text: String,
+    info: [String, Number],
+    icon: String,
+    iconClass: String
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('click', event);
+      this.routerLink();
+    }
+  },
+
+  render(h) {
+    return (
+      <div class={[bem(), 'van-hairline']} onClick={this.onClick}>
+        <Icon class={[bem('icon'), this.iconClass]} info={this.info} name={this.icon} />
+        {this.$slots.default || this.text}
+      </div>
+    );
+  }
+});
diff --git a/packages/goods-action-mini-btn/index.vue b/packages/goods-action-mini-btn/index.vue
deleted file mode 100644
index 17258f0fc..000000000
--- a/packages/goods-action-mini-btn/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div
-    :class="b()"
-    class="van-hairline"
-    @click="onClick"
-  >
-    <icon
-      :class="[b('icon'), iconClass]"
-      :info="info"
-      :name="icon"
-    />
-    <slot>{{ text }}</slot>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-import RouterLink from '../mixins/router-link';
-
-export default create({
-  name: 'goods-action-mini-btn',
-
-  mixins: [RouterLink],
-
-  props: {
-    text: String,
-    info: [String, Number],
-    icon: String,
-    iconClass: String
-  },
-
-  methods: {
-    onClick(event) {
-      this.$emit('click', event);
-      this.routerLink();
-    }
-  }
-});
-</script>
diff --git a/packages/goods-action/index.js b/packages/goods-action/index.js
new file mode 100644
index 000000000..c8d9873cd
--- /dev/null
+++ b/packages/goods-action/index.js
@@ -0,0 +1,9 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('goods-action');
+
+export default sfc({
+  render(h) {
+    return <div class={bem()}>{this.$slots.default}</div>;
+  }
+});
diff --git a/packages/goods-action/index.vue b/packages/goods-action/index.vue
deleted file mode 100644
index 75af02e03..000000000
--- a/packages/goods-action/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div :class="b()">
-    <slot />
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'goods-action'
-});
-</script>
diff --git a/packages/goods-action/test/__snapshots__/demo.spec.js.snap b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
index 9c6da4705..3133fcc80 100644
--- a/packages/goods-action/test/__snapshots__/demo.spec.js.snap
+++ b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -4,26 +4,26 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-goods-action">
-      <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
+      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
-          <!----></i> 客服</div>
-      <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
+          <!----></i>客服</div>
+      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
-          <!----></i> 购物车</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
+          <!----></i>购物车</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
   <div>
     <div class="van-goods-action">
-      <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
+      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
-          <!----></i> 客服</div>
-      <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
+          <!----></i>客服</div>
+      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
           <div class="van-info">5</div>
-        </i> 购物车</div>
-      <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
+        </i>购物车</div>
+      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
-          <!----></i> 店铺</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
+          <!----></i>店铺</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
 </div>