@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/data/form/base-form/hooks/useFormOperations.js

@@ -0,0 +1,123 @@
+import { useState, useCallback } from "react";
+import { cleanNullValues } from "../utils";
+import { usesPrefixedFields } from "../props";
+function useFormOperations({
+  formName,
+  formfields,
+  formRef,
+  formReff,
+  formType,
+  fullDataPath,
+  parentFormDataContext,
+  clearFormData,
+  resetFormData,
+  trigger,
+  submit,
+  formProxy,
+  widgetFormType,
+  debouncedFilter
+}) {
+  const hasPrefixedFields = usesPrefixedFields(formType);
+  const [showViewMode, setShowViewMode] = useState(false);
+  const formreset = useCallback(async () => {
+    const cleanedData = {};
+    const formNamePrefix = `${formName}.`;
+    Object.keys(formfields).forEach((key) => {
+      var _a, _b;
+      if (formfields[key].formName !== formName) return;
+      if (key.endsWith("_formWidget")) return;
+      let fieldKey = key;
+      if (hasPrefixedFields) {
+        if (key.startsWith(formNamePrefix)) {
+          fieldKey = key.substring(formNamePrefix.length);
+        } else {
+          return;
+        }
+      }
+      if (formfields[key].readonly || formfields[key].readOnly || formfields[key].disabled) {
+        cleanedData[fieldKey] = formfields[key].defaultvalue || formfields[key].value;
+      } else {
+        cleanedData[fieldKey] = "";
+      }
+      const isRange = ((_a = formfields[key]) == null ? void 0 : _a.isRange) === true || ((_b = formfields[key]) == null ? void 0 : _b.isRange) === "true";
+      if (widgetFormType === "live-filter" && isRange) {
+        cleanedData[`${fieldKey}_maxWidget`] = "";
+      }
+    });
+    clearFormData(cleanedData);
+    trigger();
+    if (fullDataPath && (parentFormDataContext == null ? void 0 : parentFormDataContext.onChildDataChange)) {
+      parentFormDataContext.onChildDataChange(fullDataPath, cleanedData);
+    }
+    const el = formRef.current;
+    if (el) {
+      el.dispatchEvent(new CustomEvent("wmformreset", { bubbles: true }));
+    }
+    if (formReff == null ? void 0 : formReff.current) {
+      Object.values(formReff.current).forEach((childForm) => {
+        var _a;
+        return (_a = childForm == null ? void 0 : childForm.formreset) == null ? void 0 : _a.call(childForm);
+      });
+    }
+  }, [
+    formName,
+    formfields,
+    hasPrefixedFields,
+    clearFormData,
+    trigger,
+    fullDataPath,
+    parentFormDataContext,
+    formRef,
+    formReff
+  ]);
+  const create = useCallback(() => {
+    formreset();
+    formreset();
+    setShowViewMode(false);
+  }, [formreset]);
+  const edit = useCallback(
+    (data) => {
+      if (data) {
+        const cleanedData = cleanNullValues(data);
+        resetFormData(cleanedData);
+      }
+      setShowViewMode(false);
+    },
+    [resetFormData]
+  );
+  const setFormData = useCallback(
+    (data) => {
+      if (!data || typeof data !== "object" || Array.isArray(data)) {
+        return;
+      }
+      const cleanedData = cleanNullValues(data);
+      resetFormData(cleanedData);
+      formProxy.formdata = cleanedData;
+      if (widgetFormType === "live-filter" && debouncedFilter) {
+        debouncedFilter();
+      }
+    },
+    [resetFormData, formName, widgetFormType, debouncedFilter]
+  );
+  const saveAndNew = useCallback(() => {
+    submit();
+    clearFormData({});
+  }, [submit, clearFormData]);
+  const saveAndView = useCallback(() => {
+    submit();
+    setShowViewMode(true);
+  }, [submit]);
+  return {
+    formreset,
+    create,
+    edit,
+    setFormData,
+    saveAndNew,
+    saveAndView,
+    showViewMode,
+    setShowViewMode
+  };
+}
+export {
+  useFormOperations
+};

package/components/data/form/base-form/hooks/useFormSubmission.d.ts

@@ -0,0 +1,11 @@
+import { UseFormSubmissionOptions, UseFormSubmissionReturn } from "../props";
+/**
+ * Hook for managing form submission logic
+ *
+ * Handles:
+ * - Form data transformation before submit
+ * - Submit and delete operations
+ * - Success/error callbacks
+ * - Data output notification
+ */
+export declare function useFormSubmission({ formName, formfields, formDataref: externalFormDataref, getValues, formType, validateFieldsOnSubmit, resetFormData, toggleMessage, setShowViewMode, listener, datasource, formSubmit, widgettype, onBeforeSubmit, onSubmit, onResult, onSuccess, formSuccess, onError, insertmessage, updatemessage, deletemessage, postmessage, errormessage, messagelayout, standalone, }: UseFormSubmissionOptions): UseFormSubmissionReturn;

package/components/data/form/base-form/hooks/useFormSubmission.js

@@ -0,0 +1,233 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { useCallback } from "react";
+import { find } from "lodash-es";
+import { findOperationType } from "../../../utils";
+import { cleanRowData } from "../../../table/utils";
+import {
+  filterTableColumns,
+  filterArraysByRenderedForms,
+  mergeWithFormDataRef,
+  transformToNestedObject
+} from "../utils";
+import { usesPrefixedFields } from "../props";
+function useFormSubmission({
+  formName,
+  formfields,
+  formDataref: externalFormDataref,
+  getValues,
+  formType,
+  validateFieldsOnSubmit,
+  resetFormData,
+  toggleMessage,
+  setShowViewMode,
+  listener,
+  datasource,
+  formSubmit,
+  widgettype,
+  onBeforeSubmit,
+  onSubmit,
+  onResult,
+  onSuccess,
+  formSuccess,
+  onError,
+  insertmessage,
+  updatemessage,
+  deletemessage,
+  postmessage,
+  errormessage,
+  messagelayout,
+  standalone
+}) {
+  const hasPrefixedFields = usesPrefixedFields(formType);
+  const formDataref = externalFormDataref;
+  const notifyDataOutput = useCallback(
+    (data) => {
+      var _a;
+      const cleanedData = cleanRowData(data);
+      (_a = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a.call(listener, formName, { dataoutput: cleanedData });
+    },
+    [formName]
+  );
+  const updateFormDataOutput = useCallback((data, formWidgets) => {
+    Object.keys(formWidgets).forEach((key) => {
+      if (!find(data, { key })) {
+        data[key] = formWidgets[key];
+      }
+    });
+    return data;
+  }, []);
+  const prepareSubmitData = useCallback(
+    (formData) => {
+      var _a, _b;
+      if (((_b = (_a = datasource == null ? void 0 : datasource.name) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)) !== "crudvariable") {
+        return formData;
+      }
+      const primaryKeys = datasource.execute("getPrimaryKey");
+      const operation = findOperationType(formData, primaryKeys);
+      return {
+        inputFields: formData,
+        operation: operation === "insert" ? "create" : operation
+      };
+    },
+    [datasource]
+  );
+  const getSuccessMessage = useCallback(
+    (data) => {
+      if (widgettype === "live-form") {
+        const { operationType } = data;
+        return operationType === "insert" && insertmessage || operationType === "update" && updatemessage || operationType === "delete" && deletemessage || postmessage;
+      }
+      return postmessage;
+    },
+    [widgettype, insertmessage, updatemessage, deletemessage, postmessage]
+  );
+  const onResultCb = useCallback(
+    async (data, status, event) => {
+      if (onResult) {
+        onResult(event, {}, data);
+      }
+      if (status) {
+        onSuccess == null ? void 0 : onSuccess(event, {}, data);
+        formSuccess == null ? void 0 : formSuccess(event, {}, data);
+        if (messagelayout === "Inline") {
+          toggleMessage(true, "Data saved successfully", "success");
+        }
+      } else {
+        onError == null ? void 0 : onError(event, {}, data);
+        if (messagelayout === "Inline") {
+          const errorMsg = errormessage || data;
+          toggleMessage(true, errorMsg, "error");
+        }
+      }
+    },
+    [onResult, onSuccess, formSuccess, onError, messagelayout, errormessage, toggleMessage]
+  );
+  const handleSubmitSuccess = useCallback(
+    (data, resolve) => {
+      if (standalone) {
+        onResultCb(data == null ? void 0 : data.params, "success");
+        const message = getSuccessMessage(data);
+        toggleMessage(true, message, "success");
+        resolve == null ? void 0 : resolve(data);
+      } else {
+        const { operationType } = data;
+        if (widgettype === "live-form" && (operationType === "insert" || operationType === "delete")) {
+          resetFormData(data);
+          setShowViewMode(false);
+        }
+        onResultCb(data == null ? void 0 : data.params, "success");
+        const message = getSuccessMessage(data);
+        toggleMessage(true, message, "success");
+        resolve(data);
+      }
+    },
+    [widgettype, resetFormData, setShowViewMode, onResultCb, getSuccessMessage, toggleMessage]
+  );
+  const handleSubmitError = useCallback(
+    (error, reject) => {
+      const errorMsg = errormessage || (error == null ? void 0 : error.message) || error;
+      onResultCb(errorMsg, "");
+      reject(error);
+    },
+    [errormessage, onResultCb]
+  );
+  const executeFormSubmit = useCallback(
+    async (formData, operationType) => {
+      const firstParam = prepareSubmitData(formData);
+      return new Promise((resolve, reject) => {
+        formSubmit(
+          firstParam,
+          (data) => handleSubmitSuccess(data, resolve),
+          (error) => handleSubmitError(error, reject),
+          operationType
+        );
+      });
+    },
+    [prepareSubmitData, formSubmit, handleSubmitSuccess, handleSubmitError]
+  );
+  const handleFormSubmit = useCallback(
+    async (data, e, operationType) => {
+      var _a, _b;
+      e = e || new Event("submit");
+      if (hasPrefixedFields && formName && data[formName] && typeof data[formName] === "object") {
+        data = __spreadValues({}, data[formName]);
+      }
+      const formWidgets = (_b = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[formName]) == null ? void 0 : _b.dataoutput;
+      if (formWidgets && Object.keys(formWidgets).length > 0) {
+        data = updateFormDataOutput(data, formWidgets);
+      }
+      const filteredData = filterTableColumns(data);
+      const filteredByRendered = filterArraysByRenderedForms(filteredData, listener == null ? void 0 : listener.Widgets);
+      const mergedData = mergeWithFormDataRef(filteredByRendered, formDataref == null ? void 0 : formDataref.current);
+      if (onBeforeSubmit) {
+        const result = await onBeforeSubmit(e, {}, mergedData);
+        if (result === false) return;
+      }
+      const formData = transformToNestedObject(mergedData, formfields, formName);
+      const cleanedFormData = cleanRowData(formData);
+      const cleanedMergedData = cleanRowData(mergedData);
+      notifyDataOutput(cleanedMergedData);
+      onSubmit == null ? void 0 : onSubmit(e, {}, cleanedFormData);
+      await executeFormSubmit(cleanedFormData, operationType);
+    },
+    [
+      hasPrefixedFields,
+      formName,
+      formfields,
+      onBeforeSubmit,
+      onSubmit,
+      updateFormDataOutput,
+      notifyDataOutput,
+      executeFormSubmit
+    ]
+  );
+  const submit = useCallback(
+    async (e) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      const valid = await validateFieldsOnSubmit();
+      if (!valid) {
+        return;
+      }
+      const data = getValues();
+      handleFormSubmit(data, new Event("submit"));
+      return true;
+    },
+    [validateFieldsOnSubmit, getValues, handleFormSubmit]
+  );
+  const deleteEntry = useCallback(
+    async (e) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      const isValid = await validateFieldsOnSubmit();
+      if (isValid) {
+        const data = getValues();
+        handleFormSubmit(data, new Event("submit"), "delete");
+      }
+    },
+    [validateFieldsOnSubmit, getValues, handleFormSubmit]
+  );
+  return {
+    submit,
+    deleteEntry,
+    handleFormSubmit
+  };
+}
+export {
+  useFormSubmission
+};

package/components/data/form/base-form/hooks/useFormValidation.d.ts

@@ -0,0 +1,11 @@
+import { UseFormValidationOptions, UseFormValidationReturn } from "../props";
+/**
+ * Hook for managing form validation and validation messages
+ *
+ * Handles:
+ * - Building validation message objects for fields with errors
+ * - Exposing validation messages on widget object and formRef
+ * - Validating fields on submit (including child forms)
+ * - Focusing on first invalid field
+ */
+export declare function useFormValidation({ formRef, formfields, formReff, control, trigger, errors, formName, listener, }: UseFormValidationOptions): UseFormValidationReturn;

package/components/data/form/base-form/hooks/useFormValidation.js

@@ -0,0 +1,127 @@
+import { useRef, useCallback } from "react";
+import { last } from "lodash-es";
+import { getErrorTypes, shouldSkipFieldKey } from "../../../../../utils/form-utils";
+import {
+  focusOnFirstInvalidField,
+  getWidgetFormFields,
+  setWidgetValidationMessages
+} from "../utils";
+function useFormValidation({
+  formRef,
+  formfields,
+  formReff,
+  control,
+  trigger,
+  errors,
+  formName,
+  listener
+}) {
+  const validationMessagesRef = useRef([]);
+  const addValidationMessage = useCallback(
+    (fieldErrors, fieldKey, field, prefix) => {
+      var _a;
+      const errorTypes = getErrorTypes(fieldErrors);
+      validationMessagesRef.current.push({
+        field: fieldKey,
+        value: (_a = field == null ? void 0 : field.value) != null ? _a : field == null ? void 0 : field.datavalue,
+        errorType: errorTypes,
+        message: (field == null ? void 0 : field.validationmessage) || (fieldErrors == null ? void 0 : fieldErrors.message) || "",
+        getElement: () => {
+          const formEl = formRef.current;
+          if (formEl) {
+            const fieldEl = formEl.querySelector(`[name="${fieldKey}"]`);
+            if (fieldEl) {
+              return fieldEl.closest("[focus-target]") || fieldEl.querySelector("[focus-target]") || fieldEl;
+            }
+          }
+          return null;
+        },
+        formName: last(prefix.split(".")) || formName || "",
+        fullyQualifiedFormName: prefix
+      });
+    },
+    [formRef, formName]
+  );
+  const exposeValidationMessages = useCallback(
+    (validationMessages) => {
+      setWidgetValidationMessages(listener, formName, validationMessages);
+      if (formRef.current) {
+        formRef.current.validationMessages = validationMessages;
+      }
+    },
+    [formRef, formName]
+  );
+  const getFormFieldsForValidation = useCallback(() => {
+    const widgetFormFields = getWidgetFormFields(listener, formName);
+    const formFieldsToValidate = widgetFormFields || formfields;
+    const allFieldKeys = Object.keys(formFieldsToValidate);
+    const prefix = formName || "";
+    return { formFieldsToValidate, allFieldKeys, prefix };
+  }, [formName, formfields]);
+  const buildValidationMessagesCore = useCallback(
+    (getFieldError) => {
+      validationMessagesRef.current = [];
+      const { formFieldsToValidate, allFieldKeys, prefix } = getFormFieldsForValidation();
+      allFieldKeys.forEach((fieldKey) => {
+        if (shouldSkipFieldKey(fieldKey, allFieldKeys)) return;
+        const field = formFieldsToValidate[fieldKey];
+        const fieldErrors = getFieldError(fieldKey, field);
+        if (fieldErrors) {
+          addValidationMessage(fieldErrors, fieldKey, field, prefix);
+        }
+      });
+      return validationMessagesRef.current;
+    },
+    [getFormFieldsForValidation, addValidationMessage]
+  );
+  const buildValidationMessages = useCallback(() => {
+    return buildValidationMessagesCore((fieldKey) => {
+      const fieldState = control.getFieldState(fieldKey);
+      return fieldState == null ? void 0 : fieldState.error;
+    });
+  }, [buildValidationMessagesCore, control]);
+  const validateFieldsOnSubmit = useCallback(async () => {
+    var _a;
+    let childFormsValid = true;
+    const childForms = formReff.current ? Object.values(formReff.current) : [];
+    if (childForms.length) {
+      const validationResults = await Promise.all(
+        childForms.map(
+          (childForm) => {
+            var _a2, _b;
+            return (_b = (_a2 = childForm == null ? void 0 : childForm.validateFieldsOnSubmit) == null ? void 0 : _a2.call(childForm)) != null ? _b : Promise.resolve(true);
+          }
+        )
+      );
+      childFormsValid = validationResults.every(Boolean);
+    }
+    const currentFormValidState = await trigger();
+    const validationMessages = buildValidationMessages();
+    exposeValidationMessages(validationMessages);
+    if (!childFormsValid || !currentFormValidState) {
+      if (!currentFormValidState) {
+        (_a = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a.call(listener, formName, { valid: false, errors });
+      }
+      focusOnFirstInvalidField(formRef.current, Object.keys(errors));
+      return false;
+    }
+    return true;
+  }, [
+    trigger,
+    buildValidationMessages,
+    exposeValidationMessages,
+    formName,
+    errors,
+    formRef,
+    formReff
+  ]);
+  return {
+    validationMessagesRef,
+    validateFieldsOnSubmit,
+    buildValidationMessages,
+    exposeValidationMessages
+  };
+}
+export {
+  useFormValidation
+};

package/components/data/form/base-form/hooks/useParentFormRelationship.d.ts

@@ -0,0 +1,12 @@
+import { UseParentFormRelationshipOptions, UseParentFormRelationshipReturn } from "../props";
+/**
+ * Hook for detecting and managing parent-child form relationships
+ *
+ * Supports all nesting scenarios:
+ * - STANDALONE: Basic form (no parent)
+ * - DIRECT_CHILD: Form -> Form (direct nesting)
+ * - LIST_CHILD: Form -> List -> Form (array indexing)
+ * - PREFAB_CHILD: Form -> Prefab -> Form (context bridging)
+ * - LIST_PREFAB_CHILD: Form -> List -> Prefab -> Form
+ */
+export declare function useParentFormRelationship({ name, parentForm: propsParentForm, isParentList: isParentListRaw, parentListName, childdatasetnode, formArrayIndex: propsFormArrayIndex, }: UseParentFormRelationshipOptions): UseParentFormRelationshipReturn;

package/components/data/form/base-form/hooks/useParentFormRelationship.js

@@ -0,0 +1,91 @@
+import { useMemo, useContext } from "react";
+import { PrefabContext } from "../../../../../context/PrefabContext";
+import { useParentFormData } from "../../form-context";
+import {
+  FormType,
+  detectFormType,
+  getFormTypeConfig
+} from "../props";
+function useParentFormRelationship({
+  name,
+  parentForm: propsParentForm,
+  isParentList: isParentListRaw,
+  parentListName,
+  childdatasetnode,
+  formArrayIndex: propsFormArrayIndex
+}) {
+  var _a;
+  const prefabContext = useContext(PrefabContext);
+  const parentFormDataContext = useParentFormData();
+  const parentForm = propsParentForm || (prefabContext == null ? void 0 : prefabContext.parentForm);
+  const isParentList = isParentListRaw === true || isParentListRaw === "true";
+  const formArrayIndex = propsFormArrayIndex !== void 0 ? propsFormArrayIndex : (_a = prefabContext == null ? void 0 : prefabContext.formArrayIndex) != null ? _a : -1;
+  const parentFormData = parentForm ? parentFormDataContext == null ? void 0 : parentFormDataContext.formdata : void 0;
+  const rootParentForm = (parentFormDataContext == null ? void 0 : parentFormDataContext.rootParentForm) || parentForm;
+  const effectiveChildDatasetNode = useMemo(() => {
+    if (!parentForm) return void 0;
+    if (isParentList && parentListName) {
+      return parentListName;
+    }
+    return childdatasetnode || name;
+  }, [parentForm, isParentList, parentListName, childdatasetnode, name]);
+  const hasDirectChildRelationship = !!(propsParentForm || childdatasetnode);
+  const hasPrefabContext = !!((parentFormDataContext == null ? void 0 : parentFormDataContext.onChildDataChange) && (parentFormDataContext == null ? void 0 : parentFormDataContext.parentDataPath) && !propsParentForm && !childdatasetnode);
+  const formType = useMemo(() => {
+    return detectFormType({
+      hasParentFormProp: !!parentForm && hasDirectChildRelationship,
+      hasChildDatasetNode: !!childdatasetnode,
+      hasPrefabContext,
+      isInList: isParentList
+    });
+  }, [parentForm, hasDirectChildRelationship, childdatasetnode, hasPrefabContext, isParentList]);
+  const formTypeConfig = useMemo(() => getFormTypeConfig(formType), [formType]);
+  const fullDataPath = useMemo(() => {
+    if (formType === FormType.PREFAB_CHILD || formType === FormType.LIST_PREFAB_CHILD) {
+      const basePath = parentFormDataContext == null ? void 0 : parentFormDataContext.parentDataPath;
+      if (formType === FormType.LIST_PREFAB_CHILD && isParentList && formArrayIndex >= 0 && basePath) {
+        return `${basePath}[${formArrayIndex}]`;
+      }
+      return basePath;
+    }
+    if (!parentForm) return void 0;
+    const parentDataPathPrefix = (parentFormDataContext == null ? void 0 : parentFormDataContext.parentDataPath) || "";
+    let currentPath = "";
+    if (isParentList && parentListName) {
+      currentPath = formArrayIndex >= 0 ? `${parentListName}[${formArrayIndex}]` : parentListName;
+    } else {
+      currentPath = childdatasetnode || name;
+    }
+    if (parentDataPathPrefix) {
+      return `${parentDataPathPrefix}.${currentPath}`;
+    }
+    return currentPath;
+  }, [
+    parentForm,
+    formType,
+    isParentList,
+    parentListName,
+    childdatasetnode,
+    name,
+    parentFormDataContext == null ? void 0 : parentFormDataContext.parentDataPath,
+    formArrayIndex
+  ]);
+  return {
+    // Form type (new)
+    formType,
+    formTypeConfig,
+    // Legacy compatibility (can be derived from formType)
+    parentForm,
+    isParentList,
+    formArrayIndex,
+    effectiveChildDatasetNode,
+    fullDataPath,
+    hasDirectChildRelationship,
+    rootParentForm,
+    parentFormData,
+    parentFormDataContext
+  };
+}
+export {
+  useParentFormRelationship
+};

package/components/data/form/base-form/index.d.ts

@@ -0,0 +1,3 @@
+import BaseFormProps from "./props";
+declare const BaseForm: (WrappedComponent: React.ComponentType<any>) => (FormProps: BaseFormProps) => import("react/jsx-runtime").JSX.Element;
+export default BaseForm;