From 842ef45ead1c7b62e25bd88550d4eb3cd98455a3 Mon Sep 17 00:00:00 2001
From: ShanaMaid <uestczeng@gmail.com>
Date: Fri, 14 Sep 2018 15:55:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(component):=20loading=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8C=85=E8=A3=85=E5=99=A8=E5=8A=A0=E8=BD=BD=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Loading/Loading.tsx                | 44 +++++++++++++++----
 components/Loading/style/index.less           | 23 ++++++++++
 components/Loading/style/var.less             |  3 ++
 docs/pages/components/Loading/api.tsx         | 12 +++++
 .../Loading/demo/loadingContainer.md          |  1 +
 .../Loading/demo/loadingContainer.tsx         | 21 +++++++++
 docs/pages/components/Loading/index.tsx       |  6 +++
 7 files changed, 101 insertions(+), 9 deletions(-)
 create mode 100644 docs/pages/components/Loading/demo/loadingContainer.md
 create mode 100644 docs/pages/components/Loading/demo/loadingContainer.tsx

diff --git a/components/Loading/Loading.tsx b/components/Loading/Loading.tsx
index 337d8b0..ba31d27 100644
--- a/components/Loading/Loading.tsx
+++ b/components/Loading/Loading.tsx
@@ -18,6 +18,14 @@ export interface ILoadingProps extends IBaseComponent {
    * 加载文本
    */
   text?: string | boolean;
+  /**
+   * 自定义icon
+   */
+  icon?: React.ReactNode;
+  /**
+   * 加载
+   */
+  loading?: boolean;
 }
 
 export interface ILoadingState {
@@ -32,15 +40,23 @@ export class Loading extends Component<ILoadingProps, ILoadingState> {
     type: 'a',
     size: 'default',
     text: false,
+    loading: true,
   };
 
   render() {
-    const {className, style, children, type, size, text, ...otherProps} = this.props;
+    const {
+      className, style, children, type,
+      size, text, icon, loading, ...otherProps
+    } = this.props;
     const preCls = 'yoshino-loading';
     const iconType = `load-${type}`;
     const loadSize = `${preCls}-${size}`;
+    const hasChildren = !!children;
     const clsName = classNames(
       preCls, loadSize, className,
+      {
+        [`${preCls}-children-box`]: hasChildren,
+      }
     );
     return (
       <div
@@ -48,14 +64,24 @@ export class Loading extends Component<ILoadingProps, ILoadingState> {
         style={style}
         {...otherProps}
       >
-      <span className={`${preCls}-icon`}>
-        {children ? children : <Icon type={iconType}/>}
-      </span>
-      {
-        text ? (
-          <p className={`${preCls}-text`}>{typeof text === 'string' ? text : '加载中'}</p>
-        ) : null
-      }
+        {hasChildren ? <div className={`${preCls}-children`}>{children}</div> : null}
+        {
+          loading ? (
+            <>
+              <div className={classNames({[`${preCls}-container`]: hasChildren})}>
+              <span className={`${preCls}-icon`}>
+                {icon ? icon : <Icon type={iconType}/>}
+              </span>
+                {
+                  text ? (
+                    <p className={`${preCls}-text`}>{typeof text === 'string' ? text : '加载中'}</p>
+                  ) : null
+                }
+              </div>
+              {hasChildren ? <div className={`${preCls}-mask`}/> : null}
+            </>
+          ) : null
+        }
       </div>
     );
   }
diff --git a/components/Loading/style/index.less b/components/Loading/style/index.less
index 65607c4..e1ec820 100644
--- a/components/Loading/style/index.less
+++ b/components/Loading/style/index.less
@@ -5,6 +5,8 @@
 .@{loading-prefix-cls} {
   color: @primary-color;
   text-align: center;
+  display: inline-block;
+  position: relative;
 
   &-icon {
     display: inline-block;
@@ -26,4 +28,25 @@
   &-text {
     font-size: 12px;
   }
+
+  &-container {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: @loading-mask-opacity;
+    background: @loading-mask-background;
+  }
+
+  &-children-box {
+    display: block;
+  }
 }
diff --git a/components/Loading/style/var.less b/components/Loading/style/var.less
index 9d62b86..fc12235 100644
--- a/components/Loading/style/var.less
+++ b/components/Loading/style/var.less
@@ -6,3 +6,6 @@
 @loading-size-small: 14px;
 @loading-size-default: 20px;
 @loading-size-large: 32px;
+
+@loading-mask-opacity: 0.5;
+@loading-mask-background: white;
diff --git a/docs/pages/components/Loading/api.tsx b/docs/pages/components/Loading/api.tsx
index bbc8445..0b40e6a 100644
--- a/docs/pages/components/Loading/api.tsx
+++ b/docs/pages/components/Loading/api.tsx
@@ -20,6 +20,18 @@ export default [
         type: 'string | boolean',
         defaultValue: '-',
       },
+      {
+        props: 'icon',
+        intro: '自定义icon',
+        type: 'ReactNode',
+        defaultValue: '-',
+      },
+      {
+        props: 'loading',
+        intro: '加载状态',
+        type: 'boolean',
+        defaultValue: 'true',
+      },
     ]
   }
 ];
diff --git a/docs/pages/components/Loading/demo/loadingContainer.md b/docs/pages/components/Loading/demo/loadingContainer.md
new file mode 100644
index 0000000..0c2c4ea
--- /dev/null
+++ b/docs/pages/components/Loading/demo/loadingContainer.md
@@ -0,0 +1 @@
+#### 包裹需要加载的页面
\ No newline at end of file
diff --git a/docs/pages/components/Loading/demo/loadingContainer.tsx b/docs/pages/components/Loading/demo/loadingContainer.tsx
new file mode 100644
index 0000000..e57b04f
--- /dev/null
+++ b/docs/pages/components/Loading/demo/loadingContainer.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Loading, Switch, Alert } from '@yoshino/components/';
+
+export default class App extends React.Component {
+  state = {
+    value: false,
+  };
+
+  render() {
+     return (
+      <div>
+        <Loading text='自定义加载文本' size='large' type='b' loading={this.state.value}>
+          <Alert type='info' showIcon title='消息提示文案'/>
+        </Loading>
+        <div>
+          <Switch checked={this.state.value} onChange={(v) => this.setState({value: v})} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/docs/pages/components/Loading/index.tsx b/docs/pages/components/Loading/index.tsx
index 17db159..405f730 100644
--- a/docs/pages/components/Loading/index.tsx
+++ b/docs/pages/components/Loading/index.tsx
@@ -14,6 +14,10 @@ import LoadingCustom from './demo/loadingCustom';
 import * as loadingCustomMd from './demo/loadingCustom.md';
 const loadingCustomCode = require('!raw-loader!./demo/loadingCustom');
 
+import LoadingContainer from './demo/loadingContainer';
+import * as loadingContainerMd from './demo/loadingContainer.md';
+const loadingContainerCode = require('!raw-loader!./demo/loadingContainer');
+
 export default class LoadingPage extends Component {
   render() {
     return (
@@ -22,6 +26,8 @@ export default class LoadingPage extends Component {
         <CodeBox text={loadingDemoMd} demo={<LoadingDemo/>} code={loadingDemoCode}/>
 
         <CodeBox text={loadingCustomMd} demo={<LoadingCustom/>} code={loadingCustomCode}/>
+
+        <CodeBox text={loadingContainerMd} demo={<LoadingContainer/>} code={loadingContainerCode}/>
         <ApiBox api={Api}/>
       </div>
     );