@fileverse-dev/fortune-react 1.0.2-mod-32 → 1.0.2-mod-33

package/dist/components/Toolbar/Combo.d.ts

@@ -3,6 +3,7 @@ type Props = {
     tooltip: string;
     iconId?: string;
     text?: string;
+    showArrow?: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     children: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
 };

package/dist/index.css

@@ -2545,6 +2545,29 @@ input[type="number"].condition-rules-project-input {
   cursor: pointer;
 }
 
+.fortune-border-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+  padding: 8px;
+  min-width: 200px;
+}
+
+.fortune-border-grid-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.fortune-border-grid-item:hover {
+  background-color: hsl(var(--color-bg-default-hover));
+}
+
 #fortune-split-column {
   /* position: absolute;
     padding: 30px 42px;

package/dist/index.esm.css

@@ -2545,6 +2545,29 @@ input[type="number"].condition-rules-project-input {
   cursor: pointer;
 }
 
+.fortune-border-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+  padding: 8px;
+  min-width: 200px;
+}
+
+.fortune-border-grid-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.fortune-border-grid-item:hover {
+  background-color: hsl(var(--color-bg-default-hover));
+}
+
 #fortune-split-column {
   /* position: absolute;
     padding: 30px 42px;

package/dist/index.esm.js

@@ -4273,6 +4273,8 @@ var Combo = function Combo(_ref) {
     _onClick = _ref.onClick,
     text = _ref.text,
     iconId = _ref.iconId,
+    _ref$showArrow = _ref.showArrow,
+    showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
     children = _ref.children;
   var style = {
     userSelect: "none"
@@ -4289,12 +4291,9 @@ var Combo = function Combo(_ref) {
     setPopupPosition = _useState4[1];
   var popupRef = useRef(null);
   var buttonRef = useRef(null);
-  var openState = useRef(false);
-  var triggerRef = useRef(null);
   useOutsideClick(popupRef, function () {
     setOpen(false);
-    openState.current = false;
-  }, [], triggerRef);
+  });
   useLayoutEffect(function () {
     if (!popupRef.current) {
       return;
@@ -4320,27 +4319,43 @@ var Combo = function Combo(_ref) {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
   }, /*#__PURE__*/React.createElement("div", {
-    ref: triggerRef,
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
-      openState.current = !openState.current;
-      setOpen(openState.current);
-      if (_onClick) _onClick(e);else setOpen(openState.current);
+      if (_onClick) {
+        _onClick(e);
+        if (!showArrow) setOpen(!open);
+      } else {
+        setOpen(!open);
+      }
     },
     tabIndex: 0,
     "data-tips": tooltip,
     role: "button",
-    "aria-label": tooltip,
+    "aria-label": "".concat(tooltip, ": ").concat(text !== undefined ? text : ""),
     style: style
   }, iconId ? (/*#__PURE__*/React.createElement(SVGIcon, {
     name: iconId
   })) : (/*#__PURE__*/React.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text))), tooltip && /*#__PURE__*/React.createElement("div", {
+  }, text !== undefined ? text : ""))), showArrow && (/*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-combo-arrow",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    tabIndex: 0,
+    "data-tips": tooltip,
+    role: "button",
+    "aria-label": tooltip,
+    style: style
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "ChevronDown",
+    width: 14,
+    height: 14
+  }))), tooltip && /*#__PURE__*/React.createElement("div", {
     className: "fortune-tooltip"
   }, tooltip)), open && (/*#__PURE__*/React.createElement("div", {
     ref: popupRef,
-    className: "fortune-toolbar-combo-popup color-text-default",
+    className: "fortune-toolbar-combo-popup",
     style: popupPosition
   }, children === null || children === void 0 ? void 0 : children(setOpen))));
 };
@@ -5103,215 +5118,6 @@ var CustomColor = function CustomColor(_ref) {
   }));
 };
 
-var size = [{
-  Text: "1",
-  value: "Thin",
-  strokeDasharray: "1,0",
-  strokeWidth: "1"
-}, {
-  Text: "2",
-  value: "Hair",
-  strokeDasharray: "1,5",
-  strokeWidth: "1"
-}, {
-  Text: "3",
-  value: "Dotted",
-  strokeDasharray: "2,5",
-  strokeWidth: "2"
-}, {
-  Text: "4",
-  value: "Dashed",
-  strokeDasharray: "5,5",
-  strokeWidth: "2"
-}, {
-  Text: "5",
-  value: "DashDot",
-  strokeDasharray: "20,5,5,10,5,5",
-  strokeWidth: "2"
-}, {
-  Text: "6",
-  value: "DashDotDot",
-  strokeDasharray: "20,5,5,5,5,10,5,5,5,5",
-  strokeWidth: "2"
-}, {
-  Text: "8",
-  value: "Medium",
-  strokeDasharray: "2,0",
-  strokeWidth: "2"
-}, {
-  Text: "9",
-  value: "MediumDashed",
-  strokeDasharray: "3,5",
-  strokeWidth: "3"
-}, {
-  Text: "10",
-  value: "MediumDashDot",
-  strokeDasharray: "20,5,5,10,5,5",
-  strokeWidth: "3"
-}, {
-  Text: "11",
-  value: "MediumDashDotDot",
-  strokeDasharray: "5,5,5,5,20,5,5,5,5,10",
-  strokeWidth: "3"
-}, {
-  Text: "13",
-  value: "Thick",
-  strokeDasharray: "2,0",
-  strokeWidth: "3"
-}];
-var CustomBorder = function CustomBorder(_ref) {
-  var onPick = _ref.onPick;
-  var _useContext = useContext(WorkbookContext),
-    context = _useContext.context,
-    refs = _useContext.refs;
-  var _locale = locale(context),
-    border = _locale.border;
-  var _useState = useState("#000000"),
-    _useState2 = _slicedToArray(_useState, 2),
-    changeColor = _useState2[0],
-    setchangeColor = _useState2[1];
-  var _useState3 = useState("1"),
-    _useState4 = _slicedToArray(_useState3, 2),
-    changeStyle = _useState4[0],
-    setchangeStyle = _useState4[1];
-  var colorRef = useRef(null);
-  var styleRef = useRef(null);
-  var colorPreviewRef = useRef(null);
-  var _useState5 = useState(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    previewWith = _useState6[0],
-    setPreviewWith = _useState6[1];
-  var _useState7 = useState(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    previewdasharry = _useState8[0],
-    setPreviewdasharray = _useState8[1];
-  var showBorderSubMenu = useCallback(function (e) {
-    var target = e.target;
-    var menuItemRect = target.getBoundingClientRect();
-    var subMenuItem = target.querySelector(".fortune-border-select-menu");
-    if (_.isNil(subMenuItem)) return;
-    subMenuItem.style.display = "block";
-    var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
-    if (workbookContainerRect.width - menuItemRect.right > parseFloat(subMenuItem.style.width.replace("px", ""))) {
-      subMenuItem.style.left = "".concat(menuItemRect === null || menuItemRect === void 0 ? void 0 : menuItemRect.width, "px");
-    } else {
-      subMenuItem.style.left = "-".concat(subMenuItem.style.width);
-    }
-  }, [refs.workbookContainer]);
-  var hideBorderSubMenu = useCallback(function () {
-    styleRef.current.style.display = "none";
-    colorRef.current.style.display = "none";
-  }, []);
-  var changePreviewStyle = useCallback(function (width, dasharray) {
-    setPreviewWith(width);
-    setPreviewdasharray(dasharray);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-border-select-option",
-    key: "borderColor",
-    onMouseEnter: function onMouseEnter(e) {
-      showBorderSubMenu(e);
-    },
-    onMouseLeave: function onMouseLeave() {
-      hideBorderSubMenu();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-toolbar-menu-line"
-  }, border.borderColor, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "rightArrow",
-    style: {
-      width: "14px"
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    ref: colorPreviewRef,
-    className: "fortune-border-color-preview",
-    style: {
-      backgroundColor: changeColor
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: colorRef,
-    className: "fortune-border-select-menu",
-    style: {
-      display: "none",
-      width: "166px"
-    }
-  }, /*#__PURE__*/React.createElement(CustomColor, {
-    onCustomPick: function onCustomPick(color) {
-      onPick(color, changeStyle);
-      colorPreviewRef.current.style.backgroundColor = changeColor;
-      setchangeColor(color);
-    },
-    onColorPick: function onColorPick(color) {
-      onPick(color, changeStyle);
-      setchangeColor(color);
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-border-select-option",
-    key: "borderStyle",
-    onMouseEnter: function onMouseEnter(e) {
-      showBorderSubMenu(e);
-    },
-    onMouseLeave: function onMouseLeave() {
-      hideBorderSubMenu();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-toolbar-menu-line"
-  }, border.borderStyle, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "rightArrow",
-    style: {
-      width: "14px"
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-border-style-preview"
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "90"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "black",
-    strokeWidth: previewWith
-  }, /*#__PURE__*/React.createElement("path", {
-    strokeDasharray: previewdasharry,
-    d: "M0 0 l90 0"
-  })))), /*#__PURE__*/React.createElement("div", {
-    ref: styleRef,
-    className: "fortune-border-select-menu fortune-toolbar-select",
-    style: {
-      display: "none",
-      width: "110px"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-border-style-picker-menu fortune-border-style-reset",
-    onClick: function onClick() {
-      onPick(changeColor, "1");
-      changePreviewStyle("1", "1,0");
-    },
-    tabIndex: 0
-  }, border.borderDefault), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-boder-style-picker"
-  }, size.map(function (items, i) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: i,
-      className: "fortune-border-style-picker-menu",
-      onClick: function onClick() {
-        onPick(changeColor, items.Text);
-        setchangeStyle(items.Text);
-        changePreviewStyle(items.strokeWidth, items.strokeDasharray);
-      },
-      tabIndex: 0
-    }, /*#__PURE__*/React.createElement("svg", {
-      height: "10",
-      width: "90"
-    }, /*#__PURE__*/React.createElement("g", {
-      fill: "none",
-      stroke: "black",
-      strokeWidth: items.strokeWidth
-    }, /*#__PURE__*/React.createElement("path", {
-      strokeDasharray: items.strokeDasharray,
-      d: "M0 5 l85 0"
-    }))));
-  })))));
-};
-
 var FormatSearch = function FormatSearch(_ref) {
   var type = _ref.type,
     _onCancel = _ref.onCancel;
@@ -5594,6 +5400,7 @@ var Toolbar = function Toolbar(_ref) {
       }), /*#__PURE__*/React.createElement(Combo, {
         iconId: name,
         tooltip: tooltip,
+        showArrow: false,
         onClick: function onClick() {
           var color = name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor;
           if (color) pick(color);
@@ -5626,7 +5433,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         text: currentFmt,
         key: name,
-        tooltip: tooltip
+        tooltip: tooltip,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, defaultFormat.map(function (_ref2, ii) {
           var text = _ref2.text,
@@ -5710,7 +5518,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         text: current,
         key: name,
-        tooltip: tooltip
+        tooltip: tooltip,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, fontarray.map(function (o) {
           return /*#__PURE__*/React.createElement(Option, {
@@ -5732,7 +5541,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         text: cell ? normalizedCellAttr(cell, "fs", context.defaultFontSize) : context.defaultFontSize.toString(),
         key: name,
-        tooltip: tooltip
+        tooltip: tooltip,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, [9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72].map(function (num) {
           return /*#__PURE__*/React.createElement(Option, {
@@ -5767,7 +5577,8 @@ var Toolbar = function Toolbar(_ref) {
           return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
         })) === null || _$find === void 0 ? void 0 : _$find.title) || "align-left",
         key: name,
-        tooltip: toolbar.horizontalAlign
+        tooltip: toolbar.horizontalAlign,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, items.map(function (_ref3) {
           var text = _ref3.text,
@@ -5808,7 +5619,8 @@ var Toolbar = function Toolbar(_ref) {
           return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
         })) === null || _$find2 === void 0 ? void 0 : _$find2.title) || "align-top",
         key: name,
-        tooltip: toolbar.verticalAlign
+        tooltip: toolbar.verticalAlign,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, _items.map(function (_ref4) {
           var text = _ref4.text,
@@ -5933,7 +5745,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "locationCondition",
         key: name,
-        tooltip: findAndReplace.location
+        tooltip: findAndReplace.location,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, _items2.map(function (_ref5) {
           var text = _ref5.text,
@@ -6018,7 +5831,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "conditionFormat",
         key: name,
-        tooltip: toolbar.conditionalFormat
+        tooltip: toolbar.conditionalFormat,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(ConditionalFormat, {
           items: _items3,
@@ -6115,7 +5929,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: name,
         key: name,
-        tooltip: tooltip
+        tooltip: tooltip,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, itemData.map(function (_ref6) {
           var key = _ref6.key,
@@ -6154,6 +5969,7 @@ var Toolbar = function Toolbar(_ref) {
         iconId: "formula-sum",
         key: name,
         tooltip: toolbar.autoSum,
+        showArrow: false,
         onClick: function onClick() {
           return setContext(function (ctx) {
             handleSum(ctx, refs.cellInput.current, refs.fxInput.current, refs.globalCache);
@@ -6225,12 +6041,13 @@ var Toolbar = function Toolbar(_ref) {
               setOpen(false);
             }
           }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: value,
             style: {
-              marginRight: 4
+              display: "flex",
+              alignItems: "center",
+              gap: 6
             }
+          }, /*#__PURE__*/React.createElement(SVGIcon, {
+            name: value
           }), text));
         }));
       });
@@ -6248,9 +6065,6 @@ var Toolbar = function Toolbar(_ref) {
       }, {
         text: border.borderRight,
         value: "border-right"
-      }, {
-        text: "",
-        value: "divider"
       }, {
         text: border.borderNone,
         value: "border-none"
@@ -6260,9 +6074,6 @@ var Toolbar = function Toolbar(_ref) {
       }, {
         text: border.borderOutside,
         value: "border-outside"
-      }, {
-        text: "",
-        value: "divider"
       }, {
         text: border.borderInside,
         value: "border-inside"
@@ -6275,44 +6086,35 @@ var Toolbar = function Toolbar(_ref) {
       }, {
         text: border.borderSlash,
         value: "border-slash"
-      }, {
-        text: "",
-        value: "divider"
       }];
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "border-all",
         key: name,
         tooltip: tooltip,
         text: "\u8FB9\u6846\u8BBE\u7F6E",
+        showArrow: false,
         onClick: function onClick() {
           return setContext(function (ctx) {
             handleBorder(ctx, "border-all", customColor, customStyle);
           });
         }
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, _items4.map(function (_ref9, ii) {
-          var text = _ref9.text,
-            value = _ref9.value;
-          return value !== "divider" ? (/*#__PURE__*/React.createElement(Option, {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "fortune-toolbar-select fortune-border-grid"
+        }, _items4.map(function (_ref9) {
+          var value = _ref9.value;
+          return /*#__PURE__*/React.createElement("div", {
             key: value,
+            className: "fortune-border-grid-item",
             onClick: function onClick() {
               setContext(function (ctx) {
                 handleBorder(ctx, value, customColor, customStyle);
               });
               setOpen(false);
             }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
+          }, /*#__PURE__*/React.createElement(SVGIcon, {
             name: value
-          })))) : (/*#__PURE__*/React.createElement(MenuDivider, {
-            key: ii
           }));
-        }), /*#__PURE__*/React.createElement(CustomBorder, {
-          onPick: function onPick(color, style) {
-            setcustomColor(color);
-            setcustomStyle(style);
-          }
         }));
       });
     }
@@ -6334,6 +6136,7 @@ var Toolbar = function Toolbar(_ref) {
         iconId: "freeze-row-col",
         key: name,
         tooltip: tooltip,
+        showArrow: false,
         onClick: function onClick() {
           return setContext(function (ctx) {
             handleFreeze(ctx, "freeze-row-col");
@@ -6380,7 +6183,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: _curr.iconId,
         key: name,
-        tooltip: toolbar.textWrap
+        tooltip: toolbar.textWrap,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, _items6.map(function (_ref1) {
           var text = _ref1.text,
@@ -6437,7 +6241,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: _curr2.iconId,
         key: name,
-        tooltip: toolbar.textRotate
+        tooltip: toolbar.textRotate,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, _items7.map(function (_ref10) {
           var text = _ref10.text,
@@ -6505,7 +6310,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "filter",
         key: name,
-        tooltip: toolbar.sortAndFilter
+        tooltip: toolbar.sortAndFilter,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, {
           style: {