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

package/dist/index.umd.js

@@ -107275,6 +107275,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       _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"
@@ -107291,12 +107293,9 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       setPopupPosition = _useState4[1];
     var popupRef = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var openState = React.useRef(false);
-    var triggerRef = React.useRef(null);
     useOutsideClick(popupRef, function () {
       setOpen(false);
-      openState.current = false;
-    }, [], triggerRef);
+    });
     React.useLayoutEffect(function () {
       if (!popupRef.current) {
         return;
@@ -107322,27 +107321,43 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       ref: buttonRef,
       className: "fortune-toolbar-combo"
     }, /*#__PURE__*/React__default['default'].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__default['default'].createElement(SVGIcon, {
       name: iconId
     })) : (/*#__PURE__*/React__default['default'].createElement("span", {
       className: "fortune-toolbar-combo-text"
-    }, text))), tooltip && /*#__PURE__*/React__default['default'].createElement("div", {
+    }, text !== undefined ? text : ""))), showArrow && (/*#__PURE__*/React__default['default'].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__default['default'].createElement(be, {
+      name: "ChevronDown",
+      width: 14,
+      height: 14
+    }))), tooltip && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "fortune-tooltip"
     }, tooltip)), open && (/*#__PURE__*/React__default['default'].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))));
   };
@@ -108105,215 +108120,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     }));
   };
 
-  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 = React.useContext(WorkbookContext),
-      context = _useContext.context,
-      refs = _useContext.refs;
-    var _locale = locale(context),
-      border = _locale.border;
-    var _useState = React.useState("#000000"),
-      _useState2 = _slicedToArray(_useState, 2),
-      changeColor = _useState2[0],
-      setchangeColor = _useState2[1];
-    var _useState3 = React.useState("1"),
-      _useState4 = _slicedToArray(_useState3, 2),
-      changeStyle = _useState4[0],
-      setchangeStyle = _useState4[1];
-    var colorRef = React.useRef(null);
-    var styleRef = React.useRef(null);
-    var colorPreviewRef = React.useRef(null);
-    var _useState5 = React.useState(""),
-      _useState6 = _slicedToArray(_useState5, 2),
-      previewWith = _useState6[0],
-      setPreviewWith = _useState6[1];
-    var _useState7 = React.useState(""),
-      _useState8 = _slicedToArray(_useState7, 2),
-      previewdasharry = _useState8[0],
-      setPreviewdasharray = _useState8[1];
-    var showBorderSubMenu = React.useCallback(function (e) {
-      var target = e.target;
-      var menuItemRect = target.getBoundingClientRect();
-      var subMenuItem = target.querySelector(".fortune-border-select-menu");
-      if (lodash.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 = React.useCallback(function () {
-      styleRef.current.style.display = "none";
-      colorRef.current.style.display = "none";
-    }, []);
-    var changePreviewStyle = React.useCallback(function (width, dasharray) {
-      setPreviewWith(width);
-      setPreviewdasharray(dasharray);
-    }, []);
-    return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "fortune-border-select-option",
-      key: "borderColor",
-      onMouseEnter: function onMouseEnter(e) {
-        showBorderSubMenu(e);
-      },
-      onMouseLeave: function onMouseLeave() {
-        hideBorderSubMenu();
-      }
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "fortune-toolbar-menu-line"
-    }, border.borderColor, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-      name: "rightArrow",
-      style: {
-        width: "14px"
-      }
-    })), /*#__PURE__*/React__default['default'].createElement("div", {
-      ref: colorPreviewRef,
-      className: "fortune-border-color-preview",
-      style: {
-        backgroundColor: changeColor
-      }
-    }), /*#__PURE__*/React__default['default'].createElement("div", {
-      ref: colorRef,
-      className: "fortune-border-select-menu",
-      style: {
-        display: "none",
-        width: "166px"
-      }
-    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
-      className: "fortune-border-select-option",
-      key: "borderStyle",
-      onMouseEnter: function onMouseEnter(e) {
-        showBorderSubMenu(e);
-      },
-      onMouseLeave: function onMouseLeave() {
-        hideBorderSubMenu();
-      }
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "fortune-toolbar-menu-line"
-    }, border.borderStyle, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-      name: "rightArrow",
-      style: {
-        width: "14px"
-      }
-    })), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "fortune-border-style-preview"
-    }, /*#__PURE__*/React__default['default'].createElement("svg", {
-      width: "90"
-    }, /*#__PURE__*/React__default['default'].createElement("g", {
-      fill: "none",
-      stroke: "black",
-      strokeWidth: previewWith
-    }, /*#__PURE__*/React__default['default'].createElement("path", {
-      strokeDasharray: previewdasharry,
-      d: "M0 0 l90 0"
-    })))), /*#__PURE__*/React__default['default'].createElement("div", {
-      ref: styleRef,
-      className: "fortune-border-select-menu fortune-toolbar-select",
-      style: {
-        display: "none",
-        width: "110px"
-      }
-    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
-      className: "fortune-boder-style-picker"
-    }, size.map(function (items, i) {
-      return /*#__PURE__*/React__default['default'].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__default['default'].createElement("svg", {
-        height: "10",
-        width: "90"
-      }, /*#__PURE__*/React__default['default'].createElement("g", {
-        fill: "none",
-        stroke: "black",
-        strokeWidth: items.strokeWidth
-      }, /*#__PURE__*/React__default['default'].createElement("path", {
-        strokeDasharray: items.strokeDasharray,
-        d: "M0 5 l85 0"
-      }))));
-    })))));
-  };
-
   var FormatSearch = function FormatSearch(_ref) {
     var type = _ref.type,
       _onCancel = _ref.onCancel;
@@ -108596,6 +108402,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         }), /*#__PURE__*/React__default['default'].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);
@@ -108628,7 +108435,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].createElement(Combo, {
           text: currentFmt,
           key: name,
-          tooltip: tooltip
+          tooltip: tooltip,
+          showArrow: false
         }, function (setOpen) {
           return /*#__PURE__*/React__default['default'].createElement(Select, null, defaultFormat.map(function (_ref2, ii) {
             var text = _ref2.text,
@@ -108712,7 +108520,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].createElement(Combo, {
           text: current,
           key: name,
-          tooltip: tooltip
+          tooltip: tooltip,
+          showArrow: false
         }, function (setOpen) {
           return /*#__PURE__*/React__default['default'].createElement(Select, null, fontarray.map(function (o) {
             return /*#__PURE__*/React__default['default'].createElement(Option, {
@@ -108734,7 +108543,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].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__default['default'].createElement(Select, null, [9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72].map(function (num) {
             return /*#__PURE__*/React__default['default'].createElement(Option, {
@@ -108769,7 +108579,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
             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__default['default'].createElement(Select, null, items.map(function (_ref3) {
             var text = _ref3.text,
@@ -108810,7 +108621,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
             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__default['default'].createElement(Select, null, _items.map(function (_ref4) {
             var text = _ref4.text,
@@ -108935,7 +108747,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].createElement(Combo, {
           iconId: "locationCondition",
           key: name,
-          tooltip: findAndReplace.location
+          tooltip: findAndReplace.location,
+          showArrow: false
         }, function (setOpen) {
           return /*#__PURE__*/React__default['default'].createElement(Select, null, _items2.map(function (_ref5) {
             var text = _ref5.text,
@@ -109020,7 +108833,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].createElement(Combo, {
           iconId: "conditionFormat",
           key: name,
-          tooltip: toolbar.conditionalFormat
+          tooltip: toolbar.conditionalFormat,
+          showArrow: false
         }, function (setOpen) {
           return /*#__PURE__*/React__default['default'].createElement(ConditionalFormat, {
             items: _items3,
@@ -109117,7 +108931,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].createElement(Combo, {
           iconId: name,
           key: name,
-          tooltip: tooltip
+          tooltip: tooltip,
+          showArrow: false
         }, function (setOpen) {
           return /*#__PURE__*/React__default['default'].createElement(Select, null, itemData.map(function (_ref6) {
             var key = _ref6.key,
@@ -109156,6 +108971,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           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);
@@ -109227,12 +109043,13 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
                 setOpen(false);
               }
             }, /*#__PURE__*/React__default['default'].createElement("div", {
-              className: "fortune-toolbar-menu-line"
-            }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-              name: value,
               style: {
-                marginRight: 4
+                display: "flex",
+                alignItems: "center",
+                gap: 6
               }
+            }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+              name: value
             }), text));
           }));
         });
@@ -109250,9 +109067,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         }, {
           text: border.borderRight,
           value: "border-right"
-        }, {
-          text: "",
-          value: "divider"
         }, {
           text: border.borderNone,
           value: "border-none"
@@ -109262,9 +109076,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         }, {
           text: border.borderOutside,
           value: "border-outside"
-        }, {
-          text: "",
-          value: "divider"
         }, {
           text: border.borderInside,
           value: "border-inside"
@@ -109277,44 +109088,35 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         }, {
           text: border.borderSlash,
           value: "border-slash"
-        }, {
-          text: "",
-          value: "divider"
         }];
         return /*#__PURE__*/React__default['default'].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__default['default'].createElement(Select, null, _items4.map(function (_ref9, ii) {
-            var text = _ref9.text,
-              value = _ref9.value;
-            return value !== "divider" ? (/*#__PURE__*/React__default['default'].createElement(Option, {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "fortune-toolbar-select fortune-border-grid"
+          }, _items4.map(function (_ref9) {
+            var value = _ref9.value;
+            return /*#__PURE__*/React__default['default'].createElement("div", {
               key: value,
+              className: "fortune-border-grid-item",
               onClick: function onClick() {
                 setContext(function (ctx) {
                   handleBorder(ctx, value, customColor, customStyle);
                 });
                 setOpen(false);
               }
-            }, /*#__PURE__*/React__default['default'].createElement("div", {
-              className: "fortune-toolbar-menu-line"
-            }, text, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+            }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
               name: value
-            })))) : (/*#__PURE__*/React__default['default'].createElement(MenuDivider, {
-              key: ii
             }));
-          }), /*#__PURE__*/React__default['default'].createElement(CustomBorder, {
-            onPick: function onPick(color, style) {
-              setcustomColor(color);
-              setcustomStyle(style);
-            }
           }));
         });
       }
@@ -109336,6 +109138,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           iconId: "freeze-row-col",
           key: name,
           tooltip: tooltip,
+          showArrow: false,
           onClick: function onClick() {
             return setContext(function (ctx) {
               handleFreeze(ctx, "freeze-row-col");
@@ -109382,7 +109185,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].createElement(Combo, {
           iconId: _curr.iconId,
           key: name,
-          tooltip: toolbar.textWrap
+          tooltip: toolbar.textWrap,
+          showArrow: false
         }, function (setOpen) {
           return /*#__PURE__*/React__default['default'].createElement(Select, null, _items6.map(function (_ref1) {
             var text = _ref1.text,
@@ -109439,7 +109243,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].createElement(Combo, {
           iconId: _curr2.iconId,
           key: name,
-          tooltip: toolbar.textRotate
+          tooltip: toolbar.textRotate,
+          showArrow: false
         }, function (setOpen) {
           return /*#__PURE__*/React__default['default'].createElement(Select, null, _items7.map(function (_ref10) {
             var text = _ref10.text,
@@ -109507,7 +109312,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return /*#__PURE__*/React__default['default'].createElement(Combo, {
           iconId: "filter",
           key: name,
-          tooltip: toolbar.sortAndFilter
+          tooltip: toolbar.sortAndFilter,
+          showArrow: false
         }, function (setOpen) {
           return /*#__PURE__*/React__default['default'].createElement(Select, {
             style: {
@@ -109595,7 +109401,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         iconName: n.iconName
       }, n.children);
     }), /*#__PURE__*/React__default['default'].createElement(Divider, {
-      key: "templateDivider"
+      key: "customDivider"
     }), settings.customToolbarItems.filter(function (n) {
       return n.key !== "templates" && n.key !== "import-export";
     }).map(function (n) {