63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import { useSelector } from 'react-redux';
|
||
|
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
||
|
|
import './index.less';
|
||
|
|
import ActionDock from './components/ActionDock';
|
||
|
|
import Title from './components/Title';
|
||
|
|
import { getLayout, hidePanels } from '../../models/map/selectors';
|
||
|
|
import PanelIndex from './PanelIndex';
|
||
|
|
import MapCtrl from './MapCtrl';
|
||
|
|
import InfoDlg from './InfoDlg';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import Calculating from './components/Calculating';
|
||
|
|
//import SocketCtrl from './components/SocketCtrl';
|
||
|
|
|
||
|
|
|
||
|
|
export default function Demo1() {
|
||
|
|
const layout = useSelector(getLayout);
|
||
|
|
const hp = useSelector(hidePanels);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="demo1">
|
||
|
|
<div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
|
||
|
|
<MapCtrl />
|
||
|
|
</div>
|
||
|
|
<div className="bottom">
|
||
|
|
<ActionDock />
|
||
|
|
</div>
|
||
|
|
{
|
||
|
|
!hp && (
|
||
|
|
<TransitionGroup className={clsx('left', 'dp-panel-container', layout.leftFullHeight && 'fullheight')}>
|
||
|
|
{
|
||
|
|
layout.left.map(({ key, ...params }) => (
|
||
|
|
<CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
|
||
|
|
<PanelIndex name={key} {...params} />
|
||
|
|
</CSSTransition>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
|
||
|
|
</TransitionGroup>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
<div className="center">
|
||
|
|
<Title />
|
||
|
|
</div>
|
||
|
|
{
|
||
|
|
!hp && (
|
||
|
|
<TransitionGroup className={clsx('right', 'dp-panel-container', layout.rightFullHeight && 'fullheight')}>
|
||
|
|
{
|
||
|
|
layout.right.map(({ key, ...params }) => (
|
||
|
|
<CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
|
||
|
|
<PanelIndex name={key} {...params} />
|
||
|
|
</CSSTransition>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</TransitionGroup>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
<InfoDlg />
|
||
|
|
<Calculating />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|