Merge pull request #318 from yuanmeda/fix/doc-pull-down-refresh413

docs(pull-down-refresh): update docs and demo
Tencent · Nov 10, 2022 · c7e4347 · c7e4347
2 parents 5643abc + 72cd93e
commit c7e4347
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 58 deletions.
diff --git a/src/pull-down-refresh/_example/base.jsx b/src/pull-down-refresh/_example/base.jsx
@@ -1,50 +1,15 @@
 import React from 'react';
-import { PullDownRefresh, Skeleton } from 'tdesign-mobile-react';
-import './style/index.less';
+import { PullDownRefresh } from 'tdesign-mobile-react';
 
-export default function Demo() {
-  const rowCols = [
-    {
-      height: '171px',
-      borderRadius: '8px',
-    },
-    [
-      {
-        width: '50%',
-        type: 'circle',
-      },
-      {
-        width: '50%',
-        type: 'circle',
-      },
-    ],
-    [
-      {
-        width: '30%',
-        type: 'circle',
-      },
-      {
-        width: '30%',
-        type: 'circle',
-      },
-    ],
-  ];
+export default function BaseDemo({ children }) {
   return (
     <div className="tdesign-mobile-wrapper">
-      <div style={{ display: 'flex' }}>
-        <div className="tdesign-mobile-item">
-          <Skeleton theme="text" rowCol={rowCols} />
-        </div>
-        <div className="tdesign-mobile-item">
-          <Skeleton theme="text" rowCol={rowCols} />
-        </div>
-      </div>
-
       <PullDownRefresh
         loadingBarHeight={80}
         loadingProps={{
           layout: 'vertical',
         }}
+        loadingTexts={['下拉刷新', '松开刷新', '正在刷新', '刷新完成']}
         onRefresh={() =>
           new Promise((resolve) => {
             setTimeout(() => {
@@ -53,7 +18,7 @@ export default function Demo() {
           })
         }
       >
-        <div className="tdesign-mobile-block">拖拽该区域演示 中间下拉刷新</div>
+        {children}
       </PullDownRefresh>
     </div>
   );

diff --git a/src/pull-down-refresh/_example/index.jsx b/src/pull-down-refresh/_example/index.jsx
@@ -1,22 +1,42 @@
 import React from 'react';
+import { Skeleton } from 'tdesign-mobile-react';
 import BaseDemo from './base';
-import TopDemo from './top';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import './style/index.less';
 
 export default function Demo() {
+  const rowCols = [
+    1,
+    {
+      width: '100px',
+    },
+    {
+      width: '165.5px',
+      height: '165.5px',
+      borderRadius: '12px',
+    },
+  ];
   return (
     <div className="tdesign-mobile-demo">
-      <TDemoHeader
-        title="PullDownRefresh 下拉刷新"
-        summary="用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。"
-      />
-      <TDemoBlock title="01 类型" summary="下拉刷新大致分为顶部下拉和中间下拉">
-        <BaseDemo />
-      </TDemoBlock>
-      <TDemoBlock summary="顶部下拉刷新">
-        <TopDemo />
-      </TDemoBlock>
+      <BaseDemo>
+        <>
+          <TDemoHeader
+            title="PullDownRefresh 下拉刷新"
+            summary="用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。"
+          />
+          <TDemoBlock>
+            <div className="tdesign-mobile-block">拖拽该区域演示 顶部下拉刷新</div>
+            <div style={{ display: 'flex', padding: '0 16px 140px 16px' }}>
+              {Array.from(Array(2), (_, key) => (
+                <div className="tdesign-mobile-item" key={key}>
+                  <Skeleton theme="text" rowCol={rowCols} />
+                </div>
+              ))}
+            </div>
+          </TDemoBlock>
+        </>
+      </BaseDemo>
     </div>
   );
 }
diff --git a/src/pull-down-refresh/_example/style/index.less b/src/pull-down-refresh/_example/style/index.less
@@ -7,28 +7,24 @@
 .tdesign-mobile-demo {
   background: #fff;
 
-  .tdesign-mobile-wrapper {
-    padding: 0 12px;
-  }
-
   .tdesign-mobile-block {
     box-sizing: border-box;
-    background-color: #eee;
-    border-radius: 8px;
-    width: 100%;
+    background-color: rgba(243, 243, 243, 1);;
+    border-radius: 12px;
     height: 171px;
     font-size: 16px;
     color: rgba(0, 0, 0, 0.26);
     line-height: 171px;
     text-align: center;
-    margin-bottom: 12px;
+    margin: 16px;
   }
 
   .tdesign-mobile-item {
     width: 48%;
 
     &:last-child {
       margin-left: 4%;
+      margin-bottom: 16px;
     }
   }
 }
diff --git a/src/skeleton/Skeleton.tsx b/src/skeleton/Skeleton.tsx
@@ -39,6 +39,7 @@ const Skeleton: React.FC<SkeletonProps> = (props) => {
       'size',
       'background',
       'backgroundColor',
+      'borderRadius',
     ];
 
     return styleName.reduce((style, currentStyle) => {