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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      src/components/Stepper/index.js
  2. 92
      src/view/register/index.js

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

@ -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>
);

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

@ -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>
</>

Write Preview
Loading…
Cancel
Save