From 362e183804f9f94ec73b0f008e4102ae16b300d5 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 27 Feb 2018 14:08:15 +0800
Subject: [PATCH] fix input

---
 components/input/Input.vue                 | 32 ++++-----
 components/input/demo/basic.vue            | 11 +---
 components/input/demo/index.vue            |  4 ++
 components/input/demo/tooltip.vue          | 76 ++++++++++++++++++++++
 components/tooltip/abstractTooltipProps.js |  3 +-
 5 files changed, 100 insertions(+), 26 deletions(-)
 create mode 100644 components/input/demo/tooltip.vue

diff --git a/components/input/Input.vue b/components/input/Input.vue
index f8596244f..b3779cff9 100644
--- a/components/input/Input.vue
+++ b/components/input/Input.vue
@@ -151,35 +151,37 @@ export default {
       const otherProps = omit(this.$props, [
         'prefixCls',
       ])
-      const { stateValue, getInputClassName, handleKeyDown, handleChange } = this
-      const attrs = {
+      const { stateValue, getInputClassName, handleKeyDown, handleChange, $listeners } = this
+      const inputProps = {
+        domProps: {
+          value: stateValue,
+        },
         attrs: { ...otherProps, ...this.$attrs },
+        on: {
+          ...$listeners,
+          keydown: handleKeyDown,
+          input: handleChange,
+        },
+        class: getInputClassName(),
+        ref: 'input',
       }
       return this.renderLabeledIcon(
         <input
-          {...attrs}
-          value={stateValue}
-          class={getInputClassName()}
-          onKeydown={handleKeyDown}
-          onInput={handleChange}
-          ref='input'
+          {...inputProps}
         />,
       )
     },
   },
   render () {
     if (this.$props.type === 'textarea') {
-      const self = this
+      const { $listeners } = this
       const textareaProps = {
         props: this.$props,
         attrs: this.$attrs,
         on: {
-          change (e) {
-            self.handleChange(e)
-          },
-          keydown (e) {
-            self.handleKeyDown(e)
-          },
+          ...$listeners,
+          change: this.handleChange,
+          keydown: this.handleKeyDown,
         },
       }
       return <TextArea {...textareaProps} ref='input' />
diff --git a/components/input/demo/basic.vue b/components/input/demo/basic.vue
index a8ef283bd..4201fb155 100644
--- a/components/input/demo/basic.vue
+++ b/components/input/demo/basic.vue
@@ -1,12 +1,3 @@
 <template>
-  <AntInput placeholder="Basic usage"/>
+  <a-input placeholder="Basic usage"/>
 </template>
-<script>
-
-import { Input } from 'antd'
-export default {
-  components: {
-    AntInput: Input,
-  },
-}
-</script>
diff --git a/components/input/demo/index.vue b/components/input/demo/index.vue
index 0f1782690..e665d8c9e 100644
--- a/components/input/demo/index.vue
+++ b/components/input/demo/index.vue
@@ -14,6 +14,8 @@
     <TextArea />
     <h1>Addon</h1>
     <Addon />
+    <h1>Tooltip</h1>
+    <Tooltip />
   </div>
 </template>
 <script>
@@ -24,6 +26,7 @@ import SearchInput from './search-input'
 import Size from './size'
 import TextArea from './textarea'
 import Addon from './addon'
+import Tooltip from './tooltip'
 export default {
   components: {
     Basic,
@@ -33,6 +36,7 @@ export default {
     Size,
     TextArea,
     Addon,
+    Tooltip,
   },
 }
 </script>
diff --git a/components/input/demo/tooltip.vue b/components/input/demo/tooltip.vue
new file mode 100644
index 000000000..d262f77b4
--- /dev/null
+++ b/components/input/demo/tooltip.vue
@@ -0,0 +1,76 @@
+<template>
+  <a-tooltip
+    :trigger="['focus']"
+    placement="topLeft"
+    overlayClassName="numeric-input"
+  >
+    <span slot="title" v-if="value" class="numeric-input-title">
+      {{value !== '-' ? formatNumber(value) : '-'}}
+    </span>
+    <template slot="title" v-else>
+      Input a number
+    </template>
+    <a-input
+      :value="value"
+      @change="onChange"
+      @blur="onBlur"
+      placeholder="Input a number"
+      maxLength="25"
+      style="width: 120px"
+    />
+  </a-tooltip>
+</template>
+<script>
+function formatNumber (value) {
+  value += ''
+  const list = value.split('.')
+  const prefix = list[0].charAt(0) === '-' ? '-' : ''
+  let num = prefix ? list[0].slice(1) : list[0]
+  let result = ''
+  while (num.length > 3) {
+    result = `,${num.slice(-3)}${result}`
+    num = num.slice(0, num.length - 3)
+  }
+  if (num) {
+    result = num + result
+  }
+  return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`
+}
+
+export default {
+  data () {
+    this.formatNumber = formatNumber
+    return {
+      value: '',
+    }
+  },
+  methods: {
+    onChange (e) {
+      const { value } = e.target
+      const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/
+      if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
+        this.value = value
+      }
+    },
+    // '.' at the end or only '-' in the input box.
+    onBlur () {
+      const { value, onChange } = this
+      if (value.charAt(value.length - 1) === '.' || value === '-') {
+        onChange({ value: value.slice(0, -1) })
+      }
+    },
+  },
+}
+</script>
+<style>
+/* to prevent the arrow overflow the popup container,
+or the height is not enough when content is empty */
+.numeric-input .ant-tooltip-inner {
+  min-width: 32px;
+  min-height: 37px;
+}
+
+.numeric-input .numeric-input-title {
+  font-size: 14px;
+}
+</style>
diff --git a/components/tooltip/abstractTooltipProps.js b/components/tooltip/abstractTooltipProps.js
index 967d765b0..eb244549a 100644
--- a/components/tooltip/abstractTooltipProps.js
+++ b/components/tooltip/abstractTooltipProps.js
@@ -1,6 +1,7 @@
 import PropTypes from '../_util/vue-types'
 export default () => ({
-  trigger: PropTypes.oneOf(['hover', 'focus', 'click']).def('hover'),
+  // trigger: PropTypes.oneOf(['hover', 'focus', 'click']).def('hover'),
+  trigger: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).def('hover'),
   visible: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'left', 'right', 'bottom',
     'topLeft', 'topRight', 'bottomLeft', 'bottomRight',