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:
Tom Butcher 2025-09-05 23:20:50 +01:00
parent e2a96949b3
commit 09bf3b81c7

View File

@ -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 { TreeSelect, Space, Button, Input } from 'antd'
import ReloadIcon from '../../Icons/ReloadIcon'
@ -72,14 +79,16 @@ const ObjectSelect = ({
})
return {
title: (
<ObjectProperty
key={object._id}
type='object'
value={object}
objectType={type}
objectData={object}
isEditing={false}
/>
<div style={{ paddingTop: '1px' }}>
<ObjectProperty
key={object._id}
type='object'
value={object}
objectType={type}
objectData={object}
isEditing={false}
/>
</div>
),
value: object._id,
key: object._id,
@ -199,7 +208,7 @@ const ObjectSelect = ({
return prev
})
}
}, [objectPropertiesTree, properties, type, buildTreeData])
}, [objectPropertiesTree, properties, buildTreeData])
useEffect(() => {
if (value && typeof value === 'object' && value !== null && !initialized) {
@ -236,6 +245,24 @@ const ObjectSelect = ({
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 ---
if (error) {
return (