@leankylin-sheet/react 6.0.0 → 6.0.1

package/dist/index.umd.js

@@ -21347,7 +21347,7 @@
       c = _ref.c,
       rc = _ref.rc,
       originText = _ref.originText,
-      originType = _ref.originType,
+      _originType = _ref.originType,
       originAddress = _ref.originAddress,
       isEditing = _ref.isEditing,
       position = _ref.position,
@@ -21355,7 +21355,8 @@
     var _useContext = React.useContext(WorkbookContext),
       context = _useContext.context,
       setContext = _useContext.setContext,
-      refs = _useContext.refs;
+      refs = _useContext.refs,
+      settings = _useContext.settings;
     var _useState = React.useState(originText),
       _useState2 = _slicedToArray(_useState, 2),
       linkText = _useState2[0],
@@ -21364,10 +21365,19 @@
       _useState4 = _slicedToArray(_useState3, 2),
       linkAddress = _useState4[0],
       setLinkAddress = _useState4[1];
+    var originType = _originType || settings.detailLinkType || "webpage";
     var _useState5 = React.useState(originType),
       _useState6 = _slicedToArray(_useState5, 2),
       linkType = _useState6[0],
       setLinkType = _useState6[1];
+    var _useState7 = React.useState(function () {
+        var _origin$payload;
+        var origin = core.getCellHyperlink(context, r, c);
+        return (_origin$payload = origin === null || origin === void 0 ? void 0 : origin.payload) !== null && _origin$payload !== void 0 ? _origin$payload : {};
+      }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      customPayload = _useState8[0],
+      setCustomPayload = _useState8[1];
     var _locale = core.locale(context),
       insertLink = _locale.insertLink,
       linkTypeList = _locale.linkTypeList,
@@ -21378,9 +21388,65 @@
     }]));
     var skipCellRangeSet = React.useRef(true);
     var isLinkAddressValid = core.isLinkValid(context, linkType, linkAddress);
-    var tooltip = /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "validation-input-tip"
-    }, isLinkAddressValid.tooltip);
+    var mergedLinkTypeList = React.useMemo(function () {
+      var _settings$customLinkT;
+      var customs = (_settings$customLinkT = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT !== void 0 ? _settings$customLinkT : [];
+      if (customs.length === 0) return linkTypeList;
+      var builtinTypes = new Set(linkTypeList.map(function (it) {
+        return it.value;
+      }));
+      var extra = customs.filter(function (it) {
+        return it.type && !builtinTypes.has(it.type);
+      }).map(function (it) {
+        return {
+          text: it.text,
+          value: it.type
+        };
+      });
+      return [].concat(_toConsumableArray(extra), _toConsumableArray(linkTypeList));
+    }, [settings === null || settings === void 0 ? void 0 : settings.customLinkTypes, linkTypeList]);
+    var customLinkTypeMap = React.useMemo(function () {
+      var _settings$customLinkT2;
+      var m = {};
+      ((_settings$customLinkT2 = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT2 !== void 0 ? _settings$customLinkT2 : []).forEach(function (it) {
+        if (it.type) m[it.type] = it;
+      });
+      return m;
+    }, [settings === null || settings === void 0 ? void 0 : settings.customLinkTypes]);
+    var currentCustomConfig = customLinkTypeMap[linkType];
+    var isCustomTypeValid = React.useMemo(function () {
+      if (!currentCustomConfig) return true;
+      if (!currentCustomConfig.onSave) return true;
+      var next = currentCustomConfig.onSave({
+        linkText: linkText,
+        linkAddress: linkAddress,
+        position: {
+          r: r,
+          c: c
+        },
+        origin: function () {
+          var o = core.getCellHyperlink(context, r, c);
+          return o ? {
+            linkType: o.linkType,
+            linkAddress: o.linkAddress,
+            payload: o.payload
+          } : undefined;
+        }()
+      });
+      return next !== undefined;
+    }, [currentCustomConfig, linkText, linkAddress, r, c, context]);
+    var canSubmit = !currentCustomConfig || isCustomTypeValid ? isLinkAddressValid.isValid : false;
+    var tooltip = function () {
+      var text;
+      if (currentCustomConfig) {
+        text = isCustomTypeValid ? "" : insertLink.tooltipInfo1 || "";
+      } else {
+        text = isLinkAddressValid.tooltip;
+      }
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "validation-input-tip"
+      }, text);
+    }();
     var hideLinkCard = React.useCallback(function () {
       lodash.set(refs.globalCache, "linkCard.mouseEnter", false);
       setContext(function (draftCtx) {
@@ -21442,10 +21508,13 @@
       }));
     }, []);
     React.useLayoutEffect(function () {
+      var _origin$payload2;
       setLinkAddress(originAddress);
       setLinkText(originText);
       setLinkType(originType);
-    }, [rc, originAddress, originText, originType]);
+      var origin = core.getCellHyperlink(context, r, c);
+      setCustomPayload((_origin$payload2 = origin === null || origin === void 0 ? void 0 : origin.payload) !== null && _origin$payload2 !== void 0 ? _origin$payload2 : {});
+    }, [rc, originAddress, originText, originType, r, c, context]);
     React.useLayoutEffect(function () {
       if (selectingCellRange) {
         skipCellRangeSet.current = true;
@@ -21464,6 +21533,7 @@
       }
     }, [context, selectingCellRange]);
     if (!isEditing) {
+      var toolbarCustomConfig = customLinkTypeMap[originType];
       return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
         onKeyDown: function onKeyDown(e) {
           e.stopPropagation();
@@ -21475,16 +21545,35 @@
         }
       }), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "link-content",
-        onClick: function onClick() {
+        onClick: function onClick(reactEvent) {
+          var _getCellHyperlink, _toolbarCustomConfig$, _settings$hooks, _settings$hooks$onHyp;
+          var payload = (_getCellHyperlink = core.getCellHyperlink(context, r, c)) === null || _getCellHyperlink === void 0 ? void 0 : _getCellHyperlink.payload;
+          var clickInfo = {
+            linkType: originType,
+            linkAddress: originAddress,
+            payload: payload,
+            position: {
+              r: r,
+              c: c,
+              sheetId: context.currentSheetId
+            },
+            event: reactEvent
+          };
+          var userResult = toolbarCustomConfig === null || toolbarCustomConfig === void 0 ? void 0 : (_toolbarCustomConfig$ = toolbarCustomConfig.onClick) === null || _toolbarCustomConfig$ === void 0 ? void 0 : _toolbarCustomConfig$.call(toolbarCustomConfig, clickInfo);
+          settings === null || settings === void 0 ? void 0 : (_settings$hooks = settings.hooks) === null || _settings$hooks === void 0 ? void 0 : (_settings$hooks$onHyp = _settings$hooks.onHyperlinkClick) === null || _settings$hooks$onHyp === void 0 ? void 0 : _settings$hooks$onHyp.call(_settings$hooks, clickInfo);
+          if (userResult === false) {
+            hideLinkCard();
+            return;
+          }
           setContext(function (draftCtx) {
-            return core.goToLink(draftCtx, r, c, linkType, linkAddress, refs.scrollbarX.current, refs.scrollbarY.current);
+            return core.goToLink(draftCtx, r, c, originType, originAddress, refs.scrollbarX.current, refs.scrollbarY.current);
           });
         }
-      }, linkType === "webpage" ? insertLink.openLink : core.replaceHtml(insertLink.goTo, {
-        linkAddress: linkAddress
+      }, originType === "webpage" ? insertLink.openLink : core.replaceHtml(insertLink.goTo, {
+        linkAddress: originAddress
       })), context.allowEdit === true && /*#__PURE__*/React__default['default'].createElement("div", {
         className: "divider"
-      }), context.allowEdit === true && linkType === "webpage" && renderToolbarButton("copy", function () {
+      }), context.allowEdit === true && originType === "webpage" && renderToolbarButton("copy", function () {
         navigator.clipboard.writeText(originAddress);
         hideLinkCard();
       }), context.allowEdit === true && renderToolbarButton("pencil", function () {
@@ -21563,18 +21652,23 @@
       className: "leankylin-link-modify-select",
       value: linkType,
       onChange: function onChange(e) {
-        if (e.target.value === "sheet") {
+        var next = e.target.value;
+        var nextCustomConfig = customLinkTypeMap[next];
+        if (next === "sheet") {
           if (!linkText) {
             setLinkText(context.luckysheetfile[0].name);
           }
           setLinkAddress(context.luckysheetfile[0].name);
+        } else if (nextCustomConfig) {
+          setLinkAddress("");
+          setCustomPayload({});
         } else {
           setLinkAddress("");
         }
-        if (e.target.value === "cellrange") setRangeModalVisible(true);
-        setLinkType(e.target.value);
+        if (next === "cellrange") setRangeModalVisible(true);
+        setLinkType(next);
       }
-    }, linkTypeList.map(function (type) {
+    }, mergedLinkTypeList.map(function (type) {
       return /*#__PURE__*/React__default['default'].createElement("option", {
         key: type.value,
         value: type.value
@@ -21620,11 +21714,63 @@
         key: sheet.id,
         value: sheet.name
       }, sheet.name);
+    })), tooltip)), currentCustomConfig && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, currentCustomConfig.render ? currentCustomConfig.render({
+      value: linkAddress,
+      position: {
+        r: r,
+        c: c
+      },
+      onChange: function onChange(v) {
+        return setLinkAddress(v);
+      },
+      setPayload: function setPayload(next) {
+        setCustomPayload(function (prev) {
+          return typeof next === "function" ? next(prev) : next;
+        });
+      },
+      payload: customPayload,
+      ctx: {
+        context: context,
+        setContext: setContext,
+        settings: settings
+      }
+    }) : ( /*#__PURE__*/React__default['default'].createElement("input", {
+      className: "leankylin-link-modify-input ".concat(canSubmit ? "" : "error-input"),
+      spellCheck: "false",
+      value: linkAddress,
+      onChange: function onChange(e) {
+        return setLinkAddress(e.target.value);
+      }
     })), tooltip))), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "modal-footer"
     }, renderBottomButton(function () {
-      if (!isLinkAddressValid.isValid) return;
+      if (!canSubmit) return;
       lodash.set(refs.globalCache, "linkCard.mouseEnter", false);
+      if (currentCustomConfig === null || currentCustomConfig === void 0 ? void 0 : currentCustomConfig.onSave) {
+        var origin = function () {
+          var o = core.getCellHyperlink(context, r, c);
+          return o ? {
+            linkType: o.linkType,
+            linkAddress: o.linkAddress,
+            payload: o.payload
+          } : undefined;
+        }();
+        var saved = currentCustomConfig.onSave({
+          linkText: linkText,
+          linkAddress: linkAddress,
+          position: {
+            r: r,
+            c: c
+          },
+          origin: origin
+        });
+        if (!saved) return;
+        setContext(function (draftCtx) {
+          var _saved$payload;
+          return core.saveHyperlink(draftCtx, r, c, linkText || saved.linkAddress, saved.linkType, saved.linkAddress, _objectSpread2(_objectSpread2({}, customPayload), (_saved$payload = saved.payload) !== null && _saved$payload !== void 0 ? _saved$payload : {}));
+        });
+        return;
+      }
       setContext(function (draftCtx) {
         return core.saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
       });
@@ -23501,10 +23647,30 @@
       if (link == null) {
         debouncedShowLinkCard(globalCache, rc.r, rc.c, false);
       } else {
+        var _settings$customLinkT, _customConfig$onHover, _settings$hooks, _settings$hooks$onHyp;
         core.showLinkCard(ctx, rc.r, rc.c, false);
         debouncedShowLinkCard(globalCache, rc.r, rc.c, false, true);
+        var payload = link.payload;
+        var customConfigMap = ((_settings$customLinkT = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT !== void 0 ? _settings$customLinkT : []).reduce(function (acc, it) {
+          if (it.type) acc[it.type] = it;
+          return acc;
+        }, {});
+        var customConfig = customConfigMap[link.linkType];
+        var hoverInfo = {
+          linkType: link.linkType,
+          linkAddress: link.linkAddress,
+          payload: payload,
+          position: {
+            r: rc.r,
+            c: rc.c,
+            sheetId: ctx.currentSheetId
+          },
+          event: e
+        };
+        customConfig === null || customConfig === void 0 ? void 0 : (_customConfig$onHover = customConfig.onHover) === null || _customConfig$onHover === void 0 ? void 0 : _customConfig$onHover.call(customConfig, hoverInfo);
+        settings === null || settings === void 0 ? void 0 : (_settings$hooks = settings.hooks) === null || _settings$hooks === void 0 ? void 0 : (_settings$hooks$onHyp = _settings$hooks.onHyperlinkHover) === null || _settings$hooks$onHyp === void 0 ? void 0 : _settings$hooks$onHyp.call(_settings$hooks, hoverInfo);
       }
-    }, [debouncedShowLinkCard]);
+    }, [debouncedShowLinkCard, settings]);
     var lastHoverCellRef = React.useRef(null);
     var onMouseMove = React.useCallback(function (nativeEvent) {
       var _gc$commentBox, _gc$commentBox2, _gc$searchDialog, _gc$linkCard;