@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 { __ } from "@wordpress/i18n";
import { cloneElement, forwardRef, useEffect, useState } from "@wordpress/element";
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;
}
var VALIDITY_VISIBLE_ATTRIBUTE = "data-validity-visible";
function UnforwardedControlWithError({
  required,
  markWhenOptional,
  customValidity,
  getValidityTarget,
  children
}, forwardedRef) {
  const [errorMessage, setErrorMessage] = useState();
  const [statusMessage, setStatusMessage] = useState();
  const [showMessage, setShowMessage] = useState(false);
  const [isTouched, setIsTouched] = useState(false);
  useEffect(() => {
    const validityTarget = getValidityTarget();
    const handler = () => {
      setShowMessage(true);
      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, "");
    };
    validityTarget?.addEventListener("invalid", handler);
    return () => validityTarget?.removeEventListener("invalid", handler);
  }, [getValidityTarget]);
  useEffect(() => {
    const validityTarget = getValidityTarget();
    if (!customValidity?.type) {
      validityTarget?.setCustomValidity("");
      setErrorMessage(validityTarget?.validationMessage);
      setStatusMessage(void 0);
      return;
    }
    switch (customValidity.type) {
      case "validating": {
        validityTarget?.setCustomValidity("");
        setErrorMessage(void 0);
        setStatusMessage({
          type: "validating",
          message: customValidity.message
        });
        break;
      }
      case "valid": {
        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;
      }
    }
  }, [customValidity, getValidityTarget]);
  useEffect(() => {
    if (!isTouched || showMessage) {
      return;
    }
    if (customValidity?.type === "validating") {
      const timer = setTimeout(() => {
        setShowMessage(true);
      }, 1e3);
      return () => clearTimeout(timer);
    }
    setShowMessage(true);
  }, [isTouched, customValidity?.type, showMessage]);
  const onBlur = (event) => {
    if (isTouched) {
      return;
    }
    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
      setIsTouched(true);
      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, "");
    }
  };
  const message = () => {
    if (errorMessage) {
      return /* @__PURE__ */ _jsx(ValidityIndicator, {
        type: "invalid",
        message: errorMessage
      });
    }
    if (statusMessage?.type) {
      return /* @__PURE__ */ _jsx(ValidityIndicator, {
        type: statusMessage.type,
        message: statusMessage.message
      });
    }
    return null;
  };
  return /* @__PURE__ */ _jsxs("div", {
    className: "components-validated-control",
    ref: forwardedRef,
    onBlur,
    children: [cloneElement(children, {
      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
      required
    }), /* @__PURE__ */ _jsx("div", {
      "aria-live": "polite",
      children: showMessage && message()
    })]
  });
}
var ControlWithError = forwardRef(UnforwardedControlWithError);
export {
  ControlWithError
};
//# sourceMappingURL=control-with-error.js.map