@payfit/unity-components
Version:
54 lines (53 loc) • 1.4 kB
JavaScript
import { useFormContext as e } from "../../../hooks/tanstack-form-context.js";
import { useInlineField as t } from "../InlineField.context.js";
import { useEffect as n, useRef as r, useState as i } from "react";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { useSelector as s } from "@tanstack/react-store";
//#region src/components/inline-field/parts/InlineFieldReadView.tsx
var c = 5e3;
function l({ children: l, successMessage: u }) {
let d = t(), [f, p] = i(""), { isSubmitting: m, submissionAttempts: h, isSubmitSuccessful: g } = s(e().store, (e) => ({
isSubmitting: e.isSubmitting,
isSubmitSuccessful: e.isSubmitSuccessful,
submissionAttempts: e.submissionAttempts
})), _ = r(m), v = d?.mode === "read";
return n(() => {
_.current && !m && g && u && p(u);
}, [
m,
g,
u,
d
]), n(() => {
if (u && !d?.isLoading && v && g) {
p(u);
let e = setTimeout(() => {
p("");
}, c);
return () => {
clearTimeout(e);
};
}
}, [
u,
d,
v,
g
]), n(() => {
m && !_.current && p("");
}, [m]), /* @__PURE__ */ o("div", {
hidden: !v,
"aria-hidden": !v,
...!v && { inert: "" },
children: [l, /* @__PURE__ */ a("div", {
role: "status",
"aria-live": "polite",
"aria-atomic": "true",
className: "uy:sr-only",
children: f
})]
});
}
l.displayName = "InlineFieldReadView";
//#endregion
export { l as InlineFieldReadView };