1- import { useMotionValue , motion , Reorder } from 'framer-motion'
1+ import { useEffect , useState } from 'react'
2+ import { motion , Reorder } from 'framer-motion'
23
34import { cn } from '@/lib/utils'
45import { FormFieldType } from '@/types'
56import { defaultFieldConfig , fieldTypes } from '@/constants'
6- import { Input } from '@/components/ui/input'
77import { Button } from '@/components/ui/button'
88import {
99 DropdownMenu ,
@@ -15,7 +15,7 @@ import {
1515} from '@/components/ui/dropdown-menu'
1616import If from '@/components/ui/if'
1717
18- import { LuGrip , LuColumns , LuPencil , LuTrash2 } from 'react-icons/lu'
18+ import { LuColumns , LuPencil , LuTrash2 } from 'react-icons/lu'
1919
2020export type FormFieldOrGroup = FormFieldType | FormFieldType [ ]
2121
@@ -43,6 +43,9 @@ export const FieldItem = ({
4343 subIndex === ( formFields [ index ] as FormFieldType [ ] ) . length - 1
4444
4545 const path = subIndex !== undefined ? [ index , subIndex ] : [ index ]
46+ const [ columnCount , setColumnCount ] = useState ( ( ) =>
47+ Array . isArray ( formFields [ index ] ) ? formFields [ index ] . length : 1 ,
48+ )
4649
4750 const addNewColumn = ( variant : string , index : number ) => {
4851 const newFieldName = `name_${ Math . random ( ) . toString ( ) . slice ( - 10 ) }
@@ -103,38 +106,43 @@ export const FieldItem = ({
103106 }
104107
105108 const removeColumn = ( ) => {
106- // Extracting the exact row and subIndex from path
107109 const rowIndex = path [ 0 ]
108110 const subIndex = path . length > 1 ? path [ 1 ] : null
109111
110112 setFormFields ( ( prevFields ) => {
111- const newFields = [ ...prevFields ] // Create a shallow copy of formFields
113+ const newFields = [ ...prevFields ]
112114
113115 if ( Array . isArray ( newFields [ rowIndex ] ) ) {
114- // If it's an array (a row with multiple fields)
115- const row = [ ...( newFields [ rowIndex ] as FormFieldType [ ] ) ] // Shallow copy of the row
116+ const row = [ ...( newFields [ rowIndex ] as FormFieldType [ ] ) ]
116117
117118 if ( subIndex !== null && subIndex >= 0 && subIndex < row . length ) {
118- // Only remove the specific field at subIndex
119119 row . splice ( subIndex , 1 )
120120
121- // Update the row after removal
122121 if ( row . length > 0 ) {
123- newFields [ rowIndex ] = row // Replace the row with the updated row
122+ newFields [ rowIndex ] = row
123+ // Update column count immediately after removal
124+ setColumnCount ( row . length )
124125 } else {
125- // If the row becomes empty, remove the entire row
126126 newFields . splice ( rowIndex , 1 )
127+ setColumnCount ( 1 )
127128 }
128129 }
129130 } else {
130- // If it's a single field, simply remove it
131131 newFields . splice ( rowIndex , 1 )
132+ setColumnCount ( 1 )
132133 }
133134
134- return newFields // Update formFields state
135+ return newFields
135136 } )
136137 }
137138
139+ useEffect ( ( ) => {
140+ const newColumnCount = Array . isArray ( formFields [ index ] )
141+ ? formFields [ index ] . length
142+ : 1
143+ setColumnCount ( newColumnCount )
144+ } , [ formFields , index ] )
145+
138146 return (
139147 < Reorder . Item
140148 value = { field }
@@ -148,60 +156,33 @@ export const FieldItem = ({
148156 exit = { { opacity : 0 , y : 20 , transition : { duration : 0.3 } } }
149157 whileDrag = { { backgroundColor : '#9ca3af' , borderRadius : '12px' } }
150158 className = { cn ( 'w-full' , {
151- 'col-span-12' :
152- Array . isArray ( formFields [ index ] ) && formFields [ index ] . length === 1 ,
153- 'col-span-6' :
154- Array . isArray ( formFields [ index ] ) && formFields [ index ] . length === 2 ,
155- 'col-span-4' :
156- Array . isArray ( formFields [ index ] ) && formFields [ index ] . length === 3 ,
159+ 'col-span-12' : columnCount === 1 ,
160+ 'col-span-6' : columnCount === 2 ,
161+ 'col-span-4' : columnCount === 3 ,
157162 } ) }
163+ key = { `${ field . name } ${ columnCount } }
158164 >
159- < motion . div layout = "position" className = "flex items-center gap-3" >
165+ { /* Rest of your component JSX */ }
166+ < motion . div
167+ layout = "position"
168+ className = "flex items-center gap-3"
169+ key = { `${ field . name } ${ columnCount } }
170+ >
160171 < div className = "flex items-center gap-1 border rounded-xl px-3 py-1.5 w-full" >
161172 < If
162173 condition = { Array . isArray ( formFields [ index ] ) }
163174 render = { ( ) => < LuColumns className = "cursor-grab w-4 h-4" /> }
164175 />
165176 < div className = "flex items-center w-full" >
166- < div className = "w-full text-sm" >
167- { field . variant }
168- { /* <Input
169- value={field.label}
170- onChange={(e) =>
171- updateFormField(path, { label: e.target.value })
172- }
173- placeholder="Enter label"
174- /> */ }
175- </ div >
177+ < div className = "w-full text-sm" > { field . variant } </ div >
176178 < Button
177179 variant = "ghost"
178180 size = "icon"
179181 onClick = { ( ) => openEditDialog ( field ) }
180182 >
181183 < LuPencil />
182184 </ Button >
183- < Button
184- variant = "ghost"
185- size = "icon"
186- onClick = { removeColumn }
187- // onClick={() => {
188- // setFormFields((prevFields) => {
189- // const newFields = [...prevFields]
190- // if (Array.isArray(newFields[index])) {
191- // // If it's an array, remove the specific subfield
192- // ;(newFields[index] as FormFieldType[]).splice(subIndex!, 1)
193- // // If the array becomes empty, remove it entirely
194- // if ((newFields[index] as FormFieldType[]).length === 0) {
195- // newFields.splice(index, 1)
196- // }
197- // } else {
198- // // If it's a single field, remove it
199- // newFields.splice(index, 1)
200- // }
201- // return newFields
202- // })
203- // }}
204- >
185+ < Button variant = "ghost" size = "icon" onClick = { removeColumn } >
205186 < LuTrash2 />
206187 </ Button >
207188 </ div >
@@ -225,7 +206,10 @@ export const FieldItem = ({
225206 { fieldTypes . map ( ( fieldType ) => (
226207 < DropdownMenuItem
227208 key = { fieldType . name }
228- onClick = { ( ) => addNewColumn ( fieldType . name , index ) }
209+ onClick = { ( ) => {
210+ addNewColumn ( fieldType . name , index )
211+ setColumnCount ( ( prev ) => prev + 1 )
212+ } }
229213 >
230214 { fieldType . name }
231215 </ DropdownMenuItem >
0 commit comments