bi/uikit
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update FormModal

Browse Source
This commit is contained in:
Mohamadzadeh 2026-06-21 16:13:51 +03:30
parent a1b7dc4338
commit 5d799ce84f
2 changed files with 244 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

389
dist/form.js vendored
View File

@ -1,8 +1,8 @@
import { jsx as n, jsxs as M } from "react/jsx-runtime"; import { jsx as l, jsxs as R } from "react/jsx-runtime";
import { Input as I, Checkbox as ee, Textarea as re, RadioGroup as te, HStack as ne, Radio as oe, Select as le, Modal as ie, ModalOverlay as ce, ModalContent as ue, ModalHeader as se, ModalCloseButton as ae, ModalBody as de, VStack as fe, SimpleGrid as pe, ModalFooter as be, Button as A, FormControl as ve, FormLabel as me, FormErrorMessage as xe, useDisclosure as Fe } from "@chakra-ui/react"; import { Input as I, Checkbox as ee, Textarea as re, RadioGroup as te, HStack as le, Radio as ne, Select as oe, Modal as ie, ModalOverlay as ce, ModalContent as ue, ModalHeader as se, ModalCloseButton as ae, ModalBody as de, VStack as fe, SimpleGrid as be, ModalFooter as pe, Button as A, FormControl as ve, FormLabel as me, FormErrorMessage as xe, useDisclosure as Fe } from "@chakra-ui/react";
import { useContext as he, useMemo as x, useRef as ge, useEffect as G, createContext as ke, useState as Re, useCallback as B } from "react"; import { useContext as he, useMemo as m, useRef as ge, useEffect as G, createContext as ke, useState as Se, useCallback as E } from "react";
import { Controller as P, useForm as Se, useWatch as Ce } from "react-hook-form"; import { Controller as P, useForm as ye, useWatch as Re } from "react-hook-form";
const Me = {}, C = { const Me = {}, y = {
create: { create: {
titlePrefix: "افزودن", titlePrefix: "افزودن",
submitText: "ثبت" submitText: "ثبت"
@ -12,12 +12,12 @@ const Me = {}, C = {
submitText: "ویرایش" submitText: "ویرایش"
} }
}, H = ke(null); }, H = ke(null);
function ye({ item: e, mode: r }) { function Ce({ item: e, mode: r }) {
return e ? [r, e.rowId, e.entityId, e.id].filter(Boolean).join("-") : r; return e ? [r, e.rowId, e.entityId, e.id].filter(Boolean).join("-") : r;
} }
function F({ required: e, validate: r, rules: t }) { function x({ required: e, validate: r, rules: t }) {
const o = { ...t ?? {} }; const n = { ...t ?? {} };
return e && (o.required = typeof e == "string" ? e : "این فیلد الزامی است."), r && (o.validate = r), o; return e && (n.required = typeof e == "string" ? e : "این فیلد الزامی است."), r && (n.validate = r), n;
} }
function v() { function v() {
const e = he(H); const e = he(H);
@ -26,43 +26,68 @@ function v() {
return e; return e;
} }
function U(e = []) { function U(e = []) {
return e.map((r) => ({ return e.map((r, t) => {
label: r.label ?? r.name, if (typeof r != "object" || r === null) {
value: String(r.value ?? r.id) const o = String(r);
})); return {
key: o,
label: o,
value: o,
disabled: !1
};
}
const n = r.value ?? r.id;
return {
key: String(r.key ?? n ?? t),
label: r.label ?? r.name ?? n,
value: String(n),
disabled: !!r.disabled
};
});
} }
function h({ name: e, label: r, showWhen: t, children: o }) { function Ve({ options: e = [] }) {
return e.map((r, t) => /* @__PURE__ */ l(
"option",
{
value: r.value,
disabled: r.disabled,
children: r.label
},
`${r.key}-${t}`
));
}
function F({ name: e, label: r, showWhen: t, children: n }) {
var s; var s;
const { errors: i, control: u } = v(), c = Ce({ const { errors: o, control: u } = v(), c = Re({
control: u, control: u,
name: t == null ? void 0 : t.name name: t == null ? void 0 : t.name
}); });
return x(() => t ? typeof t == "function" ? t({ return m(() => t ? typeof t == "function" ? t({
value: c value: c
}) : c === t.value : !0, [t, c]) ? /* @__PURE__ */ M(ve, { isInvalid: !!i[e], children: [ }) : c === t.value : !0, [t, c]) ? /* @__PURE__ */ R(ve, { isInvalid: !!o[e], children: [
r && /* @__PURE__ */ n(me, { fontSize: "sm", fontWeight: "bold", children: r }), r && /* @__PURE__ */ l(me, { fontSize: "sm", fontWeight: "bold", children: r }),
o, n,
/* @__PURE__ */ n(xe, { children: (s = i[e]) == null ? void 0 : s.message }) /* @__PURE__ */ l(xe, { children: (s = o[e]) == null ? void 0 : s.message })
] }) : null; ] }) : null;
} }
function Ve({ function Be({
name: e, name: e,
label: r, label: r,
required: t, required: t,
validate: o, validate: n,
rules: i, rules: o,
showWhen: u, showWhen: u,
placeholder: c, placeholder: c,
...l ...i
}) { }) {
const { register: s } = v(); const { register: s } = v();
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
I, I,
{ {
borderRadius: "xl", borderRadius: "xl",
placeholder: c, placeholder: c,
...s(e, F({ required: t, validate: o, rules: i })), ...s(e, x({ required: t, validate: n, rules: o })),
...l ...i
} }
) }); ) });
} }
@ -70,60 +95,20 @@ function Ee({
name: e, name: e,
label: r, label: r,
required: t, required: t,
validate: o, validate: n,
rules: i, rules: o,
showWhen: u, showWhen: u,
placeholder: c, placeholder: c,
...l ...i
}) { }) {
const { register: s } = v(); const { register: s } = v();
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
re, re,
{ {
borderRadius: "xl", borderRadius: "xl",
placeholder: c, placeholder: c,
...s(e, F({ required: t, validate: o, rules: i })), ...s(e, x({ required: t, validate: n, rules: o })),
...l ...i
}
) });
}
function Be({
name: e,
label: r,
required: t,
validate: o,
rules: i,
showWhen: u,
placeholder: c = "انتخاب کنید",
options: l = [],
onChange: s,
isClearable: f = !0,
...p
}) {
const { control: d, setValue: a } = v(), y = U(l);
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
P,
{
name: e,
control: d,
rules: F({ required: t, validate: o, rules: i }),
render: ({ field: k }) => /* @__PURE__ */ n(
le,
{
borderRadius: "xl",
placeholder: c,
value: k.value ?? "",
onChange: (m) => {
const R = m.target.value;
k.onChange(R), s == null || s({
value: R,
setValue: a
});
},
...p,
children: y.map((m) => /* @__PURE__ */ n("option", { value: m.value, children: m.label }, m.value))
}
)
} }
) }); ) });
} }
@ -131,30 +116,37 @@ function Ie({
name: e, name: e,
label: r, label: r,
required: t, required: t,
validate: o, validate: n,
rules: i, rules: o,
showWhen: u, showWhen: u,
options: c = [], placeholder: c = "انتخاب کنید",
onChange: l options: i = [],
onChange: s,
isClearable: d = !0,
...b
}) { }) {
const { control: s, setValue: f } = v(), p = U(c); const { control: f, setValue: a } = v(), M = m(() => U(i), [i]);
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
P, P,
{ {
name: e, name: e,
control: s, control: f,
rules: F({ required: t, validate: o, rules: i }), rules: x({ required: t, validate: n, rules: o }),
render: ({ field: d }) => /* @__PURE__ */ n( render: ({ field: g }) => /* @__PURE__ */ l(
te, oe,
{ {
value: d.value, borderRadius: "xl",
onChange: (a) => { placeholder: d ? c : void 0,
d.onChange(a), l == null || l({ value: g.value ?? "",
value: a, onChange: (C) => {
setValue: f const k = C.target.value;
g.onChange(k), s == null || s({
value: k,
setValue: a
}); });
}, },
children: /* @__PURE__ */ n(ne, { pt: "8px", spacing: 3, children: p.map((a) => /* @__PURE__ */ n(oe, { value: a.value, children: a.label }, a.value)) }) ...b,
children: /* @__PURE__ */ l(Ve, { options: M })
} }
) )
} }
@ -164,28 +156,61 @@ function Pe({
name: e, name: e,
label: r, label: r,
required: t, required: t,
validate: o, validate: n,
rules: i, rules: o,
showWhen: u, showWhen: u,
children: c, options: c = [],
onChange: l onChange: i
}) { }) {
const { control: s, setValue: f } = v(); const { control: s, setValue: d } = v(), b = U(c);
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
P, P,
{ {
name: e, name: e,
control: s, control: s,
rules: F({ required: t, validate: o, rules: i }), rules: x({ required: t, validate: n, rules: o }),
render: ({ field: p }) => /* @__PURE__ */ n( render: ({ field: f }) => /* @__PURE__ */ l(
te,
{
value: f.value,
onChange: (a) => {
f.onChange(a), i == null || i({
value: a,
setValue: d
});
},
children: /* @__PURE__ */ l(le, { pt: "8px", spacing: 3, children: b.map((a) => /* @__PURE__ */ l(ne, { value: a.value, children: a.label }, a.value)) })
}
)
}
) });
}
function $e({
name: e,
label: r,
required: t,
validate: n,
rules: o,
showWhen: u,
children: c,
onChange: i
}) {
const { control: s, setValue: d } = v();
return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
P,
{
name: e,
control: s,
rules: x({ required: t, validate: n, rules: o }),
render: ({ field: b }) => /* @__PURE__ */ l(
ee, ee,
{ {
isChecked: !!p.value, isChecked: !!b.value,
onChange: (d) => { onChange: (f) => {
const a = d.target.checked; const a = f.target.checked;
p.onChange(a), l == null || l({ b.onChange(a), i == null || i({
value: a, value: a,
setValue: f setValue: d
}); });
}, },
children: c ?? r children: c ?? r
@ -198,18 +223,18 @@ function ze({
name: e, name: e,
label: r, label: r,
required: t, required: t,
validate: o, validate: n,
rules: i, rules: o,
showWhen: u, showWhen: u,
...c ...c
}) { }) {
const { register: l } = v(); const { register: i } = v();
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
I, I,
{ {
type: "file", type: "file",
borderRadius: "xl", borderRadius: "xl",
...l(e, F({ required: t, validate: o, rules: i })), ...i(e, x({ required: t, validate: n, rules: o })),
...c ...c
} }
) }); ) });
@ -218,106 +243,106 @@ function De({
name: e, name: e,
label: r, label: r,
required: t, required: t,
validate: o, validate: n,
rules: i, rules: o,
showWhen: u, showWhen: u,
...c ...c
}) { }) {
const { register: l } = v(); const { register: i } = v();
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ l(F, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ l(
I, I,
{ {
type: "date", type: "date",
borderRadius: "xl", borderRadius: "xl",
...l(e, F({ required: t, validate: o, rules: i })), ...i(e, x({ required: t, validate: n, rules: o })),
...c ...c
} }
) }); ) });
} }
const je = { const Ae = {
Input: Ve, Input: Be,
Select: Be, Select: Ie,
Radio: Ie, Radio: Pe,
Textarea: Ee, Textarea: Ee,
Check: Pe, Check: $e,
Filepicker: ze, Filepicker: ze,
Datepicker: De, Datepicker: De,
useForm: v useForm: v
}; };
function Ae({ function Ge({
isOpen: e, isOpen: e,
close: r, close: r,
item: t = null, item: t = null,
entityName: o = "آیتم", entityName: n = "آیتم",
title: i, title: o,
createTitle: u, createTitle: u,
editTitle: c, editTitle: c,
submitText: l, submitText: i,
createSubmitText: s, createSubmitText: s,
editSubmitText: f, editSubmitText: d,
defaultValues: p = Me, defaultValues: b = Me,
getDefaultValues: d, getDefaultValues: f,
resetKey: a, resetKey: a,
onSubmit: y, onSubmit: M,
transformValues: k, transformValues: g,
children: m, children: C,
isLoading: R = !1, isLoading: k = !1,
size: _ = "lg", size: _ = "lg",
columns: Y = { base: 1, md: 2 } columns: Y = { base: 1, md: 2 }
}) { }) {
const b = !!t, g = b ? "edit" : "create", w = x(() => i || (b ? c ?? `${C.edit.titlePrefix} ${o}` : u ?? `${C.create.titlePrefix} ${o}`), [i, c, u, o, b]), J = x(() => l || (b ? f ?? C.edit.submitText : s ?? C.create.submitText), [l, f, s, b]), S = x(() => typeof d == "function" ? d({ const p = !!t, h = p ? "edit" : "create", w = m(() => o || (p ? c ?? `${y.edit.titlePrefix} ${n}` : u ?? `${y.create.titlePrefix} ${n}`), [o, c, u, n, p]), J = m(() => i || (p ? d ?? y.edit.submitText : s ?? y.create.submitText), [i, d, s, p]), S = m(() => typeof f == "function" ? f({
item: t, item: t,
mode: g, mode: h,
isEdit: b isEdit: p
}) : p, [d, p, t, g, b]), V = ge(S); }) : b, [f, b, t, h, p]), V = ge(S);
G(() => { G(() => {
V.current = S; V.current = S;
}, [S]); }, [S]);
const K = x(() => a || ye({ const K = m(() => a || Ce({
item: t, item: t,
mode: g mode: h
}), [a, t, g]), Q = Se({ }), [a, t, h]), Q = ye({
defaultValues: S defaultValues: S
}), { }), {
handleSubmit: X, handleSubmit: X,
reset: E, reset: B,
register: z, register: $,
control: D, control: z,
setValue: L, setValue: D,
watch: T, watch: L,
formState: { isSubmitting: Z, errors: O } formState: { isSubmitting: Z, errors: O }
} = Q; } = Q;
G(() => { G(() => {
e && E(V.current); e && B(V.current);
}, [e, K, E]); }, [e, K, B]);
const $ = () => { const T = () => {
E(V.current), r(); B(V.current), r();
}, q = X(async (j) => { }, q = X(async (j) => {
const W = typeof k == "function" ? k({ const W = typeof g == "function" ? g({
values: j, values: j,
item: t, item: t,
mode: g, mode: h,
isEdit: b isEdit: p
}) : j; }) : j;
await y({ await M({
values: W, values: W,
item: t, item: t,
mode: g, mode: h,
isEdit: b isEdit: p
}); });
}), N = x( }), N = m(
() => ({ () => ({
register: z, register: $,
control: D, control: z,
setValue: L, setValue: D,
watch: T, watch: L,
errors: O errors: O
}), }),
[z, D, L, T, O] [$, z, D, L, O]
); );
return /* @__PURE__ */ M(ie, { isOpen: e, onClose: $, isCentered: !0, size: _, children: [ return /* @__PURE__ */ R(ie, { isOpen: e, onClose: T, isCentered: !0, size: _, children: [
/* @__PURE__ */ n(ce, { backdropFilter: "blur(6px)" }), /* @__PURE__ */ l(ce, { backdropFilter: "blur(6px)" }),
/* @__PURE__ */ M( /* @__PURE__ */ R(
ue, ue,
{ {
as: "form", as: "form",
@ -325,7 +350,7 @@ function Ae({
borderRadius: "2xl", borderRadius: "2xl",
overflow: "visible", overflow: "visible",
children: [ children: [
/* @__PURE__ */ n( /* @__PURE__ */ l(
se, se,
{ {
bgGradient: "linear(to-l, blue.600, facebook.500)", bgGradient: "linear(to-l, blue.600, facebook.500)",
@ -335,17 +360,17 @@ function Ae({
children: w children: w
} }
), ),
/* @__PURE__ */ n(ae, { color: "white" }), /* @__PURE__ */ l(ae, { color: "white" }),
/* @__PURE__ */ n(de, { py: 5, children: /* @__PURE__ */ n(H.Provider, { value: N, children: /* @__PURE__ */ n(fe, { spacing: 4, alignItems: "stretch", children: /* @__PURE__ */ n(pe, { columns: Y, spacing: 4, children: m }) }) }) }), /* @__PURE__ */ l(de, { py: 5, children: /* @__PURE__ */ l(H.Provider, { value: N, children: /* @__PURE__ */ l(fe, { spacing: 4, alignItems: "stretch", children: /* @__PURE__ */ l(be, { columns: Y, spacing: 4, children: C }) }) }) }),
/* @__PURE__ */ M(be, { gap: 2, bg: "gray.50", children: [ /* @__PURE__ */ R(pe, { gap: 2, bg: "gray.50", children: [
/* @__PURE__ */ n(A, { type: "button", variant: "ghost", onClick: $, children: "انصراف" }), /* @__PURE__ */ l(A, { type: "button", variant: "ghost", onClick: T, children: "انصراف" }),
/* @__PURE__ */ n( /* @__PURE__ */ l(
A, A,
{ {
type: "submit", type: "submit",
colorScheme: "blue", colorScheme: "blue",
borderRadius: "xl", borderRadius: "xl",
isLoading: Z || R, isLoading: Z || k,
children: J children: J
} }
) )
@ -355,32 +380,32 @@ function Ae({
) )
] }); ] });
} }
function Ge() { function He() {
const { isOpen: e, onOpen: r, onClose: t } = Fe(), [o, i] = Re(null), u = B(() => { const { isOpen: e, onOpen: r, onClose: t } = Fe(), [n, o] = Se(null), u = E(() => {
i(null), r(); o(null), r();
}, [r]), c = B( }, [r]), c = E(
(f) => { (d) => {
i(f), r(); o(d), r();
}, },
[r] [r]
), l = B(() => { ), i = E(() => {
i(null), t(); o(null), t();
}, [t]), s = !!o; }, [t]), s = !!n;
return x( return m(
() => ({ () => ({
isOpen: e, isOpen: e,
item: o, item: n,
isEdit: s, isEdit: s,
isCreate: !s, isCreate: !s,
openCreate: u, openCreate: u,
openEdit: c, openEdit: c,
close: l close: i
}), }),
[e, o, s, u, c, l] [e, n, s, u, c, i]
); );
} }
export { export {
je as Field, Ae as Field,
Ae as FormModal, Ge as FormModal,
Ge as useFormModal He as useFormModal
}; };

48
src/form/FormModal.jsx
View File

@ -72,10 +72,39 @@ function useFormModalContext() {
} }
function normalizeOptions(options = []) { function normalizeOptions(options = []) {
return options.map((option) => ({ return options.map((option, index) => {
label: option.label ?? option.name, if (typeof option !== "object" || option === null) {
value: String(option.value ?? option.id), const value = String(option);
}));
return {
key: value,
label: value,
value,
disabled: false,
};
}
const value = option.value ?? option.id;
return {
key: String(option.key ?? value ?? index),
label: option.label ?? option.name ?? value,
value: String(value),
disabled: Boolean(option.disabled),
};
});
}
function NativeSelectOptions({ options = [] }) {
return options.map((option, index) => (
<option
key={`${option.key}-${index}`}
value={option.value}
disabled={option.disabled}
>
{option.label}
</option>
));
} }
// ----- field wrapper ----- // ----- field wrapper -----
@ -181,7 +210,8 @@ function SelectField({
...props ...props
}) { }) {
const { control, setValue } = useFormModalContext(); const { control, setValue } = useFormModalContext();
const normalizedOptions = normalizeOptions(options);
const normalizedOptions = useMemo(() => normalizeOptions(options), [options]);
return ( return (
<FieldWrapper name={name} label={label} showWhen={showWhen}> <FieldWrapper name={name} label={label} showWhen={showWhen}>
@ -192,7 +222,7 @@ function SelectField({
render={({ field }) => ( render={({ field }) => (
<Select <Select
borderRadius="xl" borderRadius="xl"
placeholder={placeholder} placeholder={isClearable ? placeholder : undefined}
value={field.value ?? ""} value={field.value ?? ""}
onChange={(event) => { onChange={(event) => {
const value = event.target.value; const value = event.target.value;
@ -206,11 +236,7 @@ function SelectField({
}} }}
{...props} {...props}
> >
{normalizedOptions.map((option) => ( <NativeSelectOptions options={normalizedOptions} />
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</Select> </Select>
)} )}
/> />