Merge pull request #323 from lockiechen/develop

docs(Loading): update demo #476

src/loading/_example/bar.jsx

@@ -26,14 +26,14 @@ export default function () {
       progressValue += 0.01;
       setProgress((pre) => pre + 0.01);
     }, 100);
-  }, [progress, timer]);
+  }, [timer]);
 
   return (
-    <>
+    <div className="demo-content">
       <Loading theme="bar" progress={progress} />
-      <Button variant="outline" onClick={onPageLoading}>
+      <Button block variant="outline" onClick={onPageLoading}>
         {progress > 0 && progress <= 1 ? '页面加载中...' : '页面进度条加载'}
       </Button>
-    </>
+    </div>
   );
 }

src/loading/_example/base.jsx

@@ -2,5 +2,21 @@ import React from 'react';
 import { Loading } from 'tdesign-mobile-react';
 
 export default function () {
-  return <Loading />;
+  return (
+    <div
+      className="demo-content"
+      style={{
+        color: 'red',
+        width: '130px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Loading />
+      <Loading theme="spinner" />
+      <div style={{ marginRight: '10px' }} />
+      <Loading theme="dots" />
+    </div>
+  );
 }

src/loading/_example/delay.jsx

@@ -5,16 +5,15 @@ export default function () {
   const [showLoading, setShowLoading] = useState(false);
 
   const clickSwitch = (value) => {
-    console.log(value);
     setShowLoading(value);
   };
 
   return (
-    <>
+    <div className="demo-content demo-content--column">
       <Switch label={['请求发起，延迟显示loading', '请求结束，隐藏loading']} onChange={clickSwitch} />
-      <div>
+      <div className="demo-loading">
         <Loading delay={1000} loading={showLoading} text="加载中..." />
       </div>
-    </>
+    </div>
   );
 }

src/loading/_example/horz.jsx

@@ -3,12 +3,14 @@ import { Loading } from 'tdesign-mobile-react';
 
 export default function () {
   return (
-    <>
+    <div className="demo-content">
       <Loading text="加载中..." />
+      <div style={{ marginRight: '20px' }} />
       <Loading theme="spinner" text="加载中..." />
+      <div style={{ marginRight: '20px' }} />
       <Loading>
         <span>加载中...</span>
       </Loading>
-    </>
+    </div>
   );
 }

src/loading/_example/index.jsx

@@ -1,120 +1,48 @@
-import React, { useState, useCallback, useRef } from 'react';
-import { Loading, Button, Switch } from 'tdesign-mobile-react';
+import React from 'react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import Base from './base';
+import Horz from './horz';
+import Vert from './vert';
+import PureText from './pure-text';
+import Bar from './bar';
+import Delay from './delay';
+import Size from './size';
+import Speed from './speed';
+
 import './style/index.less';
 
 export default function () {
-  const [progress, setProgress] = useState(0);
-  const [showLoading, setShowLoading] = useState(false);
-  const timer = useRef(null);
-
-  const onPageLoading = useCallback(() => {
-    if (timer.current) {
-      return;
-    }
-
-    let progressValue = 0;
-    setProgress(0);
-
-    timer.current = setInterval(() => {
-      if (progressValue >= 1) {
-        setTimeout(() => {
-          setProgress(0);
-        }, 2000);
-
-        clearInterval(timer.current);
-        timer.current = null;
-        return;
-      }
-      progressValue += 0.01;
-      setProgress((pre) => pre + 0.01);
-    }, 100);
-  }, [progress, timer]);
-
-  const clickSwitch = (value) => {
-    console.log(value);
-    setShowLoading(value);
-  };
-
   return (
     <>
       <TDemoHeader
-        title="Loading 加载中"
-        summary="加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。"
+        title="Loading 加载"
+        summary="用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。"
       />
-      <TDemoBlock title="01 类型" summary="纯图标">
-        <div
-          className="demo-content"
-          style={{
-            color: 'red',
-            width: '130px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Loading />
-          <Loading theme="spinner" />
-          <div style={{ marginRight: '10px' }} />
-          <Loading theme="dots" />
-        </div>
+      <TDemoBlock title="01 类型" summary="纯icon">
+        <Base />
       </TDemoBlock>
-      <TDemoBlock summary="图标加文字横向">
-        <div className="demo-content">
-          <Loading text="加载中..." />
-          <div style={{ marginRight: '20px' }} />
-          <Loading theme="spinner" text="加载中..." />
-          <div style={{ marginRight: '20px' }} />
-          <Loading>
-            <span>加载中...</span>
-          </Loading>
-        </div>
+      <TDemoBlock summary="icon加文字横向">
+        <Horz />
       </TDemoBlock>
-      <TDemoBlock summary="图标加文字竖向">
-        <div className="demo-content">
-          <Loading text="加载中..." layout="vertical" />
-        </div>
+      <TDemoBlock summary="icon加文字竖向">
+        <Vert />
       </TDemoBlock>
       <TDemoBlock summary="纯文字">
-        <div className="demo-content">
-          <Loading indicator={false} text="加载中..." />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="加载失败">
-        <div className="demo-content">
-          <Loading indicator={false}>
-            <div className="custom-error">
-              加载失败 <span>刷新</span>
-            </div>
-          </Loading>
-        </div>
+        <PureText />
       </TDemoBlock>
       <TDemoBlock summary="进度条加载">
-        <div className="demo-content">
-          <Loading theme="bar" progress={progress} />
-          <Button block variant="outline" onClick={onPageLoading}>
-            {progress > 0 && progress <= 1 ? '页面加载中...' : '页面进度条加载'}
-          </Button>
-        </div>
+        <Bar />
+      </TDemoBlock>
+      <TDemoBlock title="02 状态" summary="延迟加载">
+        <Delay />
       </TDemoBlock>
-      <TDemoBlock summary="延迟加载">
-        <div className="normal-content">
-          <Switch label={['请求发起，延迟显示loading', '请求结束，隐藏loading']} onChange={clickSwitch} />
-          <div>
-            <Loading delay={1000} loading={showLoading} text="加载中..." />
-          </div>
-        </div>
+      <TDemoBlock title="03 加载速度" summary="加载速度可配置，加载一周的时间单位（毫秒）">
+        <Speed />
       </TDemoBlock>
 
-      <TDemoBlock title="02 规格" summary="图标加文字横向">
-        <div className="normal-content" style={{ paddingBottom: '30px' }}>
-          <Loading size="large" text="加载中(大)..." />
-          <div style={{ marginBottom: '10px' }} />
-          <Loading size="medium" text="加载中(中)..." />
-          <div style={{ marginBottom: '10px' }} />
-          <Loading size="small" text="加载中(小)..." />
-        </div>
+      <TDemoBlock title="04 规格" summary="支持自定义加载规格">
+        <Size />
       </TDemoBlock>
     </>
   );

src/loading/_example/pure-text.jsx

@@ -3,16 +3,15 @@ import { Loading } from 'tdesign-mobile-react';
 
 export default function () {
   return (
-    <>
+    <div className="demo-content pure-text-demo-box">
       <Loading indicator={false} text="加载中..." />
       <Loading theme="error" />
-      <div>
+      <div className="custom-error">
         <Loading indicator={false}>
-          <div>
-            加载失败 <span>刷新</span>
-          </div>
+          加载失败
+          <span>刷新</span>
         </Loading>
       </div>
-    </>
+    </div>
   );
 }

src/loading/_example/size.jsx

@@ -3,10 +3,10 @@ import { Loading } from 'tdesign-mobile-react';
 
 export default function () {
   return (
-    <>
-      <Loading size="large" text="加载中(大)..." />
-      <Loading size="medium" text="加载中(中)..." />
+    <div className="demo-content demo-content--column demo-content-size">
       <Loading size="small" text="加载中(小)..." />
-    </>
+      <Loading size="medium" text="加载中(中)..." />
+      <Loading size="large" text="加载中(大)..." />
+    </div>
   );
 }

src/loading/_example/speed.jsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { Loading, Slider } from 'tdesign-mobile-react';
+
+export default function () {
+  const [speed, setSpeed] = useState(300);
+
+  return (
+    <div className="demo-content demo-content--column">
+      <Loading text="加载中..." duration={speed} />
+      <div className="demo-loading-speed-slider">
+        <span>速度调整</span>
+        <Slider min={0} max={800} value={speed} onChange={setSpeed} />
+      </div>
+    </div>
+  );
+}

src/loading/_example/style/index.less

@@ -2,6 +2,31 @@
   padding: 0 16px;
   display: flex;
   // flex-direction: column;
+  &--column {
+    flex-direction: column;
+  }
+  .demo-loading {
+    margin-top: 20px;
+  }
+  .demo-loading-speed-slider {
+    width: 100%;
+    margin-top: 20px;
+    display: grid;
+    align-items: center;
+    grid-gap: 24px;
+    grid-template-columns: auto 1fr;
+  }
+  &.pure-text-demo-box {
+    display: grid;
+    align-items: center;
+    grid-gap: 40px;
+    grid-template-columns: repeat(3, auto);
+  }
+  &.demo-content-size {
+    .t-loading {
+      margin-bottom: 20px;
+    }
+  }
 }
 
 .normal-content {
@@ -10,8 +35,11 @@
 
 .custom-error {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.9);
+  .t-loading {
+    color: rgba(0, 0, 0, 0.9);
+  }
   span {
+    margin-left: 10px;
     color: rgba(0, 82, 217, 1);
     cursor: pointer;
   }

src/loading/_example/vert.jsx

@@ -2,5 +2,9 @@ import React from 'react';
 import { Loading } from 'tdesign-mobile-react';
 
 export default function () {
-  return <Loading text="加载中..." layout="vertical" />;
+  return (
+    <div className="demo-content">
+      <Loading text="加载中..." layout="vertical" />
+    </div>
+  );
 }