Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): refactor left sidebar to use di (#8385)

Browse Source
This commit is contained in:
JimmFly
2024-09-27 09:32:24 +00:00
parent 0f9fac420f
commit a3f8e6c852
54 changed files with 316 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
packages/frontend/component/src/components/resize-panel/resize-panel.tsx
View File

@@ -1,4 +1,3 @@
import { assertExists } from '@blocksuite/affine/global/utils';
import { assignInlineVars } from '@vanilla-extract/dynamic';
import clsx from 'clsx';
import {
@@ -60,48 +59,53 @@ const ResizeHandle = ({
...rest
}: ResizeHandleProps) => {
const ref = useRef<HTMLDivElement>(null);
const onResizeStart = useCallback(() => {
let resized = false;
const panelContainer = ref.current?.parentElement;
assertExists(
panelContainer,
'parent element not found for resize indicator'
);
const { left: anchorLeft, right: anchorRight } =
panelContainer.getBoundingClientRect();
function onMouseMove(e: MouseEvent) {
e.preventDefault();
const onResizeStart = useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
let resized = false;
const panelContainer = ref.current?.parentElement;
if (!panelContainer) return;
const newWidth = Math.min(
maxWidth,
Math.max(
resizeHandlePos === 'right'
? e.clientX - anchorLeft
: anchorRight - e.clientX,
minWidth
)
);
onWidthChange(newWidth);
onResizing(true);
resized = true;
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener(
'mouseup',
() => {
// if not resized, toggle sidebar
if (!resized) {
onOpen(false);
}
onResizing(false);
document.removeEventListener('mousemove', onMouseMove);
},
{ once: true }
);
}, [maxWidth, resizeHandlePos, minWidth, onWidthChange, onResizing, onOpen]);
// add cursor style to body
document.body.style.cursor = 'col-resize';
const { left: anchorLeft, right: anchorRight } =
panelContainer.getBoundingClientRect();
function onMouseMove(e: MouseEvent) {
e.preventDefault();
if (!panelContainer) return;
const newWidth = Math.min(
maxWidth,
Math.max(
resizeHandlePos === 'right'
? e.clientX - anchorLeft
: anchorRight - e.clientX,
minWidth
)
);
onWidthChange(newWidth);
onResizing(true);
resized = true;
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener(
'mouseup',
() => {
// if not resized, toggle sidebar
if (!resized) {
onOpen(false);
}
onResizing(false);
document.removeEventListener('mousemove', onMouseMove);
document.body.style.cursor = '';
},
{ once: true }
);
},
[maxWidth, resizeHandlePos, minWidth, onWidthChange, onResizing, onOpen]
);
return (
<div