@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/{dist/packages/react/src → es}/components/SVGIcon.d.ts

@@ -1,9 +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;
+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/es/components/SVGIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+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.createElement("svg", {
+    width: width,
+    height: height,
+    style: style,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#".concat(name)
+  }));
+};
+export default SVGIcon;

package/es/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/{dist/packages/react/src → es}/components/SearchReplace/index.d.ts

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

package/es/components/SearchReplace/index.js

@@ -0,0 +1,285 @@
+import { locale, searchAll, searchNext, normalizeSelection, replace, replaceAll, scrollToHighlightCell } from "@fileverse-dev/fortune-core";
+import { Button, Checkbox, cn, Divider, IconButton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TextField } from "@fileverse/ui";
+import produce from "immer";
+import React, { useContext, useState, useCallback, useRef } from "react";
+import _ from "lodash";
+import WorkbookContext from "../../context";
+import { useAlert } from "../../hooks/useAlert";
+import "./index.css";
+var SearchReplace = function SearchReplace() {
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    setContext = _a.setContext,
+    refs = _a.refs;
+  var findAndReplace = locale(context).findAndReplace;
+  var _b = useState(""),
+    searchText = _b[0],
+    setSearchText = _b[1];
+  var _c = useState(""),
+    replaceText = _c[0],
+    setReplaceText = _c[1];
+  var _d = useState([]),
+    searchResult = _d[0],
+    setSearchResult = _d[1];
+  var _e = useState(),
+    selectedCell = _e[0],
+    setSelectedCell = _e[1];
+  var showAlert = useAlert().showAlert;
+  var tableContainerRef = useRef(null);
+  var searchInputRef = useRef(null);
+  var replaceInputRef = useRef(null);
+  var _f = useState({
+      regCheck: false,
+      wordCheck: false,
+      caseCheck: false
+    }),
+    checkMode = _f[0],
+    checkModeReplace = _f[1];
+  var closeDialog = useCallback(function () {
+    _.set(refs.globalCache, "searchDialog.mouseEnter", false);
+    setContext(function (draftCtx) {
+      draftCtx.showSearch = false;
+      draftCtx.showReplace = false;
+    });
+  }, [refs.globalCache, setContext]);
+  var setCheckMode = useCallback(function (mode, value) {
+    return checkModeReplace(produce(function (draft) {
+      _.set(draft, mode, value);
+    }));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "fortune-search-replace",
+    className: "fortune-search-replace fortune-dialog",
+    style: {
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    },
+    onMouseEnter: function onMouseEnter() {
+      _.set(refs.globalCache, "searchDialog.mouseEnter", true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      _.set(refs.globalCache, "searchDialog.mouseEnter", false);
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between border-b color-border-default py-3 px-6"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-heading-sm"
+  }, "Find and replace"), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "X",
+    variant: "ghost",
+    onClick: closeDialog,
+    tabIndex: 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 pt-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "searchInput",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "find-replace-label text-heading-xsm"
+  }, findAndReplace.findTextbox, "\uFF1A"), /*#__PURE__*/React.createElement(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.createElement("div", {
+    id: "replaceInput",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "find-replace-label text-heading-xsm"
+  }, findAndReplace.replaceTextbox, "\uFF1A"), /*#__PURE__*/React.createElement(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.createElement("div", {
+    className: "flex flex-row gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "find-replace-label"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2 text-body-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "regCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.regCheck,
+    onCheckedChange: function onCheckedChange(e) {
+      return setCheckMode("regCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.regexTextbox)), /*#__PURE__*/React.createElement("div", {
+    id: "caseCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.caseCheck,
+    onCheckedChange: function onCheckedChange(e) {
+      return setCheckMode("caseCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.distinguishTextbox)), /*#__PURE__*/React.createElement("div", {
+    id: "wordCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.wordCheck,
+    onCheckedChange: function onCheckedChange(e) {
+      return setCheckMode("wordCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.wholeTextbox)))), /*#__PURE__*/React.createElement(Divider, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row gap-2 justify-end items-center mb-4"
+  }, /*#__PURE__*/React.createElement(Button, {
+    id: "replaceAllBtn",
+    variant: "secondary",
+    className: "min-w-fit",
+    onClick: function onClick() {
+      setContext(function (draftCtx) {
+        setSelectedCell(undefined);
+        var alertMsg = replaceAll(draftCtx, searchText, replaceText, checkMode);
+        showAlert(alertMsg);
+      });
+    },
+    tabIndex: 0,
+    disabled: searchText.length === 0 || replaceText.length === 0
+  }, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement(Button, {
+    id: "replaceBtn",
+    variant: "secondary",
+    className: "min-w-fit",
+    onClick: function onClick() {
+      return setContext(function (draftCtx) {
+        setSelectedCell(undefined);
+        var alertMsg = replace(draftCtx, searchText, replaceText, checkMode);
+        if (alertMsg != null) {
+          showAlert(alertMsg);
+        }
+      });
+    },
+    tabIndex: 0,
+    disabled: searchText.length === 0 || replaceText.length === 0
+  }, findAndReplace.replaceBtn), /*#__PURE__*/React.createElement(Button, {
+    id: "searchAllBtn",
+    variant: "secondary",
+    className: "min-w-fit",
+    onClick: function onClick() {
+      return setContext(function (draftCtx) {
+        setSelectedCell(undefined);
+        if (!searchText) return;
+        var res = searchAll(draftCtx, searchText, checkMode);
+        setSearchResult(res);
+        if (_.isEmpty(res)) showAlert(findAndReplace.noFindTip);
+      });
+    },
+    tabIndex: 0,
+    disabled: searchText.length === 0
+  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement(Button, {
+    id: "searchNextBtn",
+    variant: "default",
+    className: "min-w-fit",
+    onClick: function onClick() {
+      return setContext(function (draftCtx) {
+        setSearchResult([]);
+        var alertMsg = searchNext(draftCtx, searchText, checkMode);
+        if (alertMsg != null) showAlert(alertMsg);
+      });
+    },
+    tabIndex: 0,
+    disabled: searchText.length === 0
+  }, findAndReplace.findBtn))), searchResult.length > 0 && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+    className: "w-full border-t-[1px] mb-4"
+  }), /*#__PURE__*/React.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.createElement(Table, {
+    id: "searchAllbox"
+  }, /*#__PURE__*/React.createElement(TableHeader, {
+    className: "color-bg-secondary"
+  }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetSheet), /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetCell), /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetValue))), /*#__PURE__*/React.createElement(TableBody, null, searchResult.map(function (v) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      className: cn(_.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 = normalizeSelection(draftCtx, [{
+            row: [v.r, v.r],
+            column: [v.c, v.c]
+          }]);
+          scrollToHighlightCell(draftCtx, v.r, v.c);
+        });
+        setSelectedCell({
+          r: v.r,
+          c: v.c
+        });
+      },
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.sheetName), /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.cellPosition), /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.value));
+  })))))))));
+};
+export default SearchReplace;

package/es/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/{dist/packages/react/src → es}/components/Sheet/index.d.ts

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