ObjectTree: keyed elements, full width;
This commit is contained in:
@ -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
|
Reference in New Issue
Block a user