@wordpress/components/build-module/validated-form-controls/control-with-error.js

UI components for WordPress.

// packages/components/src/validated-form-controls/control-with-error.tsx
import { usePrevious } from "@wordpress/compose";
import { __ } from "@wordpress/i18n";
import { cloneElement, forwardRef, useEffect, useState } from "@wordpress/element";
import { withIgnoreIMEEvents } from "../utils/with-ignore-ime-events";
import { ValidityIndicator } from "./validity-indicator";
import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
function appendRequiredIndicator(label, required, markWhenOptional) {
  if (required && !markWhenOptional) {
    return /* @__PURE__ */ _jsxs(_Fragment, {
      children: [label, " ", `(${__("Required")})`]
    });
  }
  if (!required && markWhenOptional) {
    return /* @__PURE__ */ _jsxs(_Fragment, {
      children: [label, " ", `(${__("Optional")})`]
    });
  }
  return label;
}
function UnforwardedControlWithError({
  required,
  markWhenOptional,
  onValidate,
  customValidity,
  getValidityTarget,
  children
}, forwardedRef) {
  const [errorMessage, setErrorMessage] = useState();
  const [statusMessage, setStatusMessage] = useState();
  const [isTouched, setIsTouched] = useState(false);
  const previousCustomValidityType = usePrevious(customValidity?.type);
  useEffect(() => {
    const validityTarget = getValidityTarget();
    const showValidationMessage = () => setErrorMessage(validityTarget?.validationMessage);
    validityTarget?.addEventListener("invalid", showValidationMessage);
    return () => {
      validityTarget?.removeEventListener("invalid", showValidationMessage);
    };
  });
  useEffect(() => {
    if (!isTouched) {
      return;
    }
    const validityTarget = getValidityTarget();
    if (!customValidity?.type) {
      validityTarget?.setCustomValidity("");
      setErrorMessage(validityTarget?.validationMessage);
      setStatusMessage(void 0);
      return;
    }
    switch (customValidity.type) {
      case "validating": {
        const timer = setTimeout(() => {
          validityTarget?.setCustomValidity("");
          setErrorMessage(void 0);
          setStatusMessage({
            type: "validating",
            message: customValidity.message
          });
        }, 1e3);
        return () => clearTimeout(timer);
      }
      case "valid": {
        if (previousCustomValidityType === "valid") {
          break;
        }
        validityTarget?.setCustomValidity("");
        setErrorMessage(validityTarget?.validationMessage);
        setStatusMessage({
          type: "valid",
          message: customValidity.message
        });
        break;
      }
      case "invalid": {
        var _customValidity$messa;
        validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : "");
        setErrorMessage(validityTarget?.validationMessage);
        setStatusMessage(void 0);
        break;
      }
    }
  }, [isTouched, customValidity?.type, customValidity?.message, getValidityTarget, previousCustomValidityType]);
  const onBlur = (event) => {
    if (isTouched) {
      return;
    }
    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
      setIsTouched(true);
      onValidate?.();
    }
  };
  const onChange = (...args) => {
    children.props.onChange?.(...args);
    if (isTouched || errorMessage) {
      onValidate?.();
    }
  };
  const onKeyDown = (event) => {
    if (event.key === "Enter") {
      onValidate?.();
    }
  };
  return (
    // Disable reason: Just listening to a bubbled event, not for interaction.
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ _jsxs("div", {
      className: "components-validated-control",
      ref: forwardedRef,
      onBlur,
      onKeyDown: withIgnoreIMEEvents(onKeyDown),
      children: [cloneElement(children, {
        label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
        onChange,
        required
      }), /* @__PURE__ */ _jsxs("div", {
        "aria-live": "polite",
        children: [errorMessage && /* @__PURE__ */ _jsx(ValidityIndicator, {
          type: "invalid",
          message: errorMessage
        }), !errorMessage && statusMessage && /* @__PURE__ */ _jsx(ValidityIndicator, {
          type: statusMessage.type,
          message: statusMessage.message
        })]
      })]
    })
  );
}
var ControlWithError = forwardRef(UnforwardedControlWithError);
export {
  ControlWithError
};
//# sourceMappingURL=control-with-error.js.map