@pisell/materials 1.0.570 → 1.0.572

package/lib/components/dataSourceComponents/dataSourceForm/BaseForm.js

@@ -34,13 +34,19 @@ __export(BaseForm_exports, {
 module.exports = __toCommonJS(BaseForm_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
+var import_ahooks = require("ahooks");
+var import_pisellModal = __toESM(require("../../../components/pisellModal"));
+var import_useCtxActions = __toESM(require("../hooks/useCtxActions"));
 var import_useDataSource = __toESM(require("../hooks/useDataSource"));
+var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
 var import_form = __toESM(require("../../form"));
 var import_FormSettingProvider = __toESM(require("./provider/formSetting/FormSettingProvider"));
 var import_page_header = __toESM(require("../../page-header"));
+var import_utils = require("./utils");
 var import_index = require("./index.less");
 var BaseForm = (0, import_react.forwardRef)(
   (props, ref) => {
+    var _a;
     const {
       title,
       description,
@@ -57,13 +63,17 @@ var BaseForm = (0, import_react.forwardRef)(
       formatSubmitValues,
       formatInitialValues,
       customSubmit,
+      leaveConfirmConfig,
       ...others
     } = props;
+    const context = (0, import_useEngineContext.default)();
+    const { setBeforeClose } = (0, import_useCtxActions.default)();
+    const { getApp } = (_a = context.appHelper) == null ? void 0 : _a.utils;
     const formRef = (0, import_react.useRef)(null);
     const { get } = (0, import_useDataSource.default)();
     (0, import_react.useEffect)(() => {
-      var _a;
-      (_a = formRef.current) == null ? void 0 : _a.resetFields();
+      var _a2;
+      (_a2 = formRef.current) == null ? void 0 : _a2.resetFields();
     }, [dataSource]);
     (0, import_react.useEffect)(() => {
       document.body.id = "body";
@@ -72,12 +82,75 @@ var BaseForm = (0, import_react.forwardRef)(
     (0, import_react.useEffect)(() => {
       if (["edit", "view"].includes(renderMode || "") && dataSource) {
         get == null ? void 0 : get.runAsync().then((res) => {
-          var _a;
+          var _a2;
           const formattedValues = formatInitialValues ? formatInitialValues(res) : res;
-          (_a = formRef.current) == null ? void 0 : _a.setFieldsValue(formattedValues);
+          (_a2 = formRef.current) == null ? void 0 : _a2.setFields((0, import_utils.formObjValueToArray)(formattedValues));
         });
       }
     }, [renderMode, dataSource, formatInitialValues]);
+    const checkFormClose = (0, import_ahooks.useMemoizedFn)(async () => {
+      var _a2;
+      const isFormChanged = (_a2 = formRef.current) == null ? void 0 : _a2.isFieldsTouched();
+      if (isFormChanged) {
+        return new Promise((resolve) => {
+          import_pisellModal.default.confirm({
+            title: leaveConfirmConfig == null ? void 0 : leaveConfirmConfig.title,
+            content: leaveConfirmConfig == null ? void 0 : leaveConfirmConfig.content,
+            okText: leaveConfirmConfig == null ? void 0 : leaveConfirmConfig.okText,
+            cancelText: leaveConfirmConfig == null ? void 0 : leaveConfirmConfig.cancelText,
+            onOk: () => {
+              var _a3;
+              (_a3 = formRef.current) == null ? void 0 : _a3.resetFields();
+              resolve(true);
+            },
+            onCancel: () => {
+              resolve(false);
+            }
+          });
+        });
+      }
+      return true;
+    });
+    (0, import_react.useEffect)(() => {
+      if (leaveConfirmConfig == null ? void 0 : leaveConfirmConfig.enable) {
+        setBeforeClose == null ? void 0 : setBeforeClose(checkFormClose);
+      }
+    }, [leaveConfirmConfig]);
+    (0, import_react.useEffect)(() => {
+      var _a2, _b;
+      if (leaveConfirmConfig == null ? void 0 : leaveConfirmConfig.enable) {
+        const history = (_b = (_a2 = getApp == null ? void 0 : getApp()) == null ? void 0 : _a2.history) == null ? void 0 : _b.instance;
+        let unblock = history == null ? void 0 : history.block((location, action) => {
+          var _a3;
+          const isFormChanged = (_a3 = formRef.current) == null ? void 0 : _a3.isFieldsTouched();
+          if (isFormChanged) {
+            import_pisellModal.default.confirm({
+              title: leaveConfirmConfig.title,
+              content: leaveConfirmConfig.content,
+              okText: leaveConfirmConfig.okText,
+              cancelText: leaveConfirmConfig.cancelText,
+              onOk: () => {
+                unblock == null ? void 0 : unblock();
+                if (action === "PUSH") {
+                  history.push(location);
+                } else if (action === "POP") {
+                  history.go(-1);
+                } else if (action === "REPLACE") {
+                  history.replace(location);
+                }
+              },
+              onCancel: () => {
+              }
+            });
+            return false;
+          }
+          return true;
+        });
+        return () => {
+          unblock == null ? void 0 : unblock();
+        };
+      }
+    }, []);
     return /* @__PURE__ */ import_react.default.createElement(
       import_FormSettingProvider.default,
       {

package/lib/components/dataSourceComponents/dataSourceForm/type.d.ts

@@ -20,4 +20,12 @@ export interface DataSourceFormProps {
     formatSubmitValues?: (values: Record<string, any>) => Record<string, any>;
     formatInitialValues?: (values: Record<string, any>) => Record<string, any>;
     customSubmit?: (values: Record<string, any>) => Promise<any>;
+    leaveConfirmConfig?: {
+        enable: boolean;
+        title: string;
+        content: string;
+        icon: React.ReactNode;
+        okText: string;
+        cancelText: string;
+    };
 }

package/lib/components/dataSourceComponents/dataSourceForm/utils.d.ts

@@ -50,3 +50,4 @@ export declare const getNestedValue: (obj: Record<string, any>, path: string) =>
 export declare const renderValueWithMap: (value: any, valueMap?: Record<string, string>, renderMode?: ModeType) => React.JSX.Element | null;
 export declare function toArr(str: string | number | (string | number)[]): (string | number)[];
 export declare const filterSystemFields: (params: Record<string, any>) => Record<string, any>;
+export declare const formObjValueToArray: (obj: Record<string, any>) => any[];

package/lib/components/dataSourceComponents/dataSourceForm/utils.js

@@ -32,6 +32,7 @@ __export(utils_exports, {
   filterSystemFields: () => filterSystemFields,
   formItemNameReplace: () => formItemNameReplace,
   formItemNameReverse: () => formItemNameReverse,
+  formObjValueToArray: () => formObjValueToArray,
   getNestedValue: () => getNestedValue,
   isValidDomain: () => isValidDomain,
   renderValueWithMap: () => renderValueWithMap,
@@ -394,11 +395,18 @@ var filterSystemFields = (params) => {
     return acc;
   }, {});
 };
+var formObjValueToArray = (obj) => {
+  return Object.keys(obj).reduce((acc, key) => {
+    acc.push({ name: key, value: obj[key] });
+    return acc;
+  }, []);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   filterSystemFields,
   formItemNameReplace,
   formItemNameReverse,
+  formObjValueToArray,
   getNestedValue,
   isValidDomain,
   renderValueWithMap,

package/lib/components/dataSourceComponents/dataSourceTable/BaseTable.js

@@ -58,6 +58,10 @@ var BaseTable = (props) => {
   const { list } = (0, import_useDataSource.default)();
   const { data } = list;
   const { dataSourceKey, dataSourceKeyRef } = (0, import_useDataSourceKey.default)();
+  const beforeClose = (0, import_react.useRef)();
+  const setBeforeClose = (0, import_react.useCallback)((fn) => {
+    beforeClose.current = fn;
+  }, []);
   const {
     drawerVisible,
     setDrawerVisible,
@@ -94,7 +98,13 @@ var BaseTable = (props) => {
       currentDataSource: dataSource
     });
   }, [dataSource]);
-  const handleCloseDrawer = () => {
+  const handleCloseDrawer = async () => {
+    if (beforeClose.current) {
+      const canClose = await beforeClose.current();
+      if (!canClose) {
+        return;
+      }
+    }
     closeDrawer();
     registerValueVariable == null ? void 0 : registerValueVariable(componentId, {
       currentRecord: null
@@ -124,7 +134,9 @@ var BaseTable = (props) => {
     {
       visible: drawerVisible,
       setVisible: setDrawerVisible,
-      refreshTableData: refreshData
+      refreshTableData: refreshData,
+      setBeforeClose,
+      beforeClose: beforeClose.current
     },
     /* @__PURE__ */ import_react.default.createElement(
       Container,

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.d.ts

@@ -9,7 +9,7 @@ declare const useDrawerState: (operationContent?: {
     openDrawer: (item: OperationItem) => void;
     closeDrawer: () => void;
     drawerContent: import("react").ReactNode;
-    Container: typeof Drawer | {
+    Container: {
         (props: import("../../../pisellModal").PisellModalProps): import("react").JSX.Element;
         confirm: (props: import("../../../pisellModal/components/functions").PisellModalFuncProps) => {
             destroy: () => void;
@@ -33,7 +33,7 @@ declare const useDrawerState: (operationContent?: {
             update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
         };
         Information: (props: import("../../../pisellModal/components/Information").InformationProps) => import("react").JSX.Element;
-    };
+    } | typeof Drawer;
     containerProps: {};
 };
 export default useDrawerState;

package/lib/components/dataSourceComponents/provider/actions/ActionsContext.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 export interface ActionsContextType {
-    [key: string]: any;
+    visible?: boolean;
+    setVisible?: (visible: boolean) => void;
+    refreshTableData?: () => void;
+    onClose?: () => void;
+    beforeClose?: () => boolean | Promise<boolean>;
+    setBeforeClose?: (beforeClose: () => boolean | Promise<boolean>) => void;
 }
 declare const ActionsContext: import("react").Context<ActionsContextType>;
 export default ActionsContext;

package/lib/components/dataSourceComponents/provider/actions/ActionsProvider.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { ActionsContextType } from './ActionsContext';
+interface ActionsProviderProps extends ActionsContextType {
+    children: React.ReactNode;
+}
 /**
  * 自定义请求的provider
  * @param props
  * @constructor
  */
-declare const ActionsProvider: React.FC<ActionsContextType>;
+declare const ActionsProvider: React.FC<ActionsProviderProps>;
 export default ActionsProvider;

package/lowcode/data-source-form/meta.ts

@@ -472,6 +472,137 @@ const dataSourceForm: MetaType = {
         },
       ],
     },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Interaction behavior',
+        'zh-CN': '交互行为',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'leaveConfirmConfig',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Unsaved warning',
+              'zh-CN': '未保存离开提示',
+            },
+          },
+          setter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'enable',
+                    title: {
+                      type: 'i18n',
+                      'en-US': 'Enable',
+                      'zh-CN': '启用',
+                    },
+                    setter: 'BoolSetter',
+                    isRequired: true,
+                  },
+                  {
+                    name: 'icon',
+                    title: {
+                      type: 'i18n',
+                      'en-US': 'Icon',
+                      'zh-CN': '图标',
+                    },
+                    setter: [
+                      {
+                        componentName: 'SlotSetter',
+                        initialValue: {
+                          type: 'JSSlot',
+                          value: [
+                            {
+                              componentName: 'Icon',
+                              props: {
+                                type: 'SmileOutlined',
+                                size: 20,
+                                rotate: 0,
+                                spin: false,
+                              },
+                            },
+                          ],
+                        },
+                        defaultValue: null,
+                      },
+                    ],
+                  },
+                  {
+                    name: 'title',
+                    title: {
+                      type: 'i18n',
+                      'en-US': 'Title',
+                      'zh-CN': '标题',
+                    },
+                    setter: ['PisellI18nSetter', 'VariableSetter'],
+                    defaultValue: {
+                      type: 'i18n',
+                      en: 'Unsaved Changes',
+                      'zh-CN': '未保存的更改',
+                      'zh-HK': '未保存的更改',
+                    },
+                  },
+                  {
+                    name: 'content',
+                    title: {
+                      type: 'i18n',
+                      'en-US': 'Helper text',
+                      'zh-CN': '辅助文字',
+                    },
+                    setter: ['PisellI18nSetter', 'VariableSetter'],
+                    defaultValue: {
+                      type: 'i18n',
+                      en: 'You have unsaved changes. Are you sure you want to leave?',
+                      'zh-CN': '您有未保存的更改，确定要离开？',
+                      'zh-HK': '您有未保存的更改，確定要離開？',
+                    },
+                  },
+                  {
+                    name: 'cancelText',
+                    title: {
+                      type: 'i18n',
+                      'en-US': 'Cancel button text',
+                      'zh-CN': '取消按钮文字',
+                    },
+                    setter: ['PisellI18nSetter', 'VariableSetter'],
+                    defaultValue: {
+                      type: 'i18n',
+                      en: 'Cancel',
+                      'zh-CN': '取消',
+                      'zh-HK': '取消',
+                    },
+                  },
+                  {
+                    name: 'okText',
+                    title: {
+                      type: 'i18n',
+                      'en-US': 'OK button text',
+                      'zh-CN': '确定按钮文字',
+                    },
+                    setter: ['PisellI18nSetter', 'VariableSetter'],
+                    defaultValue: {
+                      type: 'i18n',
+                      en: 'Leave',
+                      'zh-CN': '离开',
+                      'zh-HK': '離開',
+                    },
+                  },
+                ],
+              },
+              columns: 1,
+              forceInline: 1,
+              mode: 'popup',
+            },
+          },
+        },
+      ]
+    },
   ],
   configure: {
     props: [

package/lowcode/data-source-form/snippets.ts

@@ -39,6 +39,33 @@ export default [
             "function onFinishFailed({ values, errorFields, outOfDate }) {\n  console.log('onFinishFailed', values, errorFields, outOfDate);\n}",
         },
         name: 'basic',
+        leaveConfirmConfig: {
+          enable: true,
+          title: {
+            type: 'i18n',
+            en: 'Unsaved Changes',
+            'zh-CN': '未保存的更改',
+            'zh-HK': '未保存的更改',
+          },
+          content: {
+            type: 'i18n',
+            en: 'You have unsaved changes. Are you sure you want to leave?',
+            'zh-CN': '您有未保存的更改，确定要离开？',
+            'zh-HK': '您有未保存的更改，確定要離開？',
+          },
+          okText: {
+            type: 'i18n',
+            en: 'Leave',
+            'zh-CN': '离开',
+            'zh-HK': '離開',
+          },
+          cancelText: {
+            type: 'i18n',
+            en: 'Cancel',
+            'zh-CN': '取消',
+            'zh-HK': '取消',
+          },
+        },
       },
       children: [],
     },
@@ -85,6 +112,33 @@ export default [
             "function onFinishFailed({ values, errorFields, outOfDate }) {\n  console.log('onFinishFailed', values, errorFields, outOfDate);\n}",
         },
         name: 'basic',
+        leaveConfirmConfig: {
+          enable: true,
+          title: {
+            type: 'i18n',
+            en: 'Unsaved Changes',
+            'zh-CN': '未保存的更改',
+            'zh-HK': '未保存的更改',
+          },
+          content: {
+            type: 'i18n',
+            en: 'You have unsaved changes. Are you sure you want to leave?',
+            'zh-CN': '您有未保存的更改，确定要离开？',
+            'zh-HK': '您有未保存的更改，確定要離開？',
+          },
+          okText: {
+            type: 'i18n',
+            en: 'Leave',
+            'zh-CN': '离开',
+            'zh-HK': '離開',
+          },
+          cancelText: {
+            type: 'i18n',
+            en: 'Cancel',
+            'zh-CN': '取消',
+            'zh-HK': '取消',
+          },
+        },
       },
       children: [],
     },

package/lowcode/data-source-table/utils.tsx

@@ -272,6 +272,34 @@ export const getFormContent = (target: any, mode: 'add' | 'edit' | 'view') => {
             mode !== 'add'
               ? genDataSourceValueKey(target, 'currentRecord')
               : undefined,
+          leaveConfirmConfig: mode !== 'view' ? {
+            enable: true,
+            title: {
+              type: 'i18n',
+              en: 'Unsaved Changes',
+              'zh-CN': '未保存的更改',
+              'zh-HK': '未保存的更改',
+            },
+            content: {
+              type: 'i18n',
+              en: 'You have unsaved changes. Are you sure you want to leave?',
+              'zh-CN': '您有未保存的更改，确定要离开？',
+              'zh-HK': '您有未保存的更改，確定要離開？',
+            },
+            okText: {
+              type: 'i18n',
+              en: 'Leave',
+              'zh-CN': '离开',
+              'zh-HK': '離開',
+            },
+            cancelText: {
+              type: 'i18n',
+              en: 'Cancel',
+              'zh-CN': '取消',
+              'zh-HK': '取消',
+              },
+            }
+          : undefined,
         },
         children: childrenSchemas,
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.570",
+  "version": "1.0.572",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -69,8 +69,8 @@
     "libphonenumber-js": "^1.11.17",
     "swiper": "^8.4.7",
     "react-barcode": "^1.5.3",
-    "@pisell/date-picker": "1.0.115",
     "@pisell/utils": "1.0.43",
+    "@pisell/date-picker": "1.0.115",
     "@pisell/icon": "0.0.10"
   },
   "peerDependencies": {