refactor customToolbar
This commit is contained in:
parent
e73dec4a49
commit
5e350269e1
@ -1,24 +1,12 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { useCesium } from "resium";
|
||||
import { Button, Drawer, List, Select } from "antd";
|
||||
import { Menu } from "antd";
|
||||
import { HomeOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
|
||||
import { useMouse } from "ahooks";
|
||||
import styles from "./index.module.less";
|
||||
|
||||
function CustomToolbar() {
|
||||
const { viewer } = useCesium();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const location = useLocation();
|
||||
|
||||
const { toolbar } = useSelector((state) => state.data);
|
||||
const [value, setValue] = useState("sideview");
|
||||
|
||||
const [mouseX, setMouseX] = useState(0);
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
|
||||
const mapList = [
|
||||
{
|
||||
label: "首页",
|
||||
@ -27,104 +15,63 @@ function CustomToolbar() {
|
||||
onClick: () => {
|
||||
navigate("/home", { replace: true });
|
||||
},
|
||||
key: "/",
|
||||
},
|
||||
{
|
||||
label: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
|
||||
title: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
|
||||
value: "/map/1",
|
||||
icon: <MenuUnfoldOutlined />,
|
||||
onClick: () => {
|
||||
navigate("/map/1", { replace: true });
|
||||
},
|
||||
key: "/map/1",
|
||||
},
|
||||
{
|
||||
label: "两极协同—南极涛动有效调节青藏高原降水和加热",
|
||||
title: "两极协同—南极涛动有效调节青藏高原降水和加热",
|
||||
value: "/map/2",
|
||||
icon: <MenuUnfoldOutlined />,
|
||||
onClick: () => {
|
||||
navigate("/map/2", { replace: true });
|
||||
},
|
||||
key: "/map/2",
|
||||
},
|
||||
{
|
||||
label: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
|
||||
title: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
|
||||
value: "/map/3",
|
||||
icon: <MenuUnfoldOutlined />,
|
||||
onClick: () => {
|
||||
navigate("/map/3", { replace: true });
|
||||
},
|
||||
key: "/map/3",
|
||||
},
|
||||
{
|
||||
label: "三极联动影响青藏高原上层温度",
|
||||
title: "三极联动影响青藏高原上层温度",
|
||||
value: "/map/4",
|
||||
icon: <MenuUnfoldOutlined />,
|
||||
onClick: () => {
|
||||
navigate("/map/4", { replace: true });
|
||||
},
|
||||
key: "/map/4",
|
||||
},
|
||||
{
|
||||
label: "三级联动影响东亚夏季风",
|
||||
title: "三级联动影响东亚夏季风",
|
||||
value: "/map/5",
|
||||
icon: <MenuUnfoldOutlined />,
|
||||
onClick: () => {
|
||||
navigate("/map/5", { replace: true });
|
||||
},
|
||||
key: "/map/5",
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (event) => {
|
||||
setMouseX(event.clientX);
|
||||
};
|
||||
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const isAtRightEdge = mouseX >= window.innerWidth - 20;
|
||||
const iaClose = mouseX + 320 <= window.innerWidth;
|
||||
|
||||
useEffect(() => {
|
||||
if (isAtRightEdge && !drawerOpen) {
|
||||
setDrawerOpen(true);
|
||||
} else if (iaClose && drawerOpen) {
|
||||
setDrawerOpen(false);
|
||||
}
|
||||
}, [isAtRightEdge, iaClose]);
|
||||
|
||||
const onDrawerClose = useCallback(() => {
|
||||
setDrawerOpen(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="toolbar" onMouseLeave={onDrawerClose}>
|
||||
<Drawer
|
||||
placement="right"
|
||||
// open={true}
|
||||
open={drawerOpen}
|
||||
width={350}
|
||||
mask={false}
|
||||
closable={false}
|
||||
className={styles.drawerToolbar}
|
||||
>
|
||||
<List
|
||||
dataSource={mapList}
|
||||
renderItem={(item, index) => {
|
||||
return (
|
||||
<List.Item
|
||||
key={index}
|
||||
onClick={item?.onClick}
|
||||
className={
|
||||
location.pathname === item.value ? "active-item" : ""
|
||||
}
|
||||
>
|
||||
<List.Item.Meta avatar={item.icon} title={item.label} />
|
||||
</List.Item>
|
||||
);
|
||||
}}
|
||||
></List>
|
||||
</Drawer>
|
||||
<div className={styles.drawerToolbar}>
|
||||
<Menu selectedKeys={[location.pathname]} items={mapList} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,54 +1,51 @@
|
||||
.drawerToolbar :global {
|
||||
transition: all 0.6s ease;
|
||||
.ant-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -340px;
|
||||
height: 100%;
|
||||
width: 350px;
|
||||
z-index: 1;
|
||||
background-color: #1f4856 !important;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.ant-drawer-content-wrapper {
|
||||
.ant-drawer-content {
|
||||
background-color: #1f4856;
|
||||
|
||||
.ant-drawer-body {
|
||||
padding: 0;
|
||||
|
||||
.ant-list {
|
||||
.ant-list-item {
|
||||
.ant-list-item-meta {
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.ant-list-item-meta-avatar {
|
||||
font-size: 24px;
|
||||
color: aliceblue;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.ant-list-item-meta-content {
|
||||
.ant-list-item-meta-title {
|
||||
.ant-menu-item {
|
||||
font-size: 1.2rem;
|
||||
color: aliceblue;
|
||||
color: #94bebf;
|
||||
|
||||
.ant-menu-item-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item-active {
|
||||
background-color: #94bebf !important;
|
||||
|
||||
.ant-menu-item-icon {
|
||||
color: #1f4856;
|
||||
}
|
||||
|
||||
.ant-menu-title-content {
|
||||
color: #1f4856;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item-selected {
|
||||
background-color: cadetblue !important;
|
||||
|
||||
.ant-menu-item-icon {
|
||||
color: #1f4856;
|
||||
}
|
||||
|
||||
.ant-menu-title-content {
|
||||
color: #1f4856;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: #94bebf;
|
||||
|
||||
.ant-list-item-meta-avatar {
|
||||
color: #1f4856;
|
||||
}
|
||||
|
||||
.ant-list-item-meta-content {
|
||||
.ant-list-item-meta-title {
|
||||
color: #1f4856;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active-item {
|
||||
background-color: cadetblue !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user