feat: toolbar more button

.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
         unnamedComponents: "arrow-function",
       },
     ],
+    "react/prop-types": 0,
     "react-hooks/rules-of-hooks": 2,
     "react-hooks/exhaustive-deps": 1,
     "@typescript-eslint/no-unused-vars": [2],

packages/react/src/components/ContextMenu/SheetTab.tsx

@@ -2,12 +2,12 @@ import { locale, deleteSheet } from "@fortune-sheet/core";
 import React, {
   useContext,
   useRef,
-  useEffect,
   useState,
   useLayoutEffect,
   useCallback,
 } from "react";
 import WorkbookContext from "../../context";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
 import "./index.css";
 import Menu from "./Menu";
 
@@ -31,20 +31,7 @@ const SheetTabContextMenu: React.FC = () => {
     }
   }, [x, y]);
 
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as HTMLElement)
-      ) {
-        close();
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [close]);
+  useOutsideClick(containerRef, close, [close]);
 
   if (!sheet || x == null || y == null) return null;
 

packages/react/src/components/SVGDefines.tsx

@@ -949,6 +949,9 @@ const SVGDefines: React.FC = () => (
           strokeWidth="1.5"
         />
       </symbol>
+      <symbol viewBox="0 0 1024 1024" fill="#535A68" id="more">
+        <path d="M224 597.333333C183.466667 597.333333 149.333333 563.2 149.333333 522.666667S183.466667 448 224 448s74.666667 34.133333 74.666667 74.666667-32 74.666667-74.666667 74.666666zM512 597.333333c-40.533333 0-74.666667-34.133333-74.666667-74.666666S471.466667 448 512 448s74.666667 34.133333 74.666667 74.666667S554.666667 597.333333 512 597.333333zM800 597.333333c-40.533333 0-74.666667-34.133333-74.666667-74.666666s34.133333-74.666667 74.666667-74.666667 74.666667 34.133333 74.666667 74.666667-32 74.666667-74.666667 74.666666z" />
+      </symbol>
     </defs>
   </svg>
 );

packages/react/src/components/Toolbar/Button.tsx

@@ -19,7 +19,7 @@ const Button: React.FC<Props> = ({
   // const style: CSSProperties = { userSelect: "none" };
   return (
     <div
-      className="fortune-toolbar-button"
+      className="fortune-toolbar-button fortune-toolbar-item"
       onClick={onClick}
       data-tips={tooltip}
       role="button"

packages/react/src/components/Toolbar/Combo.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties, useEffect, useRef, useState } from "react";
+import React, { CSSProperties, useRef, useState } from "react";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
 import SVGIcon from "../SVGIcon";
 
 type Props = {
@@ -22,23 +23,12 @@ const Combo: React.FC<Props> = ({
   const [open, setOpen] = useState(false);
   const popupRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      if (
-        popupRef.current &&
-        !popupRef.current.contains(e.target as HTMLElement)
-      ) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
+  useOutsideClick(popupRef, () => {
+    setOpen(false);
+  });
 
   return (
-    <div className="fortune-toobar-combo-container">
+    <div className="fortune-toobar-combo-container fortune-toolbar-item">
       <div className="fortune-toolbar-combo">
         <div
           className="fortune-toolbar-combo-button"

packages/react/src/components/Toolbar/Divider.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 const Divider: React.FC = () => {
-  return <div className="fortune-toolbar-divider" />;
+  return <div className="fortune-toolbar-divider fortune-toolbar-item" />;
 };
 
 export const MenuDivider: React.FC = () => {

packages/react/src/components/Toolbar/MoreItemsContainer.tsx

@@ -0,0 +1,24 @@
+import React, { useRef } from "react";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
+
+const MoreItemsContaier: React.FC<{ onClose?: () => void }> = ({
+  onClose,
+  children,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  useOutsideClick(
+    containerRef,
+    () => {
+      onClose?.();
+    },
+    [containerRef, onClose]
+  );
+
+  return (
+    <div ref={containerRef} className="fortune-toolbar-more-container">
+      {children}
+    </div>
+  );
+};
+
+export default MoreItemsContaier;

packages/react/src/components/Toolbar/index.css

@@ -77,6 +77,7 @@
 
 .fortune-toolbar-combo-popup {
   position: absolute;
+  white-space: nowrap;
   top: 32px;
   left: 0;
   z-index: 1002;
@@ -137,9 +138,25 @@
   position: absolute;
   z-index: 1;
   top: 40px;
+  white-space: nowrap;
 }
 
 .fortune-toolbar-button:hover .fortune-tooltip,
 .fortune-toolbar-combo:hover .fortune-tooltip {
   visibility: visible;
 }
+
+.fortune-toolbar-more-container {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-end;
+  margin-right: 40px;
+  top: 40px;
+  max-width: 348px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  background: white;
+  flex-wrap: wrap;
+  z-index: 1002;
+}

packages/react/src/components/Toolbar/index.tsx

@@ -1,4 +1,10 @@
-import React, { useContext, useCallback, useRef } from "react";
+import React, {
+  useContext,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
 import {
   toolbarItemClickHandler,
   handleTextBackground,
@@ -28,10 +34,15 @@ import ColorPicker from "./ColorPicker";
 import Select, { Option } from "./Select";
 import SVGIcon from "../SVGIcon";
 
-const Toolbar: React.FC = () => {
+const Toolbar: React.FC<{
+  setMoreItems: React.Dispatch<React.SetStateAction<React.ReactNode>>;
+  moreItemsOpen: boolean;
+}> = ({ setMoreItems, moreItemsOpen }) => {
   const { context, setContext, refs, settings, handleUndo, handleRedo } =
     useContext(WorkbookContext);
   const containerRef = useRef<HTMLDivElement>(null);
+  const [toolbarWrapIndex, setToolbarWrapIndex] = useState(-1); // -1 means pending for item location calculation
+  const [itemLocations, setItemLocations] = useState<number[]>([]);
   const firstSelection = context.luckysheet_select_save?.[0];
   const flowdata = getFlowdata(context);
   const row = firstSelection?.row_focus;
@@ -39,6 +50,48 @@ const Toolbar: React.FC = () => {
   const cell =
     flowdata && row != null && col != null ? flowdata?.[row]?.[col] : undefined;
   const { toolbar, merge, border, freezen } = locale(context);
+  const sheetWidth = context.luckysheetTableContentHW[0];
+
+  // rerenders the entire toolbar and trigger recalculation of item locations
+  useEffect(() => {
+    setToolbarWrapIndex(-1);
+  }, [settings.showtoolbarConfig]);
+
+  // recalculate item locations
+  useEffect(() => {
+    if (toolbarWrapIndex === -1) {
+      const container = containerRef.current!;
+      if (!container) return;
+      const items = container.querySelectorAll(".fortune-toolbar-item");
+      if (!items) return;
+      const locations: number[] = [];
+      for (let i = 0; i < items.length; i += 1) {
+        const item = items[i] as HTMLElement;
+        locations.push(
+          item.offsetLeft - container.offsetLeft + item.clientWidth
+        );
+      }
+      setItemLocations(locations);
+    }
+  }, [toolbarWrapIndex, sheetWidth]);
+
+  // calculate the position after which items should be wrapped
+  useEffect(() => {
+    if (itemLocations.length === 0) return;
+    const container = containerRef.current!;
+    if (!container) return;
+    const moreButtonWidth = 50;
+    for (let i = itemLocations.length - 1; i >= 0; i -= 1) {
+      const loc = itemLocations[i];
+      if (loc + moreButtonWidth < container.offsetWidth) {
+        setToolbarWrapIndex(i);
+        if (i === itemLocations.length - 1) {
+          setMoreItems(null);
+        }
+        break;
+      }
+    }
+  }, [itemLocations, setMoreItems, sheetWidth]);
 
   const getToolbarItem = useCallback(
     (name: string, i: number) => {
@@ -499,7 +552,28 @@ const Toolbar: React.FC = () => {
   return (
     <div ref={containerRef} className="fortune-toolbar">
       <div className="luckysheet-toolbar-left-theme" />
-      {settings.showtoolbarConfig.map((name, i) => getToolbarItem(name, i))}
+      {(toolbarWrapIndex === -1
+        ? settings.showtoolbarConfig
+        : settings.showtoolbarConfig.slice(0, toolbarWrapIndex + 1)
+      ).map((name, i) => getToolbarItem(name, i))}
+      {toolbarWrapIndex !== -1 &&
+      toolbarWrapIndex < settings.showtoolbarConfig.length - 1 ? (
+        <Button
+          iconId="more"
+          tooltip={toolbar.toolMore}
+          onClick={() => {
+            if (moreItemsOpen) {
+              setMoreItems(null);
+            } else {
+              setMoreItems(
+                settings.showtoolbarConfig
+                  .slice(toolbarWrapIndex + 1)
+                  .map((name, i) => getToolbarItem(name, i))
+              );
+            }
+          }}
+        />
+      ) : null}
     </div>
   );
 };

packages/react/src/components/Workbook/index.tsx

@@ -36,7 +36,7 @@ import produce, {
   Patch,
   produceWithPatches,
 } from "immer";
-import _, { assign } from "lodash";
+import _ from "lodash";
 import Sheet from "../Sheet";
 import WorkbookContext, { SetContextOptions } from "../../context";
 import Toolbar from "../Toolbar";
@@ -45,6 +45,7 @@ import SheetTab from "../SheetTab";
 import ContextMenu from "../ContextMenu";
 import SVGDefines from "../SVGDefines";
 import SheetTabContextMenu from "../ContextMenu/SheetTab";
+import MoreItemsContaier from "../Toolbar/MoreItemsContainer";
 
 enablePatches();
 
@@ -58,7 +59,7 @@ type AdditionalProps = {
 };
 
 const Workbook = React.forwardRef<WorkbookInstance, Settings & AdditionalProps>(
-  ({ onChange, onOp, ...props }, ref) => {
+  ({ onChange, onOp, data: originalData, ...props }, ref) => {
     const [context, setContext] = useState(defaultContext());
     const cellInput = useRef<HTMLDivElement>(null);
     const fxInput = useRef<HTMLDivElement>(null);
@@ -67,10 +68,14 @@ const Workbook = React.forwardRef<WorkbookInstance, Settings & AdditionalProps>(
     const cellArea = useRef<HTMLDivElement>(null);
     const workbookContainer = useRef<HTMLDivElement>(null);
     const globalCache = useRef<GlobalCache>({ undoList: [], redoList: [] });
+    const [moreToolbarItems, setMoreToolbarItems] =
+      useState<React.ReactNode>(null);
 
     const mergedSettings = useMemo(
-      () => assign(_.cloneDeep(defaultSettings), props) as Required<Settings>,
-      [props]
+      () => _.assign(_.cloneDeep(defaultSettings), props) as Required<Settings>,
+      // props expect data, onChage, onOp
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [..._.values(props)]
     );
 
     const applyOp = useCallback((ops: Op[]) => {
@@ -203,7 +208,7 @@ const Workbook = React.forwardRef<WorkbookInstance, Settings & AdditionalProps>(
       setContextWithProduce(
         (draftCtx) => {
           if (_.isEmpty(draftCtx.luckysheetfile)) {
-            const newData = produce(mergedSettings.data, (draftData) => {
+            const newData = produce(originalData, (draftData) => {
               ensureSheetIndex(draftData);
             });
             draftCtx.luckysheetfile = newData;
@@ -339,7 +344,7 @@ const Workbook = React.forwardRef<WorkbookInstance, Settings & AdditionalProps>(
     }, [
       context.currentSheetIndex,
       context.luckysheetfile.length,
-      mergedSettings.data,
+      originalData,
       mergedSettings.defaultRowHeight,
       mergedSettings.defaultColWidth,
       mergedSettings.column,
@@ -379,6 +384,10 @@ const Workbook = React.forwardRef<WorkbookInstance, Settings & AdditionalProps>(
       [setContextWithProduce]
     );
 
+    const onMoreToolbarItemsClose = useCallback(() => {
+      setMoreToolbarItems(null);
+    }, []);
+
     useEffect(() => {
       document.addEventListener("paste", onPaste);
       return () => {
@@ -404,13 +413,21 @@ const Workbook = React.forwardRef<WorkbookInstance, Settings & AdditionalProps>(
         >
           <SVGDefines />
           <div className="fortune-workarea">
-            <Toolbar />
+            <Toolbar
+              moreItemsOpen={moreToolbarItems !== null}
+              setMoreItems={setMoreToolbarItems}
+            />
             <FxEditor />
           </div>
           <Sheet sheet={sheet} />
           <SheetTab />
           <ContextMenu />
           <SheetTabContextMenu />
+          {moreToolbarItems && (
+            <MoreItemsContaier onClose={onMoreToolbarItemsClose}>
+              {moreToolbarItems}
+            </MoreItemsContaier>
+          )}
           {!_.isEmpty(context.contextMenu) && (
             <div
               onMouseDown={() => {

packages/react/src/hooks/useOutsideClick.ts

@@ -0,0 +1,23 @@
+import React, { useEffect } from "react";
+
+export function useOutsideClick(
+  containerRef: React.RefObject<HTMLElement>,
+  handler: () => void,
+  deps?: React.DependencyList
+) {
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as HTMLElement)
+      ) {
+        handler();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}