From 6f1243cb8b8a109b98aca64b29f6df9348ac6ff9 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Mon, 7 Feb 2022 11:52:58 +0330
Subject: [PATCH] Stepper Fixed

---
 src/components/Stepper/index.js | 26 ++++------
 src/view/register/index.js      | 92 ++++++++++++++++++---------------
 2 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js
index 62d2125..c824e8d 100644
--- a/src/components/Stepper/index.js
+++ b/src/components/Stepper/index.js
@@ -6,21 +6,10 @@ function Stepper({
   deactiveColor,
   count,
   currentStep,
+  steps
 }) {
-  const steps = [
-    {
-      title: 'اطلاعات هویتی'
-    },
-    {
-      title: 'مشخصات والدین'
-    },
-    {
-      title: 'قوانین و مقررات'
-    },
-    {
-      title: 'تایید اطلاعات'
-    },
-  ]
+  
+ 
   return (
     <div
       className={`flex items-center ${
@@ -38,12 +27,12 @@ function Stepper({
            className="w-8 h-8 text-white text-sm rounded-full flex justify-center items-center"
            style={{
              backgroundColor:
-               currentStep === Number(index) ? activeColor : deactiveColor,
+               item.active ? activeColor : deactiveColor,
            }}
          >
            
          </div>
-        <p className={`mr-4 font-bold ${currentStep === Number(index) ? 'text-red26' : 'text-gray-400'}`}>{item.title}</p>
+        <p className={`mr-4 font-bold ${item.active ? 'text-red26' : 'text-gray-400'}`}>{item.title}</p>
          </div>
          {count !== (Number(index) + 1) && (
            <span
@@ -54,7 +43,7 @@ function Stepper({
              }`}
              style={{
                opacity: '0.5',
-               background: currentStep === Number(index) ? activeColor : deactiveColor,
+               background: item.active ? activeColor : deactiveColor,
               //  borderTop: direction === "horizontal" ? `3px solid ${
               //    currentStep === Number(index) ? activeColor : deactiveColor
               //  }` : '',
@@ -64,8 +53,11 @@ function Stepper({
                transform : `${direction === "horizontal" ? 'translateY(1px)' : 'translateX(64px)'}`
              }}
            ></span>
+           
          )}
+
        </div>
+       
       ))}
     </div>
   );
diff --git a/src/view/register/index.js b/src/view/register/index.js
index 1b78a20..3a4a774 100644
--- a/src/view/register/index.js
+++ b/src/view/register/index.js
@@ -18,6 +18,7 @@ const Register = ({ activeLogin }) => {
     const [index, setIndex] = useState(1);
     const [register, setRegister] = useState(false);
     const timeoutRef = useRef(null);
+    const [activeStep, setActiveStep] = useState([true, false, false, false]);
 
     const focusHandler = (id) => {
         let inputs = document.querySelectorAll(".Login-box-form-item");
@@ -46,19 +47,19 @@ const Register = ({ activeLogin }) => {
     const stepCont = [
         {
             title: 'اطلاعات هویتی',
-            step: 0
+            active: activeStep[0]
         },
         {
             title: 'مشخصات والدین',
-            step: 1
+            active: activeStep[1]
         },
         {
             title: 'قوانین و مقررات',
-            step: 2
+            active: activeStep[2]
         },
         {
             title: 'تایید اطلاعات',
-            step: 3
+            active: activeStep[3]
         },
     ]
     const grades = [
@@ -122,7 +123,6 @@ const Register = ({ activeLogin }) => {
         <div className="w-full flex justify-center" style={{ direction: 'rtl', marginTop: '8.5%' }}>
             <div className="w-11/12 flex ">
                 {/* form */}
-
                 <div className="flex w-1/5 border-0 border-l border-solid border flex-col items-center p-6">
 
                     <img src={logo} className="w-1/2 m-4 mt-0" />
@@ -155,7 +155,7 @@ const Register = ({ activeLogin }) => {
                                 )
 
                             } */}
-                            <Stepper count={4} currentStep={steps}/>
+                            <Stepper count={4} currentStep={steps} steps={stepCont} />
                         </div>
 
 
@@ -188,10 +188,10 @@ const Register = ({ activeLogin }) => {
                                     </div>
                                     <div className="w-3/5 flex justify-center">
                                         <div className="w-2/5 mx-4">
-                                            <FileInput title="بارگزای صفحه اول شناسنامه" id={1}/>
+                                            <FileInput title="بارگزای صفحه اول شناسنامه" id={1} />
                                         </div>
                                         <div className="w-2/5 mx-4">
-                                            <FileInput title="بارگزای صفحه اول شناسنامه" id={2}/>
+                                            <FileInput title="بارگزای صفحه اول شناسنامه" id={2} />
                                         </div>
                                     </div>
 
@@ -227,9 +227,10 @@ const Register = ({ activeLogin }) => {
                                 </div>
                                 <div className="flex pt-10 justify-end">
                                     <div className="w-40">
-                                        <Button borderType='rounded' title='مرحله بعد' onClick={() =>
+                                        <Button borderType='rounded' title='مرحله بعد' onClick={() => {
                                             setSteps(1)
-                                        } />
+                                            setActiveStep([true, true, false, false])
+                                        }} />
                                     </div>
                                 </div>
 
@@ -341,15 +342,17 @@ const Register = ({ activeLogin }) => {
                                 </div>
                                 <div className="flex pt-10 justify-end">
                                     <div className="w-40 mx-4">
-                                        <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() =>
-                                            setSteps(0)
-                                        } />
+                                        <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
+                                            setSteps(0);
+                                            setActiveStep([true, false, false, false])
+                                        }} />
                                     </div>
 
                                     <div className="w-40">
-                                        <Button borderType='rounded' title='مرحله بعد' onClick={() =>
-                                            setSteps(2)
-                                        } />
+                                        <Button borderType='rounded' title='مرحله بعد' onClick={() => {
+                                            setSteps(2);
+                                            setActiveStep([true, true, true, false])
+                                        }} />
                                     </div>
                                 </div>
 
@@ -384,28 +387,30 @@ const Register = ({ activeLogin }) => {
 
                             </div>
                             <div className="flex items-center px-10 py-6">
-                                <input type="checkbox" className="w-6 h-6"/>
+                                <input type="checkbox" className="w-6 h-6" />
                                 <label className="mr-4 font-bold text-gray-500">
-                                    اینجانبان 
-                                     <span className="text-red52 font-bold"> اصغر تقی غلی خوان </span>
-                                      و 
-                                      <span className="text-red52 font-bold"> بتول کلاغ تپه زاده </span>
-                                      سرپرست های دانش آموز 
-                                      <span className="text-red52 font-bold"> امیر سام تقی غلی خوان </span>
-                                      با قوانین و مقررات موافقت نموده و تمامی موارد به عهده اینجانب میباشد
+                                    اینجانبان
+                                    <span className="text-red52 font-bold"> اصغر تقی غلی خوان </span>
+                                    و
+                                    <span className="text-red52 font-bold"> بتول کلاغ تپه زاده </span>
+                                    سرپرست های دانش آموز
+                                    <span className="text-red52 font-bold"> امیر سام تقی غلی خوان </span>
+                                    با قوانین و مقررات موافقت نموده و تمامی موارد به عهده اینجانب میباشد
                                 </label>
-                            </div>    
+                            </div>
                             <div className="w-full flex pt-10 justify-end">
                                 <div className="w-40 mx-4">
-                                    <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() =>
-                                        setSteps(1)
-                                    } />
+                                    <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
+                                        setSteps(1);
+                                        setActiveStep([true, true, false, false])
+                                    }} />
                                 </div>
 
                                 <div className="w-40">
-                                    <Button borderType='rounded' title='مرحله بعد' onClick={() =>
-                                        setSteps(3)
-                                    } />
+                                    <Button borderType='rounded' title='مرحله بعد' onClick={() => {
+                                        setSteps(3);
+                                        setActiveStep([true, true, true, true])
+                                    }} />
                                 </div>
                             </div>
 
@@ -422,21 +427,22 @@ const Register = ({ activeLogin }) => {
                                     <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p>
                                 </div>
 
-                                
-                            <div className="w-full flex pt-10 justify-end">
-                                <div className="w-40 mx-4">
-                                    <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() =>
-                                        setSteps(1)
-                                    } />
-                                </div>
 
-                                <div className="w-40">
-                                    <Button borderType='rounded' title='ورود' to='/dashboard' onClick={() =>
-                                        activeLogin()
-                                    } />
+                                <div className="w-full flex pt-10 justify-end">
+                                    <div className="w-40 mx-4">
+                                        <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
+                                            setSteps(2)
+                                            setActiveStep([true, true, true, false])
+                                        }} />
+                                    </div>
+
+                                    <div className="w-40">
+                                        <Button borderType='rounded' title='ورود' to='/dashboard' onClick={() =>
+                                            activeLogin()
+                                        } />
+                                    </div>
                                 </div>
                             </div>
-                                        </div>
 
 
                         </>