perf: 优化 Layout 布局组件，优化文档使用说明

aotuzuche · Oct 17, 2018 · 64e73bd · 64e73bd
1 parent 61233b0
commit 64e73bd
Show file tree

Hide file tree

Showing 7 changed files with 317 additions and 140 deletions.
diff --git a/docs/src/config.js b/docs/src/config.js
@@ -64,7 +64,7 @@ const docsConfig = [
     component: AsyncComponent(e => import('auto-ui/input/index.zh-CN'))
   },
   {
-    name: 'Layout 组件',
+    name: 'Layout 布局',
     path: '/docs/layout',
     component: AsyncComponent(e => import('auto-ui/layout/index.zh-CN'))
   },

diff --git a/docs/src/mobile/config.js b/docs/src/mobile/config.js
@@ -36,7 +36,7 @@ const mobileConfig = [
     component: AsyncComponent(e => import('./input'))
   },
   {
-    name: 'Layout 组件',
+    name: 'Layout 布局',
     path: '/mobile/layout',
     component: AsyncComponent(e => import('./layout'))
   },

diff --git a/docs/src/mobile/layout/index.jsx b/docs/src/mobile/layout/index.jsx
@@ -1,9 +1,163 @@
+import './style'
 import React from 'react'
 
-class A extends React.Component {
+import { Layout, Popup, Cell } from 'auto-ui'
+
+class DemoLayout extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      default: false,
+      highest: false,
+      Loading: false,
+      errorInfo: false,
+      hideFooter: false
+    }
+  }
   render() {
-    return <h1>a</h1>
+    return (
+      <React.Fragment>
+        <Cell>
+          <Cell.Row
+            onClick={() => {
+              this.setState({
+                default: true
+              })
+            }}
+          >
+            基本使用
+          </Cell.Row>
+          <Cell.Row
+            onClick={() => {
+              this.setState({
+                highest: true
+              })
+            }}
+          >
+            高级导航
+          </Cell.Row>
+          <Cell.Row
+            onClick={() => {
+              this.setState({
+                Loading: true
+              })
+            }}
+          >
+            Loading
+          </Cell.Row>
+          <Cell.Row
+            onClick={() => {
+              this.setState({
+                errorInfo: true
+              })
+            }}
+          >
+            错误处理
+          </Cell.Row>
+          <Cell.Row
+            onClick={() => {
+              this.setState({
+                hideFooter: true
+              })
+            }}
+          >
+            不显示底部
+          </Cell.Row>
+        </Cell>
+        <Popup
+          onBgClick={() => {
+            this.setState({
+              default: false
+            })
+          }}
+          visible={this.state.default}
+        >
+          <Layout>
+            <Layout.Header>header</Layout.Header>
+
+            <Layout.Body>body</Layout.Body>
+
+            <Layout.Footer>footer</Layout.Footer>
+          </Layout>
+        </Popup>
+
+        <Popup
+          onBgClick={() => {
+            this.setState({
+              highest: false
+            })
+          }}
+          visible={this.state.highest}
+        >
+          <Layout>
+            <Layout.Header
+              addonBefore={<a href="#">左侧挂载</a>}
+              title="标题"
+              onBackClick={() => {}}
+              onCloseClick={() => {}}
+              addonAfter={<a href="#">右侧挂载</a>}
+              addonBottom={<p>下方挂载</p>}
+            />
+
+            <Layout.Body>body</Layout.Body>
+
+            <Layout.Footer>footer</Layout.Footer>
+          </Layout>
+        </Popup>
+
+        <Popup
+          onBgClick={() => {
+            this.setState({
+              Loading: false
+            })
+          }}
+          visible={this.state.Loading}
+        >
+          <Layout>
+            <Layout.Header>header</Layout.Header>
+
+            <Layout.Body loading>body</Layout.Body>
+
+            <Layout.Footer>footer</Layout.Footer>
+          </Layout>
+        </Popup>
+
+        <Popup
+          onBgClick={() => {
+            this.setState({
+              errorInfo: false
+            })
+          }}
+          visible={this.state.errorInfo}
+        >
+          <Layout>
+            <Layout.Header>header</Layout.Header>
+
+            <Layout.Body errorInfo="我是错误消息">body</Layout.Body>
+
+            <Layout.Footer>footer</Layout.Footer>
+          </Layout>
+        </Popup>
+
+        <Popup
+          onBgClick={() => {
+            this.setState({
+              hideFooter: false
+            })
+          }}
+          visible={this.state.hideFooter}
+        >
+          <Layout>
+            <Layout.Header>header</Layout.Header>
+
+            <Layout.Body>body</Layout.Body>
+
+            <Layout.Footer visible={false}>footer</Layout.Footer>
+          </Layout>
+        </Popup>
+      </React.Fragment>
+    )
   }
 }
 
-export default A
+export default DemoLayout
diff --git a/docs/src/mobile/layout/style.scss b/docs/src/mobile/layout/style.scss
@@ -0,0 +1,3 @@
+.x-popup__inner {
+  padding: 0;
+}
diff --git a/packages/input/index.zh-CN.md b/packages/input/index.zh-CN.md
@@ -41,6 +41,8 @@
 <Input placeholder="多行文本" multi />
 ```
 
+## 支持属性
+
 | 属性        | 说明                                       | 类型      | 默认值 |
 | ----------- | ------------------------------------------ | --------- | ------ |
 | disabled    | 是否禁用                                   | Boolean   | false  |

diff --git a/packages/layout/index.jsx b/packages/layout/index.jsx
@@ -2,127 +2,112 @@ import './style'
 import React from 'react'
 import cn from 'classnames'
 import Spin from '../spin'
-import ignore from '../__libs/ignoreProps'
 
 const Layout = props => {
-  const css = cn(
-    'x-app',
-    props.className,
-  )
+  const { className, children, ...otherProps } = props
+  const composeClassName = cn('x-app', className)
   return (
-    <div {...props} className={css}>
-      {props.children}
+    <div {...otherProps} className={composeClassName}>
+      {children}
     </div>
   )
 }
 
 const LayoutBody = props => {
-  const css = cn(
-    'x-app-body',
-    props.className,
-    {
-      'x-app-body--loading': props.loading,
-      'x-app-body--error': props.errorInfo,
-    },
-  )
+  const { className, loading, errorInfo, children, ...otherProps } = props
+  const composeClassName = cn('x-app-body', className, {
+    'x-app-body--loading': loading,
+    'x-app-body--error': errorInfo
+  })
 
-  const domprops = ignore(props, [
-    'loading',
-    'errorInfo',
-  ])
+  function content() {
+    if (loading) {
+      return <Spin className="x-app__loading" />
+    } else if (errorInfo) {
+      return (
+        <p className="x-app__error-info">
+          <i>!</i>
+          {errorInfo}
+        </p>
+      )
+    } else {
+      return children
+    }
+  }
 
   return (
-    <div
-      {...domprops}
-      className={css}
-    >
-      {
-        props.loading ?
-          <Spin className="x-app__loading"></Spin> :
-          props.errorInfo ?
-            <p className="x-app__error-info"><i>!</i>{props.errorInfo}</p> :
-            props.children
-      }
+    <div {...otherProps} className={composeClassName}>
+      {content()}
     </div>
   )
 }
 
 const LayoutFooter = props => {
-  const css = cn(
-    'x-app-footer',
-    props.className,
-  )
-  if (props.visible === false) {
+  const { className, visible, children, ...otherProps } = props
+  const composeClassName = cn('x-app-footer', className)
+  if (visible === false) {
     return null
   }
 
-  const domprops = ignore(props, [
-    'visible',
-  ])
-
   return (
-    <footer {...domprops} className={css}>
-      {props.children}
+    <footer {...otherProps} className={composeClassName}>
+      {children}
     </footer>
   )
 }
 
 const LayoutHeader = props => {
-  const css = cn(
+  const {
+    className,
+    children,
+    ghost,
+    addonBefore,
+    onBackClick,
+    onCloseClick,
+    title,
+    addonAfter,
+    addonBottom,
+    ...otherProps
+  } = props
+  const composeClassName = cn(
     'x-app-header',
     {
-      'x-app-header--ghost': props.ghost,
+      'x-app-header--ghost': ghost
     },
-    props.className,
-  )
-  const inner = cn(
-    'x-app-header__inner',
-    props.innerClassName,
+    className
   )
 
-  const domprops = ignore(props, [
-    'ghost',
-    'innerClassName',
-    'addonBefore',
-    'onBackClick',
-    'onCloseClick',
-    'title',
-    'addonAfter',
-    'addonBottom',
-  ])
-
   return (
-    <header {...domprops} className={css}>
-      <div className={inner}>
-        {
-          props.addonBefore || props.onBackClick || props.onCloseClick ?
-            <div className="x-app-header__addon-before">
-              {
-                props.onBackClick ?
-                  <a
-                    onClick={props.onBackClick}
-                    href="javascript:;"
-                    className="x-app-header__back"
-                  /> :
-
-                  props.onCloseClick ?
-                    <a
-                      onClick={props.onCloseClick}
-                      href="javascript:;"
-                      className="x-app-header__close"
-                    /> :
-
-                    null
-              }
-              {props.addonBefore}
-            </div> :
-            null
-        }
-        {props.title ? <h1 className="x-app-header__title">{props.title}</h1> : null}
-        {props.children}
-        {props.addonAfter ? <div className="x-app-header__addon-after">{props.addonAfter}</div> : null}
+    <header {...otherProps} className={composeClassName}>
+      <div className="x-app-header__inner">
+        {(addonBefore || onBackClick || onCloseClick) && (
+          <div className="x-app-header__addon-before">
+            {!!onBackClick && (
+              <a
+                onClick={props.onBackClick}
+                href="javascript:;"
+                className="x-app-header__back"
+              />
+            )}
+            {!!onCloseClick && (
+              <a
+                onClick={props.onCloseClick}
+                href="javascript:;"
+                className="x-app-header__close"
+              />
+            )}
+            {addonBefore}
+          </div>
+        )}
+        {!!title && <h1 className="x-app-header__title">{title}</h1>}
+        {children}
+        {!!addonAfter && (
+          <div className="x-app-header__addon-after">{props.addonAfter}</div>
+        )}
       </div>
-      {props.addonBottom ? <div className="x-app-header__addon-bottom">{props.addonBottom}</div> : null}
+      {!!addonBottom && (
+        <div className="x-app-header__addon-bottom">{props.addonBottom}</div>
+      )}
     </header>
   )
 }