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

remove chakra-react-select

Browse Source
This commit is contained in:
Mohamadzadeh 2026-06-17 14:20:19 +03:30
parent e8a71242e0
commit e7316c0e7f
4 changed files with 145 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
dist/form.js vendored
View File

@ -1,9 +1,8 @@
import { jsx as n, jsxs as y } from "react/jsx-runtime"; import { jsx as n, jsxs as M } 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 { 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 Fe, useContext as ge, useMemo as x, useRef as he, useEffect as H, useState as Se, useCallback as I } from "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 z, useForm as ke, useWatch as Re } from "react-hook-form"; import { Controller as P, useForm as Se, useWatch as Ce } from "react-hook-form";
import { Select as Me } from "chakra-react-select"; const Me = {}, C = {
const Ce = {}, C = {
create: { create: {
titlePrefix: "افزودن", titlePrefix: "افزودن",
submitText: "ثبت" submitText: "ثبت"
@ -12,7 +11,7 @@ const Ce = {}, C = {
titlePrefix: "ویرایش", titlePrefix: "ویرایش",
submitText: "ویرایش" submitText: "ویرایش"
} }
}, U = Fe(null); }, H = he(null);
function ye({ item: e, mode: r }) { function ye({ 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;
} }
@ -20,30 +19,30 @@ function F({ required: e, validate: r, rules: t }) {
const o = { ...t ?? {} }; const o = { ...t ?? {} };
return e && (o.required = typeof e == "string" ? e : "این فیلد الزامی است."), r && (o.validate = r), o; return e && (o.required = typeof e == "string" ? e : "این فیلد الزامی است."), r && (o.validate = r), o;
} }
function m() { function v() {
const e = ge(U); const e = ge(H);
if (!e) if (!e)
throw new Error("Field باید داخل FormModal استفاده شود."); throw new Error("Field باید داخل FormModal استفاده شود.");
return e; return e;
} }
function _(e = []) { function U(e = []) {
return e.map((r) => ({ return e.map((r) => ({
label: r.label ?? r.name, label: r.label ?? r.name,
value: String(r.value ?? r.id) 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; var s;
const { errors: i, control: u } = m(), c = Re({ const { errors: i, control: u } = v(), c = Ce({
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 x(() => t ? typeof t == "function" ? t({
value: c 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 }), r && /* @__PURE__ */ n(me, { fontSize: "sm", fontWeight: "bold", children: r }),
o, 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; ] }) : null;
} }
function Ve({ function Ve({
@ -56,9 +55,9 @@ function Ve({
placeholder: c, placeholder: c,
...l ...l
}) { }) {
const { register: s } = m(); const { register: s } = v();
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
P, I,
{ {
borderRadius: "xl", borderRadius: "xl",
placeholder: c, placeholder: c,
@ -77,8 +76,8 @@ function Ee({
placeholder: c, placeholder: c,
...l ...l
}) { }) {
const { register: s } = m(); const { register: s } = v();
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
re, re,
{ {
borderRadius: "xl", borderRadius: "xl",
@ -98,38 +97,33 @@ function Be({
placeholder: c = "انتخاب کنید", placeholder: c = "انتخاب کنید",
options: l = [], options: l = [],
onChange: s, onChange: s,
isClearable: d = !0, isClearable: f = !0,
...p ...p
}) { }) {
const { control: f, setValue: a } = m(), k = _(l); const { control: d, setValue: a } = v(), y = U(l);
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
z, P,
{ {
name: e, name: e,
control: f, control: d,
rules: F({ required: t, validate: o, rules: i }), rules: F({ required: t, validate: o, rules: i }),
render: ({ field: S }) => { render: ({ field: k }) => /* @__PURE__ */ n(
const V = k.find( le,
(v) => String(v.value) === String(S.value)
) ?? null;
return /* @__PURE__ */ n(
Me,
{ {
...p, borderRadius: "xl",
value: V,
options: k,
placeholder: c, placeholder: c,
isClearable: d, value: k.value ?? "",
onChange: (v) => { onChange: (m) => {
const R = (v == null ? void 0 : v.value) ?? ""; const R = m.target.value;
S.onChange(R), s == null || s({ k.onChange(R), s == null || s({
value: R, value: R,
setValue: a 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 = [], options: c = [],
onChange: l onChange: l
}) { }) {
const { control: s, setValue: d } = m(), p = _(c); const { control: s, setValue: f } = v(), p = U(c);
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
z, P,
{ {
name: e, name: e,
control: s, control: s,
rules: F({ required: t, validate: o, rules: i }), rules: F({ required: t, validate: o, rules: i }),
render: ({ field: f }) => /* @__PURE__ */ n( render: ({ field: d }) => /* @__PURE__ */ n(
te, te,
{ {
value: f.value, value: d.value,
onChange: (a) => { onChange: (a) => {
f.onChange(a), l == null || l({ d.onChange(a), l == null || l({
value: a, 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)) }) 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, children: c,
onChange: l onChange: l
}) { }) {
const { control: s, setValue: d } = m(); const { control: s, setValue: f } = v();
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
z, P,
{ {
name: e, name: e,
control: s, control: s,
@ -187,11 +181,11 @@ function Pe({
ee, ee,
{ {
isChecked: !!p.value, isChecked: !!p.value,
onChange: (f) => { onChange: (d) => {
const a = f.target.checked; const a = d.target.checked;
p.onChange(a), l == null || l({ p.onChange(a), l == null || l({
value: a, value: a,
setValue: d setValue: f
}); });
}, },
children: c ?? r children: c ?? r
@ -209,9 +203,9 @@ function ze({
showWhen: u, showWhen: u,
...c ...c
}) { }) {
const { register: l } = m(); const { register: l } = v();
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
P, I,
{ {
type: "file", type: "file",
borderRadius: "xl", borderRadius: "xl",
@ -229,9 +223,9 @@ function De({
showWhen: u, showWhen: u,
...c ...c
}) { }) {
const { register: l } = m(); const { register: l } = v();
return /* @__PURE__ */ n(g, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n(
P, I,
{ {
type: "date", type: "date",
borderRadius: "xl", borderRadius: "xl",
@ -240,7 +234,7 @@ function De({
} }
) }); ) });
} }
const Ae = { const je = {
Input: Ve, Input: Ve,
Select: Be, Select: Be,
Radio: Ie, Radio: Ie,
@ -248,9 +242,9 @@ const Ae = {
Check: Pe, Check: Pe,
Filepicker: ze, Filepicker: ze,
Datepicker: De, Datepicker: De,
useForm: m useForm: v
}; };
function Ge({ function Ae({
isOpen: e, isOpen: e,
close: r, close: r,
item: t = null, item: t = null,
@ -260,71 +254,71 @@ function Ge({
editTitle: c, editTitle: c,
submitText: l, submitText: l,
createSubmitText: s, createSubmitText: s,
editSubmitText: d, editSubmitText: f,
defaultValues: p = Ce, defaultValues: p = Me,
getDefaultValues: f, getDefaultValues: d,
resetKey: a, resetKey: a,
onSubmit: k, onSubmit: y,
transformValues: S, transformValues: k,
children: V, children: m,
isLoading: v = !1, isLoading: R = !1,
size: R = "lg", size: _ = "lg",
columns: Y = { base: 1, md: 2 } 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, item: t,
mode: h, mode: g,
isEdit: b isEdit: b
}) : p, [f, p, t, h, b]), E = he(M); }) : p, [d, p, t, g, b]), V = ke(S);
H(() => { G(() => {
E.current = M; V.current = S;
}, [M]); }, [S]);
const K = x(() => a || ye({ const K = x(() => a || ye({
item: t, item: t,
mode: h mode: g
}), [a, t, h]), Q = ke({ }), [a, t, g]), Q = Se({
defaultValues: M defaultValues: S
}), { }), {
handleSubmit: X, handleSubmit: X,
reset: B, reset: E,
register: D, register: z,
control: L, control: D,
setValue: O, setValue: L,
watch: T, watch: T,
formState: { isSubmitting: Z, errors: $ } formState: { isSubmitting: Z, errors: O }
} = Q; } = Q;
H(() => { G(() => {
e && B(E.current); e && E(V.current);
}, [e, K, B]); }, [e, K, E]);
const j = () => { const $ = () => {
B(E.current), r(); E(V.current), r();
}, q = X(async (A) => { }, q = X(async (j) => {
const W = typeof S == "function" ? S({ const W = typeof k == "function" ? k({
values: A, values: j,
item: t, item: t,
mode: h, mode: g,
isEdit: b isEdit: b
}) : A; }) : j;
await k({ await y({
values: W, values: W,
item: t, item: t,
mode: h, mode: g,
isEdit: b isEdit: b
}); });
}), N = x( }), N = x(
() => ({ () => ({
register: D, register: z,
control: L, control: D,
setValue: O, setValue: L,
watch: T, 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: [ return /* @__PURE__ */ M(ie, { isOpen: e, onClose: $, isCentered: !0, size: _, children: [
/* @__PURE__ */ n(ie, { backdropFilter: "blur(6px)" }), /* @__PURE__ */ n(ce, { backdropFilter: "blur(6px)" }),
/* @__PURE__ */ y( /* @__PURE__ */ M(
ce, ue,
{ {
as: "form", as: "form",
onSubmit: q, onSubmit: q,
@ -332,7 +326,7 @@ function Ge({
overflow: "visible", overflow: "visible",
children: [ children: [
/* @__PURE__ */ n( /* @__PURE__ */ n(
ue, se,
{ {
bgGradient: "linear(to-l, blue.600, facebook.500)", bgGradient: "linear(to-l, blue.600, facebook.500)",
color: "white", color: "white",
@ -341,17 +335,17 @@ function Ge({
children: w children: w
} }
), ),
/* @__PURE__ */ n(se, { color: "white" }), /* @__PURE__ */ n(ae, { 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__ */ 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__ */ y(pe, { gap: 2, bg: "gray.50", children: [ /* @__PURE__ */ M(be, { gap: 2, bg: "gray.50", children: [
/* @__PURE__ */ n(G, { type: "button", variant: "ghost", onClick: j, children: "انصراف" }), /* @__PURE__ */ n(A, { type: "button", variant: "ghost", onClick: $, children: "انصراف" }),
/* @__PURE__ */ n( /* @__PURE__ */ n(
G, A,
{ {
type: "submit", type: "submit",
colorScheme: "blue", colorScheme: "blue",
borderRadius: "xl", borderRadius: "xl",
isLoading: Z || v, isLoading: Z || R,
children: J children: J
} }
) )
@ -361,15 +355,15 @@ function Ge({
) )
] }); ] });
} }
function He() { function Ge() {
const { isOpen: e, onOpen: r, onClose: t } = xe(), [o, i] = Se(null), u = I(() => { const { isOpen: e, onOpen: r, onClose: t } = Fe(), [o, i] = Re(null), u = B(() => {
i(null), r(); i(null), r();
}, [r]), c = I( }, [r]), c = B(
(d) => { (f) => {
i(d), r(); i(f), r();
}, },
[r] [r]
), l = I(() => { ), l = B(() => {
i(null), t(); i(null), t();
}, [t]), s = !!o; }, [t]), s = !!o;
return x( return x(
@ -386,7 +380,7 @@ function He() {
); );
} }
export { export {
Ae as Field, je as Field,
Ge as FormModal, Ae as FormModal,
He as useFormModal Ge as useFormModal
}; };

9
package.json
View File

@ -31,8 +31,7 @@
"react": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0",
"react-icons": "^5.0.0", "react-icons": "^5.0.0",
"react-hook-form": "^7.0.0", "react-hook-form": "^7.0.0"
"chakra-react-select": "^5.0.0"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"@chakra-ui/react": { "@chakra-ui/react": {
@ -70,9 +69,6 @@
}, },
"react-hook-form": { "react-hook-form": {
"optional": true "optional": true
},
"chakra-react-select": {
"optional": true
} }
}, },
"devDependencies": { "devDependencies": {
@ -89,8 +85,7 @@
"react-dom": "^18.0.0", "react-dom": "^18.0.0",
"react-icons": "^5.0.0", "react-icons": "^5.0.0",
"vite": "5.4.19", "vite": "5.4.19",
"react-hook-form": "^7.0.0", "react-hook-form": "^7.0.0"
"chakra-react-select": "^5.0.0"
}, },
"dependencies": {} "dependencies": {}
} }

33
src/form/FormModal.jsx
View File

@ -22,7 +22,6 @@ import {
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { createContext, useContext, useEffect, useMemo, useRef } from "react"; import { createContext, useContext, useEffect, useMemo, useRef } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import { Select as ChakraReactSelect } from "chakra-react-select";
const EMPTY_DEFAULT_VALUES = {}; const EMPTY_DEFAULT_VALUES = {};
@ -190,21 +189,13 @@ function SelectField({
name={name} name={name}
control={control} control={control}
rules={getRules({ required, validate, rules })} rules={getRules({ required, validate, rules })}
render={({ field }) => { render={({ field }) => (
const selectedOption = <Select
normalizedOptions.find( borderRadius="xl"
(option) => String(option.value) === String(field.value),
) ?? null;
return (
<ChakraReactSelect
{...props}
value={selectedOption}
options={normalizedOptions}
placeholder={placeholder} placeholder={placeholder}
isClearable={isClearable} value={field.value ?? ""}
onChange={(selected) => { onChange={(event) => {
const value = selected?.value ?? ""; const value = event.target.value;
field.onChange(value); field.onChange(value);
@ -213,9 +204,15 @@ function SelectField({
setValue, setValue,
}); });
}} }}
/> {...props}
); >
}} {normalizedOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</Select>
)}
/> />
</FieldWrapper> </FieldWrapper>
); );

1
vite.config.js
View File

@ -21,7 +21,6 @@ const externalPackages = [
"react-icons", "react-icons",
"react-hook-form", "react-hook-form",
"chakra-react-select",
]; ];
export default defineConfig({ export default defineConfig({