perf: 优化 Button 组件，去掉一些无用的代码

aotuzuche · Oct 12, 2018 · 91891b1 · 91891b1
1 parent 22e65d4
commit 91891b1
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 59 deletions.
diff --git a/docs/src/config.js b/docs/src/config.js
@@ -44,7 +44,7 @@ const docsConfig = [
     component: AsyncComponent(e => import('auto-ui/alert/index.zh-CN'))
   },
   {
-    name: 'Button 组件',
+    name: 'Button 按钮',
     path: '/docs/button',
     component: AsyncComponent(e => import('auto-ui/button/index.zh-CN'))
   },

diff --git a/docs/src/mobile/button/index.jsx b/docs/src/mobile/button/index.jsx
@@ -1,8 +1,71 @@
 import React from 'react'
 
+import { Button, Cell } from 'auto-ui'
+
 class A extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      loading: false,
+      text: '点击加载'
+    }
+  }
   render() {
-    return <h1>a</h1>
+    return (
+      <Cell>
+        <Cell.Row>默认使用</Cell.Row>
+        <Cell.Row>
+          <Button>默认使用</Button>
+        </Cell.Row>
+        <Cell.Row>使用 type</Cell.Row>
+        <Cell.Row>
+          <Button type="primary">Primary Button</Button>
+        </Cell.Row>
+        <Cell.Row>
+          <Button type="danger">Danger Button</Button>
+        </Cell.Row>
+        <Cell.Row>
+          <Button type="default">Default Button</Button>
+        </Cell.Row>
+        <Cell.Row>小按钮</Cell.Row>
+        <Cell.Row className="space-between">
+          <Button mini type="primary">
+            小按钮
+          </Button>
+          <Button mini type="danger">
+            小按钮
+          </Button>
+          <Button mini type="default">
+            小按钮
+          </Button>
+        </Cell.Row>
+        <Cell.Row>加载中</Cell.Row>
+        <Cell.Row>
+          <Button
+            loading={this.state.loading}
+            onClick={() => {
+              this.setState({
+                loading: true,
+                text: '加载中(2s)'
+              })
+
+              setTimeout(() => {
+                this.setState({
+                  loading: false,
+                  text: '点击加载'
+                })
+              }, 2000)
+            }}
+          >
+            {this.state.text}
+          </Button>
+        </Cell.Row>
+        <Cell.Row>禁用</Cell.Row>
+        <Cell.Row>
+          <Button disabled> 禁用</Button>
+        </Cell.Row>
+      </Cell>
+    )
   }
 }
 

diff --git a/docs/src/mobile/config.js b/docs/src/mobile/config.js
@@ -16,7 +16,7 @@ const mobileConfig = [
     component: AsyncComponent(e => import('./alert'))
   },
   {
-    name: 'Button 组件',
+    name: 'Button 按钮',
     path: '/mobile/button',
     component: AsyncComponent(e => import('./button'))
   },

diff --git a/docs/src/mobile/style.scss b/docs/src/mobile/style.scss
@@ -38,3 +38,7 @@ body,
     }
   }
 }
+.space-between {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/packages/button/index.jsx b/packages/button/index.jsx
@@ -2,61 +2,42 @@ import './style'
 import React from 'react'
 import cn from 'classnames'
 import Spin from '../spin'
-import ignore from '../__libs/ignoreProps'
 
 import A from '../a'
 
 const Button = props => {
-  const type = props.type ? props.type : 'primary'
-  const css = cn('x-button', {
-    'x-button--disabled': props.disabled || props.loading,
-    'x-button--mini': props.mini,
-  }, 'x-button--' + type, props.className)
-
-  let children = props.children
-  if (!Array.isArray(children)) {
-    children = [children]
-  }
-
-  let fChildren = []
-  children.forEach(i => {
-    const last = fChildren[fChildren.length - 1] || ''
-    if (typeof i !== 'object') {
-      if (typeof last === 'object') {
-        fChildren.push(i)
-      }
-      else {
-        fChildren[Math.max(fChildren.length - 1, 0)] = last + i
-      }
-    }
-    else {
-      fChildren.push(i)
-    }
-  })
+  const {
+    type,
+    disabled,
+    mini,
+    className,
+    loading,
+    children,
+    ...otherProps
+  } = props
+  console.log('type', type)
+  const css = cn(
+    'x-button',
+    {
+      'x-button--disabled': disabled || loading,
+      'x-button--mini': mini
+    },
+    'x-button--' + (type || 'primary'),
+    className
+  )
 
-  const domprops = ignore(props, [
-    'type',
-    'disabled',
-    'mini',
-    'loading',
-    'onClick',
-  ])
+  const composeChildren = [].concat(children)
 
   return (
-    <A {...domprops} className={css} onClick={props.onClick}>
-      {
-        props.loading ?
-          <Spin className="x-button__loading" /> :
-          null
-      }
-      {
-        fChildren.map((res, i) => {
-          if (typeof res !== 'object') {
-            return <p className="x-button__text" key={i}>{res}</p>
-          }
-          return res
-        })
-      }
+    <A {...otherProps} className={css}>
+      {!!loading && <Spin className="x-button__loading" />}
+      {composeChildren.map((res, i) => {
+        return (
+          <p className="x-button__text" key={i}>
+            {res}
+          </p>
+        )
+      })}
     </A>
   )
 }

diff --git a/packages/button/index.zh-CN.md b/packages/button/index.zh-CN.md
@@ -1,9 +1,21 @@
 ---
 ---
 
-## Button 按钮
+# Button 按钮
 
-**按钮种类**
+## 使用示例
+
+```js
+import { Button } from 'auto-ui'
+```
+
+### 默认使用
+
+```jsx
+<Button>默认使用</Button>
+```
+
+### 使用 type
 
 按钮分为 primary、danger 与 default3 种（注意：默认为 primary）
 
@@ -15,24 +27,30 @@
 <Button type="default">Default Button</Button>
 ```
 
-**小按钮**
+### 小按钮
 
 ```jsx
-<Button mini>Mini type</Button>
+<Button mini type="primary">小按钮</Button>
+
+<Button mini type="danger">小按钮</Button>
+
+<Button mini type="default">小按钮</Button>
 ```
 
-**加载中**
+### 加载中
 
 ```jsx
-<Button loading>With loading</Button>
+<Button loading>加载中</Button>
 ```
 
-**不可用**
+### 禁用
 
 ```jsx
-<Button disabled>Disabled</Button>
+<Button disabled>禁用</Button>
 ```
 
+## 支持属性
+
 | 属性     | 说明                                   | 类型     | 默认值  |
 | -------- | -------------------------------------- | -------- | ------- |
 | type     | 按钮的种类，primary / danger / default | String   | primary |