@fileverse-dev/fortune-react 1.0.2-mod-33 → 1.0.2-mod-28-patch-2

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 (12) hide show
  1. package/dist/components/Toolbar/Combo.d.ts +0 -1
  2. package/dist/components/Workbook/api.d.ts +1 -1
  3. package/dist/components/Workbook/index.d.ts +1 -1
  4. package/dist/index.css +114 -221
  5. package/dist/index.esm.css +114 -221
  6. package/dist/index.esm.js +757 -385
  7. package/dist/index.js +756 -384
  8. package/dist/index.umd.css +114 -221
  9. package/dist/index.umd.js +3333 -4649
  10. package/dist/index.umd.min.css +1 -1
  11. package/dist/index.umd.min.js +9 -9
  12. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -813,49 +813,43 @@ var FormulaSearch = function FormulaSearch(props) {
813
813
  justifyContent: "space-between"
814
814
  }
815
815
  }, /*#__PURE__*/React__default['default'].createElement("div", {
816
- className: "luckysheet-formula-search-func"
816
+ className: "luckysheet-formula-search-func text-body-sm"
817
817
  }, v.n), /*#__PURE__*/React__default['default'].createElement("div", {
818
818
  style: {
819
819
  display: "flex",
820
+ justifyContent: "end",
821
+ width: "68px",
822
+ height: "20px",
823
+ alignItems: "center",
820
824
  gap: "4px"
821
825
  }
822
826
  }, v.LOGO && (/*#__PURE__*/React__default['default'].createElement("img", {
823
827
  src: v.LOGO,
824
828
  alt: "Service Logo",
825
- width: 32,
826
- height: 32
829
+ style: {
830
+ width: "20px"
831
+ }
827
832
  })), v.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
828
833
  style: {
829
834
  borderRadius: "4px",
830
- width: "20px",
831
- height: "20px",
832
- backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#F9A92B")
833
- }
835
+ backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#e8ebec"),
836
+ width: "16px",
837
+ height: "16px"
838
+ },
839
+ className: "flex justify-center"
834
840
  }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
835
841
  name: "Key",
836
842
  style: {
837
- color: "white"
843
+ color: localStorage.getItem(v.API_KEY) ? "white" : "#77818A",
844
+ width: "12px",
845
+ height: "12px"
838
846
  }
839
847
  }))))), /*#__PURE__*/React__default['default'].createElement("div", {
840
- className: "luckysheet-formula-search-detail"
848
+ className: "luckysheet-formula-search-detail mt-1 text-helper-text-sm"
841
849
  }, v.d));
842
850
  }));
843
851
  };
844
852
 
845
- function lightenHexColor(hex) {
846
- var amount = 100;
847
- if (hex.startsWith("#")) {
848
- hex = hex.slice(1);
849
- }
850
- var r = parseInt(hex.slice(0, 2), 16);
851
- var g = parseInt(hex.slice(2, 4), 16);
852
- var b = parseInt(hex.slice(4, 6), 16);
853
- r = Math.min(255, r + amount);
854
- g = Math.min(255, g + amount);
855
- b = Math.min(255, b + amount);
856
- var newHex = "#".concat((1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase());
857
- return newHex;
858
- }
859
853
  var FormulaHint = function FormulaHint(props) {
860
854
  var _useContext = React.useContext(WorkbookContext),
861
855
  context = _useContext.context;
@@ -870,13 +864,34 @@ var FormulaHint = function FormulaHint(props) {
870
864
  _useState4 = _slicedToArray(_useState3, 2),
871
865
  showAPInput = _useState4[0],
872
866
  setShowAPInput = _useState4[1];
867
+ var _useState5 = React.useState(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
868
+ _useState6 = _slicedToArray(_useState5, 2),
869
+ isKeyAdded = _useState6[0],
870
+ setApiKeyAdded = _useState6[1];
871
+ var _useState7 = React.useState(false),
872
+ _useState8 = _slicedToArray(_useState7, 2),
873
+ showFunctionBody = _useState8[0],
874
+ setShouldShowFunctionBody = _useState8[1];
875
+ React.useEffect(function () {
876
+ if (fn) {
877
+ setApiKeyAdded(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
878
+ setAPI_KEY(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY) || "");
879
+ setShowAPInput(!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
880
+ }
881
+ }, [fn]);
882
+ var apiKeyPlaceholder = {
883
+ ETHERSCAN_API_KEY: "Etherscan API key"
884
+ };
873
885
  if (!fn) return null;
874
886
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
875
887
  id: "luckysheet-formula-help-c",
876
888
  className: "luckysheet-formula-help-c",
877
889
  style: {
878
- border: "1px solid ".concat(fn.BRAND_COLOR),
879
- backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
890
+ borderWidth: "1px",
891
+ borderColor: (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) ? fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR : "#F8F9FA",
892
+ backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
893
+ width: "340px",
894
+ padding: "0px"
880
895
  }
881
896
  }), /*#__PURE__*/React__default['default'].createElement("div", {
882
897
  className: "luckysheet-formula-help-close",
@@ -891,17 +906,22 @@ var FormulaHint = function FormulaHint(props) {
891
906
  className: "fa fa-angle-up",
892
907
  "aria-hidden": "true"
893
908
  })), /*#__PURE__*/React__default['default'].createElement("div", {
894
- className: "luckysheet-formula-help-title formula-title",
909
+ className: "flex roun items-center justify-between",
895
910
  style: {
896
- backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
911
+ backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
912
+ padding: "10px",
913
+ borderRadius: "10px"
897
914
  }
898
915
  }, /*#__PURE__*/React__default['default'].createElement("div", {
899
- className: "luckysheet-formula-help-title-formula"
900
- }, /*#__PURE__*/React__default['default'].createElement("span", {
916
+ className: " flex-grow color-text-default"
917
+ }, /*#__PURE__*/React__default['default'].createElement("code", {
918
+ style: {
919
+ fontWeight: 500
920
+ },
901
921
  className: "luckysheet-arguments-help-function-name"
902
- }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
922
+ }, fn.n), /*#__PURE__*/React__default['default'].createElement("code", {
903
923
  className: "luckysheet-arguments-paren"
904
- }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
924
+ }, "("), /*#__PURE__*/React__default['default'].createElement("code", {
905
925
  className: "luckysheet-arguments-parameter-holder"
906
926
  }, fn.p.map(function (param, i) {
907
927
  var name = param.name;
@@ -911,43 +931,59 @@ var FormulaHint = function FormulaHint(props) {
911
931
  if (param.require === "o") {
912
932
  name = "[".concat(name, "]");
913
933
  }
914
- return /*#__PURE__*/React__default['default'].createElement("span", {
934
+ return /*#__PURE__*/React__default['default'].createElement("code", {
915
935
  className: "luckysheet-arguments-help-parameter",
916
936
  dir: "auto",
917
937
  key: name
918
938
  }, name, i !== fn.p.length - 1 && ", ");
919
- })), /*#__PURE__*/React__default['default'].createElement("span", {
939
+ })), /*#__PURE__*/React__default['default'].createElement("code", {
920
940
  className: "luckysheet-arguments-paren"
921
941
  }, ")")), /*#__PURE__*/React__default['default'].createElement("div", {
922
942
  style: {
923
943
  display: "flex",
944
+ justifyContent: "end",
945
+ width: "68px",
946
+ height: "20px",
947
+ alignItems: "center",
924
948
  gap: "4px"
925
949
  }
926
950
  }, fn.LOGO && (/*#__PURE__*/React__default['default'].createElement("img", {
927
951
  src: fn.LOGO,
928
952
  alt: "Service Logo",
929
- width: 32,
930
- height: 32
953
+ style: {
954
+ width: "20px"
955
+ }
931
956
  })), fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
932
957
  style: {
933
958
  borderRadius: "4px",
934
- width: "20px",
935
- height: "20px",
936
- backgroundColor: "".concat(localStorage.getItem(fn.API_KEY) ? "#177E23" : "#F9A92B")
937
- }
959
+ backgroundColor: "".concat(isKeyAdded ? "#177E23" : "#e8ebec"),
960
+ width: "16px",
961
+ height: "16px"
962
+ },
963
+ className: "flex justify-center"
938
964
  }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
939
965
  name: "Key",
940
966
  style: {
941
- color: "white"
967
+ color: isKeyAdded ? "white" : "#77818A",
968
+ width: "12px",
969
+ height: "12px"
942
970
  }
943
- }))))), /*#__PURE__*/React__default['default'].createElement("div", {
971
+ }))), /*#__PURE__*/React__default['default'].createElement("div", {
972
+ onClick: function onClick() {
973
+ setShouldShowFunctionBody(!showFunctionBody);
974
+ }
975
+ }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
976
+ name: "ChevronDown",
977
+ width: 16,
978
+ height: 16
979
+ })))), showFunctionBody && (/*#__PURE__*/React__default['default'].createElement("div", {
944
980
  className: "luckysheet-formula-help-content",
945
981
  style: {
946
- backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
982
+ backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA")
947
983
  }
948
984
  }, fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
949
985
  style: {
950
- borderLeft: "4px solid ".concat(API_KEY ? "#177E23" : "#fb923c"),
986
+ borderLeft: "4px solid ".concat(isKeyAdded ? "#177E23" : "#fb923c"),
951
987
  backgroundColor: "white",
952
988
  padding: "16px",
953
989
  margin: "4px 4px 0px 4px",
@@ -964,38 +1000,40 @@ var FormulaHint = function FormulaHint(props) {
964
1000
  }
965
1001
  }, /*#__PURE__*/React__default['default'].createElement("h3", {
966
1002
  style: {
967
- fontSize: "14px",
968
- fontWeight: "600",
969
- color: "#1f2937",
970
1003
  margin: "0 0 8px 0"
971
- }
972
- }, "API key is required"), /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
1004
+ },
1005
+ className: "text-heading-xsm color-text-default"
1006
+ }, isKeyAdded ? "API key provided" : "API key is required"), /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
973
1007
  name: "ChevronDown",
974
1008
  width: 24,
975
1009
  height: 24
976
1010
  })), showAPInput && (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("p", {
977
1011
  style: {
978
- color: "#6b7280",
979
1012
  margin: "0 0 16px 0"
980
- }
981
- }, "This function is require API key. Please paste it below and\n press 'Ok'."), /*#__PURE__*/React__default['default'].createElement("div", {
982
- style: {
983
- display: "flex",
984
- gap: "12px"
985
- }
1013
+ },
1014
+ className: "text-body-sm color-text-default"
1015
+ }, "This function requires an API key. Please paste it below and\n press 'Ok'."), /*#__PURE__*/React__default['default'].createElement("div", {
1016
+ className: "w-full"
986
1017
  }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
987
1018
  value: API_KEY,
988
1019
  id: "function-api-key",
989
1020
  type: "text",
990
- placeholder: "API key",
1021
+ placeholder: apiKeyPlaceholder[fn.API_KEY],
991
1022
  onChange: function onChange(e) {
992
1023
  setAPI_KEY(e.target.value);
1024
+ setApiKeyAdded(false);
993
1025
  }
994
- }), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
1026
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
1027
+ className: "flex justify-end mt-2"
1028
+ }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
995
1029
  onClick: function onClick() {
996
1030
  localStorage.setItem(fn.API_KEY, API_KEY);
997
- }
998
- }, "Ok")))))), /*#__PURE__*/React__default['default'].createElement("div", {
1031
+ setApiKeyAdded(true);
1032
+ setShowAPInput(false);
1033
+ },
1034
+ disabled: !API_KEY,
1035
+ className: "min-w-[80px]"
1036
+ }, "Ok"))))))), /*#__PURE__*/React__default['default'].createElement("div", {
999
1037
  style: {
1000
1038
  backgroundColor: "white",
1001
1039
  padding: "6px",
@@ -1003,13 +1041,20 @@ var FormulaHint = function FormulaHint(props) {
1003
1041
  borderRadius: "4px"
1004
1042
  }
1005
1043
  }, /*#__PURE__*/React__default['default'].createElement("div", {
1006
- className: "luckysheet-formula-help-content-example"
1044
+ className: ""
1007
1045
  }, /*#__PURE__*/React__default['default'].createElement("div", {
1008
- className: "luckysheet-arguments-help-section-title example-title"
1009
- }, formulaMore.helpExample), /*#__PURE__*/React__default['default'].createElement("div", {
1010
- className: "luckysheet-arguments-help-formula"
1046
+ style: {
1047
+ lineHeight: "16px",
1048
+ fontSize: "12px"
1049
+ },
1050
+ className: "text-body-sm-bold mb-1 color-text-secondary"
1051
+ }, formulaMore.helpExample), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("code", {
1052
+ style: {
1053
+ overflowWrap: "break-word"
1054
+ },
1055
+ className: "example-value-code"
1011
1056
  }, /*#__PURE__*/React__default['default'].createElement("span", {
1012
- className: "luckysheet-arguments-help-function-name example-value"
1057
+ className: "luckysheet-arguments-help-function-name"
1013
1058
  }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
1014
1059
  className: "luckysheet-arguments-paren"
1015
1060
  }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
@@ -1022,26 +1067,32 @@ var FormulaHint = function FormulaHint(props) {
1022
1067
  }, param.example, i !== fn.p.length - 1 && ", ");
1023
1068
  })), /*#__PURE__*/React__default['default'].createElement("span", {
1024
1069
  className: "luckysheet-arguments-paren"
1025
- }, ")"))), /*#__PURE__*/React__default['default'].createElement("div", {
1070
+ }, ")")))), /*#__PURE__*/React__default['default'].createElement("div", {
1026
1071
  className: "luckysheet-formula-help-content-detail",
1027
1072
  style: {
1028
- paddingBottom: "6px"
1073
+ paddingBottom: "16px"
1029
1074
  }
1030
1075
  }, /*#__PURE__*/React__default['default'].createElement("div", {
1031
- className: "luckysheet-arguments-help-section"
1076
+ className: ""
1032
1077
  }, /*#__PURE__*/React__default['default'].createElement("div", {
1033
- className: "luckysheet-arguments-help-section-title luckysheet-arguments-help-parameter-name example-title"
1078
+ style: {
1079
+ lineHeight: "16px",
1080
+ fontSize: "12px",
1081
+ padding: "0px"
1082
+ },
1083
+ className: "text-body-sm-bold mb-1 mt-2 color-text-secondary"
1034
1084
  }, "About"), /*#__PURE__*/React__default['default'].createElement("span", {
1035
- className: "luckysheet-arguments-help-parameter-content example-value"
1085
+ className: "luckysheet-arguments-help-parameter-content text-helper-text-sm"
1036
1086
  }, fn.d))), /*#__PURE__*/React__default['default'].createElement("div", {
1087
+ style: {
1088
+ paddingTop: "16px"
1089
+ },
1037
1090
  className: "luckysheet-formula-help-content-param"
1038
1091
  }, fn.p.map(function (param) {
1039
1092
  return /*#__PURE__*/React__default['default'].createElement("div", {
1040
- className: "luckysheet-arguments-help-section",
1093
+ className: "",
1041
1094
  key: param.name
1042
- }, /*#__PURE__*/React__default['default'].createElement("div", {
1043
- className: "luckysheet-arguments-help-section-title example-title"
1044
- }, param.name, param.repeat === "y" && (/*#__PURE__*/React__default['default'].createElement("span", {
1095
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("code", null, param.name, param.repeat === "y" && (/*#__PURE__*/React__default['default'].createElement("span", {
1045
1096
  className: "luckysheet-arguments-help-argument-info example-value",
1046
1097
  style: {
1047
1098
  marginTop: "2px"
@@ -1051,15 +1102,23 @@ var FormulaHint = function FormulaHint(props) {
1051
1102
  style: {
1052
1103
  marginTop: "2px"
1053
1104
  }
1054
- }, "-[", formulaMore.allowOptionText, "]"))), /*#__PURE__*/React__default['default'].createElement("span", {
1055
- className: "luckysheet-arguments-help-parameter-content example-value",
1105
+ }, "-[", formulaMore.allowOptionText, "]")))), /*#__PURE__*/React__default['default'].createElement("span", {
1106
+ className: "luckysheet-arguments-help-parameter-content text-helper-text-sm",
1056
1107
  style: {
1057
1108
  marginTop: "2px"
1058
1109
  }
1059
1110
  }, param.detail));
1060
- })))), /*#__PURE__*/React__default['default'].createElement("div", {
1061
- className: "luckysheet-formula-help-foot"
1062
- }));
1111
+ }))))), /*#__PURE__*/React__default['default'].createElement("div", {
1112
+ style: {
1113
+ backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
1114
+ padding: "8px",
1115
+ borderBottomLeftRadius: "10px",
1116
+ borderBottomRightRadius: "10px"
1117
+ },
1118
+ className: "w-full"
1119
+ }, /*#__PURE__*/React__default['default'].createElement("p", {
1120
+ className: "color-text-link text-helper-text-sm"
1121
+ }, "Learn More")));
1063
1122
  };
1064
1123
 
1065
1124
  function usePrevious(value) {
@@ -1205,6 +1264,48 @@ var InputBox = function InputBox() {
1205
1264
  e.stopPropagation();
1206
1265
  }
1207
1266
  }, [getActiveFormula, setContext]);
1267
+ var selectActiveFormulaOnClick = React.useCallback(function (e) {
1268
+ var activeFormula = getActiveFormula();
1269
+ var formulaNameDiv = activeFormula === null || activeFormula === void 0 ? void 0 : activeFormula.querySelector(".luckysheet-formula-search-func");
1270
+ if (formulaNameDiv) {
1271
+ var formulaName = formulaNameDiv.textContent;
1272
+ var textEditor = document.getElementById("luckysheet-rich-text-editor");
1273
+ if (textEditor) {
1274
+ var _getrangeseleciton2;
1275
+ var searchTxt = ((_getrangeseleciton2 = fortuneCore.getrangeseleciton()) === null || _getrangeseleciton2 === void 0 ? void 0 : _getrangeseleciton2.textContent) || "";
1276
+ var deleteCount = searchTxt.length;
1277
+ textEditor.focus();
1278
+ var selection = window.getSelection();
1279
+ if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0) return;
1280
+ var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
1281
+ if (deleteCount !== 0 && range) {
1282
+ var startOffset = Math.max(range.startOffset - deleteCount, 0);
1283
+ var endOffset = range.startOffset;
1284
+ range.setStart(range.startContainer, startOffset);
1285
+ range.setEnd(range.startContainer, endOffset);
1286
+ range.deleteContents();
1287
+ }
1288
+ var functionStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>");
1289
+ var lParStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>";
1290
+ var functionNode = new DOMParser().parseFromString(functionStr, "text/html").body.childNodes[0];
1291
+ var lParNode = new DOMParser().parseFromString(lParStr, "text/html").body.childNodes[0];
1292
+ if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
1293
+ range === null || range === void 0 ? void 0 : range.setStart(range.startContainer.parentNode, 1);
1294
+ }
1295
+ range === null || range === void 0 ? void 0 : range.insertNode(lParNode);
1296
+ range === null || range === void 0 ? void 0 : range.insertNode(functionNode);
1297
+ range === null || range === void 0 ? void 0 : range.collapse();
1298
+ selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
1299
+ if (range) selection === null || selection === void 0 ? void 0 : selection.addRange(range);
1300
+ setContext(function (draftCtx) {
1301
+ draftCtx.functionCandidates = [];
1302
+ draftCtx.functionHint = formulaName;
1303
+ });
1304
+ }
1305
+ e.preventDefault();
1306
+ e.stopPropagation();
1307
+ }
1308
+ }, [getActiveFormula, setContext]);
1208
1309
  var onKeyDown = React.useCallback(function (e) {
1209
1310
  lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
1210
1311
  preText.current = inputRef.current.innerText;
@@ -1324,6 +1425,18 @@ var InputBox = function InputBox() {
1324
1425
  })), document.activeElement === inputRef.current && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(FormulaSearch, {
1325
1426
  style: {
1326
1427
  top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
1428
+ },
1429
+ onMouseOver: function onMouseOver(e) {
1430
+ if (document.getElementById("luckysheet-formula-search-c")) {
1431
+ var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
1432
+ if (!hoveredItem) return;
1433
+ clearSearchItemActiveClass();
1434
+ hoveredItem.classList.add("luckysheet-formula-search-item-active");
1435
+ }
1436
+ e.preventDefault();
1437
+ },
1438
+ onClick: function onClick(e) {
1439
+ selectActiveFormulaOnClick(e);
1327
1440
  }
1328
1441
  }), /*#__PURE__*/React__default['default'].createElement(FormulaHint, {
1329
1442
  style: {
@@ -1804,7 +1917,8 @@ var LinkEditCard = function LinkEditCard(_ref) {
1804
1917
  originType = _ref.originType,
1805
1918
  originAddress = _ref.originAddress,
1806
1919
  isEditing = _ref.isEditing,
1807
- position = _ref.position;
1920
+ position = _ref.position,
1921
+ selectingCellRange = _ref.selectingCellRange;
1808
1922
  var _useContext = React.useContext(WorkbookContext),
1809
1923
  context = _useContext.context,
1810
1924
  setContext = _useContext.setContext,
@@ -1823,24 +1937,29 @@ var LinkEditCard = function LinkEditCard(_ref) {
1823
1937
  setLinkType = _useState6[1];
1824
1938
  var _locale = fortuneCore.locale(context),
1825
1939
  insertLink = _locale.insertLink,
1826
- linkTypeList = _locale.linkTypeList;
1940
+ linkTypeList = _locale.linkTypeList,
1941
+ button = _locale.button;
1942
+ var lastCell = React.useRef(fortuneCore.normalizeSelection(context, [{
1943
+ row: [r, r],
1944
+ column: [c, c]
1945
+ }]));
1946
+ var skipCellRangeSet = React.useRef(true);
1827
1947
  var isLinkAddressValid = fortuneCore.isLinkValid(context, linkType, linkAddress);
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]);
1948
+ var tooltip = /*#__PURE__*/React__default['default'].createElement("div", {
1949
+ className: "validation-input-tip"
1950
+ }, isLinkAddressValid.tooltip);
1838
1951
  var hideLinkCard = React.useCallback(function () {
1839
1952
  ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
1840
1953
  setContext(function (draftCtx) {
1841
1954
  draftCtx.linkCard = undefined;
1842
1955
  });
1843
1956
  }, [refs.globalCache, setContext]);
1957
+ var setRangeModalVisible = React.useCallback(function (visible) {
1958
+ return setContext(function (draftCtx) {
1959
+ draftCtx.luckysheet_select_save = lastCell.current;
1960
+ if (draftCtx.linkCard != null) draftCtx.linkCard.selectingCellRange = visible;
1961
+ });
1962
+ }, [setContext]);
1844
1963
  var containerEvent = React.useMemo(function () {
1845
1964
  return {
1846
1965
  onMouseEnter: function onMouseEnter() {
@@ -1866,6 +1985,19 @@ var LinkEditCard = function LinkEditCard(_ref) {
1866
1985
  }
1867
1986
  };
1868
1987
  }, [refs.globalCache]);
1988
+ var renderBottomButton = React.useCallback(function (onOk, onCancel) {
1989
+ return /*#__PURE__*/React__default['default'].createElement("div", {
1990
+ className: "button-group"
1991
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
1992
+ className: "button-basic button-default",
1993
+ onClick: onCancel,
1994
+ tabIndex: 0
1995
+ }, button.cancel), /*#__PURE__*/React__default['default'].createElement("div", {
1996
+ className: "button-basic button-primary",
1997
+ onClick: onOk,
1998
+ tabIndex: 0
1999
+ }, button.confirm));
2000
+ }, [button]);
1869
2001
  var renderToolbarButton = React.useCallback(function (iconId, onClick) {
1870
2002
  return /*#__PURE__*/React__default['default'].createElement("div", {
1871
2003
  className: "fortune-toolbar-button",
@@ -1884,6 +2016,23 @@ var LinkEditCard = function LinkEditCard(_ref) {
1884
2016
  setLinkText(originText);
1885
2017
  setLinkType(originType);
1886
2018
  }, [rc, originAddress, originText, originType]);
2019
+ React.useLayoutEffect(function () {
2020
+ if (selectingCellRange) {
2021
+ skipCellRangeSet.current = true;
2022
+ }
2023
+ }, [selectingCellRange]);
2024
+ React.useLayoutEffect(function () {
2025
+ if (skipCellRangeSet.current) {
2026
+ skipCellRangeSet.current = false;
2027
+ return;
2028
+ }
2029
+ if (selectingCellRange) {
2030
+ var len = ___default['default'].size(context.luckysheet_select_save);
2031
+ if (len > 0) {
2032
+ setLinkAddress(fortuneCore.getRangetxt(context, context.currentSheetId, context.luckysheet_select_save[len - 1], ""));
2033
+ }
2034
+ }
2035
+ }, [context, selectingCellRange]);
1887
2036
  if (!isEditing) {
1888
2037
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
1889
2038
  onKeyDown: function onKeyDown(e) {
@@ -1924,16 +2073,69 @@ var LinkEditCard = function LinkEditCard(_ref) {
1924
2073
  });
1925
2074
  }));
1926
2075
  }
1927
- return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
1928
- className: "fortune-link-card",
2076
+ return selectingCellRange ? (/*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({
2077
+ className: "fortune-link-modify-modal range-selection-modal",
2078
+ style: {
2079
+ left: position.cellLeft,
2080
+ top: position.cellBottom + 5
2081
+ }
2082
+ }, ___default['default'].omit(containerEvent, ["onMouseDown", "onMouseMove", "onMouseUp"])), {}, {
2083
+ onMouseDown: function onMouseDown(e) {
2084
+ var nativeEvent = e.nativeEvent;
2085
+ fortuneCore.onRangeSelectionModalMoveStart(context, refs.globalCache, nativeEvent);
2086
+ e.stopPropagation();
2087
+ }
2088
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
2089
+ className: "modal-icon-close",
2090
+ onClick: function onClick() {
2091
+ return setRangeModalVisible(false);
2092
+ },
2093
+ tabIndex: 0
2094
+ }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
2095
+ name: "close"
2096
+ })), /*#__PURE__*/React__default['default'].createElement("div", {
2097
+ className: "modal-title"
2098
+ }, insertLink.selectCellRange), /*#__PURE__*/React__default['default'].createElement("input", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
2099
+ className: "range-selection-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
2100
+ placeholder: insertLink.cellRangePlaceholder,
2101
+ onChange: function onChange(e) {
2102
+ return setLinkAddress(e.target.value);
2103
+ },
2104
+ value: linkAddress
2105
+ })), tooltip, /*#__PURE__*/React__default['default'].createElement("div", {
2106
+ className: "modal-footer"
2107
+ }, renderBottomButton(function () {
2108
+ if (isLinkAddressValid.isValid) setRangeModalVisible(false);
2109
+ }, function () {
2110
+ setLinkAddress(originAddress);
2111
+ setRangeModalVisible(false);
2112
+ })))) : (/*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
2113
+ className: "fortune-link-modify-modal",
1929
2114
  style: {
1930
2115
  left: position.cellLeft + 20,
1931
2116
  top: position.cellBottom
1932
2117
  }
1933
- }, containerEvent), /*#__PURE__*/React__default['default'].createElement(ui.Select, {
2118
+ }, containerEvent), /*#__PURE__*/React__default['default'].createElement("div", {
2119
+ className: "fortune-link-modify-line"
2120
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
2121
+ className: "fortune-link-modify-title"
2122
+ }, insertLink.linkText), /*#__PURE__*/React__default['default'].createElement("input", {
2123
+ className: "fortune-link-modify-input",
2124
+ spellCheck: "false",
2125
+ autoFocus: true,
2126
+ value: linkText,
2127
+ onChange: function onChange(e) {
2128
+ return setLinkText(e.target.value);
2129
+ }
2130
+ })), /*#__PURE__*/React__default['default'].createElement("div", {
2131
+ className: "fortune-link-modify-line"
2132
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
2133
+ className: "fortune-link-modify-title"
2134
+ }, insertLink.linkType), /*#__PURE__*/React__default['default'].createElement("select", {
2135
+ className: "fortune-link-modify-select",
1934
2136
  value: linkType,
1935
- onValueChange: function onValueChange(value) {
1936
- if (value === "sheet") {
2137
+ onChange: function onChange(e) {
2138
+ if (e.target.value === "sheet") {
1937
2139
  if (!linkText) {
1938
2140
  setLinkText(context.luckysheetfile[0].name);
1939
2141
  }
@@ -1941,79 +2143,65 @@ var LinkEditCard = function LinkEditCard(_ref) {
1941
2143
  } else {
1942
2144
  setLinkAddress("");
1943
2145
  }
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, {
2146
+ if (e.target.value === "cellrange") setRangeModalVisible(true);
2147
+ setLinkType(e.target.value);
2148
+ }
2149
+ }, linkTypeList.map(function (type) {
2150
+ return /*#__PURE__*/React__default['default'].createElement("option", {
1954
2151
  key: type.value,
1955
2152
  value: type.value
1956
2153
  }, type.text);
1957
2154
  }))), /*#__PURE__*/React__default['default'].createElement("div", {
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,
2155
+ className: "fortune-link-modify-line"
2156
+ }, linkType === "webpage" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
2157
+ className: "fortune-link-modify-title"
2158
+ }, insertLink.linkAddress), /*#__PURE__*/React__default['default'].createElement("input", {
2159
+ className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
2160
+ spellCheck: "false",
2161
+ value: linkAddress,
1966
2162
  onChange: function onChange(e) {
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",
2163
+ return setLinkAddress(e.target.value);
2164
+ }
2165
+ }), tooltip)), linkType === "cellrange" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
2166
+ className: "fortune-link-modify-title"
2167
+ }, insertLink.linkCell), /*#__PURE__*/React__default['default'].createElement("input", {
2168
+ className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
2169
+ spellCheck: "false",
1978
2170
  value: linkAddress,
1979
2171
  onChange: function onChange(e) {
1980
2172
  return setLinkAddress(e.target.value);
2173
+ }
2174
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
2175
+ className: "fortune-link-modify-cell-selector",
2176
+ onClick: function onClick() {
2177
+ return setRangeModalVisible(true);
1981
2178
  },
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"
2179
+ tabIndex: 0
1987
2180
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
1988
- name: "link"
1989
- })), /*#__PURE__*/React__default['default'].createElement(ui.Select, {
1990
- onValueChange: function onValueChange(value) {
1991
- if (!linkText) setLinkText(value);
1992
- setLinkAddress(value);
2181
+ name: "border-all"
2182
+ })), tooltip)), linkType === "sheet" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
2183
+ className: "fortune-link-modify-title"
2184
+ }, insertLink.linkSheet), /*#__PURE__*/React__default['default'].createElement("select", {
2185
+ className: "fortune-link-modify-select",
2186
+ onChange: function onChange(e) {
2187
+ if (!linkText) setLinkText(e.target.value);
2188
+ setLinkAddress(e.target.value);
1993
2189
  },
1994
2190
  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"
2001
2191
  }, context.luckysheetfile.map(function (sheet) {
2002
- return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
2192
+ return /*#__PURE__*/React__default['default'].createElement("option", {
2003
2193
  key: sheet.id,
2004
2194
  value: sheet.name
2005
2195
  }, sheet.name);
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"));
2196
+ })), tooltip))), /*#__PURE__*/React__default['default'].createElement("div", {
2197
+ className: "modal-footer"
2198
+ }, renderBottomButton(function () {
2199
+ if (!isLinkAddressValid.isValid) return;
2200
+ ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
2201
+ setContext(function (draftCtx) {
2202
+ return fortuneCore.saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
2203
+ });
2204
+ }, hideLinkCard))));
2017
2205
  };
2018
2206
 
2019
2207
  var FilterOptions = function FilterOptions(_ref) {
@@ -2115,11 +2303,15 @@ var FilterOptions = function FilterOptions(_ref) {
2115
2303
  width: undefined
2116
2304
  }),
2117
2305
  className: "luckysheet-filter-options ".concat(filterParam == null ? "" : "luckysheet-filter-options-active")
2118
- }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
2119
- name: "filter",
2120
- width: 15,
2121
- height: 15
2122
- }));
2306
+ }, filterParam == null ? (/*#__PURE__*/React__default['default'].createElement("div", {
2307
+ className: "caret down"
2308
+ })) : (/*#__PURE__*/React__default['default'].createElement(SVGIcon, {
2309
+ name: "filter-fill-white",
2310
+ style: {
2311
+ width: 15,
2312
+ height: 15
2313
+ }
2314
+ })));
2123
2315
  })));
2124
2316
  };
2125
2317
 
@@ -3217,7 +3409,6 @@ var ConditionRules = function ConditionRules(_ref) {
3217
3409
  }, /*#__PURE__*/React__default['default'].createElement("span", {
3218
3410
  id: "checkTextColor"
3219
3411
  }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
3220
- className: "border-2",
3221
3412
  checked: context.conditionRules.textColor.check,
3222
3413
  onCheckedChange: function onCheckedChange(e) {
3223
3414
  var checked = e.target.checked;
@@ -3245,7 +3436,6 @@ var ConditionRules = function ConditionRules(_ref) {
3245
3436
  }, /*#__PURE__*/React__default['default'].createElement("span", {
3246
3437
  id: "checkCellColor"
3247
3438
  }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
3248
- className: "border-2",
3249
3439
  checked: context.conditionRules.cellColor.check,
3250
3440
  onCheckedChange: function onCheckedChange(e) {
3251
3441
  var checked = e.target.checked;
@@ -4285,8 +4475,6 @@ var Combo = function Combo(_ref) {
4285
4475
  _onClick = _ref.onClick,
4286
4476
  text = _ref.text,
4287
4477
  iconId = _ref.iconId,
4288
- _ref$showArrow = _ref.showArrow,
4289
- showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
4290
4478
  children = _ref.children;
4291
4479
  var style = {
4292
4480
  userSelect: "none"
@@ -4303,9 +4491,12 @@ var Combo = function Combo(_ref) {
4303
4491
  setPopupPosition = _useState4[1];
4304
4492
  var popupRef = React.useRef(null);
4305
4493
  var buttonRef = React.useRef(null);
4494
+ var openState = React.useRef(false);
4495
+ var triggerRef = React.useRef(null);
4306
4496
  useOutsideClick(popupRef, function () {
4307
4497
  setOpen(false);
4308
- });
4498
+ openState.current = false;
4499
+ }, [], triggerRef);
4309
4500
  React.useLayoutEffect(function () {
4310
4501
  if (!popupRef.current) {
4311
4502
  return;
@@ -4331,43 +4522,27 @@ var Combo = function Combo(_ref) {
4331
4522
  ref: buttonRef,
4332
4523
  className: "fortune-toolbar-combo"
4333
4524
  }, /*#__PURE__*/React__default['default'].createElement("div", {
4525
+ ref: triggerRef,
4334
4526
  className: "fortune-toolbar-combo-button",
4335
4527
  onClick: function onClick(e) {
4336
- if (_onClick) {
4337
- _onClick(e);
4338
- if (!showArrow) setOpen(!open);
4339
- } else {
4340
- setOpen(!open);
4341
- }
4528
+ openState.current = !openState.current;
4529
+ setOpen(openState.current);
4530
+ if (_onClick) _onClick(e);else setOpen(openState.current);
4342
4531
  },
4343
4532
  tabIndex: 0,
4344
4533
  "data-tips": tooltip,
4345
4534
  role: "button",
4346
- "aria-label": "".concat(tooltip, ": ").concat(text !== undefined ? text : ""),
4535
+ "aria-label": tooltip,
4347
4536
  style: style
4348
4537
  }, iconId ? (/*#__PURE__*/React__default['default'].createElement(SVGIcon, {
4349
4538
  name: iconId
4350
4539
  })) : (/*#__PURE__*/React__default['default'].createElement("span", {
4351
4540
  className: "fortune-toolbar-combo-text"
4352
- }, text !== undefined ? text : ""))), showArrow && (/*#__PURE__*/React__default['default'].createElement("div", {
4353
- className: "fortune-toolbar-combo-arrow",
4354
- onClick: function onClick() {
4355
- return setOpen(!open);
4356
- },
4357
- tabIndex: 0,
4358
- "data-tips": tooltip,
4359
- role: "button",
4360
- "aria-label": tooltip,
4361
- style: style
4362
- }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
4363
- name: "ChevronDown",
4364
- width: 14,
4365
- height: 14
4366
- }))), tooltip && /*#__PURE__*/React__default['default'].createElement("div", {
4541
+ }, text))), tooltip && /*#__PURE__*/React__default['default'].createElement("div", {
4367
4542
  className: "fortune-tooltip"
4368
4543
  }, tooltip)), open && (/*#__PURE__*/React__default['default'].createElement("div", {
4369
4544
  ref: popupRef,
4370
- className: "fortune-toolbar-combo-popup",
4545
+ className: "fortune-toolbar-combo-popup color-text-default",
4371
4546
  style: popupPosition
4372
4547
  }, children === null || children === void 0 ? void 0 : children(setOpen))));
4373
4548
  };
@@ -5130,6 +5305,215 @@ var CustomColor = function CustomColor(_ref) {
5130
5305
  }));
5131
5306
  };
5132
5307
 
5308
+ var size = [{
5309
+ Text: "1",
5310
+ value: "Thin",
5311
+ strokeDasharray: "1,0",
5312
+ strokeWidth: "1"
5313
+ }, {
5314
+ Text: "2",
5315
+ value: "Hair",
5316
+ strokeDasharray: "1,5",
5317
+ strokeWidth: "1"
5318
+ }, {
5319
+ Text: "3",
5320
+ value: "Dotted",
5321
+ strokeDasharray: "2,5",
5322
+ strokeWidth: "2"
5323
+ }, {
5324
+ Text: "4",
5325
+ value: "Dashed",
5326
+ strokeDasharray: "5,5",
5327
+ strokeWidth: "2"
5328
+ }, {
5329
+ Text: "5",
5330
+ value: "DashDot",
5331
+ strokeDasharray: "20,5,5,10,5,5",
5332
+ strokeWidth: "2"
5333
+ }, {
5334
+ Text: "6",
5335
+ value: "DashDotDot",
5336
+ strokeDasharray: "20,5,5,5,5,10,5,5,5,5",
5337
+ strokeWidth: "2"
5338
+ }, {
5339
+ Text: "8",
5340
+ value: "Medium",
5341
+ strokeDasharray: "2,0",
5342
+ strokeWidth: "2"
5343
+ }, {
5344
+ Text: "9",
5345
+ value: "MediumDashed",
5346
+ strokeDasharray: "3,5",
5347
+ strokeWidth: "3"
5348
+ }, {
5349
+ Text: "10",
5350
+ value: "MediumDashDot",
5351
+ strokeDasharray: "20,5,5,10,5,5",
5352
+ strokeWidth: "3"
5353
+ }, {
5354
+ Text: "11",
5355
+ value: "MediumDashDotDot",
5356
+ strokeDasharray: "5,5,5,5,20,5,5,5,5,10",
5357
+ strokeWidth: "3"
5358
+ }, {
5359
+ Text: "13",
5360
+ value: "Thick",
5361
+ strokeDasharray: "2,0",
5362
+ strokeWidth: "3"
5363
+ }];
5364
+ var CustomBorder = function CustomBorder(_ref) {
5365
+ var onPick = _ref.onPick;
5366
+ var _useContext = React.useContext(WorkbookContext),
5367
+ context = _useContext.context,
5368
+ refs = _useContext.refs;
5369
+ var _locale = fortuneCore.locale(context),
5370
+ border = _locale.border;
5371
+ var _useState = React.useState("#000000"),
5372
+ _useState2 = _slicedToArray(_useState, 2),
5373
+ changeColor = _useState2[0],
5374
+ setchangeColor = _useState2[1];
5375
+ var _useState3 = React.useState("1"),
5376
+ _useState4 = _slicedToArray(_useState3, 2),
5377
+ changeStyle = _useState4[0],
5378
+ setchangeStyle = _useState4[1];
5379
+ var colorRef = React.useRef(null);
5380
+ var styleRef = React.useRef(null);
5381
+ var colorPreviewRef = React.useRef(null);
5382
+ var _useState5 = React.useState(""),
5383
+ _useState6 = _slicedToArray(_useState5, 2),
5384
+ previewWith = _useState6[0],
5385
+ setPreviewWith = _useState6[1];
5386
+ var _useState7 = React.useState(""),
5387
+ _useState8 = _slicedToArray(_useState7, 2),
5388
+ previewdasharry = _useState8[0],
5389
+ setPreviewdasharray = _useState8[1];
5390
+ var showBorderSubMenu = React.useCallback(function (e) {
5391
+ var target = e.target;
5392
+ var menuItemRect = target.getBoundingClientRect();
5393
+ var subMenuItem = target.querySelector(".fortune-border-select-menu");
5394
+ if (___default['default'].isNil(subMenuItem)) return;
5395
+ subMenuItem.style.display = "block";
5396
+ var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
5397
+ if (workbookContainerRect.width - menuItemRect.right > parseFloat(subMenuItem.style.width.replace("px", ""))) {
5398
+ subMenuItem.style.left = "".concat(menuItemRect === null || menuItemRect === void 0 ? void 0 : menuItemRect.width, "px");
5399
+ } else {
5400
+ subMenuItem.style.left = "-".concat(subMenuItem.style.width);
5401
+ }
5402
+ }, [refs.workbookContainer]);
5403
+ var hideBorderSubMenu = React.useCallback(function () {
5404
+ styleRef.current.style.display = "none";
5405
+ colorRef.current.style.display = "none";
5406
+ }, []);
5407
+ var changePreviewStyle = React.useCallback(function (width, dasharray) {
5408
+ setPreviewWith(width);
5409
+ setPreviewdasharray(dasharray);
5410
+ }, []);
5411
+ return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
5412
+ className: "fortune-border-select-option",
5413
+ key: "borderColor",
5414
+ onMouseEnter: function onMouseEnter(e) {
5415
+ showBorderSubMenu(e);
5416
+ },
5417
+ onMouseLeave: function onMouseLeave() {
5418
+ hideBorderSubMenu();
5419
+ }
5420
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
5421
+ className: "fortune-toolbar-menu-line"
5422
+ }, border.borderColor, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
5423
+ name: "rightArrow",
5424
+ style: {
5425
+ width: "14px"
5426
+ }
5427
+ })), /*#__PURE__*/React__default['default'].createElement("div", {
5428
+ ref: colorPreviewRef,
5429
+ className: "fortune-border-color-preview",
5430
+ style: {
5431
+ backgroundColor: changeColor
5432
+ }
5433
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
5434
+ ref: colorRef,
5435
+ className: "fortune-border-select-menu",
5436
+ style: {
5437
+ display: "none",
5438
+ width: "166px"
5439
+ }
5440
+ }, /*#__PURE__*/React__default['default'].createElement(CustomColor, {
5441
+ onCustomPick: function onCustomPick(color) {
5442
+ onPick(color, changeStyle);
5443
+ colorPreviewRef.current.style.backgroundColor = changeColor;
5444
+ setchangeColor(color);
5445
+ },
5446
+ onColorPick: function onColorPick(color) {
5447
+ onPick(color, changeStyle);
5448
+ setchangeColor(color);
5449
+ }
5450
+ }))), /*#__PURE__*/React__default['default'].createElement("div", {
5451
+ className: "fortune-border-select-option",
5452
+ key: "borderStyle",
5453
+ onMouseEnter: function onMouseEnter(e) {
5454
+ showBorderSubMenu(e);
5455
+ },
5456
+ onMouseLeave: function onMouseLeave() {
5457
+ hideBorderSubMenu();
5458
+ }
5459
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
5460
+ className: "fortune-toolbar-menu-line"
5461
+ }, border.borderStyle, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
5462
+ name: "rightArrow",
5463
+ style: {
5464
+ width: "14px"
5465
+ }
5466
+ })), /*#__PURE__*/React__default['default'].createElement("div", {
5467
+ className: "fortune-border-style-preview"
5468
+ }, /*#__PURE__*/React__default['default'].createElement("svg", {
5469
+ width: "90"
5470
+ }, /*#__PURE__*/React__default['default'].createElement("g", {
5471
+ fill: "none",
5472
+ stroke: "black",
5473
+ strokeWidth: previewWith
5474
+ }, /*#__PURE__*/React__default['default'].createElement("path", {
5475
+ strokeDasharray: previewdasharry,
5476
+ d: "M0 0 l90 0"
5477
+ })))), /*#__PURE__*/React__default['default'].createElement("div", {
5478
+ ref: styleRef,
5479
+ className: "fortune-border-select-menu fortune-toolbar-select",
5480
+ style: {
5481
+ display: "none",
5482
+ width: "110px"
5483
+ }
5484
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
5485
+ className: "fortune-border-style-picker-menu fortune-border-style-reset",
5486
+ onClick: function onClick() {
5487
+ onPick(changeColor, "1");
5488
+ changePreviewStyle("1", "1,0");
5489
+ },
5490
+ tabIndex: 0
5491
+ }, border.borderDefault), /*#__PURE__*/React__default['default'].createElement("div", {
5492
+ className: "fortune-boder-style-picker"
5493
+ }, size.map(function (items, i) {
5494
+ return /*#__PURE__*/React__default['default'].createElement("div", {
5495
+ key: i,
5496
+ className: "fortune-border-style-picker-menu",
5497
+ onClick: function onClick() {
5498
+ onPick(changeColor, items.Text);
5499
+ setchangeStyle(items.Text);
5500
+ changePreviewStyle(items.strokeWidth, items.strokeDasharray);
5501
+ },
5502
+ tabIndex: 0
5503
+ }, /*#__PURE__*/React__default['default'].createElement("svg", {
5504
+ height: "10",
5505
+ width: "90"
5506
+ }, /*#__PURE__*/React__default['default'].createElement("g", {
5507
+ fill: "none",
5508
+ stroke: "black",
5509
+ strokeWidth: items.strokeWidth
5510
+ }, /*#__PURE__*/React__default['default'].createElement("path", {
5511
+ strokeDasharray: items.strokeDasharray,
5512
+ d: "M0 5 l85 0"
5513
+ }))));
5514
+ })))));
5515
+ };
5516
+
5133
5517
  var FormatSearch = function FormatSearch(_ref) {
5134
5518
  var type = _ref.type,
5135
5519
  _onCancel = _ref.onCancel;
@@ -5412,7 +5796,6 @@ var Toolbar = function Toolbar(_ref) {
5412
5796
  }), /*#__PURE__*/React__default['default'].createElement(Combo, {
5413
5797
  iconId: name,
5414
5798
  tooltip: tooltip,
5415
- showArrow: false,
5416
5799
  onClick: function onClick() {
5417
5800
  var color = name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor;
5418
5801
  if (color) pick(color);
@@ -5445,8 +5828,7 @@ var Toolbar = function Toolbar(_ref) {
5445
5828
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
5446
5829
  text: currentFmt,
5447
5830
  key: name,
5448
- tooltip: tooltip,
5449
- showArrow: false
5831
+ tooltip: tooltip
5450
5832
  }, function (setOpen) {
5451
5833
  return /*#__PURE__*/React__default['default'].createElement(Select, null, defaultFormat.map(function (_ref2, ii) {
5452
5834
  var text = _ref2.text,
@@ -5530,8 +5912,7 @@ var Toolbar = function Toolbar(_ref) {
5530
5912
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
5531
5913
  text: current,
5532
5914
  key: name,
5533
- tooltip: tooltip,
5534
- showArrow: false
5915
+ tooltip: tooltip
5535
5916
  }, function (setOpen) {
5536
5917
  return /*#__PURE__*/React__default['default'].createElement(Select, null, fontarray.map(function (o) {
5537
5918
  return /*#__PURE__*/React__default['default'].createElement(Option, {
@@ -5553,8 +5934,7 @@ var Toolbar = function Toolbar(_ref) {
5553
5934
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
5554
5935
  text: cell ? fortuneCore.normalizedCellAttr(cell, "fs", context.defaultFontSize) : context.defaultFontSize.toString(),
5555
5936
  key: name,
5556
- tooltip: tooltip,
5557
- showArrow: false
5937
+ tooltip: tooltip
5558
5938
  }, function (setOpen) {
5559
5939
  return /*#__PURE__*/React__default['default'].createElement(Select, null, [9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72].map(function (num) {
5560
5940
  return /*#__PURE__*/React__default['default'].createElement(Option, {
@@ -5589,8 +5969,7 @@ var Toolbar = function Toolbar(_ref) {
5589
5969
  return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
5590
5970
  })) === null || _$find === void 0 ? void 0 : _$find.title) || "align-left",
5591
5971
  key: name,
5592
- tooltip: toolbar.horizontalAlign,
5593
- showArrow: false
5972
+ tooltip: toolbar.horizontalAlign
5594
5973
  }, function (setOpen) {
5595
5974
  return /*#__PURE__*/React__default['default'].createElement(Select, null, items.map(function (_ref3) {
5596
5975
  var text = _ref3.text,
@@ -5631,8 +6010,7 @@ var Toolbar = function Toolbar(_ref) {
5631
6010
  return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
5632
6011
  })) === null || _$find2 === void 0 ? void 0 : _$find2.title) || "align-top",
5633
6012
  key: name,
5634
- tooltip: toolbar.verticalAlign,
5635
- showArrow: false
6013
+ tooltip: toolbar.verticalAlign
5636
6014
  }, function (setOpen) {
5637
6015
  return /*#__PURE__*/React__default['default'].createElement(Select, null, _items.map(function (_ref4) {
5638
6016
  var text = _ref4.text,
@@ -5757,8 +6135,7 @@ var Toolbar = function Toolbar(_ref) {
5757
6135
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
5758
6136
  iconId: "locationCondition",
5759
6137
  key: name,
5760
- tooltip: findAndReplace.location,
5761
- showArrow: false
6138
+ tooltip: findAndReplace.location
5762
6139
  }, function (setOpen) {
5763
6140
  return /*#__PURE__*/React__default['default'].createElement(Select, null, _items2.map(function (_ref5) {
5764
6141
  var text = _ref5.text,
@@ -5843,8 +6220,7 @@ var Toolbar = function Toolbar(_ref) {
5843
6220
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
5844
6221
  iconId: "conditionFormat",
5845
6222
  key: name,
5846
- tooltip: toolbar.conditionalFormat,
5847
- showArrow: false
6223
+ tooltip: toolbar.conditionalFormat
5848
6224
  }, function (setOpen) {
5849
6225
  return /*#__PURE__*/React__default['default'].createElement(ConditionalFormat, {
5850
6226
  items: _items3,
@@ -5941,8 +6317,7 @@ var Toolbar = function Toolbar(_ref) {
5941
6317
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
5942
6318
  iconId: name,
5943
6319
  key: name,
5944
- tooltip: tooltip,
5945
- showArrow: false
6320
+ tooltip: tooltip
5946
6321
  }, function (setOpen) {
5947
6322
  return /*#__PURE__*/React__default['default'].createElement(Select, null, itemData.map(function (_ref6) {
5948
6323
  var key = _ref6.key,
@@ -5981,7 +6356,6 @@ var Toolbar = function Toolbar(_ref) {
5981
6356
  iconId: "formula-sum",
5982
6357
  key: name,
5983
6358
  tooltip: toolbar.autoSum,
5984
- showArrow: false,
5985
6359
  onClick: function onClick() {
5986
6360
  return setContext(function (ctx) {
5987
6361
  fortuneCore.handleSum(ctx, refs.cellInput.current, refs.fxInput.current, refs.globalCache);
@@ -6053,13 +6427,12 @@ var Toolbar = function Toolbar(_ref) {
6053
6427
  setOpen(false);
6054
6428
  }
6055
6429
  }, /*#__PURE__*/React__default['default'].createElement("div", {
6430
+ className: "fortune-toolbar-menu-line"
6431
+ }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
6432
+ name: value,
6056
6433
  style: {
6057
- display: "flex",
6058
- alignItems: "center",
6059
- gap: 6
6434
+ marginRight: 4
6060
6435
  }
6061
- }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
6062
- name: value
6063
6436
  }), text));
6064
6437
  }));
6065
6438
  });
@@ -6077,6 +6450,9 @@ var Toolbar = function Toolbar(_ref) {
6077
6450
  }, {
6078
6451
  text: border.borderRight,
6079
6452
  value: "border-right"
6453
+ }, {
6454
+ text: "",
6455
+ value: "divider"
6080
6456
  }, {
6081
6457
  text: border.borderNone,
6082
6458
  value: "border-none"
@@ -6086,6 +6462,9 @@ var Toolbar = function Toolbar(_ref) {
6086
6462
  }, {
6087
6463
  text: border.borderOutside,
6088
6464
  value: "border-outside"
6465
+ }, {
6466
+ text: "",
6467
+ value: "divider"
6089
6468
  }, {
6090
6469
  text: border.borderInside,
6091
6470
  value: "border-inside"
@@ -6098,35 +6477,44 @@ var Toolbar = function Toolbar(_ref) {
6098
6477
  }, {
6099
6478
  text: border.borderSlash,
6100
6479
  value: "border-slash"
6480
+ }, {
6481
+ text: "",
6482
+ value: "divider"
6101
6483
  }];
6102
6484
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
6103
6485
  iconId: "border-all",
6104
6486
  key: name,
6105
6487
  tooltip: tooltip,
6106
6488
  text: "\u8FB9\u6846\u8BBE\u7F6E",
6107
- showArrow: false,
6108
6489
  onClick: function onClick() {
6109
6490
  return setContext(function (ctx) {
6110
6491
  fortuneCore.handleBorder(ctx, "border-all", customColor, customStyle);
6111
6492
  });
6112
6493
  }
6113
6494
  }, function (setOpen) {
6114
- return /*#__PURE__*/React__default['default'].createElement("div", {
6115
- className: "fortune-toolbar-select fortune-border-grid"
6116
- }, _items4.map(function (_ref9) {
6117
- var value = _ref9.value;
6118
- return /*#__PURE__*/React__default['default'].createElement("div", {
6495
+ return /*#__PURE__*/React__default['default'].createElement(Select, null, _items4.map(function (_ref9, ii) {
6496
+ var text = _ref9.text,
6497
+ value = _ref9.value;
6498
+ return value !== "divider" ? (/*#__PURE__*/React__default['default'].createElement(Option, {
6119
6499
  key: value,
6120
- className: "fortune-border-grid-item",
6121
6500
  onClick: function onClick() {
6122
6501
  setContext(function (ctx) {
6123
6502
  fortuneCore.handleBorder(ctx, value, customColor, customStyle);
6124
6503
  });
6125
6504
  setOpen(false);
6126
6505
  }
6127
- }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
6506
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
6507
+ className: "fortune-toolbar-menu-line"
6508
+ }, text, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
6128
6509
  name: value
6510
+ })))) : (/*#__PURE__*/React__default['default'].createElement(MenuDivider, {
6511
+ key: ii
6129
6512
  }));
6513
+ }), /*#__PURE__*/React__default['default'].createElement(CustomBorder, {
6514
+ onPick: function onPick(color, style) {
6515
+ setcustomColor(color);
6516
+ setcustomStyle(style);
6517
+ }
6130
6518
  }));
6131
6519
  });
6132
6520
  }
@@ -6148,7 +6536,6 @@ var Toolbar = function Toolbar(_ref) {
6148
6536
  iconId: "freeze-row-col",
6149
6537
  key: name,
6150
6538
  tooltip: tooltip,
6151
- showArrow: false,
6152
6539
  onClick: function onClick() {
6153
6540
  return setContext(function (ctx) {
6154
6541
  fortuneCore.handleFreeze(ctx, "freeze-row-col");
@@ -6195,8 +6582,7 @@ var Toolbar = function Toolbar(_ref) {
6195
6582
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
6196
6583
  iconId: _curr.iconId,
6197
6584
  key: name,
6198
- tooltip: toolbar.textWrap,
6199
- showArrow: false
6585
+ tooltip: toolbar.textWrap
6200
6586
  }, function (setOpen) {
6201
6587
  return /*#__PURE__*/React__default['default'].createElement(Select, null, _items6.map(function (_ref1) {
6202
6588
  var text = _ref1.text,
@@ -6253,8 +6639,7 @@ var Toolbar = function Toolbar(_ref) {
6253
6639
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
6254
6640
  iconId: _curr2.iconId,
6255
6641
  key: name,
6256
- tooltip: toolbar.textRotate,
6257
- showArrow: false
6642
+ tooltip: toolbar.textRotate
6258
6643
  }, function (setOpen) {
6259
6644
  return /*#__PURE__*/React__default['default'].createElement(Select, null, _items7.map(function (_ref10) {
6260
6645
  var text = _ref10.text,
@@ -6322,8 +6707,7 @@ var Toolbar = function Toolbar(_ref) {
6322
6707
  return /*#__PURE__*/React__default['default'].createElement(Combo, {
6323
6708
  iconId: "filter",
6324
6709
  key: name,
6325
- tooltip: toolbar.sortAndFilter,
6326
- showArrow: false
6710
+ tooltip: toolbar.sortAndFilter
6327
6711
  }, function (setOpen) {
6328
6712
  return /*#__PURE__*/React__default['default'].createElement(Select, {
6329
6713
  style: {
@@ -6346,9 +6730,7 @@ var Toolbar = function Toolbar(_ref) {
6346
6730
  justifyContent: "start"
6347
6731
  }
6348
6732
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
6349
- name: iconId,
6350
- width: 24,
6351
- height: 18
6733
+ name: iconId
6352
6734
  }), text))) : (/*#__PURE__*/React__default['default'].createElement(MenuDivider, {
6353
6735
  key: "divider-".concat(index)
6354
6736
  }));
@@ -6373,7 +6755,7 @@ var Toolbar = function Toolbar(_ref) {
6373
6755
  className: "fortune-toolbar",
6374
6756
  "aria-label": toolbar.toolbar
6375
6757
  }, settings.customToolbarItems.filter(function (n) {
6376
- return n.key === "import-export";
6758
+ return n.key !== "templates";
6377
6759
  }).map(function (n) {
6378
6760
  return /*#__PURE__*/React__default['default'].createElement(CustomButton, {
6379
6761
  tooltip: n.tooltip,
@@ -6410,18 +6792,6 @@ var Toolbar = function Toolbar(_ref) {
6410
6792
  icon: n.icon,
6411
6793
  iconName: n.iconName
6412
6794
  }, n.children);
6413
- }), /*#__PURE__*/React__default['default'].createElement(Divider, {
6414
- key: "customDivider"
6415
- }), settings.customToolbarItems.filter(function (n) {
6416
- return n.key !== "templates" && n.key !== "import-export";
6417
- }).map(function (n) {
6418
- return /*#__PURE__*/React__default['default'].createElement(CustomButton, {
6419
- tooltip: n.tooltip,
6420
- onClick: n.onClick,
6421
- key: n.key,
6422
- icon: n.icon,
6423
- iconName: n.iconName
6424
- }, n.children);
6425
6795
  }));
6426
6796
  };
6427
6797
 
@@ -7666,8 +8036,7 @@ var ContextMenu = function ContextMenu() {
7666
8036
  }
7667
8037
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
7668
8038
  name: "sort-asc",
7669
- width: 24,
7670
- height: 18,
8039
+ width: 22,
7671
8040
  style: {
7672
8041
  marginRight: "4px"
7673
8042
  }
@@ -7685,8 +8054,7 @@ var ContextMenu = function ContextMenu() {
7685
8054
  }
7686
8055
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
7687
8056
  name: "sort-desc",
7688
- width: 24,
7689
- height: 18,
8057
+ width: 22,
7690
8058
  style: {
7691
8059
  marginRight: "4px"
7692
8060
  }
@@ -7742,7 +8110,7 @@ var ContextMenu = function ContextMenu() {
7742
8110
  }
7743
8111
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
7744
8112
  name: "filter",
7745
- width: 24,
8113
+ width: 22,
7746
8114
  style: {
7747
8115
  marginRight: "4px"
7748
8116
  }
@@ -7760,11 +8128,9 @@ var ContextMenu = function ContextMenu() {
7760
8128
  }
7761
8129
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
7762
8130
  name: "eraser",
7763
- width: 24,
7764
- height: 22,
8131
+ width: 22,
7765
8132
  style: {
7766
- marginRight: "4px",
7767
- marginLeft: "2px"
8133
+ marginRight: "4px"
7768
8134
  }
7769
8135
  }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.clearFilter))))),
7770
8136
  trigger: "mouseenter focus",
@@ -7775,7 +8141,7 @@ var ContextMenu = function ContextMenu() {
7775
8141
  className: "context-item"
7776
8142
  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
7777
8143
  name: "filter",
7778
- width: 24,
8144
+ width: 22,
7779
8145
  style: {
7780
8146
  marginRight: "4px"
7781
8147
  }
@@ -10199,24 +10565,23 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
10199
10565
  var SelectItem = function SelectItem(_ref) {
10200
10566
  var item = _ref.item,
10201
10567
  isChecked = _ref.isChecked,
10202
- onChange = _ref.onChange,
10568
+ _onChange = _ref.onChange,
10203
10569
  isItemVisible = _ref.isItemVisible;
10204
10570
  var checked = React.useMemo(function () {
10205
10571
  return isChecked(item.key);
10206
10572
  }, [isChecked, item.key]);
10207
10573
  return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", {
10208
10574
  className: "select-item"
10209
- }, /*#__PURE__*/React__default['default'].createElement("div", {
10210
- className: "flex items-center gap-2"
10211
- }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
10212
- className: "border-2",
10575
+ }, /*#__PURE__*/React__default['default'].createElement("input", {
10576
+ className: "filter-checkbox",
10577
+ type: "checkbox",
10213
10578
  checked: checked,
10214
- onCheckedChange: function onCheckedChange(e) {
10215
- onChange(item, e.target.checked);
10579
+ onChange: function onChange() {
10580
+ _onChange(item, !checked);
10216
10581
  }
10217
- }), /*#__PURE__*/React__default['default'].createElement("span", null, item.text)), /*#__PURE__*/React__default['default'].createElement("span", {
10582
+ }), /*#__PURE__*/React__default['default'].createElement("div", null, item.text), /*#__PURE__*/React__default['default'].createElement("span", {
10218
10583
  className: "count"
10219
- }, "".concat(item.rows.length)))) : null;
10584
+ }, "( ".concat(item.rows.length, " )")))) : null;
10220
10585
  };
10221
10586
  var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
10222
10587
  var item = _ref2.item,
@@ -10225,7 +10590,7 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
10225
10590
  initialExpand = _ref2.initialExpand,
10226
10591
  onExpand = _ref2.onExpand,
10227
10592
  isChecked = _ref2.isChecked,
10228
- onChange = _ref2.onChange,
10593
+ _onChange2 = _ref2.onChange,
10229
10594
  isItemVisible = _ref2.isItemVisible;
10230
10595
  var _useState = React.useState(initialExpand(item.key)),
10231
10596
  _useState2 = _slicedToArray(_useState, 2),
@@ -10234,43 +10599,39 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
10234
10599
  var checked = React.useMemo(function () {
10235
10600
  return isChecked(item.key);
10236
10601
  }, [isChecked, item.key]);
10237
- return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", {
10238
- className: "flex flex-col gap-2"
10239
- }, /*#__PURE__*/React__default['default'].createElement("div", {
10602
+ return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
10240
10603
  className: "select-item",
10241
10604
  style: {
10242
10605
  marginLeft: -2 + depth * 20
10243
10606
  },
10244
- tabIndex: 0
10245
- }, /*#__PURE__*/React__default['default'].createElement("div", {
10246
- className: "flex items-center gap-2",
10247
- style: {
10248
- flex: 1
10607
+ onClick: function onClick() {
10608
+ onExpand === null || onExpand === void 0 ? void 0 : onExpand(item.key, !expand);
10609
+ setExpand(!expand);
10249
10610
  },
10250
- onClick: function onClick(e) {
10251
- return e.stopPropagation();
10252
- }
10611
+ tabIndex: 0
10253
10612
  }, ___default['default'].isEmpty(item.children) ? (/*#__PURE__*/React__default['default'].createElement("div", {
10254
10613
  style: {
10255
10614
  width: 10
10256
10615
  }
10257
- })) : (/*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
10258
- name: expand ? "ChevronDown" : "ChevronRight",
10259
- className: "cursor-pointer",
10260
- size: "sm",
10261
- onClick: function onClick() {
10262
- onExpand === null || onExpand === void 0 ? void 0 : onExpand(item.key, !expand);
10263
- setExpand(!expand);
10616
+ })) : (/*#__PURE__*/React__default['default'].createElement("div", {
10617
+ className: "filter-caret ".concat(expand ? "down" : "right"),
10618
+ style: {
10619
+ cursor: "pointer"
10264
10620
  }
10265
- })), /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
10266
- className: "border-2",
10621
+ })), /*#__PURE__*/React__default['default'].createElement("input", {
10622
+ className: "filter-checkbox",
10623
+ type: "checkbox",
10267
10624
  checked: checked,
10268
- onCheckedChange: function onCheckedChange(e) {
10269
- onChange(item, e.target.checked);
10270
- }
10271
- }), /*#__PURE__*/React__default['default'].createElement("span", null, item.text)), /*#__PURE__*/React__default['default'].createElement("span", {
10625
+ onChange: function onChange() {
10626
+ _onChange2(item, !checked);
10627
+ },
10628
+ onClick: function onClick(e) {
10629
+ return e.stopPropagation();
10630
+ },
10631
+ tabIndex: 0
10632
+ }), /*#__PURE__*/React__default['default'].createElement("div", null, item.text), /*#__PURE__*/React__default['default'].createElement("span", {
10272
10633
  className: "count"
10273
- }, "".concat(item.rows.length))), expand && item.children.map(function (v) {
10634
+ }, "( ".concat(item.rows.length, " )"))), expand && item.children.map(function (v) {
10274
10635
  return /*#__PURE__*/React__default['default'].createElement(_DateSelectTreeItem, _objectSpread2({
10275
10636
  key: v.key,
10276
10637
  item: v,
@@ -10279,7 +10640,7 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
10279
10640
  initialExpand: initialExpand,
10280
10641
  onExpand: onExpand,
10281
10642
  isChecked: isChecked,
10282
- onChange: onChange,
10643
+ onChange: _onChange2,
10283
10644
  isItemVisible: isItemVisible
10284
10645
  }));
10285
10646
  }))) : null;
@@ -10328,7 +10689,8 @@ var FilterMenu = function FilterMenu() {
10328
10689
  startCol = _ref4.startCol,
10329
10690
  endRow = _ref4.endRow,
10330
10691
  endCol = _ref4.endCol,
10331
- col = _ref4.col;
10692
+ col = _ref4.col,
10693
+ listBoxMaxHeight = _ref4.listBoxMaxHeight;
10332
10694
  var _locale = fortuneCore.locale(context),
10333
10695
  filter = _locale.filter;
10334
10696
  var _useState3 = React.useState({
@@ -10403,6 +10765,25 @@ var FilterMenu = function FilterMenu() {
10403
10765
  }));
10404
10766
  }, 300);
10405
10767
  }, [data.flattenValues]);
10768
+ var selectAll = React.useCallback(function () {
10769
+ setDatesUncheck([]);
10770
+ setValuesUncheck([]);
10771
+ hiddenRows.current = [];
10772
+ }, []);
10773
+ var clearAll = React.useCallback(function () {
10774
+ setDatesUncheck(___default['default'].keys(data.dateRowMap));
10775
+ setValuesUncheck(___default['default'].keys(data.valueRowMap));
10776
+ hiddenRows.current = data.visibleRows;
10777
+ }, [data.dateRowMap, data.valueRowMap, data.visibleRows]);
10778
+ var inverseSelect = React.useCallback(function () {
10779
+ setDatesUncheck(produce__default['default'](function (draft) {
10780
+ return ___default['default'].xor(draft, ___default['default'].keys(data.dateRowMap));
10781
+ }));
10782
+ setValuesUncheck(produce__default['default'](function (draft) {
10783
+ return ___default['default'].xor(draft, ___default['default'].keys(data.valueRowMap));
10784
+ }));
10785
+ hiddenRows.current = ___default['default'].xor(hiddenRows.current, data.visibleRows);
10786
+ }, [data.dateRowMap, data.valueRowMap, data.visibleRows]);
10406
10787
  var onColorSelectChange = React.useCallback(function (key, color, checked) {
10407
10788
  setFilterColors(produce__default['default'](function (draft) {
10408
10789
  var colorData = ___default['default'].find(___default['default'].get(draft, key), function (v) {
@@ -10532,12 +10913,11 @@ var FilterMenu = function FilterMenu() {
10532
10913
  ref: containerRef,
10533
10914
  style: {
10534
10915
  left: filterContextMenu.x,
10535
- top: filterContextMenu.y,
10536
- minWidth: "280px !important"
10916
+ top: filterContextMenu.y
10537
10917
  }
10538
10918
  }, (_settings$filterConte = settings.filterContextMenu) === null || _settings$filterConte === void 0 ? void 0 : _settings$filterConte.map(function (name, i) {
10539
10919
  if (name === "|") {
10540
- return /*#__PURE__*/React__default['default'].createElement(ui.Divider, {
10920
+ return /*#__PURE__*/React__default['default'].createElement(Divider$1, {
10541
10921
  key: "divider-".concat(i)
10542
10922
  });
10543
10923
  }
@@ -10547,16 +10927,7 @@ var FilterMenu = function FilterMenu() {
10547
10927
  onClick: function onClick() {
10548
10928
  return sortData(true);
10549
10929
  }
10550
- }, /*#__PURE__*/React__default['default'].createElement("div", {
10551
- className: "context-item w-full"
10552
- }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
10553
- name: "sort-asc",
10554
- width: 24,
10555
- height: 18,
10556
- style: {
10557
- marginRight: "4px"
10558
- }
10559
- }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.sortByAsc)));
10930
+ }, filter.sortByAsc);
10560
10931
  }
10561
10932
  if (name === "sort-by-desc") {
10562
10933
  return /*#__PURE__*/React__default['default'].createElement(Menu, {
@@ -10564,16 +10935,7 @@ var FilterMenu = function FilterMenu() {
10564
10935
  onClick: function onClick() {
10565
10936
  return sortData(false);
10566
10937
  }
10567
- }, /*#__PURE__*/React__default['default'].createElement("div", {
10568
- className: "context-item w-full"
10569
- }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
10570
- name: "sort-desc",
10571
- width: 24,
10572
- height: 18,
10573
- style: {
10574
- marginRight: "4px"
10575
- }
10576
- }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.sortByDesc)));
10938
+ }, filter.sortByDesc);
10577
10939
  }
10578
10940
  if (name === "filter-by-color") {
10579
10941
  return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -10601,22 +10963,72 @@ var FilterMenu = function FilterMenu() {
10601
10963
  className: "filter-caret right"
10602
10964
  }))));
10603
10965
  }
10966
+ if (name === "filter-by-condition") {
10967
+ return /*#__PURE__*/React__default['default'].createElement("div", {
10968
+ key: "name"
10969
+ }, /*#__PURE__*/React__default['default'].createElement(Menu, {
10970
+ onClick: function onClick() {}
10971
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
10972
+ className: "filter-caret right"
10973
+ }), filter.filterByCondition), /*#__PURE__*/React__default['default'].createElement("div", {
10974
+ className: "luckysheet-\\${menuid}-bycondition",
10975
+ style: {
10976
+ display: "none"
10977
+ }
10978
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
10979
+ className: "luckysheet-flat-menu-button luckysheet-mousedown-cancel",
10980
+ id: "luckysheet-\\${menuid}-selected"
10981
+ }, /*#__PURE__*/React__default['default'].createElement("span", {
10982
+ className: "luckysheet-mousedown-cancel",
10983
+ "data-value": "null",
10984
+ "data-type": "0"
10985
+ }, filter.filiterInputNone), /*#__PURE__*/React__default['default'].createElement("div", {
10986
+ className: "luckysheet-mousedown-cancel"
10987
+ }, /*#__PURE__*/React__default['default'].createElement("i", {
10988
+ className: "fa fa-sort",
10989
+ "aria-hidden": "true"
10990
+ })))));
10991
+ }
10604
10992
  if (name === "filter-by-value") {
10605
10993
  return /*#__PURE__*/React__default['default'].createElement("div", {
10606
10994
  key: name
10995
+ }, /*#__PURE__*/React__default['default'].createElement(Menu, {
10996
+ onClick: function onClick() {}
10607
10997
  }, /*#__PURE__*/React__default['default'].createElement("div", {
10608
- className: "luckysheet-filter-byvalue flex flex-col gap-2 mt-2"
10998
+ className: "filter-caret right"
10999
+ }), filter.filterByValues), /*#__PURE__*/React__default['default'].createElement("div", {
11000
+ className: "luckysheet-filter-byvalue"
10609
11001
  }, /*#__PURE__*/React__default['default'].createElement("div", {
11002
+ className: "fortune-menuitem-row byvalue-btn-row"
11003
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("span", {
11004
+ className: "fortune-byvalue-btn",
11005
+ onClick: selectAll,
11006
+ tabIndex: 0
11007
+ }, filter.filterValueByAllBtn), " - ", /*#__PURE__*/React__default['default'].createElement("span", {
11008
+ className: "fortune-byvalue-btn",
11009
+ onClick: clearAll,
11010
+ tabIndex: 0
11011
+ }, filter.filterValueByClearBtn), " - ", /*#__PURE__*/React__default['default'].createElement("span", {
11012
+ className: "fortune-byvalue-btn",
11013
+ onClick: inverseSelect,
11014
+ tabIndex: 0
11015
+ }, filter.filterValueByInverseBtn)), /*#__PURE__*/React__default['default'].createElement("div", {
11016
+ className: "byvalue-filter-icon"
11017
+ }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
11018
+ name: "filter-fill",
11019
+ style: {
11020
+ width: 20,
11021
+ height: 20
11022
+ }
11023
+ }))), /*#__PURE__*/React__default['default'].createElement("div", {
10610
11024
  className: "filtermenu-input-container"
10611
- }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
10612
- leftIcon: /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
10613
- name: "Search",
10614
- size: "sm"
10615
- }),
11025
+ }, /*#__PURE__*/React__default['default'].createElement("input", {
11026
+ type: "text",
10616
11027
  onKeyDown: function onKeyDown(e) {
10617
11028
  return e.stopPropagation();
10618
11029
  },
10619
11030
  placeholder: filter.filterValueByTip,
11031
+ className: "luckysheet-mousedown-cancel",
10620
11032
  id: "luckysheet-\\${menuid}-byvalue-input",
10621
11033
  value: searchText,
10622
11034
  onChange: function onChange(e) {
@@ -10624,7 +11036,10 @@ var FilterMenu = function FilterMenu() {
10624
11036
  searchValues(e.target.value);
10625
11037
  }
10626
11038
  })), /*#__PURE__*/React__default['default'].createElement("div", {
10627
- id: "luckysheet-filter-byvalue-select"
11039
+ id: "luckysheet-filter-byvalue-select",
11040
+ style: {
11041
+ maxHeight: listBoxMaxHeight
11042
+ }
10628
11043
  }, /*#__PURE__*/React__default['default'].createElement(DateSelectTree, {
10629
11044
  dates: data.dates,
10630
11045
  onExpand: onExpand,
@@ -10646,37 +11061,6 @@ var FilterMenu = function FilterMenu() {
10646
11061
  return v.match(item.key) != null;
10647
11062
  }) > -1;
10648
11063
  }
10649
- }), /*#__PURE__*/React__default['default'].createElement(SelectItem, {
10650
- item: {
10651
- key: "all",
10652
- text: filter.filterValueByAllBtn,
10653
- value: "",
10654
- mask: "",
10655
- rows: data.values.filter(function (v) {
10656
- return showValues.includes(v.text);
10657
- }).flatMap(function (v) {
10658
- return v.rows;
10659
- })
10660
- },
10661
- isChecked: function isChecked() {
10662
- var allDatesChecked = datesUncheck.length === 0;
10663
- var allValuesChecked = valuesUncheck.length === 0;
10664
- return allDatesChecked && allValuesChecked;
10665
- },
10666
- onChange: function onChange(item, checked) {
10667
- if (checked) {
10668
- setDatesUncheck([]);
10669
- setValuesUncheck([]);
10670
- hiddenRows.current = [];
10671
- } else {
10672
- setDatesUncheck(___default['default'].keys(data.dateRowMap));
10673
- setValuesUncheck(___default['default'].keys(data.valueRowMap));
10674
- hiddenRows.current = data.visibleRows;
10675
- }
10676
- },
10677
- isItemVisible: function isItemVisible() {
10678
- return true;
10679
- }
10680
11064
  }), data.values.map(function (v) {
10681
11065
  return /*#__PURE__*/React__default['default'].createElement(SelectItem, {
10682
11066
  key: v.key,
@@ -10686,17 +11070,14 @@ var FilterMenu = function FilterMenu() {
10686
11070
  },
10687
11071
  onChange: function onChange(item, checked) {
10688
11072
  var rows = hiddenRows.current;
10689
- if (checked) {
10690
- hiddenRows.current = ___default['default'].without.apply(___default['default'], [rows].concat(_toConsumableArray(item.rows)));
10691
- setValuesUncheck(produce__default['default'](function (draft) {
11073
+ hiddenRows.current = checked ? ___default['default'].without.apply(___default['default'], [rows].concat(_toConsumableArray(item.rows))) : ___default['default'].concat(rows, item.rows);
11074
+ setValuesUncheck(produce__default['default'](function (draft) {
11075
+ if (checked) {
10692
11076
  ___default['default'].pull(draft, item.key);
10693
- }));
10694
- } else {
10695
- hiddenRows.current = ___default['default'].concat(rows, item.rows);
10696
- setValuesUncheck(produce__default['default'](function (draft) {
11077
+ } else {
10697
11078
  draft.push(item.key);
10698
- }));
10699
- }
11079
+ }
11080
+ }));
10700
11081
  },
10701
11082
  isItemVisible: function isItemVisible(item) {
10702
11083
  return showValues.length === data.flattenValues.length ? true : ___default['default'].includes(showValues, item.text);
@@ -10705,49 +11086,40 @@ var FilterMenu = function FilterMenu() {
10705
11086
  }))));
10706
11087
  }
10707
11088
  return null;
10708
- }), /*#__PURE__*/React__default['default'].createElement("div", {
10709
- className: "fortune-menuitem-row mt-2"
10710
- }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
10711
- variant: "ghost",
10712
- style: {
10713
- minWidth: "80px"
10714
- },
11089
+ }), /*#__PURE__*/React__default['default'].createElement(Divider$1, null), /*#__PURE__*/React__default['default'].createElement("div", {
11090
+ className: "fortune-menuitem-row"
11091
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
11092
+ className: "button-basic button-primary",
10715
11093
  onClick: function onClick() {
11094
+ if (col == null) return;
10716
11095
  setContext(function (draftCtx) {
10717
- fortuneCore.clearFilter(draftCtx);
11096
+ var rowHidden = ___default['default'].reduce(hiddenRows.current, function (pre, curr) {
11097
+ pre[curr] = 0;
11098
+ return pre;
11099
+ }, {});
11100
+ fortuneCore.saveFilter(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
11101
+ hiddenRows.current = [];
11102
+ draftCtx.filterContextMenu = undefined;
10718
11103
  });
10719
11104
  },
10720
11105
  tabIndex: 0
10721
- }, filter.clearFilter), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
10722
- variant: "secondary",
10723
- style: {
10724
- minWidth: "80px"
10725
- },
11106
+ }, filter.filterConform), /*#__PURE__*/React__default['default'].createElement("div", {
11107
+ className: "button-basic button-default",
10726
11108
  onClick: function onClick() {
10727
11109
  setContext(function (draftCtx) {
10728
11110
  draftCtx.filterContextMenu = undefined;
10729
11111
  });
10730
11112
  },
10731
11113
  tabIndex: 0
10732
- }, filter.filterCancel), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
10733
- variant: "default",
10734
- style: {
10735
- minWidth: "80px"
10736
- },
11114
+ }, filter.filterCancel), /*#__PURE__*/React__default['default'].createElement("div", {
11115
+ className: "button-basic button-danger",
10737
11116
  onClick: function onClick() {
10738
- if (col == null) return;
10739
11117
  setContext(function (draftCtx) {
10740
- var rowHidden = ___default['default'].reduce(hiddenRows.current, function (pre, curr) {
10741
- pre[curr] = 0;
10742
- return pre;
10743
- }, {});
10744
- fortuneCore.saveFilter(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
10745
- hiddenRows.current = [];
10746
- draftCtx.filterContextMenu = undefined;
11118
+ fortuneCore.clearFilter(draftCtx);
10747
11119
  });
10748
11120
  },
10749
11121
  tabIndex: 0
10750
- }, filter.filterConfirm))), showSubMenu && (/*#__PURE__*/React__default['default'].createElement("div", {
11122
+ }, filter.clearFilter))), showSubMenu && (/*#__PURE__*/React__default['default'].createElement("div", {
10751
11123
  ref: subMenuRef,
10752
11124
  className: "luckysheet-filter-bycolor-submenu",
10753
11125
  style: subMenuPos,
@@ -10787,7 +11159,7 @@ var FilterMenu = function FilterMenu() {
10787
11159
  });
10788
11160
  },
10789
11161
  tabIndex: 0
10790
- }, filter.filterConfirm))))));
11162
+ }, filter.filterConform))))));
10791
11163
  };
10792
11164
 
10793
11165
  var SheetHiddenButton = function SheetHiddenButton(_ref) {