@netless/fastboard-react 0.2.0 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "description": "A UI kit built on top of @netless/fastboard.",
   "main": "dist/index.js",
   "files": [
@@ -10,8 +10,8 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
-    "framer-motion": "^6.2.1",
-    "i18next": "^21.6.7",
+    "framer-motion": "^6.2.3",
+    "i18next": "^21.6.9",
     "rc-slider": "^9.7.5"
   },
   "peerDependencies": {
@@ -22,15 +22,14 @@
     "white-web-sdk": ">=2.16.0"
   },
   "devDependencies": {
-    "@netless/app-slide": "^0.0.56",
-    "@netless/fastboard-core": "0.2.0",
-    "@netless/window-manager": "^0.4.0-canary.24",
+    "@netless/fastboard-core": "0.2.4",
+    "@netless/window-manager": "^0.4.0-canary.31",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "sass": "^1.49.0",
     "tippy.js": "^6.3.7",
     "tsup": "^5.11.11",
-    "white-web-sdk": "^2.16.1"
+    "white-web-sdk": "^2.16.5"
   },
   "publishConfig": {
     "main": "dist/index.js",

package/src/components/Toolbar/Content.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Icon } from "../../icons";
 
 import { clamp } from "../../internal";
 import { CleanButton, ClickerButton, EraserButton, SelectorButton } from "./components/ApplianceButtons";
@@ -9,12 +10,20 @@ import { ShapesButton } from "./components/ShapesButton";
 import { TextButton } from "./components/TextButton";
 import { DownButton, UpButton } from "./components/UpDownButtons";
 import { ItemHeight, ItemsCount, MaxHeight, MinHeight } from "./const";
-import { name } from "./Toolbar";
+import { name, ToolbarContext } from "./Toolbar";
 
-export const Content = React.memo(() => {
+import collapsePNG from "./components/assets/collapsed.png";
+
+export interface ContextProps {
+  onCollapse: () => void;
+}
+
+export function Content({ onCollapse }: ContextProps) {
+  const { theme, icons, writable } = useContext(ToolbarContext);
   const ref = useRef<HTMLDivElement>(null);
   const [scrollTop, setScrollTop] = useState(0);
   const [parentHeight, setParentHeight] = useState(0);
+  const disabled = !writable;
 
   const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
   const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
@@ -69,6 +78,12 @@ export const Content = React.memo(() => {
         <AppsButton />
       </div>
       {needScroll && <DownButton scrollTo={scrollTo} disabled={disableScrollDown} />}
+      <div className={clsx("fastboard-toolbar-mask", theme)} onClick={onCollapse}>
+        <Icon
+          fallback={<img draggable={false} className={clsx(`${name}-mask-btn`, theme)} src={collapsePNG} />}
+          src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
+        />
+      </div>
     </>
   );
-});
+}

package/src/components/Toolbar/Toolbar.scss

@@ -98,8 +98,8 @@ $name: "fastboard-toolbar";
 
     svg,
     img {
-      width: 1em;
-      height: 1em;
+      width: 100%;
+      height: 100%;
     }
 
     &:disabled {
@@ -152,6 +152,17 @@ $name: "fastboard-toolbar";
     }
   }
 
+  &-section + &-mask {
+    opacity: 0;
+    transition: 0.5s opacity 0.4s;
+  }
+
+  &-section:hover + &-mask,
+  &-mask:hover {
+    opacity: 1;
+    transition: 0.2s opacity;
+  }
+
   &-panel {
     width: 136px - 8px * 2;
     padding: 0;
@@ -191,7 +202,7 @@ $name: "fastboard-toolbar";
     .#{$name}-btn {
       width: 40px;
       height: 40px;
-      font-size: 40px;
+      font-size: 0;
     }
   }
 
@@ -263,10 +274,22 @@ $name: "fastboard-toolbar";
     }
   }
 
+  &-mask {
+    position: absolute;
+    left: calc(100% + 1px);
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.85;
+    &.dark {
+      left: calc(100%);
+    }
+  }
+
   &-mask-btn {
     width: 17px;
     height: 62px;
     cursor: pointer;
+    opacity: 0.85;
     &.dark {
       filter: invert(0.8);
     }

package/src/components/Toolbar/Toolbar.tsx

@@ -3,14 +3,12 @@ import type { ToolbarHook } from "./hooks";
 
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
-import React, { createContext, useCallback, useEffect, useState } from "react";
+import React, { createContext, useState } from "react";
 
-import collapsePNG from "./components/assets/collapsed.png";
 import expandPNG from "./components/assets/expanded.png";
 
 import { Icon } from "../../icons";
 import { useTheme } from "../hooks";
-import { Mask } from "./components/Mask";
 import { Content } from "./Content";
 import { EmptyToolbarHook, useToolbar } from "./hooks";
 
@@ -42,75 +40,45 @@ export const ToolbarContext = createContext<ToolbarContextType>({
 
 export const name = "fastboard-toolbar";
 
-export const Toolbar = ({ theme, icons }: ToolbarProps) => {
+export function Toolbar({ theme, icons }: ToolbarProps) {
   theme = useTheme(theme);
 
   const hook = useToolbar();
   const [expanded, setExpanded] = useState(true);
-  const [toolbar, toolbarRef] = useState<HTMLDivElement | null>(null);
-  const [onHover, setOnHover] = useState(false);
-  const [delayedOnHover, setDelayedOnHover] = useState(false);
-  const [pointEvents, setPointEvents] = useState(true);
+  const [pointerEvents, setPointerEvents] = useState<"auto" | "none">("auto");
   const disabled = !hook.writable;
 
-  const toggle = useCallback(() => {
-    setExpanded(e => !e);
-  }, []);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDelayedOnHover(onHover);
-    }, 400);
-    return () => clearTimeout(timer);
-  }, [onHover]);
-
   return (
     <ToolbarContext.Provider value={{ theme, icons, ...hook }}>
       <AnimatePresence>
         {expanded ? (
           <motion.div
-            initial={{ x: -100 }}
-            animate={{ x: 0, transition: { duration: 0.5 } }}
             key="toolbar"
-            ref={toolbarRef}
             className={clsx(name, theme)}
-            onPointerEnter={() => {
-              expanded && setOnHover(true);
-            }}
-            onMouseLeave={() => setOnHover(false)}
+            initial={{ x: -100 }}
+            animate={{ x: 0, transition: { duration: 0.5 } }}
             exit={{ x: -100, transition: { duration: 0.5 } }}
-            onAnimationStart={() => setPointEvents(false)}
-            onAnimationComplete={() => setPointEvents(true)}
-            style={{ pointerEvents: pointEvents ? "auto" : "none" }}
+            onAnimationStart={() => setPointerEvents("none")}
+            onAnimationComplete={() => setPointerEvents("auto")}
+            style={{ pointerEvents }}
           >
-            <Content />
-            {expanded && (onHover || delayedOnHover) && (
-              <Mask toolbar={toolbar}>
-                <div onClick={toggle}>
-                  <img draggable={false} className={clsx(`${name}-mask-btn`, theme)} src={collapsePNG} />
-                </div>
-              </Mask>
-            )}
+            <Content onCollapse={() => setExpanded(false)} />
           </motion.div>
         ) : (
           <motion.div
             className={clsx(`${name}-expand-btn`, theme)}
             key="expand"
-            onClick={toggle}
+            onClick={() => setExpanded(true)}
             initial={{ x: -100 }}
             animate={{ x: 0, transition: { duration: 0.5 } }}
           >
-            {!expanded && (
-              <Icon
-                fallback={
-                  <img draggable={false} src={expandPNG} className={clsx(`${name}-mask-btn`, theme)} />
-                }
-                src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
-              />
-            )}
+            <Icon
+              fallback={<img draggable={false} src={expandPNG} className={clsx(`${name}-mask-btn`, theme)} />}
+              src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
+            />
           </motion.div>
         )}
       </AnimatePresence>
     </ToolbarContext.Provider>
   );
-};
+}

package/src/components/hooks.ts

@@ -43,12 +43,19 @@ export function useMaximized() {
   return useBoxState() === "maximized";
 }
 
+const AppsShouldShowToolbar = /* @__PURE__ */ (() => [BuiltinApps.DocsViewer, "Slide"])();
+
 export function useHideControls() {
+  const writable = useWritable();
   const maximized = useMaximized();
   const focusedApp = useFocusedApp();
 
+  if (!writable) {
+    return true;
+  }
+
   if (maximized) {
-    if (Object.values(BuiltinApps).some(kind => focusedApp?.includes(kind))) {
+    if (AppsShouldShowToolbar.some(kind => focusedApp?.includes(kind))) {
       return "toolbar-only";
     } else {
       return true;

package/src/components/Toolbar/components/Mask.tsx

@@ -1,44 +0,0 @@
-import React, { useState, useEffect } from "react";
-import ReactDOM from "react-dom";
-
-interface MaskProps {
-  toolbar: HTMLDivElement | null;
-  children: React.ReactNode;
-}
-
-export const Mask = React.memo(({ toolbar, children }: MaskProps) => {
-  const [rootElement] = useState<HTMLDivElement | null>(() => {
-    const element = document.createElement("div");
-    element.style.position = "absolute";
-    return element;
-  });
-
-  useEffect(() => {
-    if (toolbar && rootElement) {
-      toolbar.appendChild(rootElement);
-    }
-  }, [rootElement, toolbar]);
-
-  useEffect(() => {
-    if (rootElement && toolbar) {
-      toolbar.appendChild(rootElement);
-
-      const toolbarRect = toolbar.getBoundingClientRect();
-      const halfHeight = toolbarRect.height / 2 - 31;
-      rootElement.style.top = halfHeight + "px";
-      rootElement.style.left = "41px";
-      rootElement.style.width = "17px";
-      rootElement.style.height = "62px";
-
-      return () => {
-        toolbar.removeChild(rootElement);
-      };
-    }
-  }, [rootElement, toolbar]);
-
-  if (rootElement) {
-    return ReactDOM.createPortal(children, rootElement);
-  } else {
-    return null;
-  }
-});