Improve table state logic

dev
Platon Yasev 3 years ago
parent 55d99043f0
commit 131ba940f2

@ -164,7 +164,7 @@ export const MapComponent = () => {
<LayersControl /> <LayersControl />
</Map> </Map>
</div> </div>
<div className="w-full border-solid border-border border-0 border-t-[1px]"> <div className="w-full border-solid border-border border-0 border-t-[1px] z-20">
<TableWrapper fullWidth={isSidebarCollapsed} /> <TableWrapper fullWidth={isSidebarCollapsed} />
</div> </div>
</div> </div>

@ -20,8 +20,6 @@ export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
const { reset: resetSelection } = usePointSelection(); const { reset: resetSelection } = usePointSelection();
const { isVisible, toggleVisibility } = useLayersVisibility(); const { isVisible, toggleVisibility } = useLayersVisibility();
console.log(mode);
return ( return (
<div <div
className={twMerge( className={twMerge(

@ -2,12 +2,27 @@ import { ExportButton } from "./ExportButton";
import { Button, Tooltip } from "antd"; import { Button, Tooltip } from "antd";
import { useTable } from "../../stores/useTable"; import { useTable } from "../../stores/useTable";
import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons"; import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
const ToggleFullScreenButton = () => { const ToggleFullScreenButton = () => {
const { const {
tableState: { fullScreen }, tableState: { fullScreen },
toggleFullScreen, toggleFullScreen,
} = useTable(); } = useTable();
const [hover, setHover] = useState(false);
useEffect(() => {
const timer = setTimeout(() => setHover(false), 1500);
return () => clearTimeout(timer);
}, [hover]);
const handleMouseEnter = () => {
setHover(true);
};
const handleMouseLeave = () => {
setHover(false);
};
const handleClick = (e) => { const handleClick = (e) => {
e.stopPropagation(); e.stopPropagation();
@ -15,8 +30,16 @@ const ToggleFullScreenButton = () => {
}; };
return ( return (
<Tooltip title="Раскрыть на полный экран" placement={"topRight"}> <Tooltip
<Button onClick={handleClick}> title={fullScreen ? "Свернуть" : "Раскрыть на полный экран"}
placement={"topRight"}
open={hover}
>
<Button
onClick={handleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />} {fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</Button> </Button>
</Tooltip> </Tooltip>

@ -44,11 +44,12 @@ export const Table = React.memo(
<Collapse <Collapse
bordered={false} bordered={false}
onChange={toggleOpened} onChange={toggleOpened}
defaultActiveKey={tableState.isOpened ? "opened" : null} activeKey={tableState.isOpened ? "opened" : null}
> >
<Collapse.Panel <Collapse.Panel
key={"opened"} key={"opened"}
header={header ? header : <HeaderWrapper />} header={header ? header : <HeaderWrapper />}
collapsible={tableState.fullScreen ? "disabled" : undefined}
> >
<AntdTable <AntdTable
size="small" size="small"

Loading…
Cancel
Save