add async stepper

Author: LIUSHANYIN

src/components/Stepper/index.scss

@@ -3,6 +3,18 @@
 @import '../../styles/typography.scss';
 @import '../../styles/opacity.scss';
 @import '../../styles/variables.scss';
+@keyframes donut-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+
 
 $baseClass: 'vant-stepper';
 .step-container {
@@ -25,20 +37,27 @@ $baseClass: 'vant-stepper';
     outline: none;
     background-color: rgba(128, 128, 128, 0.137);
     border: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
     font-weight: 100;
   }
+  .loading{
+    display: inline-block;
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: grey;
+    border-radius: 50%;
+    width: 65px;
+    height: 65px;
+    animation: donut-spin 1.2s linear infinite;
+    position: absolute;
+    left: 47%;
+    top: 35%;
+    opacity: 0;
+  }
 }
 
 button.#{$baseClass} {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 50px;
+  height: 50px;
+ 
 
   &__disabled {
     cursor: not-allowed;
@@ -50,8 +69,8 @@ button.#{$baseClass} {
   }
 }
 input.#{$baseClass} {
-  width: 35px;
-  height: 30px;
+  width: 55px;
+  height: 50px;
 
   &__disabled {
     cursor: not-allowed;
@@ -60,4 +79,11 @@ input.#{$baseClass} {
   &__theme {
     border-radius: 50%;
   }
+  
+
 }
+
+
+
+
+

src/components/Stepper/index.stories.tsx

@@ -33,7 +33,7 @@ export const RangeStepper = () => (
 
 export const SizeStepper = () => (
   <div className='container stepper'>
-    <Stepper size={50} />
+    <Stepper size={70} />
   </div>
 );
 
@@ -48,3 +48,9 @@ export const DisableInputStepper = () => (
     <Stepper disableInput />
   </div>
 );
+
+export const AsyncStepper = () => (
+  <div className='container stepper'>
+    <Stepper loading />
+  </div>
+);

src/components/Stepper/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
 
 import classnames from '../../utils/classNames';
 
@@ -18,6 +19,7 @@ export interface IProps {
   plus?: Boolean;
   minus?: Boolean;
   size?: number;
+  loading?: Boolean;
 }
 
 export default function Stepper({
@@ -27,12 +29,15 @@ export default function Stepper({
   max,
   disableInput,
   size,
-  theme
+  theme,
+  loading
 }: IProps) {
   const [value, setValue] = useState(0);
   const [minus, setMinus] = useState(false);
   const [plus, setPlus] = useState(false);
   const [Input, setInput] = useState(false);
+  const animationDiv = document.getElementById('loading');
+
   const plusBtProps = {
     className: classnames(baseClass, [{ disabled }, { theme }]),
     style: {}
@@ -47,15 +52,40 @@ export default function Stepper({
   };
 
   const handleIncrement = () => {
-    if (step) {
+    if (loading) {
+      ReactDOM.findDOMNode(animationDiv).style.opacity = 1;
+      const handlePlus = () => {
+        if (step) {
+          setValue(value + step);
+          ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
+        } else {
+          setValue(value + 1);
+          ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
+        }
+      };
+
+      setTimeout(handlePlus, 2000);
+    } else if (step) {
       setValue(value + step);
     } else {
       setValue(value + 1);
     }
   };
   const handleMinus = () => {
     const canMinus = value - step;
-    if (step) {
+    if (loading) {
+      ReactDOM.findDOMNode(animationDiv).style.opacity = 1;
+      const handleMinus = () => {
+        if (step) {
+          setValue(value - step);
+          ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
+        } else {
+          setValue(value - 1);
+          ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
+        }
+      };
+      setTimeout(handleMinus, 2000);
+    } else if (step) {
       if (canMinus >= 0) {
         setValue(value - step);
       }
@@ -167,6 +197,7 @@ export default function Stepper({
       <button onClick={handleIncrement} {...plusBtProps} disabled={plus}>
         +
       </button>
+      {loading && <div id='loading' className='loading' />}
     </div>
   );
 }