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

package/components/data/form/form-controller/withFormController.js

@@ -0,0 +1,367 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import clsx from "clsx";
+import { useCallback, memo, useRef, useEffect, useState } from "react";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import { useFormContext } from "../form-context";
+import {
+  extractDynamicValidationProps,
+  processFieldValue,
+  getErrorState,
+  shouldShowErrorMessage
+} from "./utils";
+import {
+  useFormRegistration,
+  useDefaultValueSync,
+  useValidationRules,
+  useHTMLValidationProps,
+  useExternalDataSync
+} from "./hooks";
+const withFormController = (WrappedComponent) => {
+  const WithFormControllerComponent = memo((props) => {
+    const _a = props, {
+      formRef: propsFormRef,
+      formKey,
+      name,
+      datavalue,
+      maxDataValue,
+      isMaxWidget: isMaxWidgetProp,
+      defaultvalue,
+      validators = [],
+      asyncValidators,
+      required,
+      maxchars,
+      minvalue,
+      maxvalue,
+      regexp,
+      validationmessage,
+      customValidationMsg,
+      setValidationMessage,
+      hint,
+      type,
+      observe,
+      onBlur,
+      fieldName,
+      updateon,
+      standalone = false
+    } = _a, wrappedComponentProps = __objRest(_a, [
+      "formRef",
+      "formKey",
+      "name",
+      "datavalue",
+      "maxDataValue",
+      "isMaxWidget",
+      "defaultvalue",
+      "validators",
+      "asyncValidators",
+      "required",
+      "maxchars",
+      "minvalue",
+      "maxvalue",
+      "regexp",
+      "validationmessage",
+      "customValidationMsg",
+      "setValidationMessage",
+      "hint",
+      "type",
+      "observe",
+      "onBlur",
+      "fieldName",
+      "updateon",
+      "standalone"
+    ]);
+    const [touched, setTouched] = useState(false);
+    const fieldRef = useRef(null);
+    const observeRef = useRef(observe);
+    const isInitialMountRef = useRef(true);
+    const hasEverBeenTouchedRef = useRef(false);
+    const inputFieldName = fieldName || name;
+    const contextFormRef = useFormContext();
+    const formRef = propsFormRef || contextFormRef;
+    const fieldProxy = useWidgetProxy(name, standalone);
+    const form = useWidgetProxy(formRef == null ? void 0 : formRef.name, standalone);
+    const isMaxWidget = isMaxWidgetProp === true || isMaxWidgetProp === "true" || isMaxWidgetProp === "{true}";
+    const effectiveFormKey = isMaxWidget && formKey ? `${formKey}_maxWidget` : formKey || inputFieldName;
+    const effectiveDataValue = isMaxWidget ? maxDataValue !== void 0 ? maxDataValue : datavalue : datavalue;
+    const trigger = formRef == null ? void 0 : formRef.trigger;
+    const validationType = (form == null ? void 0 : form.validationtype) || (formRef == null ? void 0 : formRef.validationtype) || "default";
+    useFormRegistration(name, fieldProxy, contextFormRef);
+    useExternalDataSync(effectiveDataValue, fieldRef);
+    useDefaultValueSync(defaultvalue, datavalue, fieldRef);
+    const widget = WrappedComponent == null ? void 0 : WrappedComponent.displayName;
+    const ignoreRange = ["WmRadioset", "WmCheckboxset"].includes(widget != null ? widget : "");
+    const validationRules = useValidationRules(
+      validationType,
+      validators,
+      asyncValidators,
+      required,
+      maxchars,
+      regexp,
+      validationmessage,
+      ignoreRange ? void 0 : minvalue,
+      ignoreRange ? void 0 : maxvalue,
+      form,
+      customValidationMsg
+    );
+    const rules = {
+      required,
+      maxchars,
+      regexp,
+      minvalue,
+      maxvalue,
+      excludedays: props.excludedays,
+      excludedates: props.excludedates,
+      mintime: props.mintime,
+      maxtime: props.maxtime,
+      mindate: props.mindate,
+      maxdate: props.maxdate
+    };
+    const extractedValidatorProps = extractDynamicValidationProps(validators || [], rules);
+    const htmlValidationProps = useHTMLValidationProps(validationType, required, maxchars, regexp);
+    useEffect(() => {
+      observeRef.current = observe;
+    }, [observe]);
+    useEffect(() => {
+      if (isInitialMountRef.current) {
+        isInitialMountRef.current = false;
+        return;
+      }
+      const hasBeenTouchedOrSubmitted = hasEverBeenTouchedRef.current || (formRef == null ? void 0 : formRef.submitCount) && formRef.submitCount > 0 || false;
+      if (trigger && effectiveFormKey && hasBeenTouchedOrSubmitted) {
+        trigger(effectiveFormKey);
+      }
+    }, [validationmessage]);
+    const customMsgInitialRef = useRef(true);
+    useEffect(() => {
+      if (customMsgInitialRef.current) {
+        customMsgInitialRef.current = false;
+        return;
+      }
+      if (trigger && effectiveFormKey && hasEverBeenTouchedRef.current) {
+        trigger(effectiveFormKey);
+      }
+    }, [customValidationMsg]);
+    const createOnChangeHandler = useCallback(
+      (field) => {
+        return (e, componentProps, newValue, oldValue, isValid) => {
+          var _a2;
+          let valueToSet;
+          if (newValue !== void 0) {
+            valueToSet = newValue;
+          } else if (e && e.target) {
+            valueToSet = e.target.value;
+          } else if (e !== void 0) {
+            valueToSet = e;
+          }
+          if (valueToSet && typeof valueToSet === "object" && !Array.isArray(valueToSet) && props.datafield && props.datafield !== "All Fields") {
+            valueToSet = valueToSet[props.datafield];
+          }
+          if (type === "number") {
+            field.onChange(valueToSet === "" || valueToSet === null ? "" : valueToSet);
+          } else {
+            field.onChange(valueToSet);
+          }
+          if (isValid === false) {
+            return;
+          }
+          if (updateon === "keypress" && effectiveFormKey) {
+            setTouched(true);
+            trigger(effectiveFormKey);
+          }
+          (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e, componentProps, newValue, oldValue);
+        };
+      },
+      [type, props.datafield, updateon, effectiveFormKey]
+    );
+    const createOnBlurHandler = useCallback(
+      (field, fieldState) => {
+        return (e) => {
+          var _a2;
+          setTouched(true);
+          hasEverBeenTouchedRef.current = true;
+          field.onBlur();
+          const shouldTriggerValidation = validationType === "html" && trigger && !!fieldState.error || validationType !== "none" && ((_a2 = observeRef.current) == null ? void 0 : _a2.length) && trigger;
+          if (shouldTriggerValidation) {
+            setTimeout(() => {
+              trigger(effectiveFormKey);
+            });
+          }
+          onBlur == null ? void 0 : onBlur(e);
+        };
+      },
+      [trigger, formKey, inputFieldName, onBlur, validationType]
+    );
+    if (!(formRef == null ? void 0 : formRef.control) || props.ignoreInForm) {
+      return /* @__PURE__ */ jsx(WrappedComponent, __spreadValues({}, props));
+    }
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formRef.control,
+        name: effectiveFormKey,
+        rules: validationRules,
+        defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : defaultvalue,
+        render: ({ field, fieldState }) => {
+          var _a2, _b;
+          fieldRef.current = field;
+          const processedValue = processFieldValue(field.value, type, props.datafield);
+          const errorState = getErrorState(fieldState, validationType, touched);
+          let valueToUse;
+          if (processedValue !== void 0) {
+            valueToUse = processedValue;
+          } else {
+            valueToUse = defaultvalue;
+          }
+          const effectiveValue = processedValue !== void 0 ? processedValue : defaultvalue;
+          const displayValueStr = effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue.toString() : "";
+          const maxWidgetProps = isMaxWidget ? {
+            datavalue: props.datavalue !== void 0 ? props.datavalue : void 0,
+            // Keep original, don't update
+            value: props.value !== void 0 ? props.value : void 0,
+            // Keep original, don't update
+            displayValue: props.displayValue !== void 0 ? props.displayValue : void 0,
+            // Keep original, don't update
+            maxDataValue: effectiveValue,
+            // Update max-prefixed properties
+            maxdisplayValue: displayValueStr
+          } : {
+            // For regular widgets: use regular properties
+            datavalue: valueToUse,
+            value: valueToUse,
+            displayValue: displayValueStr,
+            maxvalue: props.maxvalue !== void 0 ? props.maxvalue : void 0
+            // Keep original, don't update
+          };
+          const controlledProps = __spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props), extractedValidatorProps), validationType === "html" ? htmlValidationProps : {}), maxWidgetProps), {
+            isMaxWidget,
+            // Ensure isMaxWidget is passed through
+            onChange: createOnChangeHandler(field),
+            onBlur: createOnBlurHandler(field, fieldState),
+            ref: field.ref
+          }), errorState), {
+            required: validationType === "html" || !propsFormRef ? required : extractedValidatorProps.required || required,
+            isControlled: true,
+            formfield: true,
+            fieldName: inputFieldName,
+            name,
+            isRequiredLabel: validationType === "html" || !propsFormRef ? required : extractedValidatorProps.required || required,
+            className: clsx(wrappedComponentProps.className, {
+              hidden: contextFormRef == null ? void 0 : contextFormRef.isViewMode
+            })
+          }), {
+            listener: {
+              onChange: isMaxWidget && props.onChangeHandler ? (name2, data) => {
+                const remapped = __spreadValues({}, data);
+                if ("datavalue" in remapped) {
+                  remapped.maxDataValue = remapped.datavalue;
+                  delete remapped.datavalue;
+                }
+                if ("displayValue" in remapped) {
+                  remapped.maxDisplayValue = remapped.displayValue;
+                  delete remapped.displayValue;
+                }
+                props.onChangeHandler(name2, remapped);
+              } : props.onChangeHandler,
+              Widgets: ((_a2 = props.listener) == null ? void 0 : _a2.Widgets) || {}
+            }
+          });
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              WrappedComponent,
+              __spreadProps(__spreadValues({}, controlledProps), {
+                dataset: props.dataset,
+                displayfield: props.displayfield
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  alignSelf: "flex-start"
+                },
+                className: "form-control-static app-label",
+                hidden: !(contextFormRef == null ? void 0 : contextFormRef.isViewMode),
+                children: (() => {
+                  let value = controlledProps.datavalue;
+                  if (value && typeof value === "object") {
+                    if (props.datafield || props.displayfield) {
+                      value = value[props.datafield || props.displayfield];
+                    } else {
+                      value = JSON.stringify(value);
+                    }
+                  }
+                  return value;
+                })()
+              }
+            ),
+            hint && !shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "help-block",
+                "aria-hidden": "true",
+                role: "alert",
+                "aria-live": "polite",
+                style: {
+                  textAlign: "start",
+                  width: "100%"
+                },
+                children: hint
+              }
+            ),
+            shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "help-block text-danger",
+                "aria-hidden": "false",
+                role: "alert",
+                "aria-live": "assertive",
+                style: {
+                  textAlign: "start",
+                  width: "100%"
+                },
+                children: (_b = fieldState.error) == null ? void 0 : _b.message
+              }
+            )
+          ] });
+        }
+      }
+    );
+  });
+  WithFormControllerComponent.displayName = `withFormController(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return WithFormControllerComponent;
+};
+var withFormController_default = withFormController;
+export {
+  withFormController_default as default
+};

package/components/data/form/form-dynamic-section/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { FormDynamicFieldsSectionProps } from "./props";
+declare function FormDynamicFieldsSectionComponent({ formName, metadata, listener, }: FormDynamicFieldsSectionProps): import("react/jsx-runtime").JSX.Element;
+declare const FormDynamicFieldsSection: React.MemoExoticComponent<typeof FormDynamicFieldsSectionComponent>;
+export default FormDynamicFieldsSection;

package/components/data/form/form-dynamic-section/index.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import WmFormBody from "../form-body";
+import WmContainer from "../../../container";
+import WmDynamicFields from "../dynamic-fields";
+const DYNAMIC_FORM_BODY_SUFFIX = "_dynamic_form_body";
+const DYNAMIC_FORM_CONTAINER_SUFFIX = "_dynamic_form_container";
+const DYNAMIC_FIELDS_SUFFIX = "_dynamic_fields";
+function FormDynamicFieldsSectionComponent({
+  formName,
+  metadata,
+  listener
+}) {
+  const formBodyName = formName + DYNAMIC_FORM_BODY_SUFFIX;
+  const containerName = formName + DYNAMIC_FORM_CONTAINER_SUFFIX;
+  const dynamicFieldsName = formName + DYNAMIC_FIELDS_SUFFIX;
+  return /* @__PURE__ */ jsx(
+    WmFormBody,
+    {
+      name: formBodyName,
+      listener,
+      "data-widget-id": `widget-${formName}-dynamic-body`,
+      children: /* @__PURE__ */ jsx(
+        WmContainer,
+        {
+          name: containerName,
+          listener,
+          "data-widget-id": `widget-${formName}-dynamic-container`,
+          className: "dynamic-form-container",
+          children: /* @__PURE__ */ jsx(
+            WmDynamicFields,
+            {
+              name: dynamicFieldsName,
+              metadata,
+              listener,
+              "data-widget-id": `widget-${formName}-dynamic-fields`
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function propsAreEqual(prev, next) {
+  return prev.formName === next.formName && prev.metadata === next.metadata;
+}
+const FormDynamicFieldsSection = memo(FormDynamicFieldsSectionComponent, propsAreEqual);
+FormDynamicFieldsSection.displayName = "FormDynamicFieldsSection";
+var form_dynamic_section_default = FormDynamicFieldsSection;
+export {
+  form_dynamic_section_default as default
+};

package/components/data/form/form-dynamic-section/props.d.ts

@@ -0,0 +1,5 @@
+export interface FormDynamicFieldsSectionProps {
+    formName: string;
+    metadata: any;
+    listener?: any;
+}

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

@@ -0,0 +1,3 @@
+import { WmFormFieldProps } from "./props";
+declare const BaseField: (WrappedComponent: any) => (props: WmFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default BaseField;

package/components/data/form/form-field/base-field.js

@@ -0,0 +1,158 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createElement } from "react";
+import { useState, useMemo, useRef, useCallback } from "react";
+import { LIVE_CONSTANTS } from "../../utils/filter-field-util";
+import { useFormContext } from "../form-context";
+const initialRelatedData = {
+  dataset: [],
+  displayfield: "",
+  displaylabel: "",
+  datafield: "",
+  searchkey: ""
+};
+const BaseField = (WrappedComponent) => {
+  const FormField = (props) => {
+    const formContext = useFormContext();
+    const fieldRef = useRef(null);
+    const { widgetCls, captionCls, captionposition } = formContext || {};
+    const [validators, setValidators] = useState(props.validators || []);
+    const [asyncValidators, setAsyncValidators] = useState([]);
+    const [observe, observeOn] = useState([]);
+    const [isDataSetBound, setIsDataSetBound] = useState(false);
+    const [relatedData, setRelatedData] = useState(initialRelatedData);
+    const [customValidationMsg, setCustomValidationMsg] = useState(null);
+    const setValidationMessage = useCallback((val) => {
+      setTimeout(() => {
+        setCustomValidationMsg(val || null);
+      });
+    }, []);
+    function updateFormWidgetDataset(dataset, displayField) {
+      setRelatedData({
+        dataset: dataset.data,
+        displayfield: displayField || props.displayfield,
+        datafield: "All Fields"
+      });
+      if ((formContext == null ? void 0 : formContext.trigger) && props.formKey) {
+        setTimeout(() => {
+          formContext.trigger(props.formKey);
+        }, 0);
+      }
+    }
+    function setFieldDataSet(dataset, options) {
+      const aliasDisplayField = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE;
+      const newRelatedData = {
+        displaylabel: aliasDisplayField,
+        displayfield: aliasDisplayField,
+        datafield: options.aliasColumn || LIVE_CONSTANTS.LABEL_KEY,
+        searchkey: options.distinctField || LIVE_CONSTANTS.LABEL_KEY,
+        dataset
+      };
+      setRelatedData(newRelatedData);
+    }
+    const hasRequiredValidator = () => {
+      const checkRequiredValidator = (validator) => {
+        if (validator.type === "required") {
+          if (typeof validator.validator === "function") {
+            try {
+              return validator.validator() === true;
+            } catch (error) {
+              console.warn("Error calling required validator function:", error);
+              return false;
+            }
+          }
+          return validator.validator === true;
+        }
+        return false;
+      };
+      return validators.some(checkRequiredValidator) || asyncValidators.some(checkRequiredValidator);
+    };
+    const isRequired = hasRequiredValidator() || props.required || false;
+    const transformedFormKey = useMemo(() => {
+      const isChildForm = props.parentForm;
+      if (isChildForm) {
+        if (props.searchkey) {
+          return props.searchkey;
+        }
+      }
+      if (props.formKey && props.searchkey && props.searchkey !== props.formKey) {
+        return props.searchkey;
+      }
+      return props.formKey;
+    }, [props.formKey, props.searchkey, props.formName, props.name, props.parentForm]);
+    const modifiedProps = useMemo(() => {
+      var _a;
+      return __spreadValues(__spreadProps(__spreadValues({}, props), {
+        formRef: formContext,
+        itemsPerRow: formContext == null ? void 0 : formContext.itemsPerRow,
+        validators,
+        asyncValidators,
+        observe,
+        observeOn,
+        setValidators,
+        setAsyncValidators,
+        widgetCls,
+        captionCls,
+        fieldRef,
+        setValidationMessage,
+        customValidationMsg,
+        fieldName: props.name,
+        formKey: transformedFormKey,
+        // Use transformed formKey
+        setIsDataSetBound,
+        isDataSetBound,
+        updateFormWidgetDataset,
+        setFieldDataSet,
+        required: isRequired,
+        captionposition
+      }), relatedData.dataset && ((_a = relatedData.dataset) == null ? void 0 : _a.length) > 0 ? {
+        datafield: relatedData.datafield,
+        dataset: relatedData.dataset,
+        displayfield: relatedData.displayfield
+      } : {});
+    }, [
+      props,
+      validators,
+      asyncValidators,
+      observe,
+      observeOn,
+      relatedData,
+      isRequired,
+      transformedFormKey,
+      customValidationMsg,
+      formContext
+    ]);
+    return /* @__PURE__ */ createElement(
+      WrappedComponent,
+      __spreadProps(__spreadValues({}, modifiedProps), {
+        validators,
+        asyncValidators,
+        setValidators,
+        datavalue: props.datavalue || props.defaultvalue,
+        key: `${props.formKey}-${relatedData.displayfield || "initial"}`
+      })
+    );
+  };
+  return FormField;
+};
+var base_field_default = BaseField;
+export {
+  base_field_default as default
+};

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

@@ -0,0 +1,14 @@
+import { WmFormFieldProps } from "./props";
+declare const WmFormFieldStandalone: (props: WmFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export { WmFormFieldStandalone as WmFormField };
+/**
+ * The WmFormField component represents a single field within a form.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-form-field--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-form-field--docs#tab-overview)
+ *
+ * @param props - {@link WmFormFieldProps}
+ */
+declare const _default: (props: WmFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;