mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
fix drag to collapse sidebar
This commit is contained in:
@@ -35,6 +35,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
|
|||||||
const mainContentRef = useRef<HTMLDivElement | null>(null);
|
const mainContentRef = useRef<HTMLDivElement | null>(null);
|
||||||
const initialRightWidthRef = useRef<string>(rightWidth);
|
const initialRightWidthRef = useRef<string>(rightWidth);
|
||||||
const initialMouseXRef = useRef<number>(0);
|
const initialMouseXRef = useRef<number>(0);
|
||||||
|
const wasCollapsedDuringDragRef = useRef<boolean>(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mainContentRef.current && !isResizing && !isResizingRight) {
|
if (mainContentRef.current && !isResizing && !isResizingRight) {
|
||||||
@@ -48,6 +49,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
|
|||||||
(position: 'left' | 'right', mouseEvent?: MouseEvent) => {
|
(position: 'left' | 'right', mouseEvent?: MouseEvent) => {
|
||||||
if (position === 'left') {
|
if (position === 'left') {
|
||||||
setIsResizing(true);
|
setIsResizing(true);
|
||||||
|
wasCollapsedDuringDragRef.current = false;
|
||||||
} else {
|
} else {
|
||||||
setIsResizingRight(true);
|
setIsResizingRight(true);
|
||||||
if (mainContentRef.current && rightSidebarRef.current && mouseEvent) {
|
if (mainContentRef.current && rightSidebarRef.current && mouseEvent) {
|
||||||
@@ -69,11 +71,14 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
|
|||||||
|
|
||||||
const stopResizing = useCallback(() => {
|
const stopResizing = useCallback(() => {
|
||||||
if (isResizing && mainContentRef.current) {
|
if (isResizing && mainContentRef.current) {
|
||||||
const finalWidth = mainContentRef.current.style.getPropertyValue('--sidebar-width');
|
if (!wasCollapsedDuringDragRef.current) {
|
||||||
if (finalWidth) {
|
const finalWidth = mainContentRef.current.style.getPropertyValue('--sidebar-width');
|
||||||
setSideBar({ collapsed: false, leftWidth: finalWidth });
|
if (finalWidth) {
|
||||||
|
setSideBar({ collapsed: false, leftWidth: finalWidth });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
setIsResizing(false);
|
setIsResizing(false);
|
||||||
|
wasCollapsedDuringDragRef.current = false;
|
||||||
} else if (isResizingRight && mainContentRef.current) {
|
} else if (isResizingRight && mainContentRef.current) {
|
||||||
const finalWidth =
|
const finalWidth =
|
||||||
mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
|
mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
|
||||||
@@ -90,11 +95,19 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
|
|||||||
|
|
||||||
if (isResizing) {
|
if (isResizing) {
|
||||||
const width = mouseMoveEvent.clientX;
|
const width = mouseMoveEvent.clientX;
|
||||||
const constrainedWidth = `${constrainSidebarWidth(width)}px`;
|
const constrainedWidthValue = constrainSidebarWidth(width);
|
||||||
|
const constrainedWidth = `${constrainedWidthValue}px`;
|
||||||
|
|
||||||
if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
|
if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
|
||||||
setSideBar({ collapsed: true });
|
if (!wasCollapsedDuringDragRef.current) {
|
||||||
|
wasCollapsedDuringDragRef.current = true;
|
||||||
|
setSideBar({ collapsed: true });
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
|
if (wasCollapsedDuringDragRef.current) {
|
||||||
|
wasCollapsedDuringDragRef.current = false;
|
||||||
|
setSideBar({ collapsed: false });
|
||||||
|
}
|
||||||
mainContentRef.current.style.setProperty('--sidebar-width', constrainedWidth);
|
mainContentRef.current.style.setProperty('--sidebar-width', constrainedWidth);
|
||||||
}
|
}
|
||||||
} else if (isResizingRight) {
|
} else if (isResizingRight) {
|
||||||
|
|||||||
Reference in New Issue
Block a user