Enhance ObjectForm component with custom merge logic for array handling
- Introduced a custom mergeWith function to handle array replacements during state updates. - Updated initial form data setting to include computed values while maintaining editing state. - Refactored update event handler to utilize the new merge logic for improved data management.
This commit is contained in:
parent
4bd9acdc11
commit
aa6fe3c839
@ -14,10 +14,17 @@ import { useMessageContext } from '../context/MessageContext'
|
|||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import DeleteObjectModal from './DeleteObjectModal'
|
import DeleteObjectModal from './DeleteObjectModal'
|
||||||
import merge from 'lodash/merge'
|
import merge from 'lodash/merge'
|
||||||
|
import mergeWith from 'lodash/mergeWith'
|
||||||
import set from 'lodash/set'
|
import set from 'lodash/set'
|
||||||
import { getModelByName } from '../../../database/ObjectModels'
|
import { getModelByName } from '../../../database/ObjectModels'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
|
||||||
|
const arrayReplaceCustomizer = (objValue, srcValue) => {
|
||||||
|
if (Array.isArray(srcValue)) {
|
||||||
|
return srcValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const buildObjectFromEntries = (entries = []) => {
|
const buildObjectFromEntries = (entries = []) => {
|
||||||
return entries.reduce((acc, entry) => {
|
return entries.reduce((acc, entry) => {
|
||||||
const { namePath, value } = entry || {}
|
const { namePath, value } = entry || {}
|
||||||
@ -285,14 +292,14 @@ const ObjectForm = forwardRef(
|
|||||||
const lockEvent = await fetchObjectLock(id, type)
|
const lockEvent = await fetchObjectLock(id, type)
|
||||||
setLock(lockEvent)
|
setLock(lockEvent)
|
||||||
onStateChangeRef.current({ lock: lockEvent })
|
onStateChangeRef.current({ lock: lockEvent })
|
||||||
setObjectData({ ...data, _isEditing: isEditingRef.current })
|
|
||||||
serverObjectData.current = data
|
serverObjectData.current = data
|
||||||
|
|
||||||
// Calculate and set computed values on initial load
|
// Calculate and set computed values on initial load
|
||||||
const computedEntries = calculateComputedValues(data, model)
|
const computedEntries = calculateComputedValues(data, model)
|
||||||
const computedValuesObject = buildObjectFromEntries(computedEntries)
|
const computedValuesObject = buildObjectFromEntries(computedEntries)
|
||||||
const initialFormData = merge({}, data, computedValuesObject)
|
const initialFormData = merge({}, data, computedValuesObject)
|
||||||
|
setObjectData({ ...initialFormData, _isEditing: isEditingRef.current })
|
||||||
form.setFieldsValue(initialFormData)
|
form.setFieldsValue(initialFormData)
|
||||||
setFetchLoading(false)
|
setFetchLoading(false)
|
||||||
onStateChangeRef.current({ loading: false })
|
onStateChangeRef.current({ loading: false })
|
||||||
@ -318,7 +325,9 @@ const ObjectForm = forwardRef(
|
|||||||
|
|
||||||
// Update event handler
|
// Update event handler
|
||||||
const updateObjectEventHandler = useCallback((value) => {
|
const updateObjectEventHandler = useCallback((value) => {
|
||||||
setObjectData((prev) => merge({}, prev, value))
|
setObjectData((prev) =>
|
||||||
|
mergeWith({}, prev, value, arrayReplaceCustomizer)
|
||||||
|
)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// Update event handler
|
// Update event handler
|
||||||
@ -540,15 +549,22 @@ const ObjectForm = forwardRef(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const computedValuesObject = buildObjectFromEntries(computedEntries)
|
const computedValuesObject = buildObjectFromEntries(computedEntries)
|
||||||
const mergedFormValues = merge(
|
const mergedFormValues = mergeWith(
|
||||||
{},
|
{},
|
||||||
allFormValues,
|
allFormValues,
|
||||||
computedValuesObject
|
arrayReplaceCustomizer
|
||||||
)
|
)
|
||||||
|
merge(mergedFormValues, computedValuesObject)
|
||||||
|
|
||||||
mergedFormValues._isEditing = isEditingRef.current
|
mergedFormValues._isEditing = isEditingRef.current
|
||||||
|
|
||||||
setObjectData((prev) => {
|
setObjectData((prev) => {
|
||||||
return merge({}, prev, mergedFormValues)
|
return mergeWith(
|
||||||
|
{},
|
||||||
|
prev,
|
||||||
|
mergedFormValues,
|
||||||
|
arrayReplaceCustomizer
|
||||||
|
)
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user