@coko/client
Version:
Client side common code for coko apps
83 lines (82 loc) • 2.63 kB
JavaScript
import { debounce as e, noop as t } from "../../toolkit/funcs.js";
import { grid as n, th as r } from "../../toolkit/themeHelper.js";
import "../../toolkit/index.js";
import i from "./Ribbon.js";
import { useState as a } from "react";
import o from "styled-components";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { Form as l } from "antd";
//#region src/ui/common/Form.tsx
var u = o.div`
.ant-form-item-explain-error {
color: ${r("colorError")};
}
`, d = o(i)`
margin: ${n(2)} ${n(4)};
`, f = (e) => {
let { children: t, onBlur: n, validateTrigger: r, ...i } = e, [o, c] = a(!1), u = !r, d = u ? o ? "onChange" : "onBlur" : r;
return /* @__PURE__ */ s("div", {
onBlur: () => {
u && !o && c(!0), n?.();
},
children: /* @__PURE__ */ s(l.Item, {
validateTrigger: d,
...i,
children: t
})
});
}, p = (n) => {
let { autoSave: r = !1, autoSaveDebounceDelay: i = 500, children: a, feedbackComponent: o = d, form: f, onAutoSave: p = null, onValuesChange: m, onFinishFailed: h = t, ribbonMessage: g = null, ribbonPosition: _ = "top", submissionStatus: v = null, scrollErrorIntoView: y = !0, ...b } = n, x = !!v && !!g, [S] = l.useForm(), C = f || S, w = e(() => p?.(C.getFieldsValue()), i), T = (e, t) => {
r && p && w(), m?.(e, t);
}, E = x && /* @__PURE__ */ s(o, {
"data-testid": "feedback-element",
role: "alert",
status: v,
children: g
}), D = (e) => {
let t = document.getElementById(e[0].name.join("_"));
if (!t || (t.matches("div[role=\"radiogroup\"]") && (t = t.querySelector("input[type=\"radio\"]")), !t)) return;
let n = t, r = new IntersectionObserver((e) => {
let [t] = e;
t.isIntersecting && setTimeout(() => {
t.target.focus(), r.unobserve(t.target);
}, 100);
});
r.observe(n), C.scrollToField(e[0].name, { behavior: (e) => {
if (e.length === 0) n.focus();
else {
let t = window.matchMedia("(prefers-reduced-motion)");
r.observe(n);
let i = e.find((e) => e.top > 0);
if (!i) return;
let { el: a, top: o, left: s } = i;
a.scrollTo({
top: o - 50,
left: s,
behavior: t.matches ? "auto" : "smooth"
});
}
} });
};
return /* @__PURE__ */ c(u, { children: [
_ === "top" && E,
/* @__PURE__ */ s(l, {
"data-testid": "form-content",
form: C,
onFinishFailed: (e) => {
if (y) {
let { errorFields: t } = e;
D(t);
}
h?.(e);
},
onValuesChange: T,
...b,
children: a
}),
_ === "bottom" && E
] });
};
p.Item = f, p.List = l.List, p.ErrorList = l.ErrorList, p.useForm = l.useForm, p.Provider = l.Provider;
//#endregion
export { p as default };