@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/es/components/DuneChartsInputModal/duneChartsInputModal.css

@@ -0,0 +1,98 @@
+.custom-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  height: 100vh;
+  width: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.input-modal {
+  position: fixed;
+  top: 17.5%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 0.75rem;
+  background-color: #ffffff;
+  padding: 0;
+  border: none;
+  box-shadow: 0px 8px 32px 0px #00000026;
+  animation: fadeIn 0.2s ease-in-out;
+  max-width: 480px;
+}
+
+.modal-header {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  height: 52px;
+  width: 100%;
+}
+
+.modal-header svg {
+  width: 20px;
+  height: 20px;
+}
+
+.fetch-url-button {
+  cursor: pointer;
+}
+
+.modal-input {
+  border: none;
+  padding: 0;
+  outline: none;
+  user-select: text;
+  max-width: 218px;
+  flex: 1;
+}
+
+@media (min-width: 768px) {
+  .modal-input {
+    max-width: 400px;
+    width: 380px !important;
+  }
+}
+
+.modal-input:disabled {
+  opacity: 1;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 16px;
+}
+
+.modal-button {
+  width: 100%;
+  margin: 8px;
+}
+
+.modal-error-message {
+  color: #ef4e2f;
+  background: #fff5f5;
+  margin: 8px 16px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 400;
+}

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

@@ -1,13 +1,13 @@
-import React from "react";
-import "./index.css";
-interface DunePreviewProps {
-    url: string;
-    position: {
-        left: number;
-        top: number;
-    };
-    onKeepAsLink: () => void;
-    onEmbed: () => void;
-}
-declare const DunePreview: React.FC<DunePreviewProps>;
-export default DunePreview;
+import React from "react";
+import "./index.css";
+interface DunePreviewProps {
+    url: string;
+    position: {
+        left: number;
+        top: number;
+    };
+    onKeepAsLink: () => void;
+    onEmbed: () => void;
+}
+declare const DunePreview: React.FC<DunePreviewProps>;
+export default DunePreview;

package/es/components/DunePreview/DunePreview.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { sanitizeDuneUrl } from "@fileverse-dev/fortune-core";
+import "./index.css";
+var DunePreview = function DunePreview(_a) {
+  var url = _a.url,
+    position = _a.position,
+    onKeepAsLink = _a.onKeepAsLink,
+    onEmbed = _a.onEmbed;
+  var embedUrl = sanitizeDuneUrl(url);
+  if (!embedUrl) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dune-preview",
+    style: {
+      left: position.left,
+      top: position.top
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dune-preview-header"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "fortune-dune-preview-title"
+  }, "Detected Dune chart link")), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dune-preview-content"
+  }, /*#__PURE__*/React.createElement("iframe", {
+    src: embedUrl,
+    title: "Dune Chart Preview",
+    style: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    }
+  })), /*#__PURE__*/React.createElement("p", null, "Do you want to insert Dune chart?"), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dune-preview-footer"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onKeepAsLink,
+    className: "fortune-dune-preview-button"
+  }, "Keep as Link"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onEmbed,
+    className: "fortune-dune-preview-button primary"
+  }, "Embed")));
+};
+export default DunePreview;

package/es/components/DunePreview/index.css

@@ -0,0 +1,57 @@
+.fortune-dune-preview {
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #e8ebec;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  width: 270px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 8px;
+}
+
+.fortune-dune-preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fortune-dune-preview-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #363b3f;
+}
+
+.fortune-dune-preview-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid #f8f9fa;
+}
+
+.fortune-dune-preview-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.fortune-dune-preview-button {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 80px;
+}
+
+.fortune-dune-preview-button:hover {
+  background-color: #f5f5f5;
+}
+
+.fortune-dune-preview-button.primary {
+  background-color: #000000;
+  color: #fff;
+}

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

@@ -1,5 +1,5 @@
-import React from "react";
-declare const FilterOptions: React.FC<{
-    getContainer: () => HTMLDivElement;
-}>;
-export default FilterOptions;
+import React from "react";
+declare const FilterOptions: React.FC<{
+    getContainer: () => HTMLDivElement;
+}>;
+export default FilterOptions;

package/es/components/FilterOption/index.js

@@ -0,0 +1,121 @@
+var __assign = this && this.__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);
+};
+import { createFilterOptions, fixColumnStyleOverflowInFreeze, fixRowStyleOverflowInFreeze, getSheetIndex } from "@fileverse-dev/fortune-core";
+import _ from "lodash";
+import React, { useCallback, useContext, useEffect } from "react";
+import WorkbookContext from "../../context";
+import SVGIcon from "../SVGIcon";
+var FilterOptions = function FilterOptions(_a) {
+  var _b, _c, _d, _e;
+  var getContainer = _a.getContainer;
+  var _f = useContext(WorkbookContext),
+    context = _f.context,
+    setContext = _f.setContext,
+    refs = _f.refs;
+  var filterOptions = context.filterOptions,
+    currentSheetId = context.currentSheetId,
+    filter = context.filter,
+    visibledatarow = context.visibledatarow,
+    visibledatacolumn = context.visibledatacolumn;
+  var sheetIndex = getSheetIndex(context, context.currentSheetId);
+  var _g = context.luckysheetfile[sheetIndex],
+    filter_select = _g.filter_select,
+    frozen = _g.frozen;
+  useEffect(function () {
+    setContext(function (draftCtx) {
+      var sheetIdx = getSheetIndex(draftCtx, draftCtx.currentSheetId);
+      if (sheetIdx == null) return;
+      draftCtx.luckysheet_filter_save = draftCtx.luckysheetfile[sheetIdx].filter_select;
+      draftCtx.filter = draftCtx.luckysheetfile[sheetIdx].filter || {};
+      createFilterOptions(draftCtx, draftCtx.luckysheet_filter_save, undefined);
+    });
+  }, [visibledatarow, visibledatacolumn, setContext, currentSheetId, filter_select]);
+  var showFilterContextMenu = useCallback(function (v, i) {
+    if (filterOptions == null) return;
+    setContext(function (draftCtx) {
+      var _a, _b;
+      if (((_a = draftCtx.filterContextMenu) === null || _a === void 0 ? void 0 : _a.col) === filterOptions.startCol + i) return;
+      draftCtx.filterContextMenu = {
+        x: v.left + draftCtx.rowHeaderWidth - refs.scrollbarX.current.scrollLeft,
+        y: v.top + 23 + draftCtx.toolbarHeight + draftCtx.calculatebarHeight + draftCtx.columnHeaderHeight - refs.scrollbarY.current.scrollTop,
+        col: filterOptions.startCol + i,
+        startRow: filterOptions.startRow,
+        endRow: filterOptions.endRow,
+        startCol: filterOptions.startCol,
+        endCol: filterOptions.endCol,
+        hiddenRows: _.keys((_b = draftCtx.filter[i]) === null || _b === void 0 ? void 0 : _b.rowhidden).map(function (r) {
+          return parseInt(r, 10);
+        }),
+        listBoxMaxHeight: 400
+      };
+    });
+  }, [filterOptions, getContainer, refs.scrollbarX, refs.scrollbarY, setContext]);
+  var freezeType = frozen === null || frozen === void 0 ? void 0 : frozen.type;
+  var frozenColumns = -1;
+  var frozenRows = -1;
+  if (freezeType === "row") frozenRows = 0;else if (freezeType === "column") frozenColumns = 0;else if (freezeType === "both") {
+    frozenColumns = 0;
+    frozenRows = 0;
+  } else {
+    frozenColumns = ((_b = frozen === null || frozen === void 0 ? void 0 : frozen.range) === null || _b === void 0 ? void 0 : _b.column_focus) || -1;
+    frozenRows = ((_c = frozen === null || frozen === void 0 ? void 0 : frozen.range) === null || _c === void 0 ? void 0 : _c.row_focus) || -1;
+  }
+  return filterOptions == null ? (/*#__PURE__*/React.createElement("div", null)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: "luckysheet-filter-selected-sheet",
+    className: "luckysheet-cell-selected luckysheet-filter-selected",
+    style: _.assign({
+      left: filterOptions.left,
+      width: filterOptions.width,
+      top: filterOptions.top,
+      height: filterOptions.height,
+      display: "block"
+    }, fixRowStyleOverflowInFreeze(context, filterOptions.startRow, filterOptions.endRow, (_d = refs.globalCache.freezen) === null || _d === void 0 ? void 0 : _d[context.currentSheetId]), fixColumnStyleOverflowInFreeze(context, filterOptions.startCol, filterOptions.endCol, (_e = refs.globalCache.freezen) === null || _e === void 0 ? void 0 : _e[context.currentSheetId]))
+  }), filterOptions.items.map(function (v, i) {
+    var _a, _b;
+    var filterParam = filter[i];
+    var columnOverflowFreezeStyle = fixColumnStyleOverflowInFreeze(context, i + filterOptions.startCol, i + filterOptions.startCol, (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]);
+    var rowOverflowFreezeStyle = fixRowStyleOverflowInFreeze(context, filterOptions.startRow, filterOptions.startRow, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]);
+    var col = visibledatacolumn[v.col];
+    var col_pre = v.col > 0 ? visibledatacolumn[v.col - 1] : 0;
+    var left = v.col <= frozenColumns && columnOverflowFreezeStyle.left ? columnOverflowFreezeStyle.left + col - col_pre - 20 : v.left;
+    var top = filterOptions.startRow <= frozenRows && rowOverflowFreezeStyle.top ? rowOverflowFreezeStyle.top : v.top;
+    var v_adjusted = __assign(__assign({}, v), {
+      left: left,
+      top: top
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        showFilterContextMenu(v_adjusted, i);
+      },
+      onDoubleClick: function onDoubleClick(e) {
+        return e.stopPropagation();
+      },
+      tabIndex: 0,
+      key: i,
+      style: _.assign(rowOverflowFreezeStyle, columnOverflowFreezeStyle, {
+        left: left,
+        top: top,
+        height: undefined,
+        width: undefined
+      }),
+      className: "luckysheet-filter-options ".concat(filterParam == null ? "" : "luckysheet-filter-options-active")
+    }, /*#__PURE__*/React.createElement(SVGIcon, {
+      name: "filter",
+      width: 15,
+      height: 15
+    }));
+  })));
+};
+export default FilterOptions;

package/es/components/FormatSearch/index.css

@@ -0,0 +1,19 @@
+.listBox {
+  display: flex;
+  justify-content: space-between;
+}
+
+.inpbox {
+  margin-bottom: 10px;
+}
+
+.decimal-places-input {
+  width: 70px;
+}
+
+.format-list {
+  width: 300px;
+  height: 170px;
+  border: 1px solid #d4d4d4;
+  overflow-y: scroll;
+}

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

@@ -1,6 +1,6 @@
-import React from "react";
-import "./index.css";
-export declare const FormatSearch: React.FC<{
-    type: "currency" | "date" | "number";
-    onCancel: () => void;
-}>;
+import React from "react";
+import "./index.css";
+export declare const FormatSearch: React.FC<{
+    type: "currency" | "date" | "number";
+    onCancel: () => void;
+}>;

package/es/components/FormatSearch/index.js

@@ -0,0 +1,133 @@
+import React, { useContext, useState, useCallback, useMemo } from "react";
+import { cancelNormalSelected, getSheetIndex, locale, update } from "@fileverse-dev/fortune-core";
+import { Button, Divider, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
+import _ from "lodash";
+import WorkbookContext from "../../context";
+import "./index.css";
+import { useDialog } from "../../hooks/useDialog";
+export var FormatSearch = function FormatSearch(_a) {
+  var _b, _c;
+  var type = _a.type,
+    _onCancel = _a.onCancel;
+  var _d = useContext(WorkbookContext),
+    context = _d.context,
+    setContext = _d.setContext,
+    cellInput = _d.refs.cellInput;
+  var _e = useState(2),
+    decimalPlace = _e[0],
+    setDecimalPlace = _e[1];
+  var _f = useState(0),
+    selectedFormatIndex = _f[0],
+    setSelectedFormatIndex = _f[1];
+  var _g = locale(context),
+    button = _g.button,
+    format = _g.format,
+    currencyDetail = _g.currencyDetail,
+    dateFmtList = _g.dateFmtList;
+  var showDialog = useDialog().showDialog;
+  var toolbarFormatAll = useMemo(function () {
+    return {
+      currency: currencyDetail,
+      date: dateFmtList,
+      number: []
+    };
+  }, [currencyDetail, dateFmtList]);
+  var toolbarFormat = useMemo(function () {
+    return toolbarFormatAll[type];
+  }, [toolbarFormatAll, type]);
+  var onConfirm = useCallback(function () {
+    if (decimalPlace < 0 || decimalPlace > 9) {
+      _onCancel();
+      showDialog(format.tipDecimalPlaces, "ok");
+      return;
+    }
+    setContext(function (ctx) {
+      var index = getSheetIndex(ctx, ctx.currentSheetId);
+      if (_.isNil(index)) return;
+      var selectedFormat = toolbarFormat[selectedFormatIndex].value;
+      var formatString = "".concat(selectedFormat, " #,##0.").concat("0".repeat(decimalPlace));
+      _.forEach(ctx.luckysheet_select_save, function (selection) {
+        var _a, _b, _c, _d;
+        for (var r = selection.row[0]; r <= selection.row[1]; r += 1) {
+          for (var c = selection.column[0]; c <= selection.column[1]; c += 1) {
+            if (((_a = ctx.luckysheetfile[index].data) === null || _a === void 0 ? void 0 : _a[r][c]) && ((_d = (_c = (_b = ctx.luckysheetfile[index].data) === null || _b === void 0 ? void 0 : _b[r][c]) === null || _c === void 0 ? void 0 : _c.ct) === null || _d === void 0 ? void 0 : _d.t) === "n") {
+              ctx.luckysheetfile[index].data[r][c].ct.fa = formatString;
+              ctx.luckysheetfile[index].data[r][c].m = update(formatString, ctx.luckysheetfile[index].data[r][c].v);
+            }
+          }
+        }
+      });
+      _onCancel();
+    });
+  }, [_onCancel, decimalPlace, format.tipDecimalPlaces, selectedFormatIndex, setContext, showDialog, toolbarFormat]);
+  var onCancel = useCallback(function () {
+    setContext(function (ctx) {
+      cancelNormalSelected(ctx);
+      if (cellInput.current) {
+        cellInput.current.innerHTML = "";
+      }
+    });
+    _onCancel();
+  }, [_onCancel, cellInput, setContext]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "format-search"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, type === "currency" && (/*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-body-sm",
+    style: {
+      width: "180px"
+    }
+  }, format.decimalPlaces, "\uFF1A"), /*#__PURE__*/React.createElement(TextField, {
+    className: "w-full",
+    type: "number",
+    min: 0,
+    max: 9,
+    defaultValue: 2,
+    onChange: function onChange(e) {
+      setDecimalPlace(parseInt(e.target.value, 10));
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/React.createElement(Select, {
+    value: String(selectedFormatIndex),
+    onValueChange: function onValueChange(value) {
+      setSelectedFormatIndex(Number(value));
+    }
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(SelectValue, {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", null, (_b = toolbarFormat[selectedFormatIndex]) === null || _b === void 0 ? void 0 : _b.name), /*#__PURE__*/React.createElement("span", {
+    className: "text-body-sm color-text-secondary ml-1"
+  }, "(", (_c = toolbarFormat[selectedFormatIndex]) === null || _c === void 0 ? void 0 : _c.value, ")"))), /*#__PURE__*/React.createElement(SelectContent, null, toolbarFormat.map(function (v, index) {
+    return /*#__PURE__*/React.createElement(SelectItem, {
+      key: v.name,
+      value: String(index)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex justify-between w-full items-center gap-2"
+    }, /*#__PURE__*/React.createElement("span", null, v.name), /*#__PURE__*/React.createElement("span", {
+      className: "text-body-sm color-text-secondary"
+    }, "(", v.value, ")")));
+  }))))), /*#__PURE__*/React.createElement(Divider, {
+    className: "w-full border-t-[1px] my-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-end"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onCancel,
+    tabIndex: 0
+  }, button.cancel), /*#__PURE__*/React.createElement(Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onConfirm,
+    tabIndex: 0
+  }, button.confirm)));
+};

package/es/components/FormulaSearch/index.css

@@ -0,0 +1,65 @@
+/*函数公式查找样式*/
+#luckysheet-search-formula {
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .inpbox {
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .inpbox div {
+  display: block;
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .inpbox input {
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  border: 1px solid #d4d4d4;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .selbox {
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .selbox select {
+  width: 50%;
+  height: 24px;
+  line-height: 24px;
+  border: 1px solid #d4d4d4;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .listbox label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+#formulaTypeList {
+  width: 300px;
+  height: 170px;
+  border: 1px solid #d4d4d4;
+  overflow-y: scroll;
+}
+
+.formulaList {
+  width: 300px;
+  height: 170px;
+  border: 1px solid #d4d4d4;
+  overflow-y: scroll;
+}
+
+.listBox {
+  padding: 5px;
+  border-bottom: 1px solid #d4d4d4;
+}
+
+.listBox.on {
+  background-color: #8c89fe;
+  color: #fff;
+}

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

@@ -1,5 +1,5 @@
-import React from "react";
-import "./index.css";
-export declare const FormulaSearch: React.FC<{
-    onCancel: () => void;
-}>;
+import React from "react";
+import "./index.css";
+export declare const FormulaSearch: React.FC<{
+    onCancel: () => void;
+}>;