[improvement] Search: jsx (#2621)

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>
+    );
+  }
+});

packages/search/index.vue

@@ -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>

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>