From b955f42b88767400d757ea0ff71f370f055cd78a Mon Sep 17 00:00:00 2001 From: Tom Butcher Date: Sun, 7 Dec 2025 02:41:55 +0000 Subject: [PATCH] Refactor ObjectForm component to improve computed value handling - Introduced a working copy of currentData to facilitate sequential updates of computed values. - Updated property processing logic to utilize workingData for accurate calculations. - Removed unnecessary parameters in processProperty function for cleaner code. - Enhanced dependency array in useEffect to include calculateComputedValues and model for better reactivity. --- .../Dashboard/common/ObjectForm.jsx | 48 ++++++++++++------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/src/components/Dashboard/common/ObjectForm.jsx b/src/components/Dashboard/common/ObjectForm.jsx index 12eea14..28c09d9 100644 --- a/src/components/Dashboard/common/ObjectForm.jsx +++ b/src/components/Dashboard/common/ObjectForm.jsx @@ -134,6 +134,10 @@ const ObjectForm = forwardRef( return [] } + // Clone currentData to allow sequential updates + // We use this working copy to calculate subsequent dependent values + const workingData = merge({}, currentData) + const normalizedPath = (name, parentPath = []) => { if (Array.isArray(name)) { return [...parentPath, ...name] @@ -159,11 +163,17 @@ const ObjectForm = forwardRef( const computedEntries = [] - const processProperty = (property, scopeData, parentPath = []) => { + const processProperty = (property, parentPath = []) => { if (!property?.name) return const propertyPath = normalizedPath(property.name, parentPath) + // Determine the scope data for calculation (parent object) + const scopeData = + parentPath.length === 0 + ? workingData + : getValueAtPath(workingData, parentPath) + if (property.value && typeof property.value === 'function') { try { const computedValue = property.value(scopeData || {}) @@ -172,6 +182,8 @@ const ObjectForm = forwardRef( namePath: propertyPath, value: computedValue }) + // Update workingData so subsequent properties can use this value + set(workingData, propertyPath, computedValue) } } catch (error) { console.warn( @@ -186,29 +198,25 @@ const ObjectForm = forwardRef( property.properties.length > 0 ) { if (property.type === 'objectChildren') { - const childValues = getValueAtPath(currentData, propertyPath) + // Use workingData to get the latest state of children + const childValues = getValueAtPath(workingData, propertyPath) if (Array.isArray(childValues)) { - childValues.forEach((childData = {}, index) => { + childValues.forEach((_, index) => { property.properties.forEach((childProperty) => { - processProperty(childProperty, childData || {}, [ - ...propertyPath, - index - ]) + processProperty(childProperty, [...propertyPath, index]) }) }) } } else { - const nestedScope = - getValueAtPath(currentData, propertyPath) || {} property.properties.forEach((childProperty) => { - processProperty(childProperty, nestedScope || {}, propertyPath) + processProperty(childProperty, propertyPath) }) } } } modelDefinition.properties.forEach((property) => { - processProperty(property, currentData) + processProperty(property, []) }) return computedEntries @@ -294,7 +302,17 @@ const ObjectForm = forwardRef( fetchObject ) } - }, [fetchObject, fetchObjectLock, id, type, form, messageApi, showError]) + }, [ + fetchObject, + fetchObjectLock, + id, + type, + form, + messageApi, + showError, + calculateComputedValues, + model + ]) // Update event handler const updateObjectEventHandler = useCallback((value) => { @@ -354,7 +372,6 @@ const ObjectForm = forwardRef( const startEditing = () => { setIsEditing(true) isEditingRef.current = true - console.log('IS EDITING TRUE') setObjectData((prev) => ({ ...prev, _isEditing: isEditingRef.current })) onStateChangeRef.current({ isEditing: true, @@ -379,7 +396,6 @@ const ObjectForm = forwardRef( setIsEditing(false) isEditingRef.current = false form.setFieldsValue(resetFormData) - console.log('IS EDITING FALSE') setObjectData({ ...resetFormData, _isEditing: isEditingRef.current }) } @@ -486,7 +502,7 @@ const ObjectForm = forwardRef( // Calculate computed values based on current form data const currentFormData = { ...(serverObjectData.current || {}), - ...allFormValues + ...changedValues } const computedEntries = calculateComputedValues( currentFormData, @@ -519,7 +535,7 @@ const ObjectForm = forwardRef( mergedFormValues._isEditing = isEditingRef.current setObjectData((prev) => { - return { ...prev, ...mergedFormValues } + return merge({}, prev, mergedFormValues) }) }} >