From f4160d7dd57656b0bd9015f8ebbf64ebd9ebf9d0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sat, 5 Jan 2019 21:37:43 +0800
Subject: [PATCH] [improvement] Actionsheet: jsx (#2444)

---
 packages/actionsheet/index.js                 |  97 ++++++++++++++++
 packages/actionsheet/index.vue                | 107 ------------------
 .../test/__snapshots__/index.spec.js.snap     |  12 +-
 packages/actionsheet/test/index.spec.js       |   2 +-
 packages/badge-group/index.js                 |   5 +-
 packages/badge/index.js                       |   9 +-
 6 files changed, 111 insertions(+), 121 deletions(-)
 create mode 100644 packages/actionsheet/index.js
 delete mode 100644 packages/actionsheet/index.vue

diff --git a/packages/actionsheet/index.js b/packages/actionsheet/index.js
new file mode 100644
index 000000000..e9a1fbbf9
--- /dev/null
+++ b/packages/actionsheet/index.js
@@ -0,0 +1,97 @@
+import create from '../utils/create';
+import createBem from '../utils/bem';
+import Popup from '../mixins/popup';
+
+const bem = createBem('van-actionsheet');
+
+export default create({
+  name: 'actionsheet',
+
+  mixins: [Popup],
+
+  props: {
+    title: String,
+    value: Boolean,
+    actions: Array,
+    cancelText: String,
+    overlay: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  methods: {
+    onSelect(item, event) {
+      event.stopPropagation();
+
+      if (!item.disabled && !item.loading) {
+        if (item.callback) {
+          item.callback(item);
+        }
+
+        this.$emit('select', item);
+      }
+    },
+
+    onCancel() {
+      this.$emit('input', false);
+      this.$emit('cancel');
+    }
+  },
+
+  render(h) {
+    if (!this.shouldRender) {
+      return;
+    }
+
+    const { title, cancelText, onCancel } = this;
+
+    const Header = () => (
+      <div class={[bem('header'), 'van-hairline--top-bottom']}>
+        {title}
+        <icon name="close" onClick={onCancel} />
+      </div>
+    );
+
+    const Option = item => (
+      <div
+        class={[
+          bem('item', { disabled: item.disabled || item.loading }),
+          item.className,
+          'van-hairline--top'
+        ]}
+        onClick={this.onSelect.bind(this, item)}
+      >
+        {item.loading ? (
+          <loading class={bem('loading')} size="20px" />
+        ) : (
+          [
+            <span class={bem('name')}>{item.name}</span>,
+            item.subname && <span class={bem('subname')}>{item.subname}</span>
+          ]
+        )}
+      </div>
+    );
+
+    const Footer = cancelText ? (
+      <div class={bem('cancel')} onClick={onCancel}>
+        {cancelText}
+      </div>
+    ) : (
+      <div class={bem('content')}>{this.$slots.default}</div>
+    );
+
+    return (
+      <transition name="van-slide-up">
+        <div v-show={this.value} class={bem({ withtitle: title })}>
+          {title ? Header() : this.actions.map(Option)}
+          {Footer}
+        </div>
+      </transition>
+    );
+  }
+});
diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
deleted file mode 100644
index 6bcac06f8..000000000
--- a/packages/actionsheet/index.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <transition name="van-slide-up">
-    <div
-      v-if="shouldRender"
-      v-show="value"
-      :class="b({ 'withtitle': title })"
-    >
-      <div
-        v-if="title"
-        :class="b('header')"
-        class="van-hairline--top-bottom"
-      >
-        <div v-text="title" />
-        <icon
-          name="close"
-          @click="onCancel"
-        />
-      </div>
-      <ul
-        v-else
-        class="van-hairline--bottom"
-      >
-        <li
-          v-for="item in actions"
-          :class="[
-            b('item', { disabled: item.disabled || item.loading }),
-            item.className,
-            'van-hairline--top'
-          ]"
-          @click.stop="onSelect(item)"
-        >
-          <template v-if="!item.loading">
-            <span
-              :class="b('name')"
-              v-text="item.name"
-            />
-            <span
-              v-if="item.subname"
-              v-text="item.subname"
-              :class="b('subname')"
-            />
-          </template>
-          <loading
-            v-else
-            :class="b('loading')"
-            size="20px"
-          />
-        </li>
-      </ul>
-      <div
-        v-if="cancelText"
-        v-text="cancelText"
-        :class="[b('cancel'), 'van-hairline--top']"
-        @click="onCancel"
-      />
-      <div
-        v-else
-        :class="b('content')"
-      >
-        <slot />
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import create from '../utils/create';
-import Popup from '../mixins/popup';
-
-export default create({
-  name: 'actionsheet',
-
-  mixins: [Popup],
-
-  props: {
-    title: String,
-    value: Boolean,
-    actions: Array,
-    cancelText: String,
-    overlay: {
-      type: Boolean,
-      default: true
-    },
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  methods: {
-    onSelect(item) {
-      if (!item.disabled && !item.loading) {
-        if (item.callback) {
-          item.callback(item);
-        }
-
-        this.$emit('select', item);
-      }
-    },
-
-    onCancel() {
-      this.$emit('input', false);
-      this.$emit('cancel');
-    }
-  }
-});
-</script>
diff --git a/packages/actionsheet/test/__snapshots__/index.spec.js.snap b/packages/actionsheet/test/__snapshots__/index.spec.js.snap
index f1ebcd5bb..0227cc076 100644
--- a/packages/actionsheet/test/__snapshots__/index.spec.js.snap
+++ b/packages/actionsheet/test/__snapshots__/index.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`callback events 1`] = `
 <div class="van-actionsheet" name="van-slide-up">
-  <ul class="van-hairline--bottom">
-    <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span>
-      <!---->
-    </li>
-    <li class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">Option</span>
-      <!---->
-    </li>
-  </ul>
-  <div class="van-actionsheet__cancel van-hairline--top">Cancel</div>
+  <div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
+  <div class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
+  <div class="van-actionsheet__cancel">Cancel</div>
 </div>
 `;
diff --git a/packages/actionsheet/test/index.spec.js b/packages/actionsheet/test/index.spec.js
index 4ac7fa2e0..b51ff3792 100644
--- a/packages/actionsheet/test/index.spec.js
+++ b/packages/actionsheet/test/index.spec.js
@@ -14,7 +14,7 @@ test('callback events', () => {
     }
   });
 
-  const options = wrapper.findAll('li');
+  const options = wrapper.findAll('.van-actionsheet__item');
   options.at(0).trigger('click');
   options.at(1).trigger('click');
   wrapper.find('.van-actionsheet__cancel').trigger('click');
diff --git a/packages/badge-group/index.js b/packages/badge-group/index.js
index 1d8abd498..bee6085ba 100644
--- a/packages/badge-group/index.js
+++ b/packages/badge-group/index.js
@@ -1,4 +1,7 @@
 import create from '../utils/create';
+import createBem from '../utils/bem';
+
+const bem = createBem('van-badge-group');
 
 export default create({
   name: 'badge-group',
@@ -24,7 +27,7 @@ export default create({
 
   render(h) {
     return (
-      <div class={['van-hairline--top-bottom', this.b()]}>
+      <div class={['van-hairline--top-bottom', bem()]}>
         {this.$slots.default}
       </div>
     );
diff --git a/packages/badge/index.js b/packages/badge/index.js
index 628b94bc8..28810ebd8 100644
--- a/packages/badge/index.js
+++ b/packages/badge/index.js
@@ -1,5 +1,8 @@
 import Info from '../info';
 import create from '../utils/create';
+import createBem from '../utils/bem';
+
+const bem = createBem('van-badge');
 
 export default create({
   name: 'badge',
@@ -45,12 +48,12 @@ export default create({
     return (
       <a
         href={this.url}
-        class={[this.b({ select: this.select }), 'van-hairline']}
+        class={[bem({ select: this.select }), 'van-hairline']}
         onClick={this.onClick}
       >
-        <div class={this.b('text')}>
+        <div class={bem('text')}>
           {this.title}
-          <Info info={this.info} class={this.b('info')} />
+          <Info info={this.info} class={bem('info')} />
         </div>
       </a>
     );