@wordpress/dataviews 10.2.0 → 10.3.0

package/build-module/hooks/use-form-validity.js

@@ -1,10 +1,12 @@
+// packages/dataviews/src/hooks/use-form-validity.ts
 import deepMerge from "deepmerge";
+import fastDeepEqual from "fast-deep-equal/es6";
 import { useCallback, useEffect, useRef, useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import normalizeFields from "../utils/normalize-fields";
-import normalizeFormFields from "../dataform-layouts/normalize-form-fields";
-const isEmptyNullOrUndefined = (value) => [void 0, "", null].includes(value);
-const isArrayOrElementsEmptyNullOrUndefined = (value) => {
+import normalizeForm from "../dataform-layouts/normalize-form";
+var isEmptyNullOrUndefined = (value) => [void 0, "", null].includes(value);
+var isArrayOrElementsEmptyNullOrUndefined = (value) => {
   return !Array.isArray(value) || value.length === 0 || value.every((element) => isEmptyNullOrUndefined(element));
 };
 function isInvalidForRequired(fieldType, value) {
@@ -28,352 +30,453 @@ function isFormValid(formValidity) {
     );
   });
 }
-function updateFieldValidity(setFormValidity, parentFieldId, fieldId, newValidity) {
-  if (parentFieldId) {
-    setFormValidity((prev) => ({
-      ...prev,
-      [parentFieldId]: {
-        ...prev?.[parentFieldId],
-        children: {
-          ...prev?.[parentFieldId]?.children,
-          [fieldId]: {
-            ...newValidity
-          }
-        }
+function getFormFieldsToValidate(form, fields) {
+  const normalizedForm = normalizeForm(form);
+  if (normalizedForm.fields.length === 0) {
+    return [];
+  }
+  const fieldsMap = /* @__PURE__ */ new Map();
+  fields.forEach((field) => {
+    fieldsMap.set(field.id, field);
+  });
+  function processFormField(formField) {
+    if ("children" in formField && Array.isArray(formField.children)) {
+      const processedChildren = formField.children.map(processFormField).filter((child) => child !== null);
+      if (processedChildren.length === 0) {
+        return null;
       }
-    }));
-  } else {
-    setFormValidity((prev) => ({
-      ...prev,
-      [fieldId]: {
-        ...newValidity
+      const fieldDef2 = fieldsMap.get(formField.id);
+      if (fieldDef2) {
+        const [normalizedField2] = normalizeFields([
+          fieldDef2
+        ]);
+        return {
+          id: formField.id,
+          children: processedChildren,
+          field: normalizedField2
+        };
       }
-    }));
+      return {
+        id: formField.id,
+        children: processedChildren
+      };
+    }
+    const fieldDef = fieldsMap.get(formField.id);
+    if (!fieldDef) {
+      return null;
+    }
+    const [normalizedField] = normalizeFields([fieldDef]);
+    return {
+      id: formField.id,
+      children: [],
+      field: normalizedField
+    };
   }
+  const toValidate = normalizedForm.fields.map(processFormField).filter((field) => field !== null);
+  return toValidate;
 }
-function getFieldsToValidate(fields, form) {
-  const formFields = normalizeFormFields(form);
-  if (formFields.length === 0) {
-    return { fields: [], fieldToParent: /* @__PURE__ */ new Map() };
+function setValidityAtPath(formValidity, fieldValidity, path) {
+  if (!formValidity) {
+    formValidity = {};
   }
-  const fieldToParent = /* @__PURE__ */ new Map();
-  const fieldIdsToValidate = [];
-  formFields.forEach((formField) => {
-    if (!!formField.children) {
-      formField.children.forEach((child) => {
-        const childId = typeof child === "string" ? child : child.id;
-        fieldIdsToValidate.push(childId);
-        fieldToParent.set(childId, formField.id);
-      });
-    } else {
-      fieldIdsToValidate.push(formField.id);
+  if (path.length === 0) {
+    return formValidity;
+  }
+  const result = { ...formValidity };
+  let current = result;
+  for (let i = 0; i < path.length - 1; i++) {
+    const segment = path[i];
+    if (!current[segment]) {
+      current[segment] = {};
     }
-  });
-  return {
-    fields: normalizeFields(
-      fields.filter(
-        (field) => fieldIdsToValidate.includes(field.id)
-      )
-    ),
-    fieldToParent
+    current = current[segment];
+  }
+  const finalKey = path[path.length - 1];
+  current[finalKey] = {
+    ...current[finalKey] || {},
+    ...fieldValidity
   };
+  return result;
 }
-function useFormValidity(item, fields, form) {
-  const [formValidity, setFormValidity] = useState();
-  const previousValidatedValuesRef = useRef({});
-  const customValidationCounterRef = useRef({});
-  const elementsValidationCounterRef = useRef(
-    {}
-  );
-  const validate = useCallback(() => {
-    const { fields: fieldsToValidate, fieldToParent } = getFieldsToValidate(
-      fields,
-      form
-    );
-    if (fieldsToValidate.length === 0) {
-      setFormValidity(void 0);
+function handleElementsValidationAsync(promise, formField, promiseHandler) {
+  const { elementsCounterRef, setFormValidity, path, item } = promiseHandler;
+  const currentToken = (elementsCounterRef.current[formField.id] || 0) + 1;
+  elementsCounterRef.current[formField.id] = currentToken;
+  promise.then((result) => {
+    if (currentToken !== elementsCounterRef.current[formField.id]) {
       return;
     }
-    fieldsToValidate.forEach((field) => {
-      const value = field.getValue({ item });
-      if (previousValidatedValuesRef.current.hasOwnProperty(field.id) && value === previousValidatedValuesRef.current[field.id]) {
-        return;
-      }
-      previousValidatedValuesRef.current[field.id] = value;
-      const parentFieldId = fieldToParent.get(field.id);
-      if (field.isValid.required && isInvalidForRequired(field.type, value)) {
-        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
-          required: { type: "invalid" }
-        });
-        return;
-      }
-      if (field.isValid.elements && field.hasElements && !field.getElements && Array.isArray(field.elements)) {
-        const validValues = field.elements.map((el) => el.value);
-        if (field.type !== "array" && !validValues.includes(value)) {
-          updateFieldValidity(
-            setFormValidity,
-            parentFieldId,
-            field.id,
-            {
-              elements: {
-                type: "invalid",
-                message: "Value must be one of the elements."
-              }
+    if (!Array.isArray(result)) {
+      setFormValidity((prev) => {
+        const newFormValidity = setValidityAtPath(
+          prev,
+          {
+            elements: {
+              type: "invalid",
+              message: __("Could not validate elements.")
             }
-          );
-          return;
-        }
-        if (field.type === "array" && !Array.isArray(value)) {
-          updateFieldValidity(
-            setFormValidity,
-            parentFieldId,
-            field.id,
-            {
-              elements: {
-                type: "invalid",
-                message: "Value must be an array."
-              }
+          },
+          [...path, formField.id]
+        );
+        return newFormValidity;
+      });
+      return;
+    }
+    const validValues = result.map((el) => el.value);
+    if (!!formField.field && formField.field.type !== "array" && !validValues.includes(formField.field.getValue({ item }))) {
+      setFormValidity((prev) => {
+        const newFormValidity = setValidityAtPath(
+          prev,
+          {
+            elements: {
+              type: "invalid",
+              message: __(
+                "Value must be one of the elements."
+              )
             }
-          );
-          return;
-        }
-        if (field.type === "array" && value.some((v) => !validValues.includes(v))) {
-          updateFieldValidity(
-            setFormValidity,
-            parentFieldId,
-            field.id,
-            {
-              elements: {
-                type: "invalid",
-                message: "Value must be one of the elements."
-              }
+          },
+          [...path, formField.id]
+        );
+        return newFormValidity;
+      });
+      return;
+    }
+    if (!!formField.field && formField.field.type === "array" && !Array.isArray(formField.field.getValue({ item }))) {
+      setFormValidity((prev) => {
+        const newFormValidity = setValidityAtPath(
+          prev,
+          {
+            elements: {
+              type: "invalid",
+              message: __("Value must be an array.")
             }
-          );
-          return;
-        }
-      }
-      if (field.isValid.elements && field.hasElements && typeof field.getElements === "function") {
-        const currentToken = (elementsValidationCounterRef.current[field.id] || 0) + 1;
-        elementsValidationCounterRef.current[field.id] = currentToken;
-        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
-          elements: {
-            type: "validating",
-            message: "Validating..."
-          }
-        });
-        field.getElements().then((result) => {
-          if (elementsValidationCounterRef.current[field.id] !== currentToken) {
-            return;
-          }
-          if (!Array.isArray(result)) {
-            updateFieldValidity(
-              setFormValidity,
-              parentFieldId,
-              field.id,
-              {
-                elements: {
-                  type: "invalid",
-                  message: "Could not validate elements."
-                }
-              }
-            );
-            return;
-          }
-          const validValues = result.map((el) => el.value);
-          if (field.type !== "array" && !validValues.includes(value)) {
-            updateFieldValidity(
-              setFormValidity,
-              parentFieldId,
-              field.id,
-              {
-                elements: {
-                  type: "invalid",
-                  message: "Value must be one of the elements."
-                }
-              }
-            );
-            return;
-          }
-          if (field.type === "array" && !Array.isArray(value)) {
-            updateFieldValidity(
-              setFormValidity,
-              parentFieldId,
-              field.id,
-              {
-                elements: {
-                  type: "invalid",
-                  message: "Value must be an array."
-                }
-              }
-            );
-            return;
-          }
-          if (field.type === "array" && value.some(
-            (v) => !validValues.includes(v)
-          )) {
-            updateFieldValidity(
-              setFormValidity,
-              parentFieldId,
-              field.id,
-              {
-                elements: {
-                  type: "invalid",
-                  message: "Value must be one of the elements."
-                }
-              }
-            );
-          }
-        }).catch((error) => {
-          if (elementsValidationCounterRef.current[field.id] !== currentToken) {
-            return;
-          }
-          updateFieldValidity(
-            setFormValidity,
-            parentFieldId,
-            field.id,
-            {
-              elements: {
-                type: "invalid",
-                message: error.message
-              }
+          },
+          [...path, formField.id]
+        );
+        return newFormValidity;
+      });
+      return;
+    }
+    if (!!formField.field && formField.field.type === "array" && formField.field.getValue({ item }).some((v) => !validValues.includes(v))) {
+      setFormValidity((prev) => {
+        const newFormValidity = setValidityAtPath(
+          prev,
+          {
+            elements: {
+              type: "invalid",
+              message: __(
+                "Value must be one of the elements."
+              )
             }
-          );
-        });
-      }
-      let customError;
-      try {
-        customError = field.isValid?.custom?.(
-          deepMerge(
-            item,
-            field.setValue({
-              item,
-              value
-            })
-          ),
-          field
+          },
+          [...path, formField.id]
         );
-      } catch (error) {
-        let errorMessage;
-        if (error instanceof Error) {
-          errorMessage = error.message;
-        } else {
-          errorMessage = String(error) || __("Unknown error when running custom validation.");
-        }
-        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
-          custom: {
+        return newFormValidity;
+      });
+    }
+  }).catch((error) => {
+    if (currentToken !== elementsCounterRef.current[formField.id]) {
+      return;
+    }
+    let errorMessage;
+    if (error instanceof Error) {
+      errorMessage = error.message;
+    } else {
+      errorMessage = String(error) || __(
+        "Unknown error when running elements validation asynchronously."
+      );
+    }
+    setFormValidity((prev) => {
+      const newFormValidity = setValidityAtPath(
+        prev,
+        {
+          elements: {
             type: "invalid",
             message: errorMessage
           }
-        });
-      }
-      if (typeof customError === "string") {
-        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
+        },
+        [...path, formField.id]
+      );
+      return newFormValidity;
+    });
+  });
+}
+function handleCustomValidationAsync(promise, formField, promiseHandler) {
+  const { customCounterRef, setFormValidity, path } = promiseHandler;
+  const currentToken = (customCounterRef.current[formField.id] || 0) + 1;
+  customCounterRef.current[formField.id] = currentToken;
+  promise.then((result) => {
+    if (currentToken !== customCounterRef.current[formField.id]) {
+      return;
+    }
+    if (result === null) {
+      setFormValidity((prev) => {
+        const newFormValidity = setValidityAtPath(
+          prev,
+          {
+            custom: {
+              type: "valid",
+              message: __("Valid")
+            }
+          },
+          [...path, formField.id]
+        );
+        return newFormValidity;
+      });
+      return;
+    }
+    if (typeof result === "string") {
+      setFormValidity((prev) => {
+        const newFormValidity = setValidityAtPath(
+          prev,
+          {
+            custom: {
+              type: "invalid",
+              message: result
+            }
+          },
+          [...path, formField.id]
+        );
+        return newFormValidity;
+      });
+      return;
+    }
+    setFormValidity((prev) => {
+      const newFormValidity = setValidityAtPath(
+        prev,
+        {
           custom: {
             type: "invalid",
-            message: customError
+            message: __("Validation could not be processed.")
           }
-        });
-        return;
-      }
-      if (customError instanceof Promise) {
-        const currentToken = (customValidationCounterRef.current[field.id] || 0) + 1;
-        customValidationCounterRef.current[field.id] = currentToken;
-        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
+        },
+        [...path, formField.id]
+      );
+      return newFormValidity;
+    });
+  }).catch((error) => {
+    if (currentToken !== customCounterRef.current[formField.id]) {
+      return;
+    }
+    let errorMessage;
+    if (error instanceof Error) {
+      errorMessage = error.message;
+    } else {
+      errorMessage = String(error) || __(
+        "Unknown error when running custom validation asynchronously."
+      );
+    }
+    setFormValidity((prev) => {
+      const newFormValidity = setValidityAtPath(
+        prev,
+        {
           custom: {
-            type: "validating",
-            message: "Validating..."
-          }
-        });
-        customError.then((result) => {
-          if (customValidationCounterRef.current[field.id] !== currentToken) {
-            return;
-          }
-          if (result === null) {
-            updateFieldValidity(
-              setFormValidity,
-              parentFieldId,
-              field.id,
-              {
-                custom: {
-                  type: "valid",
-                  message: "Valid"
-                }
-              }
-            );
-            return;
-          }
-          if (typeof result === "string") {
-            updateFieldValidity(
-              setFormValidity,
-              parentFieldId,
-              field.id,
-              {
-                custom: {
-                  type: "invalid",
-                  message: result
-                }
-              }
-            );
-          }
-        }).catch((error) => {
-          if (customValidationCounterRef.current[field.id] !== currentToken) {
-            return;
+            type: "invalid",
+            message: errorMessage
           }
-          updateFieldValidity(
-            setFormValidity,
-            parentFieldId,
-            field.id,
-            {
-              custom: {
-                type: "invalid",
-                message: error.message
-              }
-            }
-          );
-        });
-        return;
-      }
-      setFormValidity((prev) => {
-        if (!prev) {
-          return prev;
+        },
+        [...path, formField.id]
+      );
+      return newFormValidity;
+    });
+  });
+}
+function validateFormField(item, formField, promiseHandler) {
+  if (!!formField.field && formField.field.isValid.required && isInvalidForRequired(
+    formField.field.type,
+    formField.field.getValue({ item })
+  )) {
+    return {
+      required: { type: "invalid" }
+    };
+  }
+  if (!!formField.field && formField.field.isValid.elements && formField.field.hasElements && !formField.field.getElements && Array.isArray(formField.field.elements)) {
+    const value = formField.field.getValue({ item });
+    const validValues = formField.field.elements.map((el) => el.value);
+    if (formField.field.type !== "array" && !validValues.includes(value)) {
+      return {
+        elements: {
+          type: "invalid",
+          message: __("Value must be one of the elements.")
         }
-        if (parentFieldId) {
-          const parentField = prev[parentFieldId];
-          if (!parentField?.children) {
-            return prev;
-          }
-          const { [field.id]: removed2, ...restChildren } = parentField.children;
-          if (Object.keys(restChildren).length === 0) {
-            const { children, ...restParent } = parentField;
-            if (Object.keys(restParent).length === 0) {
-              const {
-                [parentFieldId]: removedParent,
-                ...restFields
-              } = prev;
-              return Object.keys(restFields).length === 0 ? void 0 : restFields;
-            }
-            return {
-              ...prev,
-              [parentFieldId]: restParent
-            };
-          }
-          return {
-            ...prev,
-            [parentFieldId]: {
-              ...parentField,
-              children: restChildren
-            }
-          };
+      };
+    }
+    if (formField.field.type === "array" && !Array.isArray(value)) {
+      return {
+        elements: {
+          type: "invalid",
+          message: __("Value must be an array.")
         }
-        if (!prev[field.id]) {
-          return prev;
+      };
+    }
+    if (formField.field.type === "array" && value.some((v) => !validValues.includes(v))) {
+      return {
+        elements: {
+          type: "invalid",
+          message: __("Value must be one of the elements.")
         }
-        const { [field.id]: removed, ...rest } = prev;
-        if (Object.keys(rest).length === 0) {
-          return void 0;
+      };
+    }
+  }
+  if (!!formField.field && formField.field.isValid.elements && formField.field.hasElements && typeof formField.field.getElements === "function") {
+    handleElementsValidationAsync(
+      formField.field.getElements(),
+      formField,
+      promiseHandler
+    );
+    return {
+      elements: {
+        type: "validating",
+        message: __("Validating\u2026")
+      }
+    };
+  }
+  let customError;
+  if (!!formField.field) {
+    try {
+      const value = formField.field.getValue({ item });
+      customError = formField.field.isValid?.custom?.(
+        deepMerge(
+          item,
+          formField.field.setValue({
+            item,
+            value
+          })
+        ),
+        formField.field
+      );
+    } catch (error) {
+      let errorMessage;
+      if (error instanceof Error) {
+        errorMessage = error.message;
+      } else {
+        errorMessage = String(error) || __("Unknown error when running custom validation.");
+      }
+      return {
+        custom: {
+          type: "invalid",
+          message: errorMessage
+        }
+      };
+    }
+  }
+  if (typeof customError === "string") {
+    return {
+      custom: {
+        type: "invalid",
+        message: customError
+      }
+    };
+  }
+  if (customError instanceof Promise) {
+    handleCustomValidationAsync(customError, formField, promiseHandler);
+    return {
+      custom: {
+        type: "validating",
+        message: __("Validating\u2026")
+      }
+    };
+  }
+  if (formField.children.length > 0) {
+    const result = {};
+    formField.children.forEach((child) => {
+      result[child.id] = validateFormField(item, child, {
+        ...promiseHandler,
+        path: [...promiseHandler.path, formField.id, "children"]
+      });
+    });
+    const filteredResult = {};
+    Object.entries(result).forEach(([key, value]) => {
+      if (value !== void 0) {
+        filteredResult[key] = value;
+      }
+    });
+    if (Object.keys(filteredResult).length === 0) {
+      return void 0;
+    }
+    return {
+      children: filteredResult
+    };
+  }
+  return void 0;
+}
+function getFormFieldValue(formField, item) {
+  const fieldValue = formField?.field?.getValue({ item });
+  if (formField.children.length === 0) {
+    return fieldValue;
+  }
+  const childrenValues = formField.children.map(
+    (child) => getFormFieldValue(child, item)
+  );
+  if (!childrenValues) {
+    return fieldValue;
+  }
+  return {
+    value: fieldValue,
+    children: childrenValues
+  };
+}
+function useFormValidity(item, fields, form) {
+  const [formValidity, setFormValidity] = useState();
+  const customCounterRef = useRef({});
+  const elementsCounterRef = useRef({});
+  const previousValuesRef = useRef({});
+  const validate = useCallback(() => {
+    const promiseHandler = {
+      customCounterRef,
+      elementsCounterRef,
+      setFormValidity,
+      path: [],
+      item
+    };
+    const formFieldsToValidate = getFormFieldsToValidate(form, fields);
+    if (formFieldsToValidate.length === 0) {
+      setFormValidity(void 0);
+      return;
+    }
+    const newFormValidity = {};
+    const untouchedFields = [];
+    formFieldsToValidate.forEach((formField) => {
+      const value = getFormFieldValue(formField, item);
+      if (previousValuesRef.current.hasOwnProperty(formField.id) && fastDeepEqual(
+        previousValuesRef.current[formField.id],
+        value
+      )) {
+        untouchedFields.push(formField.id);
+        return;
+      }
+      previousValuesRef.current[formField.id] = value;
+      const fieldValidity = validateFormField(
+        item,
+        formField,
+        promiseHandler
+      );
+      if (fieldValidity !== void 0) {
+        newFormValidity[formField.id] = fieldValidity;
+      }
+    });
+    setFormValidity((existingFormValidity) => {
+      let validity = {
+        ...existingFormValidity,
+        ...newFormValidity
+      };
+      const fieldsToKeep = [
+        ...untouchedFields,
+        ...Object.keys(newFormValidity)
+      ];
+      Object.keys(validity).forEach((key) => {
+        if (validity && !fieldsToKeep.includes(key)) {
+          delete validity[key];
         }
-        return rest;
       });
+      if (Object.keys(validity).length === 0) {
+        validity = void 0;
+      }
+      const areEqual = fastDeepEqual(existingFormValidity, validity);
+      if (areEqual) {
+        return existingFormValidity;
+      }
+      return validity;
     });
   }, [item, fields, form]);
   useEffect(() => {