From 0f1cb122115f73f28143d2d6dbed7fdb146e6128 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 25 Jan 2019 21:52:21 +0800
Subject: [PATCH] [improvement] Search: jsx (#2621)

---
 packages/search/index.js                      | 76 ++++++++++++++++
 packages/search/index.vue                     | 86 -------------------
 .../test/__snapshots__/demo.spec.js.snap      |  1 -
 3 files changed, 76 insertions(+), 87 deletions(-)
 create mode 100644 packages/search/index.js
 delete mode 100644 packages/search/index.vue

diff --git a/packages/search/index.js b/packages/search/index.js
new file mode 100644
index 000000000..e7356b0d0
--- /dev/null
+++ b/packages/search/index.js
@@ -0,0 +1,76 @@
+import { use } from '../utils';
+import Field from '../field';
+
+const [sfc, bem, t] = use('search');
+
+export default sfc({
+  inheritAttrs: false,
+
+  props: {
+    value: String,
+    showAction: Boolean,
+    background: {
+      type: String,
+      default: '#f2f2f2'
+    }
+  },
+
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: this.onInput,
+        keypress: this.onKeypress
+      };
+    }
+  },
+
+  methods: {
+    onInput(value) {
+      this.$emit('input', value);
+    },
+
+    onKeypress(event) {
+      // press enter
+      if (event.keyCode === 13) {
+        event.preventDefault();
+        this.$emit('search', this.value);
+      }
+      this.$emit('keypress', event);
+    },
+
+    onBack() {
+      this.$emit('input', '');
+      this.$emit('cancel');
+    }
+  },
+
+  render(h) {
+    const { showAction } = this;
+
+    const props = {
+      attrs: this.$attrs,
+      on: this.listeners
+    };
+
+    return (
+      <div class={bem({ 'show-action': showAction })} style={{ background: this.background }}>
+        <Field
+          clearable
+          type="search"
+          value={this.value}
+          border={false}
+          leftIcon="search"
+          {...props}
+        >
+          {h('template', { slot: 'left-icon' }, this.$slots['left-icon'])}
+        </Field>
+        {showAction && (
+          <div class={bem('action')}>
+            {this.$slots.action || <div onClick={this.onBack}>{t('cancel')}</div>}
+          </div>
+        )}
+      </div>
+    );
+  }
+});
diff --git a/packages/search/index.vue b/packages/search/index.vue
deleted file mode 100644
index 88e3b978e..000000000
--- a/packages/search/index.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <div
-    :class="b({ 'show-action': showAction })"
-    :style="{ background }"
-  >
-    <field
-      v-bind="$attrs"
-      v-on="listeners"
-      clearable
-      type="search"
-      :value="value"
-      :border="false"
-      left-icon="search"
-    >
-      <slot
-        name="left-icon"
-        slot="left-icon"
-      />
-    </field>
-    <div
-      v-if="showAction"
-      :class="b('action')"
-    >
-      <slot name="action">
-        <div
-          v-text="$t('cancel')"
-          @click="onBack"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import Field from '../field';
-import create from '../utils/create';
-
-export default create({
-  name: 'search',
-
-  inheritAttrs: false,
-
-  components: {
-    Field
-  },
-
-  props: {
-    value: String,
-    showAction: Boolean,
-    background: {
-      type: String,
-      default: '#f2f2f2'
-    }
-  },
-
-  computed: {
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: this.onInput,
-        keypress: this.onKeypress
-      };
-    }
-  },
-
-  methods: {
-    onInput(value) {
-      this.$emit('input', value);
-    },
-
-    onKeypress(event) {
-      // press enter
-      if (event.keyCode === 13) {
-        event.preventDefault();
-        this.$emit('search', this.value);
-      }
-      this.$emit('keypress', event);
-    },
-
-    onBack() {
-      this.$emit('input', '');
-      this.$emit('cancel');
-    }
-  }
-});
-</script>
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap
index 4819f080c..f90152980 100644
--- a/packages/search/test/__snapshots__/demo.spec.js.snap
+++ b/packages/search/test/__snapshots__/demo.spec.js.snap
@@ -11,7 +11,6 @@ exports[`renders demo correctly 1`] = `
           <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
         </div>
       </div>
-      <!---->
     </div>
   </div>
   <div>