@fileverse-dev/fortune-react 1.0.26 → 1.1.0

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

@@ -1,180 +0,0 @@
-.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/es/components/SheetOverlay/FormulaHint/index.js

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