84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import {
|
|
DEFAULT_SIDEBAR_WIDTH,
|
|
MAX_SIDEBAR_WIDTH,
|
|
MIN_SIDEBAR_WIDTH,
|
|
NARROW_SIDEBAR_WIDTH,
|
|
} from "@/app/constant";
|
|
import { useAppConfig } from "../store/config";
|
|
import { useEffect, useRef } from "react";
|
|
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
|
|
|
export default function useDragSideBar() {
|
|
const limit = (x: number) => Math.min(MAX_SIDEBAR_WIDTH, x);
|
|
|
|
const config = useAppConfig();
|
|
const startX = useRef(0);
|
|
const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
|
|
const lastUpdateTime = useRef(Date.now());
|
|
|
|
const toggleSideBar = () => {
|
|
config.update((config) => {
|
|
if (config.sidebarWidth < MIN_SIDEBAR_WIDTH) {
|
|
config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
|
|
} else {
|
|
config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
|
|
}
|
|
});
|
|
};
|
|
|
|
const onDragStart = (e: MouseEvent) => {
|
|
// Remembers the initial width each time the mouse is pressed
|
|
startX.current = e.clientX;
|
|
startDragWidth.current = config.sidebarWidth;
|
|
const dragStartTime = Date.now();
|
|
|
|
const handleDragMove = (e: MouseEvent) => {
|
|
if (Date.now() < lastUpdateTime.current + 20) {
|
|
return;
|
|
}
|
|
lastUpdateTime.current = Date.now();
|
|
const d = e.clientX - startX.current;
|
|
const nextWidth = limit(startDragWidth.current + d);
|
|
config.update((config) => {
|
|
if (nextWidth < MIN_SIDEBAR_WIDTH) {
|
|
config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
|
|
} else {
|
|
config.sidebarWidth = nextWidth;
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
// In useRef the data is non-responsive, so `config.sidebarWidth` can't get the dynamic sidebarWidth
|
|
window.removeEventListener("pointermove", handleDragMove);
|
|
window.removeEventListener("pointerup", handleDragEnd);
|
|
|
|
// if user click the drag icon, should toggle the sidebar
|
|
const shouldFireClick = Date.now() - dragStartTime < 300;
|
|
if (shouldFireClick) {
|
|
toggleSideBar();
|
|
}
|
|
};
|
|
|
|
window.addEventListener("pointermove", handleDragMove);
|
|
window.addEventListener("pointerup", handleDragEnd);
|
|
};
|
|
|
|
const isMobileScreen = useMobileScreen();
|
|
const shouldNarrow =
|
|
!isMobileScreen && config.sidebarWidth < MIN_SIDEBAR_WIDTH;
|
|
|
|
useEffect(() => {
|
|
const barWidth = shouldNarrow
|
|
? NARROW_SIDEBAR_WIDTH
|
|
: limit(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
|
|
const sideBarWidth = isMobileScreen ? "100vw" : `${barWidth}px`;
|
|
document.documentElement.style.setProperty("--sidebar-width", sideBarWidth);
|
|
}, [config.sidebarWidth, isMobileScreen, shouldNarrow]);
|
|
|
|
return {
|
|
onDragStart,
|
|
shouldNarrow,
|
|
};
|
|
}
|