@fileverse-dev/fortune-react 1.0.26 → 1.1.0

package/lib/components/ContextMenu/FilterMenu.js

@@ -1,621 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,33 +0,0 @@
-"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;