Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2f16d43

Browse files
committed
done multi form
1 parent34dcea1 commit2f16d43

File tree

8 files changed

+277
-103
lines changed

8 files changed

+277
-103
lines changed

‎src/App.jsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1+
import{useState}from'react';
12
importIndexAccordianfrom'./components/accordian/IndexAccordian';
23
importButtonfrom'./components/button/Button';
34
importMultiStepFormfrom'./components/multi-step-form/MultiStepForm';
4-
importWrapperfrom'./components/Wrapper';
55

66

77
constApp=()=>{
8+
const[formSubmited,setFormSubmited]=useState(false);
9+
const[cancel,setCancel]=useState(false);
10+
11+
// HANDLE SUBMIT FUNCTION
12+
functiononSubmit(data){
13+
setFormSubmited(true)
14+
};
15+
16+
// HANDLE CANCEL FUNCTION
17+
functiononCancel(data){
18+
setCancel(true)
19+
};
820

921
return(
1022
<sectionclassName='bg-slate-100'>
23+
1124
<h1className='text-4xl font-bold text-center py-10 text-cyan-500'>
1225
Frontend System Design
1326
</h1>
@@ -29,7 +42,12 @@ const App = () => {
2942

3043
{/* Multi Step Form */}
3144
<divclassName='py-10'>
32-
<MultiStepForm/>
45+
{formSubmited&&<h1className='text-center text-2xl font-bold text-green-500'>Form Submited Successfully.😎</h1>}
46+
47+
{!formSubmited&&<MultiStepFormonSubmit={onSubmit}onCancel={onCancel}/>}
48+
49+
{cancel&&<h1className='text-center text-2xl font-bold text-red-500'>User want,s to cancel.🔥</h1>}
50+
3351
</div>
3452
</section>
3553
)

‎src/components/multi-step-form/ContactInfo.jsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/components/multi-step-form/FinancialInformation.jsx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.
Lines changed: 109 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,116 @@
1-
importReactfrom'react'
2-
importPersonalInfofrom'./PersonalInfo';
3-
importContactInfofrom'./ContactInfo';
4-
importFinancialInformationfrom'./FinancialInformation';
1+
import{useState}from'react';
2+
import{ChevronLeft}from'lucide-react';
3+
importStep1from'./Step1';
4+
importStep2from'./Step2';
5+
importStep3from'./Step3';
6+
7+
constpage={
8+
Step1:1,
9+
Step2:2,
10+
Step3:3,
11+
};
12+
13+
constFINAL_STEP=page.Step3;
14+
15+
constMultiStepForm=({ onSubmit=()=>{}, onCancel=()=>{}})=>{
16+
const[currentStep,setCurrentStep]=useState(page.Step1);
17+
18+
const[inputs,setInputs]=useState({
19+
step1:{
20+
name:"",
21+
email:""
22+
},
23+
step2:{
24+
phone:"",
25+
city:""
26+
},
27+
step3:{
28+
sallery:"",
29+
bank:""
30+
},
31+
});
32+
33+
constSteps={
34+
[page.Step1]:Step1,
35+
[page.Step2]:Step2,
36+
[page.Step3]:Step3,
37+
};
38+
39+
constComponent=Steps[currentStep];
40+
41+
constsubmitButtonText=FINAL_STEP===currentStep ?"Save" :"Next";
42+
43+
44+
// HANDLE NEXT FUNCTION
45+
functionhandleNext(e){
46+
e.preventDefault();
47+
if(currentStep===page.Step1){
48+
setCurrentStep(currentStep+1)
49+
}elseif(currentStep===page.Step2){
50+
setCurrentStep(currentStep+1)
51+
}else{
52+
console.log("Submit Data");
53+
onSubmit(inputs)
54+
}
55+
};
56+
57+
// HANDLE PREVIOUS FUNCTION
58+
functionhandlePrev(){
59+
if(currentStep>1){
60+
setCurrentStep(currentStep-1);
61+
}
62+
};
63+
64+
// HANDLE INPUT CHANGE
65+
functionhandleInputChange({ stepKey, value, inputKey}){
66+
constoldInput=structuredClone(inputs);
67+
oldInput[stepKey][inputKey]=value;
68+
setInputs(oldInput);
69+
};
70+
71+
constinputToSend=inputs[`step${currentStep}`];
72+
console.log(inputToSend);
573

6-
constMultiStepForm=()=>{
774
return(
8-
<section>
9-
<formaction="">
10-
<PersonalInfo/>
11-
<ContactInfo/>
12-
<FinancialInformation/>
13-
</form>
75+
<sectionclassName='flex justify-center items-center'>
76+
<formaction=""className='w-[500px]'>
77+
<Component
78+
stepKey={`step${currentStep}`}
79+
onChange={handleInputChange}
80+
inputs={inputToSend}/>
1481

15-
<divclassName='flex justify-center items-center space-x-4 py-10'>
16-
<buttonclassName='bg-blue-500 rounded px-4 py-2 text-white'>Cancel</button>
17-
<buttonclassName='bg-blue-500 rounded px-4 py-2 text-white'>Submit</button>
18-
</div>
82+
<divclassName='flex justify-between items-center space-x-4 py-6'>
83+
84+
{
85+
currentStep>page.Step1 ?<ChevronLeft
86+
onClick={handlePrev}
87+
className='cursor-pointer bg-blue-500 p-0.5 rounded-full text-white text-lg'/>
88+
:
89+
<ChevronLeft
90+
onClick={handlePrev}
91+
disabled
92+
className="bg-slate-300 p-0.5 rounded-full text-white text-lg"/>
93+
}
94+
95+
<divclassName='space-x-4'>
96+
<button
97+
onClick={onCancel}
98+
type='button'
99+
className='bg-blue-500 rounded px-4 py-2 text-white font-semibold text-lg active:bg-blue-600'>
100+
Cancel
101+
</button>
102+
103+
<button
104+
onClick={handleNext}
105+
type='button'
106+
className='bg-blue-500 rounded px-4 py-2 text-white font-semibold text-lg active:bg-blue-600'>
107+
{submitButtonText}
108+
</button>
109+
</div>
110+
</div>
111+
</form>
19112
</section>
20113
)
21114
};
22115

23-
exportdefaultMultiStepForm
116+
exportdefaultMultiStepForm;

‎src/components/multi-step-form/PersonalInfo.jsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
importTitlefrom"../Title"
2+
importWrapperfrom"../Wrapper"
3+
4+
constStep1=({ inputs, onChange=()=>{}, stepKey})=>{
5+
const{ name, email}=inputs||{};
6+
7+
// HANDLE CHANGE FUNCTION
8+
functionhandleChange(inputKey){
9+
return(event)=>{
10+
onChange({value:event.target.value, stepKey, inputKey});
11+
}
12+
};
13+
14+
return(
15+
<section>
16+
<Title>
17+
Personal Information
18+
</Title>
19+
20+
<Wrapper>
21+
<divclassName="space-y-2">
22+
<divclassName="space-y-2">
23+
<labelclassName="text-xl text-slate-600"htmlFor="name">Name</label><br/>
24+
<input
25+
type="text"
26+
id="name"
27+
value={name}
28+
onChange={handleChange("name")}
29+
placeholder="Write your name"
30+
className="border rounded px-2 h-10 w-full"/>
31+
</div>
32+
33+
<divclassName="space-y-2">
34+
<labelclassName="text-xl text-slate-600"htmlFor="email">Email</label><br/>
35+
<input
36+
type="email"
37+
id="email"
38+
value={email}
39+
onChange={handleChange("email")}
40+
placeholder="example@gmail.com"
41+
className="border rounded px-2 h-10 w-full"/>
42+
</div>
43+
</div>
44+
</Wrapper>
45+
</section>
46+
)
47+
}
48+
49+
exportdefaultStep1
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
importTitlefrom'../Title'
2+
importWrapperfrom'../Wrapper'
3+
4+
constStep2=({ inputs, onChange=()=>{}, stepKey})=>{
5+
const{ phone, city}=inputs||{};
6+
7+
functionhandleChange(inputKey){
8+
return(event)=>{
9+
onChange({value:event.target.value, stepKey, inputKey});
10+
}
11+
};
12+
13+
return(
14+
<section>
15+
<Title>
16+
Contact Information
17+
</Title>
18+
19+
<Wrapper>
20+
<divclassName="space-y-2">
21+
<divclassName="space-y-2">
22+
<labelclassName="text-xl text-slate-600"htmlFor="tel">Phone</label><br/>
23+
<input
24+
id="tel"
25+
type="tel"
26+
value={phone}
27+
onChange={handleChange("phone")}
28+
placeholder="Write your phone number"
29+
className="border rounded px-2 h-10 w-full"/>
30+
</div>
31+
32+
33+
<divclassName="space-y-2">
34+
<labelclassName="text-xl text-slate-600"htmlFor="text">City</label><br/>
35+
<input
36+
id="text"
37+
type="text"
38+
value={city}
39+
placeholder="City name"
40+
onChange={handleChange("city")}
41+
className="border rounded px-2 h-10 w-full"/>
42+
</div>
43+
</div>
44+
</Wrapper>
45+
</section>
46+
)
47+
}
48+
49+
exportdefaultStep2

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp