antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Lint all files

Browse source
This commit is contained in:
jeffvli 2023-07-01 19:10:05 -07:00
parent 22af76b4d6
commit 30e52ebb54
334 changed files with 76519 additions and 75932 deletions
Download patch file Download diff file Expand all files Collapse all files

186
src/renderer/layouts/default-layout/main-content.tsx
View file

@ -12,113 +12,117 @@ import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
import { Spinner } from '/@/renderer/components';
const SideDrawerQueue = lazy(() =>
import('/@/renderer/layouts/default-layout/side-drawer-queue').then((module) => ({
default: module.SideDrawerQueue,
})),
import('/@/renderer/layouts/default-layout/side-drawer-queue').then((module) => ({
default: module.SideDrawerQueue,
})),
);
const MINIMUM_SIDEBAR_WIDTH = 260;
const MainContentContainer = styled.div<{
leftSidebarWidth: string;
rightExpanded?: boolean;
rightSidebarWidth?: string;
shell?: boolean;
sidebarCollapsed?: boolean;
leftSidebarWidth: string;
rightExpanded?: boolean;
rightSidebarWidth?: string;
shell?: boolean;
sidebarCollapsed?: boolean;
}>`
position: relative;
display: ${(props) => (props.shell ? 'flex' : 'grid')};
grid-area: main-content;
grid-template-areas: 'sidebar . right-sidebar';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => (props.sidebarCollapsed ? '80px' : props.leftSidebarWidth)} 1fr ${(
props,
) => props.rightExpanded && props.rightSidebarWidth};
position: relative;
display: ${(props) => (props.shell ? 'flex' : 'grid')};
grid-area: main-content;
grid-template-areas: 'sidebar . right-sidebar';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => (props.sidebarCollapsed ? '80px' : props.leftSidebarWidth)} 1fr ${(
props,
) => props.rightExpanded && props.rightSidebarWidth};
gap: 0;
background: var(--main-bg);
gap: 0;
background: var(--main-bg);
`;
export const MainContent = ({ shell }: { shell?: boolean }) => {
const location = useLocation();
const { collapsed, leftWidth, rightWidth, rightExpanded } = useSidebarStore();
const { setSideBar } = useAppStoreActions();
const { sideQueueType, showQueueDrawerButton } = useGeneralSettings();
const [isResizing, setIsResizing] = useState(false);
const [isResizingRight, setIsResizingRight] = useState(false);
const location = useLocation();
const { collapsed, leftWidth, rightWidth, rightExpanded } = useSidebarStore();
const { setSideBar } = useAppStoreActions();
const { sideQueueType, showQueueDrawerButton } = useGeneralSettings();
const [isResizing, setIsResizing] = useState(false);
const [isResizingRight, setIsResizingRight] = useState(false);
const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
const rightSidebarRef = useRef<HTMLDivElement | null>(null);
const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
const rightSidebarRef = useRef<HTMLDivElement | null>(null);
const startResizing = useCallback((position: 'left' | 'right') => {
if (position === 'left') return setIsResizing(true);
return setIsResizingRight(true);
}, []);
const startResizing = useCallback((position: 'left' | 'right') => {
if (position === 'left') return setIsResizing(true);
return setIsResizingRight(true);
}, []);
const stopResizing = useCallback(() => {
setIsResizing(false);
setIsResizingRight(false);
}, []);
const stopResizing = useCallback(() => {
setIsResizing(false);
setIsResizingRight(false);
}, []);
const resize = useCallback(
(mouseMoveEvent: any) => {
if (isResizing) {
const width = mouseMoveEvent.clientX;
const constrainedWidth = `${constrainSidebarWidth(width)}px`;
const resize = useCallback(
(mouseMoveEvent: any) => {
if (isResizing) {
const width = mouseMoveEvent.clientX;
const constrainedWidth = `${constrainSidebarWidth(width)}px`;
if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
setSideBar({ collapsed: true });
} else {
setSideBar({ collapsed: false, leftWidth: constrainedWidth });
}
} else if (isResizingRight) {
const start = Number(rightWidth.split('px')[0]);
const { left } = rightSidebarRef!.current!.getBoundingClientRect();
const width = `${constrainRightSidebarWidth(start + left - mouseMoveEvent.clientX)}px`;
setSideBar({ rightWidth: width });
}
},
[isResizing, isResizingRight, setSideBar, rightWidth],
);
if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
setSideBar({ collapsed: true });
} else {
setSideBar({ collapsed: false, leftWidth: constrainedWidth });
}
} else if (isResizingRight) {
const start = Number(rightWidth.split('px')[0]);
const { left } = rightSidebarRef!.current!.getBoundingClientRect();
const width = `${constrainRightSidebarWidth(
start + left - mouseMoveEvent.clientX,
)}px`;
setSideBar({ rightWidth: width });
}
},
[isResizing, isResizingRight, setSideBar, rightWidth],
);
const throttledResize = useMemo(() => throttle(resize, 50), [resize]);
const throttledResize = useMemo(() => throttle(resize, 50), [resize]);
useEffect(() => {
window.addEventListener('mousemove', throttledResize);
window.addEventListener('mouseup', stopResizing);
return () => {
window.removeEventListener('mousemove', throttledResize);
window.removeEventListener('mouseup', stopResizing);
};
}, [throttledResize, stopResizing]);
useEffect(() => {
window.addEventListener('mousemove', throttledResize);
window.addEventListener('mouseup', stopResizing);
return () => {
window.removeEventListener('mousemove', throttledResize);
window.removeEventListener('mouseup', stopResizing);
};
}, [throttledResize, stopResizing]);
return (
<MainContentContainer
id="main-content"
leftSidebarWidth={leftWidth}
rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
rightSidebarWidth={rightWidth}
shell={shell}
sidebarCollapsed={collapsed}
>
{!shell && (
<>
<Suspense fallback={<></>}>{showQueueDrawerButton && <SideDrawerQueue />}</Suspense>
<FullScreenOverlay />
<LeftSidebar
isResizing={isResizing}
startResizing={startResizing}
/>
<RightSidebar
ref={rightSidebarRef}
isResizing={isResizingRight}
startResizing={startResizing}
/>
</>
)}
<Suspense fallback={<Spinner container />}>
<Outlet />
</Suspense>
</MainContentContainer>
);
return (
<MainContentContainer
id="main-content"
leftSidebarWidth={leftWidth}
rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
rightSidebarWidth={rightWidth}
shell={shell}
sidebarCollapsed={collapsed}
>
{!shell && (
<>
<Suspense fallback={<></>}>
{showQueueDrawerButton && <SideDrawerQueue />}
</Suspense>
<FullScreenOverlay />
<LeftSidebar
isResizing={isResizing}
startResizing={startResizing}
/>
<RightSidebar
ref={rightSidebarRef}
isResizing={isResizingRight}
startResizing={startResizing}
/>
</>
)}
<Suspense fallback={<Spinner container />}>
<Outlet />
</Suspense>
</MainContentContainer>
);
};