[improvement] NumberKeyboard: jsx (#2558)

packages/number-keyboard/Key.js

@@ -0,0 +1,52 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('key');
+
+export default sfc({
+  props: {
+    type: Array,
+    text: [String, Number]
+  },
+
+  data() {
+    return {
+      active: false
+    };
+  },
+
+  computed: {
+    className() {
+      const types = this.type.slice(0);
+      this.active && types.push('active');
+      return bem(types);
+    }
+  },
+
+  methods: {
+    onFocus() {
+      this.active = true;
+      this.$emit('press', this.text);
+    },
+
+    onBlur(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.active = false;
+    }
+  },
+
+  render(h) {
+    const { onBlur } = this;
+    return (
+      <i
+        class={['van-hairline', this.className]}
+        onTouchstart={this.onFocus}
+        onTouchmove={onBlur}
+        onTouchend={onBlur}
+        onTouchcancel={onBlur}
+      >
+        {this.text}
+      </i>
+    );
+  }
+});

packages/number-keyboard/Key.vue

@@ -1,48 +0,0 @@
-<template>
-  <i
-    v-text="text"
-    :class="['van-hairline', className]"
-    @touchstart.stop.prevent="onFocus"
-    @touchmove="onBlur"
-    @touchend="onBlur"
-    @touchcancel="onBlur"
-  />
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'key',
-
-  props: {
-    type: Array,
-    text: [String, Number]
-  },
-
-  data() {
-    return {
-      active: false
-    };
-  },
-
-  computed: {
-    className() {
-      const types = this.type.slice(0);
-      this.active && types.push('active');
-      return this.b(types);
-    }
-  },
-
-  methods: {
-    onFocus() {
-      this.active = true;
-      this.$emit('press', this.text);
-    },
-
-    onBlur() {
-      this.active = false;
-    }
-  }
-});
-</script>

packages/number-keyboard/index.js

@@ -1,63 +1,11 @@
-<template>
+import { use } from '../utils';
-  <transition :name="transition ? 'van-slide-up' : ''">
-    <div
-      v-show="show"
-      :style="style"
-      :class="b([theme])"
-      @touchstart.stop
-      @animationend="onAnimationEnd"
-      @webkitAnimationEnd="onAnimationEnd"
-    >
-      <div
-        v-if="title || showTitleClose"
-        :class="b('title')"
-        class="van-hairline--top"
-      >
-        <span v-text="title" />
-        <span
-          :class="b('close')"
-          v-if="showTitleClose"
-          v-text="closeButtonText"
-          @click="onClose"
-        />
-      </div>
-      <div :class="b('body')">
-        <key
-          v-for="key in keys"
-          :key="key.text"
-          :text="key.text"
-          :type="key.type"
-          @press="onPressKey"
-        />
-      </div>
-      <div
-        v-if="theme === 'custom'"
-        :class="b('sidebar')"
-      >
-        <key
-          :text="deleteText"
-          :type="['delete', 'big', 'gray']"
-          @press="onPressKey"
-        />
-        <key
-          :text="closeButtonText"
-          :type="['blue', 'big']"
-          @press="onPressKey"
-        />
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import create from '../utils/create';
 import Key from './Key';
 
-export default create({
+const [sfc, bem, t] = use('number-keyboard');
-  name: 'number-keyboard',
+const CLOSE_KEY_TYPE = ['blue', 'big'];
-
+const DELETE_KEY_TYPE = ['delete', 'big', 'gray'];
-  components: { Key },
 
+export default sfc({
   props: {
     show: Boolean,
     title: String,
@@ -129,28 +77,15 @@ export default create({
           );
           break;
         case 'custom':
-          keys.push(
+          keys.push({ text: 0, type: ['middle'] }, { text: this.extraKey });
-            { text: 0, type: ['middle'] },
-            { text: this.extraKey }
-          );
           break;
       }
 
       return keys;
     },
 
-    style() {
-      return {
-        zIndex: this.zIndex
-      };
-    },
-
-    showTitleClose() {
-      return this.closeButtonText && this.theme === 'default';
-    },
-
     deleteText() {
-      return this.deleteButtonText || this.$t('delete');
+      return this.deleteButtonText || t('delete');
     }
   },
 
@@ -180,7 +115,7 @@ export default create({
       this.$emit(this.show ? 'show' : 'hide');
     },
 
-    onPressKey(text) {
+    onPress(text) {
       if (text === '') {
         return;
       }
@@ -193,6 +128,47 @@ export default create({
         this.$emit('input', text);
       }
     }
+  },
+
+  render(h) {
+    const { theme, onPress, closeButtonText } = this;
+    const showTitleClose = closeButtonText && theme === 'default';
+
+    return (
+      <transition name={this.transition ? 'van-slide-up' : ''}>
+        <div
+          v-show={this.show}
+          style={{ zIndex: this.zIndex }}
+          class={bem([theme])}
+          onTouchstart={event => {
+            event.stopPropagation();
+          }}
+          onAnimationend={this.onAnimationEnd}
+          onWebkitAnimationEnd={this.onAnimationEnd}
+        >
+          {(this.title || showTitleClose) && (
+            <div class={[bem('title'), 'van-hairline--top']}>
+              <span>{this.title}</span>
+              {showTitleClose && (
+                <span class={bem('close')} onClick={this.onClose}>
+                  {closeButtonText}
+                </span>
+              )}
+            </div>
+          )}
+          <div class={bem('body')}>
+            {this.keys.map(key => (
+              <Key key={key.text} text={key.text} type={key.type} onPress={onPress} />
+            ))}
+          </div>
+          {theme === 'custom' && (
+            <div class={bem('sidebar')}>
+              <Key text={this.deleteText} type={DELETE_KEY_TYPE} onPress={onPress} />
+              <Key text={closeButtonText} type={CLOSE_KEY_TYPE} onPress={onPress} />
+            </div>
+          )}
+        </div>
+      </transition>
+    );
   }
 });
-</script>

packages/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -6,16 +6,14 @@ exports[`renders demo correctly 1`] = `
       弹出默认键盘
     </span></button>
     <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
-      <div class="van-hairline--top van-number-keyboard__title"><span></span> <span class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__title van-hairline--top"><span></span><span class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
-      <!---->
     </div>
   </div>
   <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">
       弹出自定义键盘
     </span></button>
     <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--custom" style="z-index:100;display:none;">
-      <!---->
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--middle">0</i><i class="van-hairline van-key">.</i></div>
       <div class="van-number-keyboard__sidebar"><i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
     </div>

packages/password-input/test/__snapshots__/demo.spec.js.snap

@@ -15,9 +15,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-password-input__info">密码为 6 位数字</div>
     </div>
     <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
-      <!---->
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
-      <!---->
     </div>
   </div>
 </div>