ObjectTree: keyed elements, full width;

This commit is contained in:
2025-09-25 16:36:06 +09:00
parent fc045abe24
commit 26132fc1ee

View File

@ -51,9 +51,9 @@ const ObjectTree = ({
if (selectedDistrict) { if (selectedDistrict) {
return ( return (
<div> <div style={{ width: '100%' }}>
<TypeTree map_id={map_id} label='Существующие' value={'existing'} count={existingCount} objectList={existingObjectsList} planning={0} /> <TypeTree key={'existing'} map_id={map_id} label='Существующие' value={'existing'} count={existingCount} objectList={existingObjectsList} planning={0} />
<TypeTree map_id={map_id} label='Планируемые' value={'planning'} count={planningCount} objectList={planningObjectsList} planning={1} /> <TypeTree key={'planning'} map_id={map_id} label='Планируемые' value={'planning'} count={planningCount} objectList={planningObjectsList} planning={1} />
</div> </div>
) )
} else { } else {
@ -84,12 +84,12 @@ const TypeTree = ({
return ( return (
<Tree size="small" aria-label="Small Size Tree"> <Tree size="small" aria-label="Small Size Tree">
<TreeItem itemType="branch"> <TreeItem key={`branch-${label}`} itemType="branch">
<TreeItemLayout>{`${label} ${count ? `(${count})` : ''}`}</TreeItemLayout> <TreeItemLayout>{`${label} ${count ? `(${count})` : ''}`}</TreeItemLayout>
<Tree> <Tree>
{Array.isArray(objectList) && objectList.map(list => ( {Array.isArray(objectList) && objectList.map(list => (
<ObjectList map_id={map_id} key={list.id} label={list.name} id={list.id} planning={planning} count={list.count} /> <ObjectList map_id={map_id} key={`${label}-${list.id}`} label={list.name} id={list.id} planning={planning} count={list.count} />
))} ))}
</Tree> </Tree>
</TreeItem> </TreeItem>
@ -124,8 +124,8 @@ const ObjectList = ({
) )
const navLinks = useMemo(() => ( const navLinks = useMemo(() => (
Array.isArray(data) ? data.map((type) => ( Array.isArray(data) ? data.map((type, index) => (
<TreeItem itemType='leaf' onClick={() => setCurrentObjectId(map_id, type.object_id)}> <TreeItem key={`${label}-${id}-${index}`} itemType='leaf' onClick={() => setCurrentObjectId(map_id, type.object_id)}>
<TreeItemLayout>{type.caption ? type.caption : 'Без названия'}</TreeItemLayout> <TreeItemLayout>{type.caption ? type.caption : 'Без названия'}</TreeItemLayout>
</TreeItem> </TreeItem>
)) : null )) : null
@ -140,14 +140,6 @@ const ObjectList = ({
</Tree> </Tree>
</TreeItem> </TreeItem>
) )
// return (
// <NavLink onClick={() => { setSelectedObjectType(map_id, id) }} rightSection={<IconChevronDown size={14} />} p={0} label={`${label} ${count ? `(${count})` : ''}`}>
// {Array.isArray(data) && data.map((type) => (
// <NavLink key={type.object_id} label={type.caption ? type.caption : 'Без названия'} p={0} onClick={() => setCurrentObjectId(map_id, type.object_id)} />
// ))}
// </NavLink>
// )
} }
export default ObjectTree export default ObjectTree