@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/lib/components/ContextMenu/FilterMenu.js

@@ -0,0 +1,621 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _immer = _interopRequireDefault(require("immer"));
+var _ui = require("@fileverse/ui");
+var _context = _interopRequireDefault(require("../../context"));
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _useAlert = require("../../hooks/useAlert");
+var _useOutsideClick = require("../../hooks/useOutsideClick");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var SelectItem = function SelectItem(_a) {
+  var item = _a.item,
+    isChecked = _a.isChecked,
+    onChange = _a.onChange,
+    isItemVisible = _a.isItemVisible;
+  var checked = (0, _react.useMemo)(function () {
+    return isChecked(item.key);
+  }, [isChecked, item.key]);
+  return isItemVisible(item) ? (/*#__PURE__*/_react.default.createElement("div", {
+    className: "select-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    className: "border-2",
+    checked: checked,
+    onCheckedChange: function onCheckedChange(e) {
+      onChange(item, e.target.checked);
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", null, item.text)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "count"
+  }, "".concat(item.rows.length)))) : null;
+};
+var _DateSelectTreeItem = function DateSelectTreeItem(_a) {
+  var item = _a.item,
+    _b = _a.depth,
+    depth = _b === void 0 ? 0 : _b,
+    initialExpand = _a.initialExpand,
+    onExpand = _a.onExpand,
+    isChecked = _a.isChecked,
+    onChange = _a.onChange,
+    isItemVisible = _a.isItemVisible;
+  var _c = (0, _react.useState)(initialExpand(item.key)),
+    expand = _c[0],
+    setExpand = _c[1];
+  var checked = (0, _react.useMemo)(function () {
+    return isChecked(item.key);
+  }, [isChecked, item.key]);
+  return isItemVisible(item) ? (/*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-item",
+    style: {
+      marginLeft: -2 + depth * 20
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center gap-2",
+    style: {
+      flex: 1
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, _lodash.default.isEmpty(item.children) ? (/*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 10
+    }
+  })) : (/*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: expand ? "ChevronDown" : "ChevronRight",
+    className: "cursor-pointer",
+    size: "sm",
+    onClick: function onClick() {
+      onExpand === null || onExpand === void 0 ? void 0 : onExpand(item.key, !expand);
+      setExpand(!expand);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    className: "border-2",
+    checked: checked,
+    onCheckedChange: function onCheckedChange(e) {
+      onChange(item, e.target.checked);
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", null, item.text)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "count"
+  }, "".concat(item.rows.length))), expand && item.children.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement(_DateSelectTreeItem, __assign({
+      key: v.key,
+      item: v,
+      depth: depth + 1
+    }, {
+      initialExpand: initialExpand,
+      onExpand: onExpand,
+      isChecked: isChecked,
+      onChange: onChange,
+      isItemVisible: isItemVisible
+    }));
+  }))) : null;
+};
+var DateSelectTree = function DateSelectTree(_a) {
+  var dates = _a.dates,
+    initialExpand = _a.initialExpand,
+    onExpand = _a.onExpand,
+    isChecked = _a.isChecked,
+    onChange = _a.onChange,
+    isItemVisible = _a.isItemVisible;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, dates.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement(_DateSelectTreeItem, __assign({
+      key: v.key,
+      item: v
+    }, {
+      initialExpand: initialExpand,
+      onExpand: onExpand,
+      isChecked: isChecked,
+      onChange: onChange,
+      isItemVisible: isItemVisible
+    }));
+  }));
+};
+var FilterMenu = function FilterMenu() {
+  var _a;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    settings = _b.settings,
+    refs = _b.refs;
+  var containerRef = (0, _react.useRef)(null);
+  var contextRef = (0, _react.useRef)(context);
+  var byColorMenuRef = (0, _react.useRef)(null);
+  var subMenuRef = (0, _react.useRef)(null);
+  var filterContextMenu = context.filterContextMenu;
+  var _c = filterContextMenu || {
+      startRow: null,
+      startCol: null,
+      endRow: null,
+      endCol: null,
+      col: null,
+      listBoxMaxHeight: 400
+    },
+    startRow = _c.startRow,
+    startCol = _c.startCol,
+    endRow = _c.endRow,
+    endCol = _c.endCol,
+    col = _c.col;
+  var filter = (0, _fortuneCore.locale)(context).filter;
+  var _d = (0, _react.useState)({
+      dates: [],
+      dateRowMap: {},
+      values: [],
+      valueRowMap: {},
+      visibleRows: [],
+      flattenValues: []
+    }),
+    data = _d[0],
+    setData = _d[1];
+  var _e = (0, _react.useState)([]),
+    datesUncheck = _e[0],
+    setDatesUncheck = _e[1];
+  var _f = (0, _react.useState)([]),
+    valuesUncheck = _f[0],
+    setValuesUncheck = _f[1];
+  var dateTreeExpandState = (0, _react.useRef)({});
+  var hiddenRows = (0, _react.useRef)([]);
+  var _g = (0, _react.useState)([]),
+    showValues = _g[0],
+    setShowValues = _g[1];
+  var _h = (0, _react.useState)(""),
+    searchText = _h[0],
+    setSearchText = _h[1];
+  var _j = (0, _react.useState)(),
+    subMenuPos = _j[0],
+    setSubMenuPos = _j[1];
+  var _k = (0, _react.useState)({
+      bgColors: [],
+      fcColors: []
+    }),
+    filterColors = _k[0],
+    setFilterColors = _k[1];
+  var _l = (0, _react.useState)(false),
+    showSubMenu = _l[0],
+    setShowSubMenu = _l[1];
+  var showAlert = (0, _useAlert.useAlert)().showAlert;
+  var mouseHoverSubMenu = (0, _react.useRef)(false);
+  contextRef.current = context;
+  var close = (0, _react.useCallback)(function () {
+    setContext(function (ctx) {
+      ctx.filterContextMenu = undefined;
+    });
+  }, [setContext]);
+  (0, _useOutsideClick.useOutsideClick)(containerRef, close, [close]);
+  var initialExpand = (0, _react.useCallback)(function (key) {
+    var expand = dateTreeExpandState.current[key];
+    if (expand == null) {
+      dateTreeExpandState.current[key] = true;
+      return true;
+    }
+    return expand;
+  }, []);
+  var onExpand = (0, _react.useCallback)(function (key, expand) {
+    dateTreeExpandState.current[key] = expand;
+  }, []);
+  var searchValues = (0, _react.useMemo)(function () {
+    return _lodash.default.debounce(function (text) {
+      setShowValues(_lodash.default.filter(data.flattenValues, function (v) {
+        return v.toLowerCase().indexOf(text.toLowerCase()) > -1;
+      }));
+    }, 300);
+  }, [data.flattenValues]);
+  var onColorSelectChange = (0, _react.useCallback)(function (key, color, checked) {
+    setFilterColors((0, _immer.default)(function (draft) {
+      var colorData = _lodash.default.find(_lodash.default.get(draft, key), function (v) {
+        return v.color === color;
+      });
+      colorData.checked = checked;
+    }));
+  }, []);
+  var delayHideSubMenu = (0, _react.useMemo)(function () {
+    return _lodash.default.debounce(function () {
+      if (mouseHoverSubMenu.current) return;
+      setShowSubMenu(false);
+    }, 200);
+  }, []);
+  var sortData = (0, _react.useCallback)(function (asc) {
+    if (col == null) return;
+    setContext(function (draftCtx) {
+      var errMsg = (0, _fortuneCore.orderbydatafiler)(draftCtx, startRow, startCol, endRow, endCol, col, asc);
+      if (errMsg != null) showAlert(errMsg);
+    });
+  }, [col, setContext, startRow, startCol, endRow, endCol, showAlert]);
+  var renderColorList = (0, _react.useCallback)(function (key, title, colors, onSelectChange) {
+    return colors.length > 1 ? (/*#__PURE__*/_react.default.createElement("div", {
+      key: key
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "title"
+    }, title), /*#__PURE__*/_react.default.createElement("div", {
+      className: "color-list"
+    }, colors.map(function (v) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: v.color,
+        className: "item",
+        onClick: function onClick() {
+          return onSelectChange(key, v.color, !v.checked);
+        },
+        tabIndex: 0
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "color-label",
+        style: {
+          backgroundColor: v.color
+        }
+      }), /*#__PURE__*/_react.default.createElement("input", {
+        className: "luckysheet-mousedown-cancel",
+        type: "checkbox",
+        checked: v.checked,
+        onChange: function onChange() {}
+      }));
+    })))) : null;
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    var _a;
+    if (!containerRef.current || !filterContextMenu) {
+      return;
+    }
+    var winH = window.innerHeight;
+    var winW = window.innerWidth;
+    var rect = containerRef.current.getBoundingClientRect();
+    var workbookRect = (_a = refs.workbookContainer.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (!workbookRect) {
+      return;
+    }
+    var menuW = rect.width;
+    var menuH = 350;
+    var top = filterContextMenu.y;
+    var left = filterContextMenu.x;
+    var hasOverflow = false;
+    if (workbookRect.left + left + menuW > winW) {
+      left -= menuW;
+      hasOverflow = true;
+    }
+    if (workbookRect.top + top + menuH > winH) {
+      top -= menuH;
+      hasOverflow = true;
+    }
+    if (top < 0) {
+      top = 0;
+      hasOverflow = true;
+    }
+    var containerH = winH - rect.top - 350;
+    if (containerH < 0) {
+      containerH = 100;
+    }
+    if (filterContextMenu.x === left && filterContextMenu.y === top && filterContextMenu.listBoxMaxHeight === containerH) {
+      return;
+    }
+    setContext(function (draftCtx) {
+      if (hasOverflow) {
+        _lodash.default.set(draftCtx, "filterContextMenu.x", left);
+        _lodash.default.set(draftCtx, "filterContextMenu.y", top);
+      }
+      _lodash.default.set(draftCtx, "filterContextMenu.listBoxMaxHeight", containerH);
+    });
+  }, [filterContextMenu, refs.workbookContainer, setContext]);
+  (0, _react.useLayoutEffect)(function () {
+    var _a, _b;
+    if (!subMenuPos) return;
+    var rect = (_a = byColorMenuRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var subMenuRect = (_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (rect == null || subMenuRect == null) return;
+    var winW = window.innerWidth;
+    var pos = _lodash.default.cloneDeep(subMenuPos);
+    if (subMenuRect.left + subMenuRect.width > winW) {
+      pos.left -= subMenuRect.width;
+      setSubMenuPos(pos);
+    }
+  }, [subMenuPos]);
+  (0, _react.useEffect)(function () {
+    if (col == null) return;
+    setSearchText("");
+    setShowSubMenu(false);
+    dateTreeExpandState.current = {};
+    hiddenRows.current = (filterContextMenu === null || filterContextMenu === void 0 ? void 0 : filterContextMenu.hiddenRows) || [];
+    var res = (0, _fortuneCore.getFilterColumnValues)(contextRef.current, col, startRow, endRow, startCol);
+    setData(_lodash.default.omit(res, ["datesUncheck", "valuesUncheck"]));
+    setDatesUncheck(res.datesUncheck);
+    setValuesUncheck(res.valuesUncheck);
+    setShowValues(res.flattenValues);
+  }, [col, endRow, startRow, startCol, hiddenRows, filterContextMenu === null || filterContextMenu === void 0 ? void 0 : filterContextMenu.hiddenRows]);
+  (0, _react.useEffect)(function () {
+    if (col == null) return;
+    setFilterColors((0, _fortuneCore.getFilterColumnColors)(contextRef.current, col, startRow, endRow));
+  }, [col, endRow, startRow]);
+  if (filterContextMenu == null) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-context-menu luckysheet-cols-menu fortune-filter-menu",
+    id: "luckysheet-\\${menuid}-menu",
+    ref: containerRef,
+    style: {
+      left: filterContextMenu.x,
+      top: filterContextMenu.y,
+      minWidth: "280px !important"
+    }
+  }, (_a = settings.filterContextMenu) === null || _a === void 0 ? void 0 : _a.map(function (name, i) {
+    if (name === "|") {
+      return /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+        key: "divider-".concat(i)
+      });
+    }
+    if (name === "sort-by-asc") {
+      return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        key: name,
+        onClick: function onClick() {
+          return sortData(true);
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "context-item w-full"
+      }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+        name: "sort-asc",
+        width: 24,
+        height: 18,
+        style: {
+          marginRight: "4px"
+        }
+      }), /*#__PURE__*/_react.default.createElement("p", null, filter.sortByAsc)));
+    }
+    if (name === "sort-by-desc") {
+      return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        key: name,
+        onClick: function onClick() {
+          return sortData(false);
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "context-item w-full"
+      }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+        name: "sort-desc",
+        width: 24,
+        height: 18,
+        style: {
+          marginRight: "4px"
+        }
+      }), /*#__PURE__*/_react.default.createElement("p", null, filter.sortByDesc)));
+    }
+    if (name === "filter-by-color") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: name,
+        ref: byColorMenuRef,
+        onMouseEnter: function onMouseEnter() {
+          var _a;
+          if (!containerRef.current || !filterContextMenu) {
+            return;
+          }
+          setShowSubMenu(true);
+          var rect = (_a = byColorMenuRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+          if (rect == null) return;
+          setSubMenuPos({
+            top: rect.top - 5,
+            left: rect.right
+          });
+        },
+        onMouseLeave: delayHideSubMenu
+      }, /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        onClick: function onClick() {}
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "filter-bycolor-container"
+      }, filter.filterByColor, /*#__PURE__*/_react.default.createElement("div", {
+        className: "filter-caret right"
+      }))));
+    }
+    if (name === "filter-by-value") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: name
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "luckysheet-filter-byvalue flex flex-col gap-2 mt-2"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "filtermenu-input-container"
+      }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+        leftIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+          name: "Search",
+          size: "sm"
+        }),
+        onKeyDown: function onKeyDown(e) {
+          return e.stopPropagation();
+        },
+        placeholder: filter.filterValueByTip,
+        id: "luckysheet-\\${menuid}-byvalue-input",
+        value: searchText,
+        onChange: function onChange(e) {
+          setSearchText(e.target.value);
+          searchValues(e.target.value);
+        }
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        id: "luckysheet-filter-byvalue-select"
+      }, /*#__PURE__*/_react.default.createElement(DateSelectTree, {
+        dates: data.dates,
+        onExpand: onExpand,
+        initialExpand: initialExpand,
+        isChecked: function isChecked(key) {
+          return _lodash.default.find(datesUncheck, function (v) {
+            return v.match(key) != null;
+          }) == null;
+        },
+        onChange: function onChange(item, checked) {
+          var rows = hiddenRows.current;
+          hiddenRows.current = checked ? _lodash.default.without.apply(_lodash.default, __spreadArray([rows], item.rows, false)) : _lodash.default.union(rows, item.rows);
+          setDatesUncheck((0, _immer.default)(function (draft) {
+            return checked ? _lodash.default.without.apply(_lodash.default, __spreadArray([draft], item.dateValues, false)) : _lodash.default.union(draft, item.dateValues);
+          }));
+        },
+        isItemVisible: function isItemVisible(item) {
+          return showValues.length === data.flattenValues.length ? true : _lodash.default.findIndex(showValues, function (v) {
+            return v.match(item.key) != null;
+          }) > -1;
+        }
+      }), /*#__PURE__*/_react.default.createElement(SelectItem, {
+        item: {
+          key: "all",
+          text: filter.filterValueByAllBtn,
+          value: "",
+          mask: "",
+          rows: data.values.filter(function (v) {
+            return showValues.includes(v.text);
+          }).flatMap(function (v) {
+            return v.rows;
+          })
+        },
+        isChecked: function isChecked() {
+          var allDatesChecked = datesUncheck.length === 0;
+          var allValuesChecked = valuesUncheck.length === 0;
+          return allDatesChecked && allValuesChecked;
+        },
+        onChange: function onChange(item, checked) {
+          if (checked) {
+            setDatesUncheck([]);
+            setValuesUncheck([]);
+            hiddenRows.current = [];
+          } else {
+            setDatesUncheck(_lodash.default.keys(data.dateRowMap));
+            setValuesUncheck(_lodash.default.keys(data.valueRowMap));
+            hiddenRows.current = data.visibleRows;
+          }
+        },
+        isItemVisible: function isItemVisible() {
+          return true;
+        }
+      }), data.values.map(function (v) {
+        return /*#__PURE__*/_react.default.createElement(SelectItem, {
+          key: v.key,
+          item: v,
+          isChecked: function isChecked(key) {
+            return !_lodash.default.includes(valuesUncheck, key);
+          },
+          onChange: function onChange(item, checked) {
+            var rows = hiddenRows.current;
+            if (checked) {
+              hiddenRows.current = _lodash.default.without.apply(_lodash.default, __spreadArray([rows], item.rows, false));
+              setValuesUncheck((0, _immer.default)(function (draft) {
+                _lodash.default.pull(draft, item.key);
+              }));
+            } else {
+              hiddenRows.current = _lodash.default.concat(rows, item.rows);
+              setValuesUncheck((0, _immer.default)(function (draft) {
+                draft.push(item.key);
+              }));
+            }
+          },
+          isItemVisible: function isItemVisible(item) {
+            return showValues.length === data.flattenValues.length ? true : _lodash.default.includes(showValues, item.text);
+          }
+        });
+      }))));
+    }
+    return null;
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-menuitem-row mt-2"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "ghost",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      setContext(function (draftCtx) {
+        (0, _fortuneCore.clearFilter)(draftCtx);
+      });
+    },
+    tabIndex: 0
+  }, filter.clearFilter), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      setContext(function (draftCtx) {
+        draftCtx.filterContextMenu = undefined;
+      });
+    },
+    tabIndex: 0
+  }, filter.filterCancel), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      if (col == null) return;
+      setContext(function (draftCtx) {
+        var rowHidden = _lodash.default.reduce(hiddenRows.current, function (pre, curr) {
+          pre[curr] = 0;
+          return pre;
+        }, {});
+        (0, _fortuneCore.saveFilter)(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
+        hiddenRows.current = [];
+        draftCtx.filterContextMenu = undefined;
+      });
+    },
+    tabIndex: 0
+  }, filter.filterConfirm))), showSubMenu && (/*#__PURE__*/_react.default.createElement("div", {
+    ref: subMenuRef,
+    className: "luckysheet-filter-bycolor-submenu",
+    style: subMenuPos,
+    onMouseEnter: function onMouseEnter() {
+      mouseHoverSubMenu.current = true;
+    },
+    onMouseLeave: function onMouseLeave() {
+      mouseHoverSubMenu.current = false;
+      setShowSubMenu(false);
+    }
+  }, filterColors.bgColors.length < 2 && filterColors.fcColors.length < 2 ? (/*#__PURE__*/_react.default.createElement("div", {
+    className: "one-color-tip"
+  }, filter.filterContainerOneColorTip)) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, [{
+    key: "bgColors",
+    title: filter.filiterByColorTip,
+    colors: filterColors.bgColors
+  }, {
+    key: "fcColors",
+    title: filter.filiterByTextColorTip,
+    colors: filterColors.fcColors
+  }].map(function (v) {
+    return renderColorList(v.key, v.title, v.colors, onColorSelectChange);
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "button-basic button-primary",
+    onClick: function onClick() {
+      if (col == null) return;
+      setContext(function (draftCtx) {
+        var rowHidden = _lodash.default.reduce((0, _lodash.default)(filterColors).values().flatten().map(function (v) {
+          return v.checked ? [] : v.rows;
+        }).flatten().valueOf(), function (pre, curr) {
+          pre[curr] = 0;
+          return pre;
+        }, {});
+        (0, _fortuneCore.saveFilter)(draftCtx, !_lodash.default.isEmpty(rowHidden), rowHidden, {}, startRow, endRow, col, startCol, endCol);
+        hiddenRows.current = [];
+        draftCtx.filterContextMenu = undefined;
+      });
+    },
+    tabIndex: 0
+  }, filter.filterConfirm))))));
+};
+var _default = exports.default = FilterMenu;

package/lib/components/ContextMenu/Menu.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type Props = React.PropsWithChildren<{
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, container: HTMLDivElement) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, container: HTMLDivElement) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, container: HTMLDivElement) => void;
+}>;
+declare const Menu: React.FC<Props>;
+export default Menu;

package/lib/components/ContextMenu/Menu.js

@@ -0,0 +1,33 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var Menu = function Menu(_a) {
+  var _onClick = _a.onClick,
+    _onMouseLeave = _a.onMouseLeave,
+    _onMouseEnter = _a.onMouseEnter,
+    children = _a.children;
+  var containerRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: "luckysheet-cols-menuitem luckysheet-mousedown-cancel",
+    onClick: function onClick(e) {
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(e, containerRef.current);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(e, containerRef.current);
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(e, containerRef.current);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"
+  }, children));
+};
+var _default = exports.default = Menu;

package/lib/components/ContextMenu/SheetTab.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./index.css";
+declare const SheetTabContextMenu: React.FC;
+export default SheetTabContextMenu;