@payfit/unity-components
Version:
50 lines (49 loc) • 1.32 kB
JavaScript
import { useInlineFieldMode as e } from "./hooks/useInlineFieldMode.js";
import { InlineFieldContext as t } from "./InlineField.context.js";
import { useCallback as n, useEffect as r, useId as i, useMemo as a, useRef as o } from "react";
import { jsx as s } from "react/jsx-runtime";
//#region src/components/inline-field/InlineField.tsx
var c = ({ children: c, mode: l, defaultMode: u, onModeChange: d, isLoading: f, shouldModeChange: p }) => {
let m = o(null), h = o(null), g = o(!0), { mode: _, enterEditMode: v, exitEditMode: y } = e({
mode: l,
defaultMode: u,
onModeChange: d,
shouldModeChange: p
}), b = `inline-field-${i()}`, x = `${b}__edit-view`, S = a(() => ({
mode: _,
enterEditMode: v,
exitEditMode: y,
fieldId: b,
isLoading: f,
triggerRef: m,
editViewRef: h,
editViewId: x
}), [
_,
v,
y,
b,
f,
m,
h,
x
]), C = n(() => {
if (h.current) {
let e = h.current.querySelectorAll("input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
e.length > 0 && e[0].focus();
}
}, [h]);
return r(() => {
if (g.current) {
g.current = !1;
return;
}
_ === "edit" ? C() : m.current && m.current.focus();
}, [_, C]), /* @__PURE__ */ s(t.Provider, {
value: S,
children: c
});
};
c.displayName = "InlineField";
//#endregion
export { c as InlineField };