refactor(core): use element atom (#4026)

packages/component/src/components/workspace/index.tsx

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
+import { forwardRef } from 'react';
 
 import { AppSidebarFallback } from '../app-sidebar';
 import { appStyle, mainContainerStyle, toolStyle } from './index.css';
@@ -36,23 +37,27 @@ export interface MainContainerProps extends HTMLAttributes<HTMLDivElement> {
   padding?: boolean;
 }
 
-export const MainContainer = ({
-  className,
-  padding,
-  children,
-  ...props
-}: PropsWithChildren<MainContainerProps>): ReactElement => {
+export const MainContainer = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<MainContainerProps>
+>(function MainContainer(
+  { className, padding, children, ...props },
+  ref
+): ReactElement {
   return (
     <div
       {...props}
-      className={clsx(mainContainerStyle, 'main-container', className)}
+      className={clsx(mainContainerStyle, className)}
       data-is-macos={environment.isDesktop && environment.isMacOs}
       data-show-padding={!!padding}
+      ref={ref}
     >
       {children}
     </div>
   );
-};
+});
+
+MainContainer.displayName = 'MainContainer';
 
 export const ToolContainer = (props: PropsWithChildren): ReactElement => {
   return <div className={toolStyle}>{props.children}</div>;

packages/hooks/package.json

@@ -6,7 +6,8 @@
   },
   "private": true,
   "dependencies": {
-    "foxact": "^0.2.20"
+    "foxact": "^0.2.20",
+    "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
     "@affine/env": "workspace:*",
@@ -16,7 +17,8 @@
     "@blocksuite/editor": "0.0.0-20230828163942-e5356e86-nightly",
     "@blocksuite/global": "0.0.0-20230828163942-e5356e86-nightly",
     "@blocksuite/lit": "0.0.0-20230828163942-e5356e86-nightly",
-    "@blocksuite/store": "0.0.0-20230828163942-e5356e86-nightly"
+    "@blocksuite/store": "0.0.0-20230828163942-e5356e86-nightly",
+    "@types/lodash.debounce": "^4.0.7"
   },
   "peerDependencies": {
     "@affine/y-provider": "workspace:*",

packages/hooks/src/use-is-tiny-screen.ts

@@ -0,0 +1,86 @@
+import 'foxact/use-debounced-state';
+
+import debounce from 'lodash.debounce';
+import { type RefObject, useEffect, useState } from 'react';
+
+export function useIsTinyScreen({
+  mainContainer,
+  leftStatic,
+  leftSlot,
+  centerDom,
+  rightStatic,
+  rightSlot,
+}: {
+  mainContainer: HTMLElement | null;
+  leftStatic: RefObject<HTMLElement>;
+  leftSlot: RefObject<HTMLElement>[];
+  centerDom: RefObject<HTMLElement>;
+  rightStatic: RefObject<HTMLElement>;
+  rightSlot: RefObject<HTMLElement>[];
+}) {
+  const [isTinyScreen, setIsTinyScreen] = useState(false);
+
+  useEffect(() => {
+    if (!mainContainer) {
+      return;
+    }
+    const handleResize = debounce(() => {
+      if (!centerDom.current) {
+        return;
+      }
+      const leftStaticWidth = leftStatic.current?.clientWidth || 0;
+      const leftSlotWidth = leftSlot.reduce((accWidth, dom) => {
+        return accWidth + (dom.current?.clientWidth || 0);
+      }, 0);
+
+      const rightStaticWidth = rightStatic.current?.clientWidth || 0;
+
+      const rightSlotWidth = rightSlot.reduce((accWidth, dom) => {
+        return accWidth + (dom.current?.clientWidth || 0);
+      }, 0);
+
+      if (!leftSlotWidth && !rightSlotWidth) {
+        if (isTinyScreen) {
+          setIsTinyScreen(false);
+        }
+        return;
+      }
+
+      const containerRect = mainContainer.getBoundingClientRect();
+      const centerRect = centerDom.current.getBoundingClientRect();
+
+      if (
+        leftStaticWidth + leftSlotWidth + containerRect.left >=
+          centerRect.left ||
+        containerRect.right - centerRect.right <=
+          rightSlotWidth + rightStaticWidth
+      ) {
+        setIsTinyScreen(true);
+      } else {
+        setIsTinyScreen(false);
+      }
+    }, 100);
+
+    handleResize();
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+
+    resizeObserver.observe(mainContainer);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    centerDom,
+    isTinyScreen,
+    leftSlot,
+    leftStatic,
+    mainContainer,
+    rightSlot,
+    rightStatic,
+  ]);
+
+  return isTinyScreen;
+}