add

Author: LIUSHANYIN

src/components/Stepper/index.scss

@@ -18,7 +18,9 @@ $baseClass: 'vant-stepper';
   display: flex;
   justify-content: center;
   align-items: center;
-  img{
+  margin: 0px;
+  padding: 0px;
+  img {
     width: 12px;
     height: auto;
   }
@@ -52,8 +54,8 @@ $baseClass: 'vant-stepper';
     border: 4px solid rgba(0, 0, 0, 0.1);
     border-left-color: white;
     border-radius: 50%;
-    width: 25px;
-    height: 25px;
+    width: 28px;
+    height: 28px;
     animation: donut-spin 1.2s linear infinite;
     position: relative;
 
@@ -71,12 +73,13 @@ $baseClass: 'vant-stepper';
     border-radius: 10px;
     margin: auto;
     opacity: 0;
+    
   }
 }
 
 button.#{$baseClass} {
-  width: 25px;
-  height: 25px;
+  width: 28px;
+  height: 28px;
   text-align: center;
   display: flex;
   justify-content: center;
@@ -90,19 +93,25 @@ button.#{$baseClass} {
   &__theme {
     border-radius: 50%;
     outline: none;
-  }
+    width: 22px;
+    height: 22px;
+    background-color: rgb(132, 225, 241);
+ }
+ 
 }
 input.#{$baseClass} {
-  width: 30px;
-  height: 25px;
+  width: 32px;
+  height: 28px;
 
   &__disableInput {
     cursor: not-allowed;
     opacity: $button-disabled-opacity;
   }
   &__theme {
     border-radius: 50%;
-    
+    width: 32px;
+    height: 22px;
+    background-color: white;
   }
 }
 .step-container button p {
@@ -116,3 +125,4 @@ input.#{$baseClass} {
   font-size: 20px;
   margin: 0;
 }
+

src/components/Stepper/index.tsx

@@ -39,6 +39,8 @@ export default function Stepper({
   const animationDiv = document.getElementById('loading');
   const animationBackground = document.getElementById('loading-background');
   const [minusBt, setMinusBt] = useState({});
+  const [plusBt, setPlusBt] = useState({});
+  const [inputBt, setInputBt] = useState({});
 
   const handleIncrementBtProps = {
     className: classnames(baseClass, [{ disabled }, { theme }]),
@@ -49,7 +51,7 @@ export default function Stepper({
     style: {}
   };
   const inputProps = {
-    className: classnames(baseClass, [{ disableInput }]),
+    className: classnames(baseClass, [{ disableInput }, { theme }]),
     style: {}
   };
 
@@ -135,67 +137,50 @@ export default function Stepper({
     }
   }, [disabled, value, max, min, handleDecrementProps, handleIncrementBtProps]);
   useEffect(() => {
-    if (value === 0) {
-      const btStyle = { cursor: 'not-allowed', opacity: '0.2' };
-      setMinusBt(btStyle);
+    if (size) {
+      const Size = `${size}px`;
+      setMinusBt({ width: Size, height: Size });
+      setInputBt({ width: Size, height: Size });
+      setPlusBt({ width: Size, height: Size });
+      if (value === 0 || value === min) {
+        const btStyle = {
+          cursor: 'not-allowed',
+          width: Size,
+          height: Size,
+          opacity: '0.2'
+        };
+        setMinusBt(btStyle);
+      } else if (value === max) {
+        const btStyle = {
+          cursor: 'not-allowed',
+          width: Size,
+          height: Size,
+          opacity: '0.2'
+        };
+        setPlusBt(btStyle);
+      } else {
+        setMinusBt({ width: Size, height: Size });
+        setInputBt({ width: Size, height: Size });
+        setPlusBt({ width: Size, height: Size });
+      }
     } else {
-      setMinusBt({});
+      if (value === 0 || value === min) {
+        const btStyle = { cursor: 'not-allowed', opacity: '0.2' };
+        setMinusBt(btStyle);
+      } else if (value === max) {
+        const btStyle = { cursor: 'not-allowed', opacity: '0.2' };
+        setPlusBt(btStyle);
+      } else {
+        setMinusBt({});
+        setPlusBt({});
+      }
     }
   }, [value]);
 
   if (disabled) {
     Object.assign(handleDecrementProps, { disabled });
     Object.assign(handleIncrementBtProps, { disabled });
   }
-  if (theme) {
-    Object.assign(handleIncrementBtProps, {
-      style: {
-        ...handleIncrementBtProps.style,
-        background: '#ee0a24',
-        color: 'white'
-      }
-    });
-    Object.assign(handleDecrementProps, {
-      style: {
-        ...handleDecrementProps.style,
-        border: '1px solid #ee0a24',
-        color: '#ee0a24',
-        background: 'white'
-      }
-    });
-    Object.assign(inputProps, {
-      style: {
-        ...inputProps.style,
-        background: 'white'
-      }
-    });
-  }
-
-  if (size) {
-    const Size = `${size}px`;
-
-    Object.assign(handleDecrementProps, {
-      style: {
-        ...handleDecrementProps.style,
-        width: Size,
-        height: Size
-      }
-    });
-    Object.assign(handleIncrementBtProps, {
-      style: {
-        ...handleIncrementBtProps.style,
-        width: Size,
-        height: Size
-      }
-    });
-    Object.assign(inputProps, {
-      style: {
-        ...inputProps.style,
-        width: Size,
-        height: Size
-      }
-    });
-  }
 
   useEffect(() => {
     if (disableInput) {
@@ -222,12 +207,14 @@ export default function Stepper({
         {...inputProps}
         onChange={handleInputChange}
         disabled={isInput}
+        style={inputBt}
       />
 
       <button
         onClick={handleIncrement}
         {...handleIncrementBtProps}
         disabled={isPlus}
+        style={plusBt}
       >
         <img
           src='https://res.cloudinary.com/dlapk94rx/image/upload/v1595307854/icons8-plus-24_wnv2uo.png'