@leankylin-sheet/react 5.2.52 → 5.2.54

package/dist/components/Dialog/index.d.ts

@@ -6,6 +6,10 @@ type Props = {
     onCancel?: () => void;
     containerStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
+    title?: string;
+    iconType?: "warning" | "info";
+    confirmText?: string;
+    danger?: boolean;
     children?: React.ReactNode;
 };
 declare const Dialog: React.FC<Props>;

package/dist/components/MessageBox/index.d.ts

@@ -3,6 +3,10 @@ type Props = {
     type: "ok" | "yesno";
     onOk?: () => void;
     onCancel?: () => void;
+    title?: string;
+    iconType?: "warning" | "info";
+    confirmText?: string;
+    danger?: boolean;
     children?: React.ReactNode;
 };
 declare const MessageBox: React.FC<Props>;

package/dist/hooks/useAlert.d.ts

@@ -1,4 +1,12 @@
+import React from "react";
+type AlertOptions = {
+    title?: string;
+    icon?: "warning" | "info";
+    confirmText?: string;
+    danger?: boolean;
+};
 export declare function useAlert(): {
-    showAlert: (message: string, type?: "ok" | "yesno", onOk?: () => void, onCancel?: () => void) => void;
+    showAlert: (message: React.ReactNode, type?: "ok" | "yesno", onOk?: () => void, onCancel?: () => void, options?: AlertOptions) => void;
     hideAlert: () => void;
 };
+export {};

package/dist/index.css

@@ -1205,10 +1205,9 @@ html::-webkit-scrollbar-button {
 .leankylin-dialog {
   max-width: 90%;
   max-height: 90%;
-  overflow: scroll;
-  border-radius: 6px;
+  border-radius: 8px;
   background: white;
-  box-shadow: rgb(0 0 0 / 10%) 5px 5px 30px;
+  box-shadow: 0 2px 12px rgb(0 0 0 / 15%);
   box-sizing: border-box;
   overflow: auto;
 }
@@ -1217,55 +1216,127 @@ html::-webkit-scrollbar-button {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-top: 12px;
+  padding-bottom: 20px;
 }
 
 .leankylin-dialog-box-content {
   padding: 0px 25px;
 }
 
-.leankylin-dialog-box-button-container {
-  padding-top: 10px;
-  padding-bottom: 20px;
-}
-
 .leankylin-message-box-button {
   display: inline-flex;
   align-items: center;
-  padding: 6px 12px;
-  margin: 0 8px;
+  padding: 6px 14px;
+  margin: 0 6px;
   border: none;
   border-radius: 4px;
   font-size: 14px;
   line-height: 20px;
   outline: none;
   cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .leankylin-message-box-button.button-default {
-  color: rgb(38, 42, 51);
-  background-color: rgb(255, 255, 255);
-  border: 1px solid rgb(235, 235, 235);
+  color: #333333;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+}
+
+.leankylin-message-box-button.button-default:hover {
+  background-color: #f5f5f5;
 }
 
 .leankylin-message-box-button.button-primary {
   color: white;
-  background-color: #0188FB;
+  background-color: #0188fb;
+}
+
+.leankylin-message-box-button.button-primary:hover {
+  background-color: #1677ff;
+}
+
+.leankylin-message-box-button.button-danger {
+  color: white;
+  border: none;
+  outline: none;
+  background-color: #fa541c;
+}
+
+.leankylin-message-box-button.button-danger:hover {
+  background-color: #ff7a45;
+}
+
+.leankylin-message-box-button.button-danger:focus-visible {
+  outline: none;
 }
 
 .leankylin-modal-dialog-header {
+  position: relative;
   outline: 0;
   display: flex;
   justify-content: flex-end;
+  padding: 4px 4px 0;
+}
+
+.leankylin-modal-dialog-title {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2329;
+  white-space: nowrap;
 }
 
 .leankylin-modal-dialog-icon-close {
-  color: #d4d4d4;
-  opacity: 0.3;
+  color: #999999;
+  opacity: 0.5;
+  display: flex;
+  align-items: center;
 }
 
 .leankylin-modal-dialog-icon-close:hover {
-  opacity: 0.7;
+  opacity: 1;
+}
+
+.leankylin-dialog-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
 }
+
+.leankylin-dialog-icon-warning,
+.leankylin-dialog-icon-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.leankylin-dialog-icon-warning {
+  background: #fff1e8;
+  color: #fa541c;
+}
+
+.leankylin-dialog-icon-info {
+  background: #e6f4ff;
+  color: #0188fb;
+}
+
+.leankylin-dialog-tip {
+  font-size: 12px;
+  color: #8f959e;
+  line-height: 18px;
+}
+
 /* 查找替换弹出框样式 */
 #leankylin-search-replace {
   position: absolute;

package/dist/index.esm.css

@@ -1205,10 +1205,9 @@ html::-webkit-scrollbar-button {
 .leankylin-dialog {
   max-width: 90%;
   max-height: 90%;
-  overflow: scroll;
-  border-radius: 6px;
+  border-radius: 8px;
   background: white;
-  box-shadow: rgb(0 0 0 / 10%) 5px 5px 30px;
+  box-shadow: 0 2px 12px rgb(0 0 0 / 15%);
   box-sizing: border-box;
   overflow: auto;
 }
@@ -1217,55 +1216,127 @@ html::-webkit-scrollbar-button {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-top: 12px;
+  padding-bottom: 20px;
 }
 
 .leankylin-dialog-box-content {
   padding: 0px 25px;
 }
 
-.leankylin-dialog-box-button-container {
-  padding-top: 10px;
-  padding-bottom: 20px;
-}
-
 .leankylin-message-box-button {
   display: inline-flex;
   align-items: center;
-  padding: 6px 12px;
-  margin: 0 8px;
+  padding: 6px 14px;
+  margin: 0 6px;
   border: none;
   border-radius: 4px;
   font-size: 14px;
   line-height: 20px;
   outline: none;
   cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .leankylin-message-box-button.button-default {
-  color: rgb(38, 42, 51);
-  background-color: rgb(255, 255, 255);
-  border: 1px solid rgb(235, 235, 235);
+  color: #333333;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+}
+
+.leankylin-message-box-button.button-default:hover {
+  background-color: #f5f5f5;
 }
 
 .leankylin-message-box-button.button-primary {
   color: white;
-  background-color: #0188FB;
+  background-color: #0188fb;
+}
+
+.leankylin-message-box-button.button-primary:hover {
+  background-color: #1677ff;
+}
+
+.leankylin-message-box-button.button-danger {
+  color: white;
+  border: none;
+  outline: none;
+  background-color: #fa541c;
+}
+
+.leankylin-message-box-button.button-danger:hover {
+  background-color: #ff7a45;
+}
+
+.leankylin-message-box-button.button-danger:focus-visible {
+  outline: none;
 }
 
 .leankylin-modal-dialog-header {
+  position: relative;
   outline: 0;
   display: flex;
   justify-content: flex-end;
+  padding: 4px 4px 0;
+}
+
+.leankylin-modal-dialog-title {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2329;
+  white-space: nowrap;
 }
 
 .leankylin-modal-dialog-icon-close {
-  color: #d4d4d4;
-  opacity: 0.3;
+  color: #999999;
+  opacity: 0.5;
+  display: flex;
+  align-items: center;
 }
 
 .leankylin-modal-dialog-icon-close:hover {
-  opacity: 0.7;
+  opacity: 1;
+}
+
+.leankylin-dialog-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
 }
+
+.leankylin-dialog-icon-warning,
+.leankylin-dialog-icon-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.leankylin-dialog-icon-warning {
+  background: #fff1e8;
+  color: #fa541c;
+}
+
+.leankylin-dialog-icon-info {
+  background: #e6f4ff;
+  color: #0188fb;
+}
+
+.leankylin-dialog-tip {
+  font-size: 12px;
+  color: #8f959e;
+  line-height: 18px;
+}
+
 /* 查找替换弹出框样式 */
 #leankylin-search-replace {
   position: absolute;

package/dist/index.esm.js

@@ -1398,17 +1398,24 @@ var Dialog = function Dialog(_ref) {
     onCancel = _ref.onCancel,
     children = _ref.children,
     containerStyle = _ref.containerStyle,
-    contentStyle = _ref.contentStyle;
+    contentStyle = _ref.contentStyle,
+    title = _ref.title,
+    iconType = _ref.iconType,
+    confirmText = _ref.confirmText,
+    danger = _ref.danger;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context;
   var _locale = locale(context),
     button = _locale.button;
+  var confirmBtnClass = ["leankylin-message-box-button", danger ? "button-danger" : type === "ok" ? "button-default" : "button-primary"].filter(Boolean).join(" ");
   return /*#__PURE__*/React.createElement("div", {
     className: "leankylin-dialog",
     style: containerStyle
   }, /*#__PURE__*/React.createElement("div", {
     className: "leankylin-modal-dialog-header"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "leankylin-modal-dialog-title"
+  }, title), /*#__PURE__*/React.createElement("div", {
     className: "leankylin-modal-dialog-icon-close",
     onClick: onCancel
   }, /*#__PURE__*/React.createElement(SVGIcon, {
@@ -1420,18 +1427,63 @@ var Dialog = function Dialog(_ref) {
   }))), /*#__PURE__*/React.createElement("div", {
     className: "leankylin-dialog-box-content",
     style: contentStyle
-  }, children), type != null && ( /*#__PURE__*/React.createElement("div", {
+  }, iconType === "warning" && ( /*#__PURE__*/React.createElement("div", {
+    className: "leankylin-dialog-icon"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "leankylin-dialog-icon-warning"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 2.5 22.5 21H1.5L12 2.5Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 9.5v5",
+    stroke: "white",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "17.6",
+    r: "1.3",
+    fill: "white"
+  }))))), iconType === "info" && ( /*#__PURE__*/React.createElement("div", {
+    className: "leankylin-dialog-icon"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "leankylin-dialog-icon-info"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9.5",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 11v5.5",
+    stroke: "white",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "7.4",
+    r: "1.3",
+    fill: "white"
+  }))))), children), type != null && ( /*#__PURE__*/React.createElement("div", {
     className: "leankylin-dialog-box-button-container"
-  }, type === "ok" ? ( /*#__PURE__*/React.createElement("div", {
-    className: "leankylin-message-box-button button-default",
-    onClick: onOk
-  }, button.confirm)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "leankylin-message-box-button button-primary",
+  }, /*#__PURE__*/React.createElement("div", {
+    className: confirmBtnClass,
     onClick: onOk
-  }, button.confirm), /*#__PURE__*/React.createElement("div", {
+  }, confirmText || button.confirm), type === "yesno" && ( /*#__PURE__*/React.createElement("div", {
     className: "leankylin-message-box-button button-default",
     onClick: onCancel
-  }, button.cancel))))));
+  }, button.cancel)))));
 };
 
 var MessageBox = function MessageBox(_ref) {
@@ -1439,18 +1491,28 @@ var MessageBox = function MessageBox(_ref) {
     type = _ref$type === void 0 ? "yesno" : _ref$type,
     onOk = _ref.onOk,
     onCancel = _ref.onCancel,
+    title = _ref.title,
+    iconType = _ref.iconType,
+    confirmText = _ref.confirmText,
+    danger = _ref.danger,
     children = _ref.children;
   return /*#__PURE__*/React.createElement(Dialog, {
     type: type,
     onOk: onOk,
     onCancel: onCancel,
+    title: title,
+    iconType: iconType,
+    confirmText: confirmText,
+    danger: danger,
     contentStyle: {
-      width: 300,
-      paddingTop: 20,
-      paddingBottom: 30,
+      width: 280,
+      paddingTop: 12,
+      paddingBottom: 20,
       display: "flex",
+      flexDirection: "column",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
+      gap: 4
     }
   }, children);
 };
@@ -1506,10 +1568,15 @@ function useAlert() {
     var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "ok";
     var onOk = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : hideModal;
     var onCancel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : hideModal;
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
     showModal( /*#__PURE__*/React.createElement(MessageBox, {
       type: type,
       onOk: onOk,
-      onCancel: onCancel
+      onCancel: onCancel,
+      title: options.title,
+      iconType: options.icon,
+      confirmText: options.confirmText,
+      danger: options.danger
     }, message));
   }, [hideModal, showModal]);
   return {
@@ -7787,9 +7854,9 @@ var SheetTab = function SheetTab() {
     id: "luckysheet-sheet-area"
   }, /*#__PURE__*/React.createElement("div", {
     id: "luckysheet-sheet-content"
-  }, context.allowEdit && ( /*#__PURE__*/React.createElement("div", {
+  }, context.allowEdit && context.showAddSheetButton && ( /*#__PURE__*/React.createElement("div", {
     className: "leankylin-sheettab-button",
-    onClick: onAddSheetClick
+    onClick: context.onAddSheetClick || onAddSheetClick
   }, /*#__PURE__*/React.createElement(SVGIcon, {
     name: "plus",
     width: 16,
@@ -10154,7 +10221,7 @@ var SheetTabContextMenu = function SheetTabContextMenu() {
             return _.isUndefined(singleSheet.hide) || singleSheet.hide !== 1;
           });
           if (context.luckysheetfile.length > 1 && shownSheets.length > 1) {
-            showAlert(sheetconfig.confirmDelete, "yesno", function () {
+            showAlert("".concat(sheetconfig.confirmDelete, "\"").concat(sheet.name, "\"\uFF1F"), "yesno", function () {
               setContext(function (ctx) {
                 deleteSheet(ctx, sheet.id);
               }, {
@@ -10163,6 +10230,9 @@ var SheetTabContextMenu = function SheetTabContextMenu() {
                 }
               });
               hideAlert();
+            }, undefined, {
+              confirmText: sheetconfig.delete,
+              danger: true
             });
           } else {
             showAlert(sheetconfig.noMoreSheet, "ok");
@@ -11638,6 +11708,10 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
       draftCtx.lang = mergedSettings.lang;
       draftCtx.allowEdit = mergedSettings.allowEdit;
+      draftCtx.showAddSheetButton = mergedSettings.showAddSheetButton;
+      draftCtx.onAddSheetClick = mergedSettings.onAddSheetClick;
+      draftCtx.onSheetRename = mergedSettings.onSheetRename;
+      draftCtx.onSheetDelete = mergedSettings.onSheetDelete;
       draftCtx.hooks = mergedSettings.hooks;
       if (_.isEmpty(draftCtx.currentSheetId)) {
         initSheetIndex(draftCtx);
@@ -11715,7 +11789,7 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, {
       noHistory: true
     });
-  }, [context.currentSheetId, context.luckysheetfile.length, originalData, mergedSettings.defaultRowHeight, mergedSettings.defaultColWidth, mergedSettings.column, mergedSettings.row, mergedSettings.defaultFontSize, mergedSettings.devicePixelRatio, mergedSettings.lang, mergedSettings.allowEdit, mergedSettings.hooks, mergedSettings.generateSheetId, setContextWithProduce, initSheetData, mergedSettings.rowHeaderWidth, mergedSettings.columnHeaderHeight, mergedSettings.addRows]);
+  }, [context.currentSheetId, context.luckysheetfile.length, originalData, mergedSettings.defaultRowHeight, mergedSettings.defaultColWidth, mergedSettings.column, mergedSettings.row, mergedSettings.defaultFontSize, mergedSettings.devicePixelRatio, mergedSettings.lang, mergedSettings.allowEdit, mergedSettings.showAddSheetButton, mergedSettings.onAddSheetClick, mergedSettings.onSheetRename, mergedSettings.onSheetDelete, mergedSettings.hooks, mergedSettings.generateSheetId, setContextWithProduce, initSheetData, mergedSettings.rowHeaderWidth, mergedSettings.columnHeaderHeight, mergedSettings.addRows]);
   var onKeyDown = useCallback(function (e) {
     var nativeEvent = e.nativeEvent;
     if ((e.ctrlKey || e.metaKey) && mergedSettings.disabledKeyboardCodes.includes(e.code)) {