Переписаны крошки WellTreeSelector

src/components/WellTreeSelector.tsx

@@ -26,9 +26,36 @@ export type TreeNodeData = {
     children?: TreeNodeData[]
 }
 
+const getLabel = (wellsTree: any[], value?: string): string | undefined => {
+    if (!value) return value
+    const type = value.replaceAll('/', ' ').trim().split(' ')[0]
+    let deposit: any, cluster: any, well: any
+    switch (type) {
+        case 'cluster':
+            deposit = wellsTree.find((deposit) => (
+                cluster = deposit.children?.find((cluster: any) => cluster.value === value)
+            ))
+            if (deposit && cluster)
+                return `${deposit.title} / ${cluster.title}`
+            break
+        case 'well':
+            deposit = wellsTree.find((deposit) => (
+                cluster = deposit.children?.find((cluster: any) => (
+                    well = cluster.children?.find((well: any) => well.value === value)
+                ))
+            ))
+            if (deposit && cluster && well)
+                return `${deposit.title} / ${cluster.title} / ${well.title}`
+            break
+        default: break
+    }
+    return value
+}
+
 export const WellTreeSelector = () => {
-    const [wellsTree, setWellsTree] = useState<any>([]) // TODO: Исправить тип (необходимо разобраться с типом значения  rc-select)
+    const [wellsTree, setWellsTree] = useState<any[]>([]) // TODO: Исправить тип (необходимо разобраться с типом значения  rc-select)
     const [showLoader, setShowLoader] = useState<boolean>(false)
+    const [value, setValue] = useState<string>()
     const history = useHistory()
     const routeMatch = useRouteMatch('/:route/:id')
 
@@ -39,26 +66,14 @@ export const WellTreeSelector = () => {
                 const wellsTree: TreeNodeData[] = deposits.map(deposit =>({
                     title: deposit.caption,
                     key: `/deposit/${deposit.id}`,
-                    value: {
-                        value: `/deposit/${deposit.id}`,
-                        label: deposit.caption,
-                    },
                     icon: <DepositIcon width={24} height={24}/>,
                     children: deposit.clusters?.map(cluster => ({
                         title: cluster.caption,
                         key: `/cluster/${cluster.id}`,
-                        value: {
-                            value: `/cluster/${cluster.id}`,
-                            label: `${deposit.caption} / ${cluster.caption}`,
-                        },
                         icon: <ClusterIcon width={24} height={24}/>,
                         children: cluster.wells?.map(well => ({
                             title: well.caption,
                             key: `/well/${well.id}`,
-                            value: {
-                                value: `/well/${well.id}`,
-                                label: `${deposit.caption} / ${cluster.caption} / ${well.caption}`
-                            },
                             icon: <WellIcon
                                 width={24}
                                 height={24}
@@ -69,12 +84,18 @@ export const WellTreeSelector = () => {
                     })),
                 }))
                 setWellsTree(wellsTree)
+                setValue(getLabel(wellsTree, routeMatch?.url))
             },
             setShowLoader,
             `Не удалось загрузить список скважин`
         )
     }, [])
 
+    const onChange = (value: string): void => {
+        if (wellsTree)
+            setValue(getLabel(wellsTree, value))
+    }
+
     const onSelect = (value: string): void => {
         if (value) history.push(value)
     }
@@ -82,7 +103,6 @@ export const WellTreeSelector = () => {
     return (
         <LoaderPortal show={showLoader}>
             <TreeSelect
-                labelInValue
                 treeIcon
                 className={'header-tree-select'}
                 bordered={false}
@@ -91,7 +111,8 @@ export const WellTreeSelector = () => {
                 treeData={wellsTree}
                 treeDefaultExpandAll
                 onSelect={onSelect}
-                value = {routeMatch?.url}
+                onChange={onChange}
+                value={value}
             />
         </LoaderPortal>
     )