diff --git a/src/components/WellTreeSelector.tsx b/src/components/WellTreeSelector.tsx index 00011e5..051dd1c 100644 --- a/src/components/WellTreeSelector.tsx +++ b/src/components/WellTreeSelector.tsx @@ -1,32 +1,33 @@ import { TreeSelect } from 'antd' -import { useState, useEffect } from 'react' +import { DefaultValueType } from 'rc-tree-select/lib/interface' +import { useState, useEffect, ReactNode } from 'react' import { useHistory, useRouteMatch } from 'react-router-dom' import LoaderPortal from './LoaderPortal' import { DepositService } from '../services/api' import { invokeWebApiWrapperAsync } from './factory' -import '../styles/wellTreeSelect.css' -import { WellIcon, WellIconState } from './icons/WellIcon' +import { WellIcon, WellIconState } from './icons' import { ReactComponent as DepositIcon } from '../images/DepositIcon.svg' import { ReactComponent as ClusterIcon } from '../images/ClusterIcon.svg' import { DepositDto } from '../services/api' import { RawDate } from '../utils/DateTimeUtils' +import '../styles/wellTreeSelect.css' export const getWellState = (idState?: number): WellIconState => idState === 1 ? 'active' : 'unknown' export const checkIsWellOnline = (lastTelemetryDate?: RawDate): boolean => { - if (!lastTelemetryDate) return false + if (!lastTelemetryDate || isNaN(+new Date(lastTelemetryDate))) return false return Date.now() - +new Date(lastTelemetryDate) < 600_000 } -interface TreeNodeData { +export type TreeNodeData = { title?: string | null key?: string - value?: string - icon?: React.ReactNode + value?: DefaultValueType + icon?: ReactNode children?: TreeNodeData[] } export const WellTreeSelector = () => { - const [wellsTree, setWellsTree] = useState([]) + const [wellsTree, setWellsTree] = useState([]) // TODO: Исправить тип (необходимо разобраться с типом значения rc-select) const [showLoader, setShowLoader] = useState(false) const history = useHistory() const routeMatch = useRouteMatch('/:route/:id') @@ -38,17 +39,26 @@ export const WellTreeSelector = () => { const wellsTree: TreeNodeData[] = deposits.map(deposit =>({ title: deposit.caption, key: `/deposit/${deposit.id}`, - value: `/deposit/${deposit.id}`, + value: { + value: `/deposit/${deposit.id}`, + label: deposit.caption, + }, icon: , children: deposit.clusters?.map(cluster => ({ title: cluster.caption, key: `/cluster/${cluster.id}`, - value: `/cluster/${cluster.id}`, + value: { + value: `/cluster/${cluster.id}`, + label: `${deposit.caption} / ${cluster.caption}`, + }, icon: , children: cluster.wells?.map(well => ({ title: well.caption, key: `/well/${well.id}`, - value: `/well/${well.id}`, + value: { + value: `/well/${well.id}`, + label: `${deposit.caption} / ${cluster.caption} / ${well.caption}` + }, icon: { return (