Untitled
plain_text
2 months ago
5.2 kB
1
Indexable
Never
"use client" import React from 'react'; import { Formik, Form, Field, FieldArray } from 'formik'; const initialValues = { width: 200, height: 200, margin: 0, image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Sign-check-icon.png/768px-Sign-check-icon.png", dotsOptions: { type: "square", color: "#000000", gradient: { type: "linear", rotation: 0, colorStops: [ { offset: 0, color: "#000000" }, { offset: 1, color: "#000000" }, ], }, } }; const Test = () => { const handleToggleGradient = (values, setFieldValue) => { const hasGradient = !!values.dotsOptions.gradient; if (hasGradient) { // Remove gradient setFieldValue("dotsOptions.gradient", null); } else { // Add gradient setFieldValue("dotsOptions.gradient", { type: "linear", rotation: 0, colorStops: [ { offset: 0, color: "#000000" }, { offset: 1, color: "#000000" }, ], }); } }; const handleSubmit = (values) => { // Your form submission logic here console.log(values); }; return ( <div> <h1>Form with Formik</h1> <Formik initialValues={initialValues} onSubmit={handleSubmit}> {({ values, setFieldValue }) => ( <Form className='border border-green-200 p-5 rounded-lg'> <div> <label> Width: <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="number" name="width" /> </label> </div> <div> <label> Height: <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="number" name="height" /> </label> </div> <div> <label> Margin: <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="number" name="margin" /> </label> </div> <div> <label> Image URL: <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="text" name="image" /> </label> </div> <div> <label> Dots Type: <Field className="px-2 py-1 border border-gray-300 rounded-lg" as="select" name="dotsOptions.type"> <option value="square">Square</option> <option value="circle">Circle</option> </Field> </label> </div> <div> <label> Dots Color: <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="color" name="dotsOptions.color" /> </label> </div> <div> <label> Gradient: <input type="checkbox" checked={!!values.dotsOptions.gradient} onChange={() => handleToggleGradient(values, setFieldValue)} /> </label> </div> {values.dotsOptions.gradient && ( <div> <h2>Gradient Configuration</h2> <div> <label> Gradient Type: <Field className="px-2 py-1 border border-gray-300 rounded-lg" as="select" name="dotsOptions.gradient.type"> <option value="linear">Linear</option> <option value="radial">Radial</option> </Field> </label> </div> <div> <h3>Color Stops</h3> <Field className="px-2 py-1 border border-gray-300 rounded-lg" Array name="dotsOptions.gradient.colorStops"> {arrayHelpers => ( <div> {values.dotsOptions.gradient.colorStops.map((colorStop, index) => ( <div key={index}> <label> Offset: <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="number" name={`dotsOptions.gradient.colorStops.${index}.offset`} /> </label> <label> Color: <Field className="px-2 py-1 border border-gray-300 rounded-lg" type="color" name={`dotsOptions.gradient.colorStops.${index}.color`} /> </label> </div> ))} </div> )} </Field> </div> </div> )} <button className='btn btn-primary' type="submit">Submit</button> </Form> )} </Formik> </div> ); }; export default Test;