pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Stepper Fixed

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 8a664b621d
commit 6f1243cb8b
2 changed files with 58 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      src/components/Stepper/index.js
  2. 52
      src/view/register/index.js

26
src/components/Stepper/index.js
Unescape View File

@ -6,21 +6,10 @@ function Stepper({
deactiveColor, deactiveColor,
count, count,
currentStep, currentStep,
steps
}) { }) {
const steps = [
{
title: 'اطلاعات هویتی'
},
{
title: 'مشخصات والدین'
},
{
title: 'قوانین و مقررات'
},
{
title: 'تایید اطلاعات'
},
]
return ( return (
<div <div
className={`flex items-center ${ 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" className="w-8 h-8 text-white text-sm rounded-full flex justify-center items-center"
style={{ style={{
backgroundColor: backgroundColor:
currentStep === Number(index) ? activeColor : deactiveColor, item.active ? activeColor : deactiveColor,
}} }}
> >
</div> </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> </div>
{count !== (Number(index) + 1) && ( {count !== (Number(index) + 1) && (
<span <span
@ -54,7 +43,7 @@ function Stepper({
}`} }`}
style={{ style={{
opacity: '0.5', opacity: '0.5',
background: currentStep === Number(index) ? activeColor : deactiveColor, background: item.active ? activeColor : deactiveColor,
// borderTop: direction === "horizontal" ? `3px solid ${ // borderTop: direction === "horizontal" ? `3px solid ${
// currentStep === Number(index) ? activeColor : deactiveColor // currentStep === Number(index) ? activeColor : deactiveColor
// }` : '', // }` : '',
@ -64,8 +53,11 @@ function Stepper({
transform : `${direction === "horizontal" ? 'translateY(1px)' : 'translateX(64px)'}` transform : `${direction === "horizontal" ? 'translateY(1px)' : 'translateX(64px)'}`
}} }}
></span> ></span>
)} )}
</div> </div>
))} ))}
</div> </div>
); );

52
src/view/register/index.js
Unescape View File

@ -18,6 +18,7 @@ const Register = ({ activeLogin }) => {
const [index, setIndex] = useState(1); const [index, setIndex] = useState(1);
const [register, setRegister] = useState(false); const [register, setRegister] = useState(false);
const timeoutRef = useRef(null); const timeoutRef = useRef(null);
const [activeStep, setActiveStep] = useState([true, false, false, false]);
const focusHandler = (id) => { const focusHandler = (id) => {
let inputs = document.querySelectorAll(".Login-box-form-item"); let inputs = document.querySelectorAll(".Login-box-form-item");
@ -46,19 +47,19 @@ const Register = ({ activeLogin }) => {
const stepCont = [ const stepCont = [
{ {
title: 'اطلاعات هویتی', title: 'اطلاعات هویتی',
step: 0 active: activeStep[0]
}, },
{ {
title: 'مشخصات والدین', title: 'مشخصات والدین',
step: 1 active: activeStep[1]
}, },
{ {
title: 'قوانین و مقررات', title: 'قوانین و مقررات',
step: 2 active: activeStep[2]
}, },
{ {
title: 'تایید اطلاعات', title: 'تایید اطلاعات',
step: 3 active: activeStep[3]
}, },
] ]
const grades = [ 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-full flex justify-center" style={{ direction: 'rtl', marginTop: '8.5%' }}>
<div className="w-11/12 flex "> <div className="w-11/12 flex ">
{/* form */} {/* form */}
<div className="flex w-1/5 border-0 border-l border-solid border flex-col items-center p-6"> <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" /> <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> </div>
@ -227,9 +227,10 @@ const Register = ({ activeLogin }) => {
</div> </div>
<div className="flex pt-10 justify-end"> <div className="flex pt-10 justify-end">
<div className="w-40"> <div className="w-40">
<Button borderType='rounded' title='مرحله بعد' onClick={() => <Button borderType='rounded' title='مرحله بعد' onClick={() => {
setSteps(1) setSteps(1)
} /> setActiveStep([true, true, false, false])
}} />
</div> </div>
</div> </div>
@ -341,15 +342,17 @@ const Register = ({ activeLogin }) => {
</div> </div>
<div className="flex pt-10 justify-end"> <div className="flex pt-10 justify-end">
<div className="w-40 mx-4"> <div className="w-40 mx-4">
<Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
setSteps(0) setSteps(0);
} /> setActiveStep([true, false, false, false])
}} />
</div> </div>
<div className="w-40"> <div className="w-40">
<Button borderType='rounded' title='مرحله بعد' onClick={() => <Button borderType='rounded' title='مرحله بعد' onClick={() => {
setSteps(2) setSteps(2);
} /> setActiveStep([true, true, true, false])
}} />
</div> </div>
</div> </div>
@ -397,15 +400,17 @@ const Register = ({ activeLogin }) => {
</div> </div>
<div className="w-full flex pt-10 justify-end"> <div className="w-full flex pt-10 justify-end">
<div className="w-40 mx-4"> <div className="w-40 mx-4">
<Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
setSteps(1) setSteps(1);
} /> setActiveStep([true, true, false, false])
}} />
</div> </div>
<div className="w-40"> <div className="w-40">
<Button borderType='rounded' title='مرحله بعد' onClick={() => <Button borderType='rounded' title='مرحله بعد' onClick={() => {
setSteps(3) setSteps(3);
} /> setActiveStep([true, true, true, true])
}} />
</div> </div>
</div> </div>
@ -425,9 +430,10 @@ const Register = ({ activeLogin }) => {
<div className="w-full flex pt-10 justify-end"> <div className="w-full flex pt-10 justify-end">
<div className="w-40 mx-4"> <div className="w-40 mx-4">
<Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
setSteps(1) setSteps(2)
} /> setActiveStep([true, true, true, false])
}} />
</div> </div>
<div className="w-40"> <div className="w-40">

Write Preview
Loading…
Cancel
Save