Refactor ObjectSelect component to improve state management and UI structure; add useRef for tracking previous values and enhance rendering with additional div wrapper for ObjectProperty.
This commit is contained in:
parent
e2a96949b3
commit
09bf3b81c7
@ -1,4 +1,11 @@
|
|||||||
import { useEffect, useState, useContext, useCallback, useMemo } from 'react'
|
import {
|
||||||
|
useEffect,
|
||||||
|
useState,
|
||||||
|
useContext,
|
||||||
|
useCallback,
|
||||||
|
useMemo,
|
||||||
|
useRef
|
||||||
|
} from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { TreeSelect, Space, Button, Input } from 'antd'
|
import { TreeSelect, Space, Button, Input } from 'antd'
|
||||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||||
@ -72,14 +79,16 @@ const ObjectSelect = ({
|
|||||||
})
|
})
|
||||||
return {
|
return {
|
||||||
title: (
|
title: (
|
||||||
<ObjectProperty
|
<div style={{ paddingTop: '1px' }}>
|
||||||
key={object._id}
|
<ObjectProperty
|
||||||
type='object'
|
key={object._id}
|
||||||
value={object}
|
type='object'
|
||||||
objectType={type}
|
value={object}
|
||||||
objectData={object}
|
objectType={type}
|
||||||
isEditing={false}
|
objectData={object}
|
||||||
/>
|
isEditing={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
),
|
),
|
||||||
value: object._id,
|
value: object._id,
|
||||||
key: object._id,
|
key: object._id,
|
||||||
@ -199,7 +208,7 @@ const ObjectSelect = ({
|
|||||||
return prev
|
return prev
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [objectPropertiesTree, properties, type, buildTreeData])
|
}, [objectPropertiesTree, properties, buildTreeData])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (value && typeof value === 'object' && value !== null && !initialized) {
|
if (value && typeof value === 'object' && value !== null && !initialized) {
|
||||||
@ -236,6 +245,24 @@ const ObjectSelect = ({
|
|||||||
token
|
token
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const prevValuesRef = useRef({ type, masterFilter })
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const prevValues = prevValuesRef.current
|
||||||
|
|
||||||
|
// Deep comparison for objects, simple comparison for primitives
|
||||||
|
const hasChanged =
|
||||||
|
prevValues.type !== type ||
|
||||||
|
JSON.stringify(prevValues.masterFilter) !== JSON.stringify(masterFilter)
|
||||||
|
|
||||||
|
if (hasChanged) {
|
||||||
|
setObjectPropertiesTree({})
|
||||||
|
setTreeData([])
|
||||||
|
setInitialized(false)
|
||||||
|
prevValuesRef.current = { type, masterFilter }
|
||||||
|
}
|
||||||
|
}, [type, masterFilter])
|
||||||
|
|
||||||
// --- Error UI ---
|
// --- Error UI ---
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user