remove chakra-react-select
This commit is contained in:
Mohamadzadeh
parent
e8a71242e0
commit
e7316c0e7f
248
dist/form.js
vendored
248
dist/form.js
vendored
@ -1,9 +1,8 @@
|
||||
import { jsx as n, jsxs as y } from "react/jsx-runtime";
|
||||
import { Input as P, Checkbox as ee, Textarea as re, RadioGroup as te, HStack as ne, Radio as oe, Modal as le, ModalOverlay as ie, ModalContent as ce, ModalHeader as ue, ModalCloseButton as se, ModalBody as ae, VStack as de, SimpleGrid as fe, ModalFooter as pe, Button as G, FormControl as be, FormLabel as me, FormErrorMessage as ve, useDisclosure as xe } from "@chakra-ui/react";
|
||||
import { createContext as Fe, useContext as ge, useMemo as x, useRef as he, useEffect as H, useState as Se, useCallback as I } from "react";
|
||||
import { Controller as z, useForm as ke, useWatch as Re } from "react-hook-form";
|
||||
import { Select as Me } from "chakra-react-select";
|
||||
const Ce = {}, C = {
|
||||
import { jsx as n, jsxs as M } 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 { createContext as he, useContext as ge, useMemo as x, useRef as ke, useEffect as G, useState as Re, useCallback as B } from "react";
|
||||
import { Controller as P, useForm as Se, useWatch as Ce } from "react-hook-form";
|
||||
const Me = {}, C = {
|
||||
create: {
|
||||
titlePrefix: "افزودن",
|
||||
submitText: "ثبت"
|
||||
@ -12,7 +11,7 @@ const Ce = {}, C = {
|
||||
titlePrefix: "ویرایش",
|
||||
submitText: "ویرایش"
|
||||
}
|
||||
}, U = Fe(null);
|
||||
}, H = he(null);
|
||||
function ye({ item: e, mode: r }) {
|
||||
return e ? [r, e.rowId, e.entityId, e.id].filter(Boolean).join("-") : r;
|
||||
}
|
||||
@ -20,30 +19,30 @@ function F({ required: e, validate: r, rules: t }) {
|
||||
const o = { ...t ?? {} };
|
||||
return e && (o.required = typeof e == "string" ? e : "این فیلد الزامی است."), r && (o.validate = r), o;
|
||||
}
|
||||
function m() {
|
||||
const e = ge(U);
|
||||
function v() {
|
||||
const e = ge(H);
|
||||
if (!e)
|
||||
throw new Error("Field باید داخل FormModal استفاده شود.");
|
||||
return e;
|
||||
}
|
||||
function _(e = []) {
|
||||
function U(e = []) {
|
||||
return e.map((r) => ({
|
||||
label: r.label ?? r.name,
|
||||
value: String(r.value ?? r.id)
|
||||
}));
|
||||
}
|
||||
function g({ name: e, label: r, showWhen: t, children: o }) {
|
||||
function h({ name: e, label: r, showWhen: t, children: o }) {
|
||||
var s;
|
||||
const { errors: i, control: u } = m(), c = Re({
|
||||
const { errors: i, control: u } = v(), c = Ce({
|
||||
control: u,
|
||||
name: t == null ? void 0 : t.name
|
||||
});
|
||||
return x(() => t ? typeof t == "function" ? t({
|
||||
value: c
|
||||
}) : c === t.value : !0, [t, c]) ? /* @__PURE__ */ y(be, { isInvalid: !!i[e], children: [
|
||||
}) : c === t.value : !0, [t, c]) ? /* @__PURE__ */ M(ve, { isInvalid: !!i[e], children: [
|
||||
r && /* @__PURE__ */ n(me, { fontSize: "sm", fontWeight: "bold", children: r }),
|
||||
o,
|
||||
/* @__PURE__ */ n(ve, { children: (s = i[e]) == null ? void 0 : s.message })
|
||||
/* @__PURE__ */ n(xe, { children: (s = i[e]) == null ? void 0 : s.message })
|
||||
] }) : null;
|
||||
}
|
||||
function Ve({
|
||||
@ -56,9 +55,9 @@ function Ve({
|
||||
placeholder: c,
|
||||
...l
|
||||
}) {
|
||||
const { register: s } = m();
|
||||
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
P,
|
||||
const { register: s } = v();
|
||||
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
I,
|
||||
{
|
||||
borderRadius: "xl",
|
||||
placeholder: c,
|
||||
@ -77,8 +76,8 @@ function Ee({
|
||||
placeholder: c,
|
||||
...l
|
||||
}) {
|
||||
const { register: s } = m();
|
||||
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
const { register: s } = v();
|
||||
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
re,
|
||||
{
|
||||
borderRadius: "xl",
|
||||
@ -98,38 +97,33 @@ function Be({
|
||||
placeholder: c = "انتخاب کنید",
|
||||
options: l = [],
|
||||
onChange: s,
|
||||
isClearable: d = !0,
|
||||
isClearable: f = !0,
|
||||
...p
|
||||
}) {
|
||||
const { control: f, setValue: a } = m(), k = _(l);
|
||||
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
z,
|
||||
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: f,
|
||||
control: d,
|
||||
rules: F({ required: t, validate: o, rules: i }),
|
||||
render: ({ field: S }) => {
|
||||
const V = k.find(
|
||||
(v) => String(v.value) === String(S.value)
|
||||
) ?? null;
|
||||
return /* @__PURE__ */ n(
|
||||
Me,
|
||||
{
|
||||
...p,
|
||||
value: V,
|
||||
options: k,
|
||||
placeholder: c,
|
||||
isClearable: d,
|
||||
onChange: (v) => {
|
||||
const R = (v == null ? void 0 : v.value) ?? "";
|
||||
S.onChange(R), s == null || s({
|
||||
value: R,
|
||||
setValue: a
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
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))
|
||||
}
|
||||
)
|
||||
}
|
||||
) });
|
||||
}
|
||||
@ -143,21 +137,21 @@ function Ie({
|
||||
options: c = [],
|
||||
onChange: l
|
||||
}) {
|
||||
const { control: s, setValue: d } = m(), p = _(c);
|
||||
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
z,
|
||||
const { control: s, setValue: f } = v(), p = U(c);
|
||||
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
P,
|
||||
{
|
||||
name: e,
|
||||
control: s,
|
||||
rules: F({ required: t, validate: o, rules: i }),
|
||||
render: ({ field: f }) => /* @__PURE__ */ n(
|
||||
render: ({ field: d }) => /* @__PURE__ */ n(
|
||||
te,
|
||||
{
|
||||
value: f.value,
|
||||
value: d.value,
|
||||
onChange: (a) => {
|
||||
f.onChange(a), l == null || l({
|
||||
d.onChange(a), l == null || l({
|
||||
value: a,
|
||||
setValue: d
|
||||
setValue: f
|
||||
});
|
||||
},
|
||||
children: /* @__PURE__ */ n(ne, { pt: "8px", spacing: 3, children: p.map((a) => /* @__PURE__ */ n(oe, { value: a.value, children: a.label }, a.value)) })
|
||||
@ -176,9 +170,9 @@ function Pe({
|
||||
children: c,
|
||||
onChange: l
|
||||
}) {
|
||||
const { control: s, setValue: d } = m();
|
||||
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
z,
|
||||
const { control: s, setValue: f } = v();
|
||||
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
P,
|
||||
{
|
||||
name: e,
|
||||
control: s,
|
||||
@ -187,11 +181,11 @@ function Pe({
|
||||
ee,
|
||||
{
|
||||
isChecked: !!p.value,
|
||||
onChange: (f) => {
|
||||
const a = f.target.checked;
|
||||
onChange: (d) => {
|
||||
const a = d.target.checked;
|
||||
p.onChange(a), l == null || l({
|
||||
value: a,
|
||||
setValue: d
|
||||
setValue: f
|
||||
});
|
||||
},
|
||||
children: c ?? r
|
||||
@ -209,9 +203,9 @@ function ze({
|
||||
showWhen: u,
|
||||
...c
|
||||
}) {
|
||||
const { register: l } = m();
|
||||
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
P,
|
||||
const { register: l } = v();
|
||||
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
I,
|
||||
{
|
||||
type: "file",
|
||||
borderRadius: "xl",
|
||||
@ -229,9 +223,9 @@ function De({
|
||||
showWhen: u,
|
||||
...c
|
||||
}) {
|
||||
const { register: l } = m();
|
||||
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
P,
|
||||
const { register: l } = v();
|
||||
return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
|
||||
I,
|
||||
{
|
||||
type: "date",
|
||||
borderRadius: "xl",
|
||||
@ -240,7 +234,7 @@ function De({
|
||||
}
|
||||
) });
|
||||
}
|
||||
const Ae = {
|
||||
const je = {
|
||||
Input: Ve,
|
||||
Select: Be,
|
||||
Radio: Ie,
|
||||
@ -248,9 +242,9 @@ const Ae = {
|
||||
Check: Pe,
|
||||
Filepicker: ze,
|
||||
Datepicker: De,
|
||||
useForm: m
|
||||
useForm: v
|
||||
};
|
||||
function Ge({
|
||||
function Ae({
|
||||
isOpen: e,
|
||||
close: r,
|
||||
item: t = null,
|
||||
@ -260,71 +254,71 @@ function Ge({
|
||||
editTitle: c,
|
||||
submitText: l,
|
||||
createSubmitText: s,
|
||||
editSubmitText: d,
|
||||
defaultValues: p = Ce,
|
||||
getDefaultValues: f,
|
||||
editSubmitText: f,
|
||||
defaultValues: p = Me,
|
||||
getDefaultValues: d,
|
||||
resetKey: a,
|
||||
onSubmit: k,
|
||||
transformValues: S,
|
||||
children: V,
|
||||
isLoading: v = !1,
|
||||
size: R = "lg",
|
||||
onSubmit: y,
|
||||
transformValues: k,
|
||||
children: m,
|
||||
isLoading: R = !1,
|
||||
size: _ = "lg",
|
||||
columns: Y = { base: 1, md: 2 }
|
||||
}) {
|
||||
const b = !!t, h = 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 ? d ?? C.edit.submitText : s ?? C.create.submitText), [l, d, s, b]), M = x(() => typeof f == "function" ? f({
|
||||
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({
|
||||
item: t,
|
||||
mode: h,
|
||||
mode: g,
|
||||
isEdit: b
|
||||
}) : p, [f, p, t, h, b]), E = he(M);
|
||||
H(() => {
|
||||
E.current = M;
|
||||
}, [M]);
|
||||
}) : p, [d, p, t, g, b]), V = ke(S);
|
||||
G(() => {
|
||||
V.current = S;
|
||||
}, [S]);
|
||||
const K = x(() => a || ye({
|
||||
item: t,
|
||||
mode: h
|
||||
}), [a, t, h]), Q = ke({
|
||||
defaultValues: M
|
||||
mode: g
|
||||
}), [a, t, g]), Q = Se({
|
||||
defaultValues: S
|
||||
}), {
|
||||
handleSubmit: X,
|
||||
reset: B,
|
||||
register: D,
|
||||
control: L,
|
||||
setValue: O,
|
||||
reset: E,
|
||||
register: z,
|
||||
control: D,
|
||||
setValue: L,
|
||||
watch: T,
|
||||
formState: { isSubmitting: Z, errors: $ }
|
||||
formState: { isSubmitting: Z, errors: O }
|
||||
} = Q;
|
||||
H(() => {
|
||||
e && B(E.current);
|
||||
}, [e, K, B]);
|
||||
const j = () => {
|
||||
B(E.current), r();
|
||||
}, q = X(async (A) => {
|
||||
const W = typeof S == "function" ? S({
|
||||
values: A,
|
||||
G(() => {
|
||||
e && E(V.current);
|
||||
}, [e, K, E]);
|
||||
const $ = () => {
|
||||
E(V.current), r();
|
||||
}, q = X(async (j) => {
|
||||
const W = typeof k == "function" ? k({
|
||||
values: j,
|
||||
item: t,
|
||||
mode: h,
|
||||
mode: g,
|
||||
isEdit: b
|
||||
}) : A;
|
||||
await k({
|
||||
}) : j;
|
||||
await y({
|
||||
values: W,
|
||||
item: t,
|
||||
mode: h,
|
||||
mode: g,
|
||||
isEdit: b
|
||||
});
|
||||
}), N = x(
|
||||
() => ({
|
||||
register: D,
|
||||
control: L,
|
||||
setValue: O,
|
||||
register: z,
|
||||
control: D,
|
||||
setValue: L,
|
||||
watch: T,
|
||||
errors: $
|
||||
errors: O
|
||||
}),
|
||||
[D, L, O, T, $]
|
||||
[z, D, L, T, O]
|
||||
);
|
||||
return /* @__PURE__ */ y(le, { isOpen: e, onClose: j, isCentered: !0, size: R, children: [
|
||||
/* @__PURE__ */ n(ie, { backdropFilter: "blur(6px)" }),
|
||||
/* @__PURE__ */ y(
|
||||
ce,
|
||||
return /* @__PURE__ */ M(ie, { isOpen: e, onClose: $, isCentered: !0, size: _, children: [
|
||||
/* @__PURE__ */ n(ce, { backdropFilter: "blur(6px)" }),
|
||||
/* @__PURE__ */ M(
|
||||
ue,
|
||||
{
|
||||
as: "form",
|
||||
onSubmit: q,
|
||||
@ -332,7 +326,7 @@ function Ge({
|
||||
overflow: "visible",
|
||||
children: [
|
||||
/* @__PURE__ */ n(
|
||||
ue,
|
||||
se,
|
||||
{
|
||||
bgGradient: "linear(to-l, blue.600, facebook.500)",
|
||||
color: "white",
|
||||
@ -341,17 +335,17 @@ function Ge({
|
||||
children: w
|
||||
}
|
||||
),
|
||||
/* @__PURE__ */ n(se, { color: "white" }),
|
||||
/* @__PURE__ */ n(ae, { py: 5, children: /* @__PURE__ */ n(U.Provider, { value: N, children: /* @__PURE__ */ n(de, { spacing: 4, alignItems: "stretch", children: /* @__PURE__ */ n(fe, { columns: Y, spacing: 4, children: V }) }) }) }),
|
||||
/* @__PURE__ */ y(pe, { gap: 2, bg: "gray.50", children: [
|
||||
/* @__PURE__ */ n(G, { type: "button", variant: "ghost", onClick: j, children: "انصراف" }),
|
||||
/* @__PURE__ */ n(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__ */ M(be, { gap: 2, bg: "gray.50", children: [
|
||||
/* @__PURE__ */ n(A, { type: "button", variant: "ghost", onClick: $, children: "انصراف" }),
|
||||
/* @__PURE__ */ n(
|
||||
G,
|
||||
A,
|
||||
{
|
||||
type: "submit",
|
||||
colorScheme: "blue",
|
||||
borderRadius: "xl",
|
||||
isLoading: Z || v,
|
||||
isLoading: Z || R,
|
||||
children: J
|
||||
}
|
||||
)
|
||||
@ -361,15 +355,15 @@ function Ge({
|
||||
)
|
||||
] });
|
||||
}
|
||||
function He() {
|
||||
const { isOpen: e, onOpen: r, onClose: t } = xe(), [o, i] = Se(null), u = I(() => {
|
||||
function Ge() {
|
||||
const { isOpen: e, onOpen: r, onClose: t } = Fe(), [o, i] = Re(null), u = B(() => {
|
||||
i(null), r();
|
||||
}, [r]), c = I(
|
||||
(d) => {
|
||||
i(d), r();
|
||||
}, [r]), c = B(
|
||||
(f) => {
|
||||
i(f), r();
|
||||
},
|
||||
[r]
|
||||
), l = I(() => {
|
||||
), l = B(() => {
|
||||
i(null), t();
|
||||
}, [t]), s = !!o;
|
||||
return x(
|
||||
@ -386,7 +380,7 @@ function He() {
|
||||
);
|
||||
}
|
||||
export {
|
||||
Ae as Field,
|
||||
Ge as FormModal,
|
||||
He as useFormModal
|
||||
je as Field,
|
||||
Ae as FormModal,
|
||||
Ge as useFormModal
|
||||
};
|
||||
|
||||
@ -31,8 +31,7 @@
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0",
|
||||
"react-icons": "^5.0.0",
|
||||
"react-hook-form": "^7.0.0",
|
||||
"chakra-react-select": "^5.0.0"
|
||||
"react-hook-form": "^7.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@chakra-ui/react": {
|
||||
@ -70,9 +69,6 @@
|
||||
},
|
||||
"react-hook-form": {
|
||||
"optional": true
|
||||
},
|
||||
"chakra-react-select": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -89,8 +85,7 @@
|
||||
"react-dom": "^18.0.0",
|
||||
"react-icons": "^5.0.0",
|
||||
"vite": "5.4.19",
|
||||
"react-hook-form": "^7.0.0",
|
||||
"chakra-react-select": "^5.0.0"
|
||||
"react-hook-form": "^7.0.0"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@ -22,7 +22,6 @@ import {
|
||||
} from "@chakra-ui/react";
|
||||
import { createContext, useContext, useEffect, useMemo, useRef } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { Select as ChakraReactSelect } from "chakra-react-select";
|
||||
|
||||
const EMPTY_DEFAULT_VALUES = {};
|
||||
|
||||
@ -190,32 +189,30 @@ function SelectField({
|
||||
name={name}
|
||||
control={control}
|
||||
rules={getRules({ required, validate, rules })}
|
||||
render={({ field }) => {
|
||||
const selectedOption =
|
||||
normalizedOptions.find(
|
||||
(option) => String(option.value) === String(field.value),
|
||||
) ?? null;
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
borderRadius="xl"
|
||||
placeholder={placeholder}
|
||||
value={field.value ?? ""}
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
|
||||
return (
|
||||
<ChakraReactSelect
|
||||
{...props}
|
||||
value={selectedOption}
|
||||
options={normalizedOptions}
|
||||
placeholder={placeholder}
|
||||
isClearable={isClearable}
|
||||
onChange={(selected) => {
|
||||
const value = selected?.value ?? "";
|
||||
field.onChange(value);
|
||||
|
||||
field.onChange(value);
|
||||
|
||||
onChange?.({
|
||||
value,
|
||||
setValue,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
onChange?.({
|
||||
value,
|
||||
setValue,
|
||||
});
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{normalizedOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FieldWrapper>
|
||||
);
|
||||
|
||||
@ -21,7 +21,6 @@ const externalPackages = [
|
||||
"react-icons",
|
||||
|
||||
"react-hook-form",
|
||||
"chakra-react-select",
|
||||
];
|
||||
|
||||
export default defineConfig({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user