feat(component): loading支持包装器加载模式

Yoshino-UI · Sep 14, 2018 · 842ef45 · 842ef45
1 parent c04b409
commit 842ef45
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 9 deletions.
diff --git 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,30 +40,48 @@ 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
         className={clsName}
         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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+#### 包裹需要加载的页面
diff --git a/docs/pages/components/Loading/demo/loadingContainer.tsx 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
@@ -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>
     );