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

package/components/data/form/form-controller/hooks/index.js

@@ -0,0 +1,119 @@
+import { useRef, useEffect, useMemo } from "react";
+import { createValidationRules } from "../validation-contrustor";
+import isEqual from "lodash/isEqual";
+const useFormRegistration = (name, fieldProxy, contextFormRef) => {
+  const hasRegisteredRef = useRef(false);
+  useEffect(() => {
+    if ((contextFormRef == null ? void 0 : contextFormRef.registerFormWidget) && fieldProxy && !hasRegisteredRef.current) {
+      contextFormRef.registerFormWidget(name, fieldProxy);
+      hasRegisteredRef.current = true;
+    }
+  }, [fieldProxy, name, contextFormRef]);
+};
+const useExternalDataSync = (datavalue, fieldRef) => {
+  useEffect(() => {
+    if (fieldRef.current && datavalue !== void 0) {
+      const currentValue = fieldRef.current.value;
+      if (!isEqual(currentValue, datavalue)) {
+        fieldRef.current.onChange(datavalue);
+      }
+    }
+  }, [datavalue]);
+};
+const useDefaultValueSync = (defaultvalue, datavalue, fieldRef) => {
+  const hasInitializedRef = useRef(false);
+  const prevDefaultValueRef = useRef(defaultvalue);
+  useEffect(() => {
+    if (!fieldRef.current) return;
+    if (!hasInitializedRef.current && defaultvalue !== void 0 && datavalue === void 0) {
+      const currentValue = fieldRef.current.value;
+      if (currentValue === void 0 || currentValue === null || currentValue === "") {
+        fieldRef.current.onChange(defaultvalue);
+        hasInitializedRef.current = true;
+      }
+      prevDefaultValueRef.current = defaultvalue;
+      return;
+    }
+    if (prevDefaultValueRef.current !== defaultvalue) {
+      const currentValue = fieldRef.current.value;
+      const valueWasFromDefault = currentValue === prevDefaultValueRef.current || prevDefaultValueRef.current === "" && (currentValue === void 0 || currentValue === null || currentValue === "");
+      if (valueWasFromDefault) {
+        fieldRef.current.onChange(defaultvalue);
+      }
+      prevDefaultValueRef.current = defaultvalue;
+    }
+  }, [defaultvalue, datavalue]);
+};
+const useValidationRules = (validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, minvalue, maxvalue, form, customValidationMsg) => {
+  if (validationType === "none") {
+    return {};
+  }
+  const combinedValidators = [...validators || [], ...asyncValidators || []];
+  const hasValidatorType = (type) => validators == null ? void 0 : validators.some((v) => typeof v !== "function" && v.type === type);
+  if (required && !hasValidatorType("required")) {
+    combinedValidators.push({
+      type: "required",
+      validator: true,
+      errorMessage: validationmessage || "This field is required"
+    });
+  }
+  if (maxchars !== void 0) {
+    combinedValidators.push({
+      type: "maxchars",
+      validator: maxchars,
+      errorMessage: validationmessage || `Maximum length is ${maxchars} characters.`
+    });
+  }
+  const normalizedMin = minvalue !== void 0 && minvalue !== null && minvalue !== "" ? Number(minvalue) : void 0;
+  const normalizedMax = maxvalue !== void 0 && maxvalue !== null && maxvalue !== "" ? Number(maxvalue) : void 0;
+  if (normalizedMin !== void 0 && !Number.isNaN(normalizedMin)) {
+    combinedValidators.push({
+      type: "minvalue",
+      validator: normalizedMin,
+      errorMessage: validationmessage || `Value must be greater than or equal to ${normalizedMin}.`
+    });
+  }
+  if (normalizedMax !== void 0 && !Number.isNaN(normalizedMax)) {
+    combinedValidators.push({
+      type: "maxvalue",
+      validator: normalizedMax,
+      errorMessage: validationmessage || `Value must be less than or equal to ${normalizedMax}.`
+    });
+  }
+  if (regexp) {
+    combinedValidators.push({
+      type: "regexp",
+      validator: regexp,
+      errorMessage: validationmessage || "Invalid format."
+    });
+  }
+  if (customValidationMsg) {
+    combinedValidators.push((() => customValidationMsg));
+  }
+  return createValidationRules(combinedValidators, form);
+};
+const useHTMLValidationProps = (validationType, required, maxchars, regexp) => {
+  return useMemo(() => {
+    if (validationType !== "html") {
+      return {};
+    }
+    const htmlProps = {};
+    if (required) {
+      htmlProps.required = true;
+    }
+    if (maxchars) {
+      htmlProps.maxLength = maxchars;
+    }
+    if (regexp) {
+      htmlProps.pattern = typeof regexp === "string" ? regexp : regexp.source;
+    }
+    return htmlProps;
+  }, [validationType, required, maxchars, regexp]);
+};
+export {
+  useDefaultValueSync,
+  useExternalDataSync,
+  useFormRegistration,
+  useHTMLValidationProps,
+  useValidationRules
+};

package/components/data/form/form-controller/props.d.ts

@@ -0,0 +1,139 @@
+export declare const VALIDATOR: {
+    readonly REQUIRED: "required";
+    readonly MAXCHARS: "maxchars";
+    readonly MINVALUE: "minvalue";
+    readonly MAXVALUE: "maxvalue";
+    readonly REGEXP: "regexp";
+    readonly MINDATE: "mindate";
+    readonly MAXDATE: "maxdate";
+    readonly MINTIME: "mintime";
+    readonly MAXTIME: "maxtime";
+    readonly EXCLUDEDATES: "excludedates";
+    readonly EXCLUDEDAYS: "excludedays";
+};
+export interface ValidationProps {
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | RegExp;
+    minvalue?: number | string;
+    maxvalue?: number | string;
+    excludedays?: number[] | string;
+    excludedates?: (string | Date)[];
+    mintime?: string;
+    maxtime?: string;
+    mindate?: string | Date;
+    maxdate?: string | Date;
+}
+type ValidatorType = (typeof VALIDATOR)[keyof typeof VALIDATOR] | string;
+export type ErrorMessageFunction = (field: {
+    value: any;
+}, form: any) => string | Promise<string>;
+export interface BaseValidator {
+    type: ValidatorType;
+    errorMessage: string | ErrorMessageFunction;
+}
+export interface RequiredValidator extends BaseValidator {
+    type: typeof VALIDATOR.REQUIRED | "required";
+    validator: Function | boolean;
+}
+export interface MaxCharsValidator extends BaseValidator {
+    type: typeof VALIDATOR.MAXCHARS | "maxchars";
+    validator: number;
+}
+export interface MinValueValidator extends BaseValidator {
+    type: typeof VALIDATOR.MINVALUE | "minvalue";
+    validator: number;
+}
+export interface MaxValueValidator extends BaseValidator {
+    type: typeof VALIDATOR.MAXVALUE | "maxvalue";
+    validator: number;
+}
+export interface RegexpValidator extends BaseValidator {
+    type: typeof VALIDATOR.REGEXP | "regexp";
+    validator: RegExp | string;
+}
+export interface MinDateValidator extends BaseValidator {
+    type: typeof VALIDATOR.MINDATE | "mindate";
+    validator: string | Date;
+}
+export interface MaxDateValidator extends BaseValidator {
+    type: typeof VALIDATOR.MAXDATE | "maxdate";
+    validator: string | Date;
+}
+export interface MinTimeValidator extends BaseValidator {
+    type: typeof VALIDATOR.MINTIME | "mintime";
+    validator: string;
+}
+export interface MaxTimeValidator extends BaseValidator {
+    type: typeof VALIDATOR.MAXTIME | "maxtime";
+    validator: string;
+}
+export interface ExcludeDatesValidator extends BaseValidator {
+    type: typeof VALIDATOR.EXCLUDEDATES | "excludedates";
+    validator: (string | Date)[];
+}
+export interface ExcludeDaysValidator extends BaseValidator {
+    type: typeof VALIDATOR.EXCLUDEDAYS | "excludedays";
+    validator: number[];
+}
+export interface FunctionValidator {
+    (params: {
+        value: any;
+        fieldName?: string;
+    }, form: any): string | undefined | null | boolean | {
+        errorMessage: string;
+    } | Promise<string | undefined | null | boolean | {
+        errorMessage: string;
+    }>;
+}
+export type ValidatorConfig = RequiredValidator | MaxCharsValidator | MinValueValidator | MaxValueValidator | RegexpValidator | MinDateValidator | MaxDateValidator | MinTimeValidator | MaxTimeValidator | ExcludeDatesValidator | ExcludeDaysValidator | FunctionValidator;
+export type ValidationTypes = "default" | "html" | "none";
+export interface ErrorState {
+    error: boolean;
+    errorMessage?: string;
+    fieldState?: any;
+}
+export interface ControlledFieldProps {
+    validationType?: "default" | "html" | "none";
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    validators?: ValidatorConfig[];
+    asyncValidators?: ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | RegExp;
+    validationmessage?: string;
+    hint?: string;
+    defaultvalue?: any;
+    value?: any;
+    datavalue?: any;
+    type?: string;
+    enhancedProps?: any;
+    observe?: any[];
+    onChange?: (e: any, widget?: any, newValue?: any, oldValue?: any) => void;
+    onBlur?: (e: any) => void;
+    onChangeHandler?: (key: string, field: any) => void;
+    renderFormFields?: (props: any) => React.ReactNode;
+}
+export interface WithFormControllerProps {
+    /** Set via the `withStandalone` HOC for widgets used outside normal form embedding. */
+    standalone?: boolean;
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    datavalue?: any;
+    defaultvalue?: any;
+    validators?: ValidatorConfig[];
+    asyncValidators?: ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | RegExp;
+    validationmessage?: string;
+    hint?: string;
+    type?: string;
+    observe?: string[];
+    onBlur?: (e: any) => void;
+    [key: string]: any;
+}
+export {};

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

@@ -0,0 +1,16 @@
+const VALIDATOR = {
+  REQUIRED: "required",
+  MAXCHARS: "maxchars",
+  MINVALUE: "minvalue",
+  MAXVALUE: "maxvalue",
+  REGEXP: "regexp",
+  MINDATE: "mindate",
+  MAXDATE: "maxdate",
+  MINTIME: "mintime",
+  MAXTIME: "maxtime",
+  EXCLUDEDATES: "excludedates",
+  EXCLUDEDAYS: "excludedays"
+};
+export {
+  VALIDATOR
+};

package/components/data/form/form-controller/utils.d.ts

@@ -0,0 +1,5 @@
+import { ErrorState, ValidatorConfig, ValidationProps, ValidationTypes } from "./props";
+export declare function extractDynamicValidationProps(validators: ValidatorConfig[], rules: ValidationProps): ValidationProps;
+export declare const processFieldValue: (fieldValue: any, type?: string, datafield?: string) => any;
+export declare const getErrorState: (fieldState: any, validationType: ValidationTypes, touched: boolean) => ErrorState;
+export declare const shouldShowErrorMessage: (validationType: ValidationTypes, fieldState: any, touched: boolean) => boolean;

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

@@ -0,0 +1,140 @@
+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));
+function resolveValue(value) {
+  if (value === null || value === void 0) return void 0;
+  if (typeof value === "function") {
+    try {
+      const resolved = value();
+      return resolved === null ? void 0 : resolved;
+    } catch (error) {
+      console.warn("Error resolving function value:", error);
+      return void 0;
+    }
+  }
+  return value === null ? void 0 : value;
+}
+function extractDynamicValidationProps(validators, rules) {
+  const result = {
+    required: rules.required,
+    maxchars: rules.maxchars,
+    regexp: rules.regexp,
+    minvalue: rules.minvalue,
+    maxvalue: rules.maxvalue,
+    excludedays: rules.excludedays,
+    excludedates: rules.excludedates,
+    mintime: rules.mintime,
+    maxtime: rules.maxtime,
+    mindate: rules.mindate,
+    maxdate: rules.maxdate
+  };
+  if (!(validators == null ? void 0 : validators.length)) return result;
+  validators.forEach((validator) => {
+    if (typeof validator === "function") return;
+    switch (validator.type) {
+      case "required":
+        result.required = resolveValue(validator.validator);
+        break;
+      case "maxchars":
+        result.maxchars = resolveValue(validator.validator);
+        break;
+      case "regexp":
+        result.regexp = resolveValue(
+          validator.validator
+        );
+        break;
+      case "minvalue":
+        result.minvalue = resolveValue(validator.validator);
+        break;
+      case "maxvalue":
+        result.maxvalue = resolveValue(validator.validator);
+        break;
+      case "excludedays":
+        result.excludedays = resolveValue(validator.validator);
+        break;
+      case "excludedates":
+        result.excludedates = resolveValue(
+          validator.validator
+        );
+        break;
+      case "mintime":
+        result.mintime = resolveValue(validator.validator);
+        break;
+      case "maxtime":
+        result.maxtime = resolveValue(validator.validator);
+        break;
+      case "mindate":
+        result.mindate = resolveValue(validator.validator);
+        break;
+      case "maxdate":
+        result.maxdate = resolveValue(validator.validator);
+        break;
+    }
+  });
+  if (result.excludedays !== void 0 && Array.isArray(result.excludedays)) {
+    result.excludedays = result.excludedays.join(",");
+  }
+  return result;
+}
+const processFieldValue = (fieldValue, type, datafield) => {
+  if (fieldValue && typeof fieldValue === "object" && !Array.isArray(fieldValue) && datafield) {
+    fieldValue = datafield === "All Fields" ? fieldValue : fieldValue[datafield];
+  }
+  if (type === "number") {
+    return fieldValue === "" || fieldValue === null || fieldValue === void 0 ? "" : fieldValue;
+  }
+  return fieldValue;
+};
+const getErrorState = (fieldState, validationType, touched) => {
+  switch (validationType) {
+    case "default":
+      return {
+        error: touched && !!fieldState.error,
+        errorMessage: touched && fieldState.error ? fieldState.error.message : void 0,
+        fieldState
+      };
+    case "html":
+      return {
+        error: touched && !!fieldState.error,
+        errorMessage: touched && fieldState.error ? fieldState.error.message : void 0,
+        fieldState
+      };
+    case "none":
+      return {
+        error: false,
+        errorMessage: void 0,
+        fieldState: __spreadProps(__spreadValues({}, fieldState), { error: void 0 })
+      };
+    default:
+      return {
+        error: false,
+        errorMessage: void 0,
+        fieldState: void 0
+      };
+  }
+};
+const shouldShowErrorMessage = (validationType, fieldState, touched) => {
+  return validationType !== "none" && (validationType === "default" && fieldState.error || validationType === "html" && fieldState.error);
+};
+export {
+  extractDynamicValidationProps,
+  getErrorState,
+  processFieldValue,
+  shouldShowErrorMessage
+};

package/components/data/form/form-controller/validation-contrustor.d.ts

@@ -0,0 +1,3 @@
+import { RegisterOptions } from "react-hook-form";
+import { ValidatorConfig } from "./props";
+export declare const createValidationRules: (validators: ValidatorConfig[], form?: any, fieldName?: string) => RegisterOptions;