Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit d57d2acb by jaymehta
Options

Merge branch 'master' of https://git.logicloop.io/jaymehta/zango-frontend

2 parents b350ec31 f85792b0
Expand all
Inline Side-by-side
Showing 5 changed files with 146 additions and 65 deletions
pages/test.js
// AccordionForm.js
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Formik, FieldArray, Field, ErrorMessage } from 'formik'; import { Formik, Form, Field, FieldArray } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
items: Yup.array().of(
Yup.object().shape({
title: Yup.string().required('Title is required'),
content: Yup.string().required('Content is required'),
})
),
});
const initialValues = {
items: [{ title: '', content: '' }],
};
const AccordionForm = () => { const AccordionForm = () => {
const [expandedIndex, setExpandedIndex] = useState(null); const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded
const handleToggleAccordion = (index) => { const toggleAccordion = (index) => {
setExpandedIndex((prevIndex) => (prevIndex === index ? null : index)); setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
}; };
return ( return (
<div> <div>
<h1>Accordion Form</h1>
<Formik <Formik
initialValues={initialValues} initialValues={{
validationSchema={validationSchema} items: [{ title: '', content: '' }]
}}
onSubmit={(values) => { onSubmit={(values) => {
console.log(values); console.log(values);
}} }}
> >
{({ values }) => ( {({ values }) => (
<form> <Form>
<FieldArray name="items"> <FieldArray name="items">
{({ push, remove }) => ( {({ push, remove }) => (
<> <div>
{values.items.map((_, index) => ( {values.items.map((_, index) => (
<div key={index}> <div key={index}>
<div <AccordionItem
style={{ index={index}
border: '1px solid #ccc', expanded={expandedIndex === index}
padding: '10px', toggleAccordion={() => toggleAccordion(index)}
marginBottom: '10px', remove={() => remove(index)}
}}
> >
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
onClick={() => handleToggleAccordion(index)}
>
<h3>Accordion {index + 1}</h3>
<button type="button" onClick={() => remove(index)}>
Remove
</button>
</div>
{expandedIndex === index && (
<div>
<div>
<label htmlFor={`items.${index}.title`}>Title</label>
<Field name={`items.${index}.title`} />
<ErrorMessage name={`items.${index}.title`} component="div" />
</div>
<div> <div>
<label htmlFor={`items.${index}.content`}>Content</label> <Field name={`items.${index}.title`} placeholder="Title" />
<Field name={`items.${index}.content`} /> <Field name={`items.${index}.content`} placeholder="Content" />
<ErrorMessage name={`items.${index}.content`} component="div" />
</div>
</div>
)}
</div> </div>
</AccordionItem>
</div> </div>
))} ))}
<button type="button" onClick={() => push({ title: '', content: '' })}> <button
Add Accordion type="button"
onClick={() => {
push({ title: '', content: '' });
setExpandedIndex(values.items.length);
}}
>
Add Item
</button> </button>
</> </div>
)} )}
</FieldArray> </FieldArray>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </Form>
)} )}
</Formik> </Formik>
</div> </div>
); );
}; };
const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
return (
<div>
<button type="button" onClick={toggleAccordion}>
{expanded ? '-' : '+'}
</button>
<button type="button" onClick={remove}>Remove</button>
<div style={{ display: expanded ? 'block' : 'none' }}>{children}</div>
</div>
);
};
export default AccordionForm; export default AccordionForm;
public/images/vendor/minus.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 11H5V13H19V11Z" fill="black"/>
</svg>
public/images/vendor/plus.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" fill="black"/>
</svg>
styles/globals.css
...@@ -574,7 +574,7 @@ p { ...@@ -574,7 +574,7 @@ p {
line-height: normal; line-height: normal;
} }
span.form-error { span.form-error, .form-error {
color: red; color: red;
font-size: 0.8rem; font-size: 0.8rem;
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
...@@ -647,10 +647,11 @@ span.form-error { ...@@ -647,10 +647,11 @@ span.form-error {
font-size: 15px; font-size: 15px;
line-height: normal; line-height: normal;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%;
} }
.form-container input, .form-container input,
.form-container select { .form-container select, .form-container textarea {
width: 100%; width: 100%;
border-radius: 10px !important; border-radius: 10px !important;
border: 0.814px solid #000; border: 0.814px solid #000;
...@@ -665,7 +666,7 @@ span.form-error { ...@@ -665,7 +666,7 @@ span.form-error {
} }
.form-container input:focus, .form-container input:focus,
.form-container select:focus { .form-container select:focus, .form-container textarea {
box-shadow: none; box-shadow: none;
outline: unset; outline: unset;
} }
...@@ -675,6 +676,11 @@ span.form-error { ...@@ -675,6 +676,11 @@ span.form-error {
background-color: transparent; background-color: transparent;
} }
.form-container textarea {
resize: none;
height: auto;
}
.contact-number { .contact-number {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -1133,11 +1139,12 @@ span.form-error { ...@@ -1133,11 +1139,12 @@ span.form-error {
/*----- vendor business details -------*/ /*----- vendor business details -------*/
.content-div { .content-div {
padding: 2rem 3rem 1rem; padding: 2rem 2rem 1rem;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 4px 20px 0px #73737340; box-shadow: 0px 4px 20px 0px #73737340;
position: relative; position: relative;
min-height: 600px;
} }
.content-div h2 { .content-div h2 {
...@@ -1376,7 +1383,7 @@ span.form-error { ...@@ -1376,7 +1383,7 @@ span.form-error {
.btnAdd { .btnAdd {
background-color: #0070BD !important; background-color: #0070BD !important;
/* border: 1px solid #0070BD; */ /* border: 1px solid #0070BD; */
padding: 1rem 2rem !important; padding: 0.75rem 2rem !important;
border-radius: 10px !important; border-radius: 10px !important;
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 16px !important; font-size: 16px !important;
...@@ -1389,15 +1396,104 @@ span.form-error { ...@@ -1389,15 +1396,104 @@ span.form-error {
justify-content: center; justify-content: center;
margin: 1rem auto; margin: 1rem auto;
} }
.btnAdd:disabled { .btnAdd:disabled {
background-color: #A4AFB7 !important; background-color: #A4AFB7 !important;
color: #FFFFFF; color: #FFFFFF;
border: none; border: none;
} }
.btnAdd:hover, .btnAdd:focus, .btnAdd:active {
.btnAdd:hover,
.btnAdd:focus,
.btnAdd:active {
border: 1px solid #0070BD; border: 1px solid #0070BD;
} }
.activityDetails .accordionItem {
padding: 1rem;
border-bottom: 1px solid #ECECEC;
}
.activityDetails .accordionItem:last-child {
border-bottom: none;
}
/* The radioContainer */
.radioContainer {
display: block;
position: relative;
cursor: pointer;
padding-left: 25px;
font-family: "Sofia Pro Regular";
font-size: 15px;
line-height: 15px;
letter-spacing: 0em;
text-align: left;
color: #000;
margin-top: 5px;
}
/* Hide the browser's default radio button */
.radioContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.form-container .radioContainer input {
height: 0;
width: 0;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-55%);
height: 20px;
width: 20px;
background-color: #FFF;
border-radius: 50%;
border: 1px solid #75777B;
}
/* On mouse-over, add a grey background color */
.radioContainer:hover input~.checkmark {
background-color: #FFF;
}
/* When the radio button is checked, add a blue background */
.radioContainer input:checked~.checkmark {
color: #0070BD;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: #0070BD;
transform: translate(-50%, -50%);
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!