xmlui 0.10.12 → 0.10.14

package/dist/scripts/src/components/Form/FormNative.js

@@ -185,6 +185,7 @@ exports.defaultProps = {
     itemLabelBreak: true,
     keepModalOpenOnSubmit: false,
     swapCancelAndSave: false,
+    hideButtonRowUntilDirty: false,
 };
 // --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
 function cleanUpSubject(subject) {
@@ -196,12 +197,20 @@ function cleanUpSubject(subject) {
     }, {});
 }
 const Form = (0, react_2.forwardRef)(function (_a, ref) {
-    var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit"]);
+    var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, hideButtonRowUntilDirty } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit", "hideButtonRowUntilDirty"]);
     const formRef = (0, react_2.useRef)(null);
     (0, react_2.useImperativeHandle)(ref, () => formRef.current);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
     const requestModalFormClose = (0, ModalVisibilityContext_1.useModalFormClose)();
     const isEnabled = enabled && !formState.submitInProgress;
+    const isDirty = (0, react_2.useMemo)(() => {
+        return Object.entries(formState.interactionFlags).some(([key, flags]) => {
+            if (flags.isDirty) {
+                return true;
+            }
+            return false;
+        });
+    }, [formState.interactionFlags]);
     const formContextValue = (0, react_2.useMemo)(() => {
         return {
             itemLabelBreak,
@@ -331,10 +340,11 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
             update: updateData,
         });
     }, [doReset, updateData, registerComponentApi]);
+    let safeButtonRow = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] })) });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.createElement)("form", Object.assign({}, rest, { style: style, className: (0, classnames_1.default)(Form_module_scss_1.default.wrapper, className), onSubmit: doSubmit, onReset: doReset, id: id, key: formState.resetVersion, ref: formRef }),
                 (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }),
                 (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }),
-                buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
+                (!hideButtonRowUntilDirty || isDirty) && safeButtonRow), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
 });
 Form.displayName = "Form";
 function FormWithContextVar({ node, renderChild, extractValue, style, className, lookupEventHandler, registerComponentApi, }) {
@@ -372,7 +382,7 @@ function FormWithContextVar({ node, renderChild, extractValue, style, className,
     const errorNotificationMessage = extractValue.asOptionalString(node.props.errorNotificationMessage) || "";
     const submitUrl = extractValue.asOptionalString(node.props.submitUrl) ||
         extractValue.asOptionalString(node.props._data_url);
-    return ((0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), formState: formState, dispatch: dispatch, id: node.uid, style: style, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
+    return ((0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), formState: formState, dispatch: dispatch, id: node.uid, style: style, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
             defaultHandler: submitUrl
                 ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs, inProgressNotificationMessage: "${inProgressNotificationMessage}", completedNotificationMessage: "${completedNotificationMessage}", errorNotificationMessage: "${errorNotificationMessage}" })`
                 : undefined,