@fileverse-dev/fortune-react 1.0.2-mod-28 → 1.0.2-mod-30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +169 -80
  2. package/dist/index.esm.css +169 -80
  3. package/dist/index.esm.js +88 -151
  4. package/dist/index.js +87 -150
  5. package/dist/index.umd.css +169 -80
  6. package/dist/index.umd.js +2662 -4413
  7. package/dist/index.umd.min.css +1 -1
  8. package/dist/index.umd.min.js +9 -9
  9. package/package.json +2 -2
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, getFreezeState, toggleFreeze, jfrefreshgrid, handleCopy, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, setCaretPosition, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
1
+ import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, goToLink, replaceHtml, removeHyperlink, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, getRangetxt, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, getFreezeState, toggleFreeze, jfrefreshgrid, handleCopy, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, setCaretPosition, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
2
2
  import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
3
3
  import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
4
4
  import _ from 'lodash';
@@ -1792,8 +1792,7 @@ var LinkEditCard = function LinkEditCard(_ref) {
1792
1792
  originType = _ref.originType,
1793
1793
  originAddress = _ref.originAddress,
1794
1794
  isEditing = _ref.isEditing,
1795
- position = _ref.position,
1796
- selectingCellRange = _ref.selectingCellRange;
1795
+ position = _ref.position;
1797
1796
  var _useContext = useContext(WorkbookContext),
1798
1797
  context = _useContext.context,
1799
1798
  setContext = _useContext.setContext,
@@ -1812,29 +1811,24 @@ var LinkEditCard = function LinkEditCard(_ref) {
1812
1811
  setLinkType = _useState6[1];
1813
1812
  var _locale = locale(context),
1814
1813
  insertLink = _locale.insertLink,
1815
- linkTypeList = _locale.linkTypeList,
1816
- button = _locale.button;
1817
- var lastCell = useRef(normalizeSelection(context, [{
1818
- row: [r, r],
1819
- column: [c, c]
1820
- }]));
1821
- var skipCellRangeSet = useRef(true);
1814
+ linkTypeList = _locale.linkTypeList;
1822
1815
  var isLinkAddressValid = isLinkValid(context, linkType, linkAddress);
1823
- var tooltip = /*#__PURE__*/React.createElement("div", {
1824
- className: "validation-input-tip"
1825
- }, isLinkAddressValid.tooltip);
1816
+ var isButtonDisabled = useMemo(function () {
1817
+ if (!linkText.trim()) return true;
1818
+ if (linkType === "webpage") {
1819
+ return !linkAddress.trim() || !isLinkAddressValid.isValid;
1820
+ }
1821
+ if (linkType === "sheet") {
1822
+ return !linkAddress.trim();
1823
+ }
1824
+ return false;
1825
+ }, [linkText, linkAddress, linkType, isLinkAddressValid.isValid]);
1826
1826
  var hideLinkCard = useCallback(function () {
1827
1827
  _.set(refs.globalCache, "linkCard.mouseEnter", false);
1828
1828
  setContext(function (draftCtx) {
1829
1829
  draftCtx.linkCard = undefined;
1830
1830
  });
1831
1831
  }, [refs.globalCache, setContext]);
1832
- var setRangeModalVisible = useCallback(function (visible) {
1833
- return setContext(function (draftCtx) {
1834
- draftCtx.luckysheet_select_save = lastCell.current;
1835
- if (draftCtx.linkCard != null) draftCtx.linkCard.selectingCellRange = visible;
1836
- });
1837
- }, [setContext]);
1838
1832
  var containerEvent = useMemo(function () {
1839
1833
  return {
1840
1834
  onMouseEnter: function onMouseEnter() {
@@ -1860,19 +1854,6 @@ var LinkEditCard = function LinkEditCard(_ref) {
1860
1854
  }
1861
1855
  };
1862
1856
  }, [refs.globalCache]);
1863
- var renderBottomButton = useCallback(function (onOk, onCancel) {
1864
- return /*#__PURE__*/React.createElement("div", {
1865
- className: "button-group"
1866
- }, /*#__PURE__*/React.createElement("div", {
1867
- className: "button-basic button-default",
1868
- onClick: onCancel,
1869
- tabIndex: 0
1870
- }, button.cancel), /*#__PURE__*/React.createElement("div", {
1871
- className: "button-basic button-primary",
1872
- onClick: onOk,
1873
- tabIndex: 0
1874
- }, button.confirm));
1875
- }, [button]);
1876
1857
  var renderToolbarButton = useCallback(function (iconId, onClick) {
1877
1858
  return /*#__PURE__*/React.createElement("div", {
1878
1859
  className: "fortune-toolbar-button",
@@ -1891,23 +1872,6 @@ var LinkEditCard = function LinkEditCard(_ref) {
1891
1872
  setLinkText(originText);
1892
1873
  setLinkType(originType);
1893
1874
  }, [rc, originAddress, originText, originType]);
1894
- useLayoutEffect(function () {
1895
- if (selectingCellRange) {
1896
- skipCellRangeSet.current = true;
1897
- }
1898
- }, [selectingCellRange]);
1899
- useLayoutEffect(function () {
1900
- if (skipCellRangeSet.current) {
1901
- skipCellRangeSet.current = false;
1902
- return;
1903
- }
1904
- if (selectingCellRange) {
1905
- var len = _.size(context.luckysheet_select_save);
1906
- if (len > 0) {
1907
- setLinkAddress(getRangetxt(context, context.currentSheetId, context.luckysheet_select_save[len - 1], ""));
1908
- }
1909
- }
1910
- }, [context, selectingCellRange]);
1911
1875
  if (!isEditing) {
1912
1876
  return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
1913
1877
  onKeyDown: function onKeyDown(e) {
@@ -1948,69 +1912,16 @@ var LinkEditCard = function LinkEditCard(_ref) {
1948
1912
  });
1949
1913
  }));
1950
1914
  }
1951
- return selectingCellRange ? (/*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({
1952
- className: "fortune-link-modify-modal range-selection-modal",
1953
- style: {
1954
- left: position.cellLeft,
1955
- top: position.cellBottom + 5
1956
- }
1957
- }, _.omit(containerEvent, ["onMouseDown", "onMouseMove", "onMouseUp"])), {}, {
1958
- onMouseDown: function onMouseDown(e) {
1959
- var nativeEvent = e.nativeEvent;
1960
- onRangeSelectionModalMoveStart(context, refs.globalCache, nativeEvent);
1961
- e.stopPropagation();
1962
- }
1963
- }), /*#__PURE__*/React.createElement("div", {
1964
- className: "modal-icon-close",
1965
- onClick: function onClick() {
1966
- return setRangeModalVisible(false);
1967
- },
1968
- tabIndex: 0
1969
- }, /*#__PURE__*/React.createElement(SVGIcon, {
1970
- name: "close"
1971
- })), /*#__PURE__*/React.createElement("div", {
1972
- className: "modal-title"
1973
- }, insertLink.selectCellRange), /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
1974
- className: "range-selection-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
1975
- placeholder: insertLink.cellRangePlaceholder,
1976
- onChange: function onChange(e) {
1977
- return setLinkAddress(e.target.value);
1978
- },
1979
- value: linkAddress
1980
- })), tooltip, /*#__PURE__*/React.createElement("div", {
1981
- className: "modal-footer"
1982
- }, renderBottomButton(function () {
1983
- if (isLinkAddressValid.isValid) setRangeModalVisible(false);
1984
- }, function () {
1985
- setLinkAddress(originAddress);
1986
- setRangeModalVisible(false);
1987
- })))) : (/*#__PURE__*/React.createElement("div", _objectSpread2({
1988
- className: "fortune-link-modify-modal",
1915
+ return /*#__PURE__*/React.createElement("div", _objectSpread2({
1916
+ className: "fortune-link-card",
1989
1917
  style: {
1990
1918
  left: position.cellLeft + 20,
1991
1919
  top: position.cellBottom
1992
1920
  }
1993
- }, containerEvent), /*#__PURE__*/React.createElement("div", {
1994
- className: "fortune-link-modify-line"
1995
- }, /*#__PURE__*/React.createElement("div", {
1996
- className: "fortune-link-modify-title"
1997
- }, insertLink.linkText), /*#__PURE__*/React.createElement("input", {
1998
- className: "fortune-link-modify-input",
1999
- spellCheck: "false",
2000
- autoFocus: true,
2001
- value: linkText,
2002
- onChange: function onChange(e) {
2003
- return setLinkText(e.target.value);
2004
- }
2005
- })), /*#__PURE__*/React.createElement("div", {
2006
- className: "fortune-link-modify-line"
2007
- }, /*#__PURE__*/React.createElement("div", {
2008
- className: "fortune-link-modify-title"
2009
- }, insertLink.linkType), /*#__PURE__*/React.createElement("select", {
2010
- className: "fortune-link-modify-select",
1921
+ }, containerEvent), /*#__PURE__*/React.createElement(Select$1, {
2011
1922
  value: linkType,
2012
- onChange: function onChange(e) {
2013
- if (e.target.value === "sheet") {
1923
+ onValueChange: function onValueChange(value) {
1924
+ if (value === "sheet") {
2014
1925
  if (!linkText) {
2015
1926
  setLinkText(context.luckysheetfile[0].name);
2016
1927
  }
@@ -2018,65 +1929,79 @@ var LinkEditCard = function LinkEditCard(_ref) {
2018
1929
  } else {
2019
1930
  setLinkAddress("");
2020
1931
  }
2021
- if (e.target.value === "cellrange") setRangeModalVisible(true);
2022
- setLinkType(e.target.value);
2023
- }
2024
- }, linkTypeList.map(function (type) {
2025
- return /*#__PURE__*/React.createElement("option", {
1932
+ setLinkType(value);
1933
+ }
1934
+ }, /*#__PURE__*/React.createElement(SelectTrigger, {
1935
+ className: "fortune-link-type-select"
1936
+ }, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, {
1937
+ className: "fortune-link-type-dropdown"
1938
+ }, linkTypeList.filter(function (type) {
1939
+ return type.value !== "cellrange";
1940
+ }).map(function (type) {
1941
+ return /*#__PURE__*/React.createElement(SelectItem$1, {
2026
1942
  key: type.value,
2027
1943
  value: type.value
2028
1944
  }, type.text);
2029
1945
  }))), /*#__PURE__*/React.createElement("div", {
2030
- className: "fortune-link-modify-line"
2031
- }, linkType === "webpage" && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
2032
- className: "fortune-link-modify-title"
2033
- }, insertLink.linkAddress), /*#__PURE__*/React.createElement("input", {
2034
- className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
2035
- spellCheck: "false",
2036
- value: linkAddress,
1946
+ className: "fortune-input-with-icon"
1947
+ }, /*#__PURE__*/React.createElement("div", {
1948
+ className: "input-icon"
1949
+ }, /*#__PURE__*/React.createElement(LucideIcon, {
1950
+ name: "ALargeSmall"
1951
+ })), /*#__PURE__*/React.createElement(TextField, {
1952
+ placeholder: "Display text",
1953
+ value: linkText,
2037
1954
  onChange: function onChange(e) {
2038
- return setLinkAddress(e.target.value);
2039
- }
2040
- }), tooltip)), linkType === "cellrange" && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
2041
- className: "fortune-link-modify-title"
2042
- }, insertLink.linkCell), /*#__PURE__*/React.createElement("input", {
2043
- className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
2044
- spellCheck: "false",
1955
+ return setLinkText(e.target.value);
1956
+ },
1957
+ className: "fortune-link-input"
1958
+ })), linkType === "webpage" && (/*#__PURE__*/React.createElement("div", {
1959
+ className: "fortune-input-with-icon"
1960
+ }, /*#__PURE__*/React.createElement("div", {
1961
+ className: "input-icon"
1962
+ }, /*#__PURE__*/React.createElement(SVGIcon, {
1963
+ name: "link"
1964
+ })), /*#__PURE__*/React.createElement(TextField, {
1965
+ placeholder: "Paste URL",
2045
1966
  value: linkAddress,
2046
1967
  onChange: function onChange(e) {
2047
1968
  return setLinkAddress(e.target.value);
2048
- }
2049
- }), /*#__PURE__*/React.createElement("div", {
2050
- className: "fortune-link-modify-cell-selector",
2051
- onClick: function onClick() {
2052
- return setRangeModalVisible(true);
2053
1969
  },
2054
- tabIndex: 0
1970
+ className: "fortune-link-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input")
1971
+ }))), linkType === "sheet" && (/*#__PURE__*/React.createElement("div", {
1972
+ className: "fortune-input-with-icon"
1973
+ }, /*#__PURE__*/React.createElement("div", {
1974
+ className: "input-icon"
2055
1975
  }, /*#__PURE__*/React.createElement(SVGIcon, {
2056
- name: "border-all"
2057
- })), tooltip)), linkType === "sheet" && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
2058
- className: "fortune-link-modify-title"
2059
- }, insertLink.linkSheet), /*#__PURE__*/React.createElement("select", {
2060
- className: "fortune-link-modify-select",
2061
- onChange: function onChange(e) {
2062
- if (!linkText) setLinkText(e.target.value);
2063
- setLinkAddress(e.target.value);
1976
+ name: "link"
1977
+ })), /*#__PURE__*/React.createElement(Select$1, {
1978
+ onValueChange: function onValueChange(value) {
1979
+ if (!linkText) setLinkText(value);
1980
+ setLinkAddress(value);
2064
1981
  },
2065
1982
  value: linkAddress
1983
+ }, /*#__PURE__*/React.createElement(SelectTrigger, {
1984
+ className: "fortune-sheet-select"
1985
+ }, /*#__PURE__*/React.createElement(SelectValue, {
1986
+ placeholder: "[Sheet name]"
1987
+ })), /*#__PURE__*/React.createElement(SelectContent, {
1988
+ className: "fortune-sheet-dropdown"
2066
1989
  }, context.luckysheetfile.map(function (sheet) {
2067
- return /*#__PURE__*/React.createElement("option", {
1990
+ return /*#__PURE__*/React.createElement(SelectItem$1, {
2068
1991
  key: sheet.id,
2069
1992
  value: sheet.name
2070
1993
  }, sheet.name);
2071
- })), tooltip))), /*#__PURE__*/React.createElement("div", {
2072
- className: "modal-footer"
2073
- }, renderBottomButton(function () {
2074
- if (!isLinkAddressValid.isValid) return;
2075
- _.set(refs.globalCache, "linkCard.mouseEnter", false);
2076
- setContext(function (draftCtx) {
2077
- return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
2078
- });
2079
- }, hideLinkCard))));
1994
+ }))))), /*#__PURE__*/React.createElement(Button$1, {
1995
+ className: "fortune-insert-button",
1996
+ disabled: isButtonDisabled,
1997
+ onClick: function onClick() {
1998
+ if (isButtonDisabled) return;
1999
+ _.set(refs.globalCache, "linkCard.mouseEnter", false);
2000
+ setContext(function (draftCtx) {
2001
+ return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
2002
+ });
2003
+ }
2004
+ }, "Insert link"));
2080
2005
  };
2081
2006
 
2082
2007
  var FilterOptions = function FilterOptions(_ref) {
@@ -6630,7 +6555,7 @@ var Toolbar = function Toolbar(_ref) {
6630
6555
  className: "fortune-toolbar",
6631
6556
  "aria-label": toolbar.toolbar
6632
6557
  }, settings.customToolbarItems.filter(function (n) {
6633
- return n.key !== "templates";
6558
+ return n.key === "import-export";
6634
6559
  }).map(function (n) {
6635
6560
  return /*#__PURE__*/React.createElement(CustomButton, {
6636
6561
  tooltip: n.tooltip,
@@ -6667,6 +6592,18 @@ var Toolbar = function Toolbar(_ref) {
6667
6592
  icon: n.icon,
6668
6593
  iconName: n.iconName
6669
6594
  }, n.children);
6595
+ }), /*#__PURE__*/React.createElement(Divider, {
6596
+ key: "templateDivider"
6597
+ }), settings.customToolbarItems.filter(function (n) {
6598
+ return n.key !== "templates" && n.key !== "import-export";
6599
+ }).map(function (n) {
6600
+ return /*#__PURE__*/React.createElement(CustomButton, {
6601
+ tooltip: n.tooltip,
6602
+ onClick: n.onClick,
6603
+ key: n.key,
6604
+ icon: n.icon,
6605
+ iconName: n.iconName
6606
+ }, n.children);
6670
6607
  }));
6671
6608
  };
6672
6609
 
package/dist/index.js CHANGED
@@ -1804,8 +1804,7 @@ var LinkEditCard = function LinkEditCard(_ref) {
1804
1804
  originType = _ref.originType,
1805
1805
  originAddress = _ref.originAddress,
1806
1806
  isEditing = _ref.isEditing,
1807
- position = _ref.position,
1808
- selectingCellRange = _ref.selectingCellRange;
1807
+ position = _ref.position;
1809
1808
  var _useContext = React.useContext(WorkbookContext),
1810
1809
  context = _useContext.context,
1811
1810
  setContext = _useContext.setContext,
@@ -1824,29 +1823,24 @@ var LinkEditCard = function LinkEditCard(_ref) {
1824
1823
  setLinkType = _useState6[1];
1825
1824
  var _locale = fortuneCore.locale(context),
1826
1825
  insertLink = _locale.insertLink,
1827
- linkTypeList = _locale.linkTypeList,
1828
- button = _locale.button;
1829
- var lastCell = React.useRef(fortuneCore.normalizeSelection(context, [{
1830
- row: [r, r],
1831
- column: [c, c]
1832
- }]));
1833
- var skipCellRangeSet = React.useRef(true);
1826
+ linkTypeList = _locale.linkTypeList;
1834
1827
  var isLinkAddressValid = fortuneCore.isLinkValid(context, linkType, linkAddress);
1835
- var tooltip = /*#__PURE__*/React__default['default'].createElement("div", {
1836
- className: "validation-input-tip"
1837
- }, isLinkAddressValid.tooltip);
1828
+ var isButtonDisabled = React.useMemo(function () {
1829
+ if (!linkText.trim()) return true;
1830
+ if (linkType === "webpage") {
1831
+ return !linkAddress.trim() || !isLinkAddressValid.isValid;
1832
+ }
1833
+ if (linkType === "sheet") {
1834
+ return !linkAddress.trim();
1835
+ }
1836
+ return false;
1837
+ }, [linkText, linkAddress, linkType, isLinkAddressValid.isValid]);
1838
1838
  var hideLinkCard = React.useCallback(function () {
1839
1839
  ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
1840
1840
  setContext(function (draftCtx) {
1841
1841
  draftCtx.linkCard = undefined;
1842
1842
  });
1843
1843
  }, [refs.globalCache, setContext]);
1844
- var setRangeModalVisible = React.useCallback(function (visible) {
1845
- return setContext(function (draftCtx) {
1846
- draftCtx.luckysheet_select_save = lastCell.current;
1847
- if (draftCtx.linkCard != null) draftCtx.linkCard.selectingCellRange = visible;
1848
- });
1849
- }, [setContext]);
1850
1844
  var containerEvent = React.useMemo(function () {
1851
1845
  return {
1852
1846
  onMouseEnter: function onMouseEnter() {
@@ -1872,19 +1866,6 @@ var LinkEditCard = function LinkEditCard(_ref) {
1872
1866
  }
1873
1867
  };
1874
1868
  }, [refs.globalCache]);
1875
- var renderBottomButton = React.useCallback(function (onOk, onCancel) {
1876
- return /*#__PURE__*/React__default['default'].createElement("div", {
1877
- className: "button-group"
1878
- }, /*#__PURE__*/React__default['default'].createElement("div", {
1879
- className: "button-basic button-default",
1880
- onClick: onCancel,
1881
- tabIndex: 0
1882
- }, button.cancel), /*#__PURE__*/React__default['default'].createElement("div", {
1883
- className: "button-basic button-primary",
1884
- onClick: onOk,
1885
- tabIndex: 0
1886
- }, button.confirm));
1887
- }, [button]);
1888
1869
  var renderToolbarButton = React.useCallback(function (iconId, onClick) {
1889
1870
  return /*#__PURE__*/React__default['default'].createElement("div", {
1890
1871
  className: "fortune-toolbar-button",
@@ -1903,23 +1884,6 @@ var LinkEditCard = function LinkEditCard(_ref) {
1903
1884
  setLinkText(originText);
1904
1885
  setLinkType(originType);
1905
1886
  }, [rc, originAddress, originText, originType]);
1906
- React.useLayoutEffect(function () {
1907
- if (selectingCellRange) {
1908
- skipCellRangeSet.current = true;
1909
- }
1910
- }, [selectingCellRange]);
1911
- React.useLayoutEffect(function () {
1912
- if (skipCellRangeSet.current) {
1913
- skipCellRangeSet.current = false;
1914
- return;
1915
- }
1916
- if (selectingCellRange) {
1917
- var len = ___default['default'].size(context.luckysheet_select_save);
1918
- if (len > 0) {
1919
- setLinkAddress(fortuneCore.getRangetxt(context, context.currentSheetId, context.luckysheet_select_save[len - 1], ""));
1920
- }
1921
- }
1922
- }, [context, selectingCellRange]);
1923
1887
  if (!isEditing) {
1924
1888
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
1925
1889
  onKeyDown: function onKeyDown(e) {
@@ -1960,69 +1924,16 @@ var LinkEditCard = function LinkEditCard(_ref) {
1960
1924
  });
1961
1925
  }));
1962
1926
  }
1963
- return selectingCellRange ? (/*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({
1964
- className: "fortune-link-modify-modal range-selection-modal",
1965
- style: {
1966
- left: position.cellLeft,
1967
- top: position.cellBottom + 5
1968
- }
1969
- }, ___default['default'].omit(containerEvent, ["onMouseDown", "onMouseMove", "onMouseUp"])), {}, {
1970
- onMouseDown: function onMouseDown(e) {
1971
- var nativeEvent = e.nativeEvent;
1972
- fortuneCore.onRangeSelectionModalMoveStart(context, refs.globalCache, nativeEvent);
1973
- e.stopPropagation();
1974
- }
1975
- }), /*#__PURE__*/React__default['default'].createElement("div", {
1976
- className: "modal-icon-close",
1977
- onClick: function onClick() {
1978
- return setRangeModalVisible(false);
1979
- },
1980
- tabIndex: 0
1981
- }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
1982
- name: "close"
1983
- })), /*#__PURE__*/React__default['default'].createElement("div", {
1984
- className: "modal-title"
1985
- }, insertLink.selectCellRange), /*#__PURE__*/React__default['default'].createElement("input", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
1986
- className: "range-selection-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
1987
- placeholder: insertLink.cellRangePlaceholder,
1988
- onChange: function onChange(e) {
1989
- return setLinkAddress(e.target.value);
1990
- },
1991
- value: linkAddress
1992
- })), tooltip, /*#__PURE__*/React__default['default'].createElement("div", {
1993
- className: "modal-footer"
1994
- }, renderBottomButton(function () {
1995
- if (isLinkAddressValid.isValid) setRangeModalVisible(false);
1996
- }, function () {
1997
- setLinkAddress(originAddress);
1998
- setRangeModalVisible(false);
1999
- })))) : (/*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
2000
- className: "fortune-link-modify-modal",
1927
+ return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
1928
+ className: "fortune-link-card",
2001
1929
  style: {
2002
1930
  left: position.cellLeft + 20,
2003
1931
  top: position.cellBottom
2004
1932
  }
2005
- }, containerEvent), /*#__PURE__*/React__default['default'].createElement("div", {
2006
- className: "fortune-link-modify-line"
2007
- }, /*#__PURE__*/React__default['default'].createElement("div", {
2008
- className: "fortune-link-modify-title"
2009
- }, insertLink.linkText), /*#__PURE__*/React__default['default'].createElement("input", {
2010
- className: "fortune-link-modify-input",
2011
- spellCheck: "false",
2012
- autoFocus: true,
2013
- value: linkText,
2014
- onChange: function onChange(e) {
2015
- return setLinkText(e.target.value);
2016
- }
2017
- })), /*#__PURE__*/React__default['default'].createElement("div", {
2018
- className: "fortune-link-modify-line"
2019
- }, /*#__PURE__*/React__default['default'].createElement("div", {
2020
- className: "fortune-link-modify-title"
2021
- }, insertLink.linkType), /*#__PURE__*/React__default['default'].createElement("select", {
2022
- className: "fortune-link-modify-select",
1933
+ }, containerEvent), /*#__PURE__*/React__default['default'].createElement(ui.Select, {
2023
1934
  value: linkType,
2024
- onChange: function onChange(e) {
2025
- if (e.target.value === "sheet") {
1935
+ onValueChange: function onValueChange(value) {
1936
+ if (value === "sheet") {
2026
1937
  if (!linkText) {
2027
1938
  setLinkText(context.luckysheetfile[0].name);
2028
1939
  }
@@ -2030,65 +1941,79 @@ var LinkEditCard = function LinkEditCard(_ref) {
2030
1941
  } else {
2031
1942
  setLinkAddress("");
2032
1943
  }
2033
- if (e.target.value === "cellrange") setRangeModalVisible(true);
2034
- setLinkType(e.target.value);
2035
- }
2036
- }, linkTypeList.map(function (type) {
2037
- return /*#__PURE__*/React__default['default'].createElement("option", {
1944
+ setLinkType(value);
1945
+ }
1946
+ }, /*#__PURE__*/React__default['default'].createElement(ui.SelectTrigger, {
1947
+ className: "fortune-link-type-select"
1948
+ }, /*#__PURE__*/React__default['default'].createElement(ui.SelectValue, null)), /*#__PURE__*/React__default['default'].createElement(ui.SelectContent, {
1949
+ className: "fortune-link-type-dropdown"
1950
+ }, linkTypeList.filter(function (type) {
1951
+ return type.value !== "cellrange";
1952
+ }).map(function (type) {
1953
+ return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
2038
1954
  key: type.value,
2039
1955
  value: type.value
2040
1956
  }, type.text);
2041
1957
  }))), /*#__PURE__*/React__default['default'].createElement("div", {
2042
- className: "fortune-link-modify-line"
2043
- }, linkType === "webpage" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
2044
- className: "fortune-link-modify-title"
2045
- }, insertLink.linkAddress), /*#__PURE__*/React__default['default'].createElement("input", {
2046
- className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
2047
- spellCheck: "false",
2048
- value: linkAddress,
1958
+ className: "fortune-input-with-icon"
1959
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
1960
+ className: "input-icon"
1961
+ }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
1962
+ name: "ALargeSmall"
1963
+ })), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
1964
+ placeholder: "Display text",
1965
+ value: linkText,
2049
1966
  onChange: function onChange(e) {
2050
- return setLinkAddress(e.target.value);
2051
- }
2052
- }), tooltip)), linkType === "cellrange" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
2053
- className: "fortune-link-modify-title"
2054
- }, insertLink.linkCell), /*#__PURE__*/React__default['default'].createElement("input", {
2055
- className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
2056
- spellCheck: "false",
1967
+ return setLinkText(e.target.value);
1968
+ },
1969
+ className: "fortune-link-input"
1970
+ })), linkType === "webpage" && (/*#__PURE__*/React__default['default'].createElement("div", {
1971
+ className: "fortune-input-with-icon"
1972
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
1973
+ className: "input-icon"
1974
+ }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
1975
+ name: "link"
1976
+ })), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
1977
+ placeholder: "Paste URL",
2057
1978
  value: linkAddress,
2058
1979
  onChange: function onChange(e) {
2059
1980
  return setLinkAddress(e.target.value);
2060
- }
2061
- }), /*#__PURE__*/React__default['default'].createElement("div", {
2062
- className: "fortune-link-modify-cell-selector",
2063
- onClick: function onClick() {
2064
- return setRangeModalVisible(true);
2065
1981
  },
2066
- tabIndex: 0
1982
+ className: "fortune-link-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input")
1983
+ }))), linkType === "sheet" && (/*#__PURE__*/React__default['default'].createElement("div", {
1984
+ className: "fortune-input-with-icon"
1985
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
1986
+ className: "input-icon"
2067
1987
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
2068
- name: "border-all"
2069
- })), tooltip)), linkType === "sheet" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
2070
- className: "fortune-link-modify-title"
2071
- }, insertLink.linkSheet), /*#__PURE__*/React__default['default'].createElement("select", {
2072
- className: "fortune-link-modify-select",
2073
- onChange: function onChange(e) {
2074
- if (!linkText) setLinkText(e.target.value);
2075
- setLinkAddress(e.target.value);
1988
+ name: "link"
1989
+ })), /*#__PURE__*/React__default['default'].createElement(ui.Select, {
1990
+ onValueChange: function onValueChange(value) {
1991
+ if (!linkText) setLinkText(value);
1992
+ setLinkAddress(value);
2076
1993
  },
2077
1994
  value: linkAddress
1995
+ }, /*#__PURE__*/React__default['default'].createElement(ui.SelectTrigger, {
1996
+ className: "fortune-sheet-select"
1997
+ }, /*#__PURE__*/React__default['default'].createElement(ui.SelectValue, {
1998
+ placeholder: "[Sheet name]"
1999
+ })), /*#__PURE__*/React__default['default'].createElement(ui.SelectContent, {
2000
+ className: "fortune-sheet-dropdown"
2078
2001
  }, context.luckysheetfile.map(function (sheet) {
2079
- return /*#__PURE__*/React__default['default'].createElement("option", {
2002
+ return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
2080
2003
  key: sheet.id,
2081
2004
  value: sheet.name
2082
2005
  }, sheet.name);
2083
- })), tooltip))), /*#__PURE__*/React__default['default'].createElement("div", {
2084
- className: "modal-footer"
2085
- }, renderBottomButton(function () {
2086
- if (!isLinkAddressValid.isValid) return;
2087
- ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
2088
- setContext(function (draftCtx) {
2089
- return fortuneCore.saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
2090
- });
2091
- }, hideLinkCard))));
2006
+ }))))), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
2007
+ className: "fortune-insert-button",
2008
+ disabled: isButtonDisabled,
2009
+ onClick: function onClick() {
2010
+ if (isButtonDisabled) return;
2011
+ ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
2012
+ setContext(function (draftCtx) {
2013
+ return fortuneCore.saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
2014
+ });
2015
+ }
2016
+ }, "Insert link"));
2092
2017
  };
2093
2018
 
2094
2019
  var FilterOptions = function FilterOptions(_ref) {
@@ -6642,7 +6567,7 @@ var Toolbar = function Toolbar(_ref) {
6642
6567
  className: "fortune-toolbar",
6643
6568
  "aria-label": toolbar.toolbar
6644
6569
  }, settings.customToolbarItems.filter(function (n) {
6645
- return n.key !== "templates";
6570
+ return n.key === "import-export";
6646
6571
  }).map(function (n) {
6647
6572
  return /*#__PURE__*/React__default['default'].createElement(CustomButton, {
6648
6573
  tooltip: n.tooltip,
@@ -6679,6 +6604,18 @@ var Toolbar = function Toolbar(_ref) {
6679
6604
  icon: n.icon,
6680
6605
  iconName: n.iconName
6681
6606
  }, n.children);
6607
+ }), /*#__PURE__*/React__default['default'].createElement(Divider, {
6608
+ key: "templateDivider"
6609
+ }), settings.customToolbarItems.filter(function (n) {
6610
+ return n.key !== "templates" && n.key !== "import-export";
6611
+ }).map(function (n) {
6612
+ return /*#__PURE__*/React__default['default'].createElement(CustomButton, {
6613
+ tooltip: n.tooltip,
6614
+ onClick: n.onClick,
6615
+ key: n.key,
6616
+ icon: n.icon,
6617
+ iconName: n.iconName
6618
+ }, n.children);
6682
6619
  }));
6683
6620
  };
6684
6621