docs: update demo

ant-design · Nov 25, 2022 · 4ae1870 · 4ae1870
1 parent 10058e6
commit 4ae1870
Show file tree

Hide file tree

Showing 10 changed files with 1,965 additions and 1,764 deletions.
diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
diff --git a/components/progress/__tests__/__snapshots__/demo.test.ts.snap b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/progress/demo/circle-mini.tsx b/components/progress/demo/circle-mini.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Progress, Space } from 'antd';
 
 const App: React.FC = () => (
-  <Space>
+  <Space wrap>
     <Progress type="circle" percent={30} width={80} />
     <Progress type="circle" percent={70} width={80} status="exception" />
     <Progress type="circle" percent={100} width={80} />

diff --git a/components/progress/demo/circle.tsx b/components/progress/demo/circle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Progress, Space } from 'antd';
 
 const App: React.FC = () => (
-  <Space>
+  <Space wrap>
     <Progress type="circle" percent={75} />
     <Progress type="circle" percent={70} status="exception" />
     <Progress type="circle" percent={100} />

diff --git a/components/progress/demo/dashboard.tsx b/components/progress/demo/dashboard.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Progress } from 'antd';
+import { Progress, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
-    <Progress type="dashboard" percent={75} style={{ marginRight: 8 }} />
+  <Space wrap>
+    <Progress type="dashboard" percent={75} />
     <Progress type="dashboard" percent={75} gapDegree={30} />
-  </>
+  </Space>
 );
 
 export default App;
diff --git a/components/progress/demo/dynamic.tsx b/components/progress/demo/dynamic.tsx
@@ -3,22 +3,26 @@ import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Progress } from 'antd';
 
 const App: React.FC = () => {
-  const [percent, setPercent] = useState(0);
+  const [percent, setPercent] = useState<number>(0);
 
   const increase = () => {
-    let newPercent = percent + 10;
-    if (newPercent > 100) {
-      newPercent = 100;
-    }
-    setPercent(newPercent);
+    setPercent((prevPercent) => {
+      const newPercent = prevPercent + 10;
+      if (newPercent > 100) {
+        return 100;
+      }
+      return newPercent;
+    });
   };
 
   const decline = () => {
-    let newPercent = percent - 10;
-    if (newPercent < 0) {
-      newPercent = 0;
-    }
-    setPercent(newPercent);
+    setPercent((prevPercent) => {
+      const newPercent = prevPercent - 10;
+      if (newPercent < 0) {
+        return 0;
+      }
+      return newPercent;
+    });
   };
 
   return (

diff --git a/components/progress/demo/format.tsx b/components/progress/demo/format.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Progress, Space } from 'antd';
 
 const App: React.FC = () => (
-  <Space>
+  <Space wrap>
     <Progress type="circle" percent={75} format={(percent) => `${percent} Days`} />
     <Progress type="circle" percent={100} format={() => 'Done'} />
   </Space>

diff --git a/components/progress/demo/gradient-line.tsx b/components/progress/demo/gradient-line.tsx
@@ -1,17 +1,14 @@
 import React from 'react';
-import { Progress } from 'antd';
+import { Progress, Space } from 'antd';
 
 const App: React.FC = () => (
   <>
     <Progress percent={99.9} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
     <Progress percent={99.9} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
-    <Progress type="circle" percent={90} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
-    <Progress
-      type="circle"
-      percent={100}
-      style={{ marginLeft: 8 }}
-      strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
-    />
+    <Space wrap>
+      <Progress type="circle" percent={90} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
+      <Progress type="circle" percent={100} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
+    </Space>
   </>
 );
 

diff --git a/components/progress/demo/linecap.tsx b/components/progress/demo/linecap.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
-import { Progress } from 'antd';
+import { Progress, Space } from 'antd';
 
 const App: React.FC = () => (
   <>
     <Progress strokeLinecap="butt" percent={75} />
-    <Progress strokeLinecap="butt" type="circle" percent={75} />
-    <Progress strokeLinecap="butt" type="dashboard" percent={75} style={{ marginLeft: 8 }} />
+    <Space wrap>
+      <Progress strokeLinecap="butt" type="circle" percent={75} />
+      <Progress strokeLinecap="butt" type="dashboard" percent={75} />
+    </Space>
   </>
 );
 

diff --git a/components/progress/demo/segment.tsx b/components/progress/demo/segment.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import { Progress, Tooltip } from 'antd';
+import { Progress, Tooltip, Space } from 'antd';
 
 const App: React.FC = () => (
   <>
     <Tooltip title="3 done / 3 in progress / 4 to do">
       <Progress percent={60} success={{ percent: 30 }} />
     </Tooltip>
-    <Tooltip title="3 done / 3 in progress / 4 to do">
-      <Progress percent={60} success={{ percent: 30 }} type="circle" />
-    </Tooltip>
-    <Tooltip title="3 done / 3 in progress / 4 to do">
-      <Progress percent={60} success={{ percent: 30 }} type="dashboard" style={{ marginLeft: 8 }} />
-    </Tooltip>
+    <Space wrap>
+      <Tooltip title="3 done / 3 in progress / 4 to do">
+        <Progress percent={60} success={{ percent: 30 }} type="circle" />
+      </Tooltip>
+      <Tooltip title="3 done / 3 in progress / 4 to do">
+        <Progress percent={60} success={{ percent: 30 }} type="dashboard" />
+      </Tooltip>
+    </Space>
   </>
 );