perf: 优化 Input 组件

aotuzuche · Oct 16, 2018 · 61233b0 · 61233b0
1 parent 0be0eca
commit 61233b0
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 65 deletions.
diff --git a/docs/src/config.js b/docs/src/config.js
@@ -59,7 +59,7 @@ const docsConfig = [
     component: AsyncComponent(e => import('auto-ui/dialog/index.zh-CN'))
   },
   {
-    name: 'Input 组件',
+    name: 'Input 文本输入',
     path: '/docs/input',
     component: AsyncComponent(e => import('auto-ui/input/index.zh-CN'))
   },

diff --git a/docs/src/mobile/config.js b/docs/src/mobile/config.js
@@ -31,7 +31,7 @@ const mobileConfig = [
     component: AsyncComponent(e => import('./dialog'))
   },
   {
-    name: 'Input 组件',
+    name: 'Input 文本输入',
     path: '/mobile/input',
     component: AsyncComponent(e => import('./input'))
   },

diff --git a/docs/src/mobile/input/index.jsx b/docs/src/mobile/input/index.jsx
@@ -1,9 +1,31 @@
 import React from 'react'
+import { Cell, Input } from 'auto-ui'
 
-class A extends React.Component {
+class InputDemo extends React.Component {
   render() {
-    return <h1>a</h1>
+    return (
+      <Cell>
+        <Cell.Row>
+          <Input placeholder="基本使用" />
+        </Cell.Row>
+        <Cell.Row>
+          <Input placeholder="禁用" disabled />
+        </Cell.Row>
+        <Cell.Row>
+          <Input placeholder="错误" error />
+        </Cell.Row>
+        <Cell.Row>
+          <Input placeholder="左侧挂载" addonBefore={<a>Before</a>} />
+        </Cell.Row>
+        <Cell.Row>
+          <Input type="text" placeholder="右侧挂载" addonAfter={<a>After</a>} />
+        </Cell.Row>
+        <Cell.Row>
+          <Input placeholder="多行文本" multi />
+        </Cell.Row>
+      </Cell>
+    )
   }
 }
 
-export default A
+export default InputDemo
diff --git a/packages/input/index.jsx b/packages/input/index.jsx
@@ -1,52 +1,60 @@
 import './style'
 import React from 'react'
 import cn from 'classnames'
-import ignore from '../__libs/ignoreProps'
 
 const Input = props => {
-  const type = props.type || 'text'
+  const {
+    type,
+    className,
+    addonBefore,
+    addonAfter,
+    error,
+    multi,
+    disabled,
+    value,
+    onChange,
+    ...otherProps
+  } = props
 
-  const addonAfter = props.addonAfter && !props.multi ?
-    <div className="x-input__addon-after">{props.addonAfter}</div> :
-    ''
-  const addonBefore = props.addonBefore && !props.multi ?
-    <div className="x-input__addon-before">{props.addonBefore}</div> :
-    ''
-
-  const css = cn('x-input', {
-    'x-input--error': props.error,
-    'x-input--multi': props.multi,
-    'x-input--disabled': props.disabled,
-  }, props.className)
+  const composeClassName = cn(
+    'x-input',
+    {
+      'x-input--error': error,
+      'x-input--multi': multi,
+      'x-input--disabled': disabled
+    },
+    className
+  )
 
-  const inputprops = ignore(props, [
-    'addonAfter',
-    'addonBefore',
-    'multi',
-    'error',
-  ])
+  if (multi) {
+    return (
+      <div className={composeClassName}>
+        <textarea
+          {...otherProps}
+          disabled={disabled}
+          className="x-input__ipt"
+          value={value}
+          onChange={onChange}
+          type={type || 'text'}
+        />
+      </div>
+    )
+  }
 
   return (
-    <div className={css}>
-      {addonBefore}
-      {
-        props.multi ?
-          <textarea
-            {...inputprops}
-            className="x-input__ipt"
-            value={props.value}
-            onChange={props.onChange}
-            type={type}
-          /> :
-          <input
-            {...inputprops}
-            className="x-input__ipt"
-            value={props.value}
-            onChange={props.onChange}
-            type={type}
-          />
-      }
-      {addonAfter}
+    <div className={composeClassName}>
+      {!!addonBefore && (
+        <div className="x-input__addon-before">{addonBefore}</div>
+      )}
+      <input
+        {...otherProps}
+        disabled={disabled}
+        className="x-input__ipt"
+        value={value}
+        onChange={onChange}
+        type={type || 'text'}
+      />
+      {!!addonAfter && <div className="x-input__addon-after">{addonAfter}</div>}
     </div>
   )
 }

diff --git a/packages/input/index.zh-CN.md b/packages/input/index.zh-CN.md
@@ -1,42 +1,50 @@
 ---
 ---
 
-## Input 输入框
+# Input 文本输入
+
+## 使用示例
+
+### 基本使用
 
-**基本使用**
 ```jsx
-<Input type="text" placeholder="Placeholder" />
+<Input placeholder="基本使用" />
 ```
 
-**不可用**
+### 禁用
+
 ```jsx
-<Input type="text" placeholder="Placeholder" disabled />
+<Input placeholder="禁用" disabled />
 ```
 
-**错误**
+### 错误
+
 ```jsx
-<Input type="text" placeholder="Placeholder" error />
+<Input placeholder="错误" error />
 ```
 
-**左侧挂载**
+### 左侧挂载
+
 ```jsx
-<Input type="text" placeholder="Placeholder" addonBefore={<a href="#">Before</a>} />
+<Input placeholder="左侧挂载" addonBefore={<a>Before</a>} />
 ```
 
-**右侧挂载**
+### 右侧挂载
+
 ```jsx
-<Input type="text" placeholder="Placeholder" addonAfter={<a href="#">After</a>} />
+<Input placeholder="右侧挂载" addonAfter={<a>After</a>} />
 ```
 
-**多行**
+### 多行文本
+
 ```jsx
-<Input type="text" placeholder="Placeholder" multi />
+<Input placeholder="多行文本" multi />
 ```
 
-|属性|说明|类型|默认值|
-|-|-|-|-|
-|disabled|是否为不可用|Boolean|false|
-|error|是否为错误样式（红色边框）|Boolean|false|
-|addonBefore|左侧挂载，比如一些icon或标题|Component|-|
-|addonAfter|右侧挂载，比如发送验证码按钮|Component|-|
-|multi|多行显示，默认3行，注意：使用多行时，挂载将失效|Boolean|false|
+| 属性        | 说明                                       | 类型      | 默认值 |
+| ----------- | ------------------------------------------ | --------- | ------ |
+| disabled    | 是否禁用                                   | Boolean   | false  |
+| error       | 是否显示错误样式（红色边框）               | Boolean   | false  |
+| addonBefore | 左侧挂载，比如一些 icon 或标题             | Component | -      |
+| addonAfter  | 右侧挂载，比如发送验证码按钮               | Component | -      |
+| multi       | 多行文本，addonBefore && addonAfter 不可用 | Boolean   | false  |