@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/es/components/SheetOverlay/ContentEditable.js

@@ -0,0 +1,74 @@
+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);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import React, { useCallback, useEffect, useRef } from "react";
+import _ from "lodash";
+var ContentEditable = function ContentEditable(_a) {
+  var props = __rest(_a, []);
+  var lastHtml = useRef("");
+  var root = useRef(null);
+  var autoFocus = props.autoFocus,
+    initialContent = props.initialContent,
+    onChange = props.onChange;
+  useEffect(function () {
+    var _a;
+    if (autoFocus) {
+      (_a = root.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [autoFocus]);
+  useEffect(function () {
+    if (initialContent && root.current != null) {
+      root.current.innerHTML = initialContent;
+    }
+  }, [initialContent]);
+  var fnEmitChange = useCallback(function (__, isBlur) {
+    var html;
+    if (root.current != null) {
+      html = root.current.innerHTML;
+    }
+    if (onChange && html !== lastHtml.current) {
+      onChange(html || "", isBlur);
+    }
+    lastHtml.current = html || "";
+  }, [root, onChange]);
+  var innerRef = props.innerRef,
+    _onBlur = props.onBlur;
+  var allowEdit = props.allowEdit;
+  if (_.isNil(allowEdit)) allowEdit = true;
+  return /*#__PURE__*/React.createElement("div", __assign({
+    onDoubleClick: function onDoubleClick(e) {
+      return e.stopPropagation();
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, _.omit(props, "innerRef", "onChange", "html", "onBlur", "autoFocus", "allowEdit", "initialContent"), {
+    ref: function ref(e) {
+      root.current = e;
+      innerRef === null || innerRef === void 0 ? void 0 : innerRef(e);
+    },
+    tabIndex: 0,
+    onInput: fnEmitChange,
+    onBlur: function onBlur(e) {
+      fnEmitChange(null, true);
+      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
+    },
+    contentEditable: allowEdit
+  }));
+};
+export default ContentEditable;

package/es/components/SheetOverlay/FormulaHint/index.css

@@ -0,0 +1,180 @@
+.luckysheet-formula-help-c {
+  position: absolute;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  color: #535353;
+  font-size: 12px;
+  background: #fff;
+  z-index: 1003;
+  width: 300px;
+}
+
+/* .luckysheet-formula-help-c .luckysheet-formula-help-content {
+  max-height: 300px;
+  overflow-y: scroll;
+} */
+
+.luckysheet-formula-help-content-example {
+  margin-top: 5px;
+}
+
+.luckysheet-formula-help-title {
+  display: block;
+  border-top: 1px solid #ebebeb;
+  border-bottom: 1px solid #ebebeb;
+  background: #f5f5f5;
+  padding: 2px 10px;
+  font-size: 14px;
+}
+
+.luckysheet-formula-help-title,
+.luckysheet-formula-search-item-active {
+  padding: 10px !important;
+  font-size: small;
+  /* background: #f8f9fa !important; */
+  font-weight: 600;
+  border-bottom: 0px !important;
+  border-top: 0px !important;
+}
+
+.luckysheet-formula-help-c,
+.luckysheet-formula-search-c {
+  padding: 6px;
+  user-select: text;
+  border-radius: 10px;
+  top: 25px;
+  background: #ffff;
+  min-width: 300px;
+  /* max-width: 450px; */
+  border: 1px solid lavender;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#luckysheet-formula-help-c {
+  border-radius: 10px;
+  top: 25px;
+  background: #ffff;
+}
+
+.luckysheet-formula-help-title-formula {
+  width: fit-content;
+}
+
+.luckysheet-formula-help-content {
+  background-color: white;
+  /* margin: 0px 8px 8px 8px; */
+  padding: 2px;
+  border-radius: 0px 0px 10px 10px;
+}
+
+.luckysheet-formula-help-content-param,
+.luckysheet-formula-help-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.luckysheet-formula-help-content-param {
+  padding-top: 4px;
+  border-top: 1px solid lightgrey;
+}
+
+.luckysheet-formula-help-content-example {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.luckysheet-arguments-help-section-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.example-title {
+  color: var(--color-text-secondary, #77818A);
+
+/* fv/text/helper/sm-bold */
+font-family: "Helvetica Neue";
+font-size: var(--font-size-2xsm, 12px);
+font-style: normal;
+font-weight: 500;
+line-height: 16px; /* 133.333% */
+}
+
+.example-value {
+  color: var(--color-text-default, #363B3F);
+
+/* fv/text/helper/sm */
+font-family: "Helvetica Neue";
+font-size: var(--font-size-2xsm, 12px);
+font-style: normal;
+font-weight: 400;
+line-height: 16px; /* 133.333% */
+}
+.example-value-code {
+    color: var(--color-text-default, #363B3F);
+
+font-size: var(--font-size-2xsm, 12px);
+font-style: normal;
+font-weight: 400;
+line-height: 16px; /* 133.333% */
+}
+
+.formula-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.luckysheet-formula-help-title-formula {
+  width: 250px;
+  word-break: break-word;
+}
+
+.luckysheet-arguments-help-section {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  color: #222;
+}
+
+.luckysheet-arguments-help-section-title {
+  padding: 1px 10px;
+  color: #666;
+}
+
+.luckysheet-arguments-help-parameter-content {
+  padding: 1px 0px;
+  display: inline-block;
+  word-wrap: break-word;
+}
+
+.luckysheet-arguments-help-formula {
+  padding: 1px 10px;
+  font-size: 14px;
+}
+
+.luckysheet-arguments-help-parameter-active {
+  background-color: #fff9b2;
+}
+
+.luckysheet-formula-help-collapse {
+  position: absolute;
+  top: 0px;
+  right: 25px;
+  font-size: 16px;
+  cursor: pointer;
+  color: #bbb;
+}
+
+.luckysheet-formula-help-close {
+  position: absolute;
+  top: 0px;
+  right: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  color: #bbb;
+}
+
+.luckysheet-formula-help-close:hover,
+.luckysheet-formula-help-collapse:hover {
+  color: #555;
+}

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

@@ -1,4 +1,4 @@
-import React from "react";
-import "./index.css";
-declare const FormulaHint: React.FC<React.HTMLAttributes<HTMLDivElement>>;
-export default FormulaHint;
+import React from "react";
+import "./index.css";
+declare const FormulaHint: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export default FormulaHint;

package/es/components/SheetOverlay/FormulaHint/index.js

@@ -0,0 +1,348 @@
+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 { locale } from "@fileverse-dev/fortune-core";
+import { Button, TextField, LucideIcon } from "@fileverse/ui";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import WorkbookContext from "../../../context";
+import "./index.css";
+var FormulaHint = function FormulaHint(props) {
+  var _a;
+  var context = useContext(WorkbookContext).context;
+  var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
+  var formulaMore = locale(context).formulaMore;
+  var fn = context.formulaCache.functionlistMap[context.functionHint];
+  var _b = useState(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
+    API_KEY = _b[0],
+    setAPI_KEY = _b[1];
+  var _c = useState(!API_KEY),
+    showAPInput = _c[0],
+    setShowAPInput = _c[1];
+  var _d = useState(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
+    isKeyAdded = _d[0],
+    setApiKeyAdded = _d[1];
+  var _e = useState(true),
+    showFunctionBody = _e[0],
+    setShouldShowFunctionBody = _e[1];
+  useEffect(function () {
+    if (fn) {
+      setApiKeyAdded(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
+      setAPI_KEY(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY) || "");
+      setShowAPInput(!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
+    }
+  }, [fn]);
+  var apiKeyPlaceholder = {
+    ETHERSCAN_API_KEY: "Etherscan API key"
+  };
+  var hintRef = useRef(null);
+  var _f = useState(0),
+    top = _f[0],
+    setTop = _f[1];
+  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
+    var _a, _b, _c;
+    if (!((_a = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _a === void 0 ? void 0 : _a.toString()) || !((_b = firstSelection.height_move) === null || _b === void 0 ? void 0 : _b.toString()) || !hintRef.current) return;
+    var hintHeight = 360;
+    var inputBottom = firstSelection.top + firstSelection.height_move;
+    var availableBelow = window.innerHeight - inputBottom;
+    var hintAbove = hintHeight > availableBelow;
+    var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
+    var divOffset = ((_c = hintRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0;
+    setTop(hintAbove ? selectionHeight - (divOffset + 30) : selectionHeight + 4);
+  };
+  useEffect(function () {
+    calcuatePopUpPlacement();
+  });
+  useEffect(function () {
+    var el = document.getElementById("function-details");
+    var handleWheel;
+    if (el) {
+      var scrollLockTimeout_1 = null;
+      var cache_1 = {
+        verticalScrollLock: false,
+        horizontalScrollLock: false
+      };
+      handleWheel = function handleWheel(e) {
+        e.preventDefault();
+        var step = 40;
+        var ratio = 1;
+        if (e.deltaY !== 0 && !cache_1.verticalScrollLock) {
+          cache_1.horizontalScrollLock = true;
+          el.scrollTop += (e.deltaY > 0 ? 1 : -1) * step * ratio;
+        } else if (e.deltaX !== 0 && !cache_1.horizontalScrollLock) {
+          cache_1.verticalScrollLock = true;
+          el.scrollLeft += (e.deltaX > 0 ? 1 : -1) * step * ratio;
+        }
+        clearTimeout(scrollLockTimeout_1);
+        scrollLockTimeout_1 = setTimeout(function () {
+          cache_1.verticalScrollLock = false;
+          cache_1.horizontalScrollLock = false;
+        }, 50);
+      };
+      el.addEventListener("wheel", handleWheel, {
+        passive: false
+      });
+    }
+    return function () {
+      if (el && handleWheel) el.removeEventListener("wheel", handleWheel);
+    };
+  }, []);
+  if (!fn) return null;
+  return /*#__PURE__*/React.createElement("div", __assign({}, props, {
+    ref: hintRef,
+    id: "luckysheet-formula-help-c",
+    className: "luckysheet-formula-help-c",
+    style: {
+      top: top,
+      borderWidth: "1px",
+      borderColor: (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) ? fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR : "#F8F9FA",
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      width: "340px",
+      padding: "0px"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-formula-help-close",
+    title: "\u5173\u95ED"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "fa fa-times",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-formula-help-collapse",
+    title: "\u6536\u8D77"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "fa fa-angle-up",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      setShouldShowFunctionBody(!showFunctionBody);
+    },
+    className: "flex cursor-pointer items-center justify-between",
+    style: {
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      padding: "10px",
+      borderRadius: "10px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: " flex-grow  color-text-default"
+  }, /*#__PURE__*/React.createElement("code", {
+    style: {
+      fontWeight: 500
+    },
+    className: "luckysheet-arguments-help-function-name"
+  }, fn.n), /*#__PURE__*/React.createElement("code", {
+    className: "luckysheet-arguments-paren"
+  }, "("), /*#__PURE__*/React.createElement("code", {
+    className: "luckysheet-arguments-parameter-holder"
+  }, fn.p.map(function (param, i) {
+    var name = param.name;
+    if (param.repeat === "y") {
+      name += ", ...";
+    }
+    if (param.require === "o") {
+      name = "[".concat(name, "]");
+    }
+    return /*#__PURE__*/React.createElement("code", {
+      className: "luckysheet-arguments-help-parameter",
+      dir: "auto",
+      key: name
+    }, name, i !== fn.p.length - 1 && ", ");
+  })), /*#__PURE__*/React.createElement("code", {
+    className: "luckysheet-arguments-paren"
+  }, ")")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "end",
+      minWidth: "75px",
+      height: "20px",
+      alignItems: "center",
+      gap: "6px"
+    }
+  }, fn.LOGO && (/*#__PURE__*/React.createElement("img", {
+    src: fn.LOGO,
+    alt: "Service Logo",
+    style: {
+      width: "16px"
+    }
+  })), fn.SECONDARY_LOGO && (/*#__PURE__*/React.createElement("img", {
+    src: fn.SECONDARY_LOGO,
+    alt: "Service Logo",
+    style: {
+      width: "16px"
+    }
+  })), fn.API_KEY && (/*#__PURE__*/React.createElement("div", {
+    style: {
+      borderRadius: "4px",
+      backgroundColor: "".concat(isKeyAdded ? "#177E23" : "#e8ebec"),
+      width: "16px",
+      height: "16px"
+    },
+    className: "flex justify-center"
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "Key",
+    style: {
+      color: isKeyAdded ? "white" : "#77818A",
+      width: "12px",
+      height: "12px"
+    }
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: showFunctionBody ? "ChevronUp" : "ChevronDown",
+    width: 16,
+    height: 16
+  })))), showFunctionBody && (/*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-formula-help-content",
+    id: "function-details",
+    style: {
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      maxHeight: "318px",
+      overflowY: "scroll"
+    }
+  }, fn.API_KEY && (/*#__PURE__*/React.createElement("div", {
+    style: {
+      borderLeft: "4px solid ".concat(isKeyAdded ? "#177E23" : "#fb923c"),
+      backgroundColor: "white",
+      padding: "16px",
+      margin: "4px 4px 0px 4px",
+      borderRadius: "4px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      cursor: "pointer"
+    },
+    onClick: function onClick() {
+      return setShowAPInput(!showAPInput);
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: "0 0 8px 0"
+    },
+    className: "text-heading-xsm color-text-default"
+  }, isKeyAdded ? "API key provided" : "API key is required"), /*#__PURE__*/React.createElement(LucideIcon, {
+    name: showAPInput ? "ChevronUp" : "ChevronDown",
+    width: 24,
+    height: 24
+  })), showAPInput && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "0 0 16px 0"
+    },
+    className: "text-body-sm color-text-default"
+  }, "This function requires an API key. Please paste it below and\n                  press 'Ok'."), /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    value: API_KEY,
+    id: "function-api-key",
+    type: "text",
+    placeholder: apiKeyPlaceholder[fn.API_KEY],
+    onChange: function onChange(e) {
+      setAPI_KEY(e.target.value);
+      setApiKeyAdded(false);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-end mt-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      localStorage.setItem(fn.API_KEY, API_KEY);
+      setApiKeyAdded(true);
+      setShowAPInput(false);
+    },
+    disabled: !API_KEY,
+    className: "min-w-[80px]"
+  }, "Ok"))))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "white",
+      padding: "6px",
+      margin: "4px 4px 0px 4px",
+      borderRadius: "4px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      lineHeight: "16px",
+      fontSize: "12px"
+    },
+    className: "text-body-sm-bold mb-1 color-text-secondary"
+  }, formulaMore.helpExample), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", {
+    style: {
+      overflowWrap: "break-word"
+    },
+    className: "example-value-code"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "luckysheet-arguments-help-function-name"
+  }, fn.n), /*#__PURE__*/React.createElement("span", {
+    className: "luckysheet-arguments-paren"
+  }, "("), /*#__PURE__*/React.createElement("span", {
+    className: "luckysheet-arguments-parameter-holder"
+  }, fn.p.map(function (param, i) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: param.name,
+      className: "luckysheet-arguments-help-parameter",
+      dir: "auto"
+    }, param.example, i !== fn.p.length - 1 && ", ");
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "luckysheet-arguments-paren"
+  }, ")")))), /*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-formula-help-content-detail",
+    style: {
+      paddingBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      lineHeight: "16px",
+      fontSize: "12px",
+      padding: "0px"
+    },
+    className: "text-body-sm-bold mb-1 mt-2 color-text-secondary"
+  }, "About"), /*#__PURE__*/React.createElement("span", {
+    className: "luckysheet-arguments-help-parameter-content text-helper-text-sm"
+  }, fn.d))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: "16px"
+    },
+    className: "luckysheet-formula-help-content-param"
+  }, fn.p.map(function (param) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "",
+      key: param.name
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", null, param.name, param.repeat === "y" && (/*#__PURE__*/React.createElement("span", {
+      className: "luckysheet-arguments-help-argument-info example-value",
+      style: {
+        marginTop: "2px"
+      }
+    }, "...-", formulaMore.allowRepeatText)), param.require === "o" && (/*#__PURE__*/React.createElement("span", {
+      className: "luckysheet-arguments-help-argument-info example-value",
+      style: {
+        marginTop: "2px"
+      }
+    }, "-[", formulaMore.allowOptionText, "]")))), /*#__PURE__*/React.createElement("span", {
+      className: "luckysheet-arguments-help-parameter-content text-helper-text-sm",
+      style: {
+        marginTop: "2px"
+      }
+    }, param.detail));
+  }))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      padding: "8px",
+      borderBottomLeftRadius: "10px",
+      borderBottomRightRadius: "10px"
+    },
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      var _a;
+      (_a = document.getElementById("function-button")) === null || _a === void 0 ? void 0 : _a.click();
+    },
+    className: "color-text-link cursor-pointer text-helper-text-sm"
+  }, "Learn More")));
+};
+export default FormulaHint;