@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/lib/components/SVGIcon.d.ts

@@ -0,0 +1,9 @@
+import React, { CSSProperties } from "react";
+type Props = {
+    name: string;
+    width?: number;
+    height?: number;
+    style?: CSSProperties;
+};
+declare const SVGIcon: React.FC<Props>;
+export default SVGIcon;

package/lib/components/SVGIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var SVGIcon = function SVGIcon(_a) {
+  var _b = _a.width,
+    width = _b === void 0 ? 24 : _b,
+    _c = _a.height,
+    height = _c === void 0 ? 24 : _c,
+    name = _a.name,
+    style = _a.style;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    style: style,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("use", {
+    xlinkHref: "#".concat(name)
+  }));
+};
+var _default = exports.default = SVGIcon;

package/lib/components/SearchReplace/index.css

@@ -0,0 +1,191 @@
+@import "@fileverse/ui/styles";
+/*查找替换弹出框样式*/
+#fortune-search-replace {
+  position: absolute;
+  min-width: 504px;
+  z-index: 1002;
+}
+
+#fortune-search-replace .icon-close {
+  position: absolute;
+  right: 3px;
+  top: 3px;
+}
+
+#fortune-search-replace .tabBox {
+  margin-top: 10px;
+  font-size: 0;
+}
+
+#fortune-search-replace .tabBox span {
+  display: inline-block;
+  text-align: center;
+  width: 100px;
+  border: 1px solid rgb(235, 235, 235);
+  font-size: 14px;
+  line-height: 2;
+}
+
+#fortune-search-replace .tabBox span.on {
+  background-color: #8c89fe;
+  border-color: #726efe;
+  color: #fff;
+}
+
+#fortune-search-replace .ctBox {
+  padding: 5px 10px;
+  border: 1px solid rgb(235, 235, 235);
+  font-size: 14px;
+  min-width: 500px;
+}
+
+#fortune-search-replace .ctBox .row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+#fortune-search-replace .inputBox {
+  height: 90px;
+  position: relative;
+}
+
+#fortune-search-replace .inputBox .textboxs {
+  height: 30px;
+  line-height: 30px;
+}
+
+#fortune-search-replace .checkboxs {
+  height: 90px;
+}
+
+#fortune-search-replace .checkboxs div {
+  height: 30px;
+  line-height: 30px;
+}
+
+#fortune-search-replace .checkboxs input[type="checkbox"] {
+  float: left;
+  margin-top: 9px;
+}
+
+#fortune-search-replace .btnBox {
+  margin-top: 10px;
+}
+
+#fortune-search-replace .btnBox .button-default {
+  margin-right: 8px;
+  margin-left: 0px;
+}
+
+#fortune-search-replace .close-button {
+  margin-left: 0px;
+  margin-top: 10px;
+}
+
+#fortune-search-replace #searchAllbox {
+  overflow-y: scroll;
+  position: relative;
+}
+
+#fortune-search-replace #searchAllbox .boxTitle {
+  width: 100%;
+  height: 30px;
+  line-height: 29px;
+  padding: 0 5px;
+  background-color: #fff;
+  border-bottom: 1px solid #d4d4d4;
+  box-sizing: border-box;
+  position: sticky;
+  left: 0;
+  top: 0;
+}
+
+#fortune-search-replace #searchAllbox .boxTitle span {
+  display: inline-block;
+  text-align: center;
+}
+
+#fortune-search-replace #searchAllbox .boxTitle span:nth-of-type(1) {
+  width: 25%;
+}
+
+#fortune-search-replace #searchAllbox .boxTitle span:nth-of-type(2) {
+  width: 25%;
+}
+
+#fortune-search-replace #searchAllbox .boxTitle span:nth-of-type(3) {
+  width: 50%;
+}
+
+#fortune-search-replace #searchAllbox .boxMain .boxItem {
+  height: 30px;
+  line-height: 29px;
+  border-bottom: 1px solid #d4d4d4;
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+#fortune-search-replace #searchAllbox .boxMain .boxItem.on {
+  background-color: #8c89fe;
+  color: #fff;
+}
+
+#fortune-search-replace #searchAllbox .boxMain .boxItem span {
+  display: block;
+  text-align: center;
+  float: left;
+}
+
+#fortune-search-replace #searchAllbox .boxMain .boxItem span:nth-of-type(1) {
+  width: 25%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#fortune-search-replace #searchAllbox .boxMain .boxItem span:nth-of-type(2) {
+  width: 25%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#fortune-search-replace #searchAllbox .boxMain .boxItem span:nth-of-type(3) {
+  width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.find-replace-label {
+  min-width: 100px;
+}
+
+.find-replace-table-cell {
+  min-width: 154px;
+}
+
+/* Add scrollbar styles */
+#fortune-search-replace .table-container {
+  scrollbar-width: thin;
+  scrollbar-color: #babac0 transparent;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-thumb {
+  background-color: #babac0;
+  border-radius: 16px;
+}
+
+#fortune-search-replace .table-container::-webkit-scrollbar-button {
+  display: none;
+}

package/lib/components/SearchReplace/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "./index.css";
+declare const SearchReplace: React.FC<{
+    getContainer: () => HTMLDivElement;
+}>;
+export default SearchReplace;

package/lib/components/SearchReplace/index.js

@@ -0,0 +1,294 @@
+"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 _ui = require("@fileverse/ui");
+var _immer = _interopRequireDefault(require("immer"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+var _useAlert = require("../../hooks/useAlert");
+require("./index.css");
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var SearchReplace = function SearchReplace() {
+  var _a = (0, _react.useContext)(_context.default),
+    context = _a.context,
+    setContext = _a.setContext,
+    refs = _a.refs;
+  var findAndReplace = (0, _fortuneCore.locale)(context).findAndReplace;
+  var _b = (0, _react.useState)(""),
+    searchText = _b[0],
+    setSearchText = _b[1];
+  var _c = (0, _react.useState)(""),
+    replaceText = _c[0],
+    setReplaceText = _c[1];
+  var _d = (0, _react.useState)([]),
+    searchResult = _d[0],
+    setSearchResult = _d[1];
+  var _e = (0, _react.useState)(),
+    selectedCell = _e[0],
+    setSelectedCell = _e[1];
+  var showAlert = (0, _useAlert.useAlert)().showAlert;
+  var tableContainerRef = (0, _react.useRef)(null);
+  var searchInputRef = (0, _react.useRef)(null);
+  var replaceInputRef = (0, _react.useRef)(null);
+  var _f = (0, _react.useState)({
+      regCheck: false,
+      wordCheck: false,
+      caseCheck: false
+    }),
+    checkMode = _f[0],
+    checkModeReplace = _f[1];
+  var closeDialog = (0, _react.useCallback)(function () {
+    _lodash.default.set(refs.globalCache, "searchDialog.mouseEnter", false);
+    setContext(function (draftCtx) {
+      draftCtx.showSearch = false;
+      draftCtx.showReplace = false;
+    });
+  }, [refs.globalCache, setContext]);
+  var setCheckMode = (0, _react.useCallback)(function (mode, value) {
+    return checkModeReplace((0, _immer.default)(function (draft) {
+      _lodash.default.set(draft, mode, value);
+    }));
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-search-replace",
+    className: "fortune-search-replace fortune-dialog",
+    style: {
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    },
+    onMouseEnter: function onMouseEnter() {
+      _lodash.default.set(refs.globalCache, "searchDialog.mouseEnter", true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      _lodash.default.set(refs.globalCache, "searchDialog.mouseEnter", false);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center justify-between border-b color-border-default py-3 px-6"
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "text-heading-sm"
+  }, "Find and replace"), /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
+    icon: "X",
+    variant: "ghost",
+    onClick: closeDialog,
+    tabIndex: 0
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "px-6 pb-6 pt-4"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "searchInput",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "find-replace-label text-heading-xsm"
+  }, findAndReplace.findTextbox, "\uFF1A"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    ref: searchInputRef,
+    className: "formulaInputFocus",
+    autoFocus: true,
+    spellCheck: "false",
+    onKeyDown: function onKeyDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseDown: function onMouseDown(e) {
+      var _a;
+      if (e.target === searchInputRef.current || ((_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        e.stopPropagation();
+      }
+    },
+    value: searchText,
+    onChange: function onChange(e) {
+      if (e.target.value.length === 0) {
+        setSearchResult([]);
+      }
+      setSearchText(e.target.value);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    id: "replaceInput",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "find-replace-label text-heading-xsm"
+  }, findAndReplace.replaceTextbox, "\uFF1A"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    ref: replaceInputRef,
+    className: "formulaInputFocus",
+    spellCheck: "false",
+    onKeyDown: function onKeyDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseDown: function onMouseDown(e) {
+      var _a;
+      if (e.target === replaceInputRef.current || ((_a = replaceInputRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        e.stopPropagation();
+      }
+    },
+    value: replaceText,
+    onChange: function onChange(e) {
+      return setReplaceText(e.target.value);
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-row gap-2"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "find-replace-label"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col gap-2 text-body-sm"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "regCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    className: "border-2",
+    checked: checkMode.regCheck,
+    onCheckedChange: function onCheckedChange(e) {
+      return setCheckMode("regCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", null, findAndReplace.regexTextbox)), /*#__PURE__*/_react.default.createElement("div", {
+    id: "caseCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    className: "border-2",
+    checked: checkMode.caseCheck,
+    onCheckedChange: function onCheckedChange(e) {
+      return setCheckMode("caseCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", null, findAndReplace.distinguishTextbox)), /*#__PURE__*/_react.default.createElement("div", {
+    id: "wordCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    className: "border-2",
+    checked: checkMode.wordCheck,
+    onCheckedChange: function onCheckedChange(e) {
+      return setCheckMode("wordCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", null, findAndReplace.wholeTextbox)))), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-row gap-2 justify-end items-center mb-4"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    id: "replaceAllBtn",
+    variant: "secondary",
+    className: "min-w-fit",
+    onClick: function onClick() {
+      setContext(function (draftCtx) {
+        setSelectedCell(undefined);
+        var alertMsg = (0, _fortuneCore.replaceAll)(draftCtx, searchText, replaceText, checkMode);
+        showAlert(alertMsg);
+      });
+    },
+    tabIndex: 0,
+    disabled: searchText.length === 0 || replaceText.length === 0
+  }, findAndReplace.allReplaceBtn), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    id: "replaceBtn",
+    variant: "secondary",
+    className: "min-w-fit",
+    onClick: function onClick() {
+      return setContext(function (draftCtx) {
+        setSelectedCell(undefined);
+        var alertMsg = (0, _fortuneCore.replace)(draftCtx, searchText, replaceText, checkMode);
+        if (alertMsg != null) {
+          showAlert(alertMsg);
+        }
+      });
+    },
+    tabIndex: 0,
+    disabled: searchText.length === 0 || replaceText.length === 0
+  }, findAndReplace.replaceBtn), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    id: "searchAllBtn",
+    variant: "secondary",
+    className: "min-w-fit",
+    onClick: function onClick() {
+      return setContext(function (draftCtx) {
+        setSelectedCell(undefined);
+        if (!searchText) return;
+        var res = (0, _fortuneCore.searchAll)(draftCtx, searchText, checkMode);
+        setSearchResult(res);
+        if (_lodash.default.isEmpty(res)) showAlert(findAndReplace.noFindTip);
+      });
+    },
+    tabIndex: 0,
+    disabled: searchText.length === 0
+  }, findAndReplace.allFindBtn), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    id: "searchNextBtn",
+    variant: "default",
+    className: "min-w-fit",
+    onClick: function onClick() {
+      return setContext(function (draftCtx) {
+        setSearchResult([]);
+        var alertMsg = (0, _fortuneCore.searchNext)(draftCtx, searchText, checkMode);
+        if (alertMsg != null) showAlert(alertMsg);
+      });
+    },
+    tabIndex: 0,
+    disabled: searchText.length === 0
+  }, findAndReplace.findBtn))), searchResult.length > 0 && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+    className: "w-full border-t-[1px] mb-4"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: tableContainerRef,
+    className: "mb-6 table-container max-h-[300px] overflow-y-auto",
+    onMouseDown: function onMouseDown(e) {
+      var _a, _b;
+      if (e.target === tableContainerRef.current || ((_a = tableContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        e.preventDefault();
+        e.stopPropagation();
+        (_b = tableContainerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+    },
+    onWheel: function onWheel(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (tableContainerRef.current) {
+        var delta = e.deltaY;
+        var currentScroll = tableContainerRef.current.scrollTop;
+        tableContainerRef.current.scrollTop = currentScroll + delta;
+      }
+    },
+    onTouchStart: function onTouchStart(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onTouchMove: function onTouchMove(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_ui.Table, {
+    id: "searchAllbox"
+  }, /*#__PURE__*/_react.default.createElement(_ui.TableHeader, {
+    className: "color-bg-secondary"
+  }, /*#__PURE__*/_react.default.createElement(_ui.TableRow, null, /*#__PURE__*/_react.default.createElement(_ui.TableHead, null, findAndReplace.searchTargetSheet), /*#__PURE__*/_react.default.createElement(_ui.TableHead, null, findAndReplace.searchTargetCell), /*#__PURE__*/_react.default.createElement(_ui.TableHead, null, findAndReplace.searchTargetValue))), /*#__PURE__*/_react.default.createElement(_ui.TableBody, null, searchResult.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement(_ui.TableRow, {
+      className: (0, _ui.cn)(_lodash.default.isEqual(selectedCell, {
+        r: v.r,
+        c: v.c
+      }) ? "color-bg-default-selected" : ""),
+      key: v.cellPosition,
+      onClick: function onClick() {
+        setContext(function (draftCtx) {
+          draftCtx.luckysheet_select_save = (0, _fortuneCore.normalizeSelection)(draftCtx, [{
+            row: [v.r, v.r],
+            column: [v.c, v.c]
+          }]);
+          (0, _fortuneCore.scrollToHighlightCell)(draftCtx, v.r, v.c);
+        });
+        setSelectedCell({
+          r: v.r,
+          c: v.c
+        });
+      },
+      tabIndex: 0
+    }, /*#__PURE__*/_react.default.createElement(_ui.TableCell, {
+      className: "find-replace-table-cell"
+    }, v.sheetName), /*#__PURE__*/_react.default.createElement(_ui.TableCell, {
+      className: "find-replace-table-cell"
+    }, v.cellPosition), /*#__PURE__*/_react.default.createElement(_ui.TableCell, {
+      className: "find-replace-table-cell"
+    }, v.value));
+  })))))))));
+};
+var _default = exports.default = SearchReplace;

package/lib/components/Sheet/index.css

@@ -0,0 +1,27 @@
+.fortune-sheet-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.fortune-col-body {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+
+.fortune-sheet-area {
+  flex: 1;
+  position: relative;
+}
+
+.fortune-sheet-canvas-placeholder,
+.fortune-sheet-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.fortune-sheet-canvas {
+  position: absolute;
+}

package/lib/components/Sheet/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Sheet as SheetType } from "@fileverse-dev/fortune-core";
+import "./index.css";
+type Props = {
+    sheet: SheetType;
+};
+declare const Sheet: React.FC<Props>;
+export default Sheet;