perf: 添加axios，以及Progress添加动画

panyushan-jade · Oct 20, 2022 · 8e7c59e · 8e7c59e
1 parent 2175871
commit 8e7c59e
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@types/react-transition-group": "^4.4.5",
     "@types/sass": "^1.43.1",
     "@types/storybook__addon-info": "^5.2.5",
+    "axios": "^1.1.3",
     "classnames": "^2.3.1",
     "husky": "^7.0.4",
     "lottie-react": "^2.3.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -33,6 +33,7 @@ function App() {
   const [state, setState] = useState({
     data: Array.from({ length: 20 }),
   });
+  const [value, setValue] = useState(0);
   const countRef = useRef(20);
   const handle = () => {
     console.log("myref", myref);
@@ -124,7 +125,17 @@ function App() {
       <h3>Button</h3>
       <Button type="link">我是link</Button>
       <Button>我是default</Button>
-      <Button type="primary">我是primary</Button>
+      <Button
+        type="primary"
+        onClick={() => {
+          setValue((pre: any) => {
+            console.log("pre: ", pre);
+            return pre + 10;
+          });
+        }}
+      >
+        我是primary
+      </Button>
       <Button danger>我是primary danger</Button>
       <Button size="large">我是large</Button>
       <Button size="small">我是small</Button>
@@ -175,6 +186,7 @@ function App() {
         radius={100}
         style={{ height: 10, width: 500 }}
       ></Progress>
+      <Progress RingWidth={5} value={value}></Progress>
     </div>
   );
 }

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -20,6 +20,7 @@ export interface IBaseButtonProps {
   /**是否禁用 */
   disabled?: boolean; // button 的禁用状态 at: a标签是没有disable的属性的
   className?: string;
+  onClick?: () => void;
   children: React.ReactNode; // 用来渲染组件中的内容
 }
 

diff --git a/src/components/Progress/_style.scss b/src/components/Progress/_style.scss
@@ -7,6 +7,7 @@
 
   .progress {
     height: 100%;
+    transition: $progress-bar-transition;
     border-radius: 5px;
     overflow: hidden;
   }

diff --git a/src/components/Progress/index.tsx b/src/components/Progress/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./_style.scss";
+// import "./_style.scss";
 
 interface PropsType {
   type?: string; //进度条类型  默认线形，circle圆环

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -19,3 +19,6 @@
 
 //auto-complete
 @import "../components/AutoComplete/style";
+
+//Progress
+@import "../components/Progress/style";
diff --git a/yarn.lock b/yarn.lock
@@ -6334,6 +6334,15 @@ axe-core@^4.3.5:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
+axios@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.1.3.tgz#8274250dada2edf53814ed7db644b9c2866c1e35"
+  integrity sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
@@ -9787,6 +9796,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -9860,6 +9874,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 format@^0.2.0:
   version "0.2.2"
   resolved "https://registry.npmmirror.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
@@ -14688,6 +14711,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"