UNPKG

@paratco/rhf-mui-form

Version:

MUI + React Hook Form Reusable Form Components

657 lines (656 loc) 21.7 kB
import { Controller as e, useFormContext as t } from "react-hook-form"; import { Autocomplete as n, Checkbox as r, Chip as i, FormControl as a, FormControlLabel as o, FormHelperText as s, FormLabel as c, IconButton as l, InputAdornment as u, InputLabel as d, ListSubheader as f, MenuItem as p, Radio as m, RadioGroup as h, Select as g, Slider as _, Stack as v, Switch as y, TextField as b } from "@mui/material"; import { memo as x, useMemo as S, useState as C } from "react"; import { jsx as w, jsxs as T } from "react/jsx-runtime"; import { DateField as E, DatePicker as D, DateTimeField as O, DateTimePicker as k, LocalizationProvider as A, renderTimeViewClock as j } from "@mui/x-date-pickers"; import { AdapterDateFnsJalali as M } from "@mui/x-date-pickers/AdapterDateFnsJalali"; import { IMaskInput as N } from "react-imask"; //#region lib/utils/index.ts function P(e, t, n, r) { return e === !0 ? r === !0 ? " " : void 0 : t !== void 0 && t.length > 0 ? t : n === void 0 ? r === !0 ? " " : void 0 : n; } //#endregion //#region lib/components/RHFAutoComplete.tsx function F({ name: r, label: i, options: a, control: o, inputDir: s, renderInputProps: c, multiple: l, helperText: u, hasEmptyHelper: d = !0, disabled: f, ...p }) { let m = t(), h = S(() => { let e = {}; for (let t of a) e[t.value] = t; return e; }, [a]); return /* @__PURE__ */ w(e, { name: r, control: o ?? m.control, disabled: f, render: ({ field: { value: e, onChange: t, onBlur: r, ref: o, ...s }, fieldState: { error: f } }) => /* @__PURE__ */ w(n, { fullWidth: !0, multiple: l, ...p, options: a, value: e == null ? l === !0 ? [] : null : l === !0 ? e.map((e) => h[e]) : h[e], isOptionEqualToValue: (e, t) => typeof t == "object" && "value" in t ? e.value === t.value : e.value === t, getOptionLabel: (e) => e.label, renderInput: (e) => /* @__PURE__ */ w(b, { ...c, ...e, inputRef: o, ...s, label: i, error: s.disabled !== !0 && f !== void 0, slotProps: { ...e.slotProps, ...c?.slotProps }, helperText: P(s.disabled, f?.message, u, d) }), onChange: (e, n, ...r) => { t(l === !0 ? n.map((e) => e.value) : n === null ? null : n.value), p.onChange !== void 0 && p.onChange(e, n, ...r); }, onBlur: (...e) => { r(), p.onBlur !== void 0 && p.onBlur(...e); } }) }); } //#endregion //#region lib/components/RHFCheckBox.tsx function I({ name: n, label: i, control: c, helperText: l, hasEmptyHelper: u = !0, disabled: d, ...f }) { let p = t(); return /* @__PURE__ */ w(e, { name: n, control: c ?? p.control, disabled: d, render: ({ field: { value: e, onChange: t, onBlur: n, ...c }, fieldState: { error: d } }) => /* @__PURE__ */ T(a, { error: c.disabled !== !0 && d !== void 0, children: [/* @__PURE__ */ w(o, { label: i, control: /* @__PURE__ */ w(r, { ...f, checked: e === !0, onChange: (...e) => { t(...e), f.onChange !== void 0 && f.onChange(...e); }, onBlur: (...e) => { n(), f.onBlur !== void 0 && f.onBlur(...e); }, ...c }) }), /* @__PURE__ */ w(s, { children: P(c.disabled, d?.message, l, u) })] }) }); } //#endregion //#region lib/components/RHFDatePickerJalali.tsx function L({ name: n, control: r, isReadOnly: i, hasEmptyHelper: a = !0, disabled: o, ...s }) { let c = t(); return /* @__PURE__ */ w(e, { name: n, control: r ?? c.control, disabled: o, render: ({ field: { value: e, onChange: t, onBlur: n, ...r }, fieldState: { error: o } }) => /* @__PURE__ */ w(A, { dateAdapter: M, children: /* @__PURE__ */ w(D, { ...s, value: e ?? null, slotProps: { ...s.slotProps, field: (e) => { let t = typeof s.slotProps?.field == "function" ? s.slotProps.field(e) : s.slotProps?.field; return { ...t, readOnly: i, onBlur: (...e) => { n(), t?.onBlur !== void 0 && t.onBlur(...e); } }; }, textField: (e) => { let t = typeof s.slotProps?.textField == "function" ? s.slotProps.textField(e) : s.slotProps?.textField; return { ...t, error: r.disabled !== !0 && o !== void 0, helperText: P(r.disabled, o?.message, t?.helperText, a) }; } }, onChange: (...e) => { t(...e), s.onChange !== void 0 && s.onChange(...e); }, ...r }) }) }); } //#endregion //#region lib/components/RHFDateTimePickerJalali.tsx function R({ name: n, control: r, isReadOnly: i, hasEmptyHelper: a = !0, disabled: o, ...s }) { let c = t(); return /* @__PURE__ */ w(e, { name: n, control: r ?? c.control, disabled: o, render: ({ field: { value: e, onChange: t, onBlur: n, ...r }, fieldState: { error: o } }) => /* @__PURE__ */ w(A, { dateAdapter: M, children: /* @__PURE__ */ w(k, { ...s, value: e ?? null, viewRenderers: { hours: j, minutes: j, seconds: j }, slotProps: { ...s.slotProps, field: (e) => { let t = typeof s.slotProps?.field == "function" ? s.slotProps.field(e) : s.slotProps?.field; return { ...t, readOnly: i, onBlur: (...e) => { n(), t?.onBlur !== void 0 && t.onBlur(...e); } }; }, textField: (e) => { let t = typeof s.slotProps?.textField == "function" ? s.slotProps.textField(e) : s.slotProps?.textField; return { ...t, error: r.disabled !== !0 && o !== void 0, helperText: P(r.disabled, o?.message, t?.helperText, a) }; } }, onChange: (...e) => { t(...e), s.onChange !== void 0 && s.onChange(...e); }, ...r }) }) }); } //#endregion //#region lib/components/RHFRadioGroup.tsx function z({ name: n, options: r, formLabel: i, control: c, helperText: l, hasEmptyHelper: u = !0, disabled: d, ...f }) { let p = t(); return /* @__PURE__ */ w(e, { name: n, control: c ?? p.control, disabled: d, render: ({ field: { onChange: e, onBlur: t, ...n }, fieldState: { error: c } }) => /* @__PURE__ */ T(a, { error: n.disabled !== !0 && c !== void 0, children: [ i ?? null, /* @__PURE__ */ w(h, { ...f, onChange: (...t) => { e(...t), f.onChange !== void 0 && f.onChange(...t); }, onBlur: (...e) => { t(), f.onBlur !== void 0 && f.onBlur(...e); }, ...n, children: r.map((e) => /* @__PURE__ */ w(o, { value: e.value, control: /* @__PURE__ */ w(m, {}), label: e.label, disabled: n.disabled === !0 || e.disabled }, e.value)) }), /* @__PURE__ */ w(s, { children: P(n.disabled, c?.message, l, u) }) ] }) }); } //#endregion //#region lib/components/partials/SelectRenderValue.tsx function B({ options: e, selected: t }) { return t.map((t) => /* @__PURE__ */ w(i, { label: e[t].label, size: "small" }, t)); } function V({ options: e, selected: t, maxHeight: n, inputDir: r }) { return n === void 0 ? /* @__PURE__ */ w(v, { direction: "row", sx: { flexWrap: "wrap", gap: 1 }, children: /* @__PURE__ */ w(B, { options: e, selected: t }) }) : /* @__PURE__ */ w(v, { dir: "ltr", sx: { overflowY: "auto", maxHeight: n }, children: /* @__PURE__ */ w(v, { direction: "row", sx: { dir: r, flexWrap: "wrap", gap: 1 }, children: /* @__PURE__ */ w(B, { options: e, selected: t }) }) }); } var H = x(V); //#endregion //#region lib/components/RHFSelect.tsx function U({ name: n, options: i, control: o, inputDir: c, maxHeight: l, dropDownMaxHeight: u, categorized: m = !1, uncategorizedText: h = "Uncategorized", helperText: _, hasEmptyHelper: v = !0, disabled: y, ...b }) { let x = t(), C = b.multiple === !0, E = S(() => { let e = {}; for (let t of i) t.value in e && console.warn("Duplicate option value for select component:", t.value), e[t.value] = t; return e; }, [i]), D = S(() => { if (!m) return null; let e = {}, t = []; for (let n of i) { if (n.category === void 0) { t.push(n.value); continue; } n.category.value in e ? e[n.category.value].push(n.value) : e[n.category.value] = [n.value]; } return { categories: e, uncategorized: t }; }, [m, i]); return /* @__PURE__ */ w(e, { name: n, control: o ?? x.control, disabled: y, render: ({ field: { value: e, onChange: t, onBlur: n, ...i }, fieldState: { error: o } }) => /* @__PURE__ */ T(a, { fullWidth: !0, disabled: i.disabled, error: i.disabled !== !0 && o !== void 0, children: [ /* @__PURE__ */ w(d, { children: b.label }), /* @__PURE__ */ w(g, { ...b, error: i.disabled !== !0 && o !== void 0, value: e === void 0 ? C ? [] : "" : e, MenuProps: { ...b.MenuProps, slotProps: { ...b.MenuProps?.slotProps, paper: (e) => { let t = typeof b.MenuProps?.slotProps?.paper == "function" ? b.MenuProps.slotProps.paper(e) : b.MenuProps?.slotProps?.paper; return { ...t, style: { maxHeight: u, ...t?.style } }; } } }, renderValue: b.renderValue === void 0 ? C ? (e) => /* @__PURE__ */ w(H, { options: E, selected: e, maxHeight: l, inputDir: c }) : void 0 : b.renderValue, onChange: (...e) => { t(...e), b.onChange !== void 0 && b.onChange(...e); }, onBlur: (...e) => { n(), b.onBlur !== void 0 && b.onBlur(...e); }, ...i, children: m && D !== null ? Object.entries(D.categories).reduce((t, [n, i]) => (t.push(/* @__PURE__ */ w(f, { children: E[i[0]].category?.label }, n), ...i.map((t) => /* @__PURE__ */ T(p, { value: t, disabled: E[t].disabled, dir: c, children: [/* @__PURE__ */ w(r, { checked: e.includes(t) }), E[t].label] }, t))), t), []).concat(D.uncategorized.length > 0 ? /* @__PURE__ */ w(f, { children: h }, "rhf-uncategorized") : []).concat(D.uncategorized.map((t) => /* @__PURE__ */ T(p, { value: t, disabled: E[t].disabled, dir: c, children: [/* @__PURE__ */ w(r, { checked: e.includes(t) }), E[t].label] }, t))) : Object.entries(E).map(([t, n]) => /* @__PURE__ */ T(p, { value: t, disabled: n.disabled, dir: c, children: [C ? /* @__PURE__ */ w(r, { checked: e.includes(t) }) : null, n.label] }, t)) }), /* @__PURE__ */ w(s, { children: P(i.disabled, o?.message, _, v) }) ] }) }); } //#endregion //#region lib/components/RHFSlider.tsx function W({ name: n, label: r, control: i, helperText: o, hasEmptyHelper: l = !0, sliderDir: u, disabled: d, ...f }) { let p = t(); return /* @__PURE__ */ w(e, { name: n, control: i ?? p.control, disabled: d, render: ({ field: { value: e, onChange: t, onBlur: n, ...i }, fieldState: { error: d } }) => /* @__PURE__ */ T(a, { fullWidth: !0, disabled: i.disabled, error: i.disabled !== !0 && d !== void 0, dir: u, children: [ r === void 0 ? null : /* @__PURE__ */ w(c, { children: r }), /* @__PURE__ */ w(_, { ...f, value: e ?? f.defaultValue ?? 0, onChange: (...e) => { t(...e), f.onChange !== void 0 && f.onChange(...e); }, onBlur: (...e) => { n(), f.onBlur !== void 0 && f.onBlur(...e); }, ...i }), /* @__PURE__ */ w(s, { children: P(i.disabled, d?.message, o, l) }) ] }) }); } //#endregion //#region lib/components/RHFSwitch.tsx function G({ name: n, label: r, control: i, helperText: c, hasEmptyHelper: l = !0, disabled: u, ...d }) { let f = t(); return /* @__PURE__ */ w(e, { name: n, control: i ?? f.control, disabled: u, render: ({ field: { value: e, onChange: t, onBlur: n, ...i }, fieldState: { error: u } }) => /* @__PURE__ */ T(a, { error: i.disabled !== !0 && u !== void 0, children: [/* @__PURE__ */ w(o, { label: r, control: /* @__PURE__ */ w(y, { ...d, checked: e === !0, onChange: (...e) => { t(...e), d.onChange !== void 0 && d.onChange(...e); }, onBlur: (...e) => { n(), d.onBlur !== void 0 && d.onBlur(...e); }, ...i }) }), /* @__PURE__ */ w(s, { children: P(i.disabled, u?.message, c, l) })] }) }); } //#endregion //#region lib/components/RHFTextField.tsx function K({ name: n, control: r, inputDir: i, isReadOnly: a, hasEmptyHelper: o = !0, disabled: s, ...c }) { let l = t(); return /* @__PURE__ */ w(e, { name: n, control: r ?? l.control, disabled: s, render: ({ field: { value: e, onChange: t, onBlur: n, ...r }, fieldState: { error: s } }) => /* @__PURE__ */ w(b, { fullWidth: !0, ...c, error: r.disabled !== !0 && s !== void 0, value: e ?? "", helperText: P(r.disabled, s?.message, c.helperText, o), slotProps: { ...c.slotProps, input: (e) => ({ readOnly: a, ...typeof c.slotProps?.input == "function" ? c.slotProps.input(e) : c.slotProps?.input }), htmlInput: (e) => { let t = typeof c.slotProps?.htmlInput == "function" ? c.slotProps.htmlInput(e) : c.slotProps?.htmlInput; return { ...t, style: { direction: i, ...t?.style } }; } }, onChange: (...e) => { t(...e), c.onChange !== void 0 && c.onChange(...e); }, onBlur: (...e) => { n(), c.onBlur !== void 0 && c.onBlur(...e); }, ...r }) }); } //#endregion //#region lib/components/RHFTextMasked.tsx function q(e) { let { onChange: t, maskOptions: n, value: r, name: i, ref: a, ...o } = e; return /* @__PURE__ */ w(N, { ...n, ...o, value: r == null ? r : r.toString(), name: i, inputRef: a, onAccept: (e) => { t({ target: { name: i, value: e } }); } }); } function J({ name: n, control: r, maskOptions: i, inputDir: a, isReadOnly: o, disabled: s, hasEmptyHelper: c = !0, ...l }) { let u = t(); return /* @__PURE__ */ w(e, { name: n, control: r ?? u.control, disabled: s, render: ({ field: { value: e, onChange: t, onBlur: n, ...r }, fieldState: { error: s } }) => /* @__PURE__ */ w(b, { fullWidth: !0, ...l, error: r.disabled !== !0 && s !== void 0, value: e ?? "", helperText: P(r.disabled, s?.message, l.helperText, c), slotProps: { ...l.slotProps, input: (e) => { let t = typeof l.slotProps?.input == "function" ? l.slotProps.input(e) : l.slotProps?.input; return { readOnly: o, ...t, inputComponent: q, inputProps: { ...t?.inputProps, style: { direction: a, ...t?.inputProps?.style }, maskOptions: i } }; }, htmlInput: (e) => { let t = typeof l.slotProps?.htmlInput == "function" ? l.slotProps.htmlInput(e) : l.slotProps?.htmlInput; return { ...t, style: { direction: a, ...t?.style } }; } }, onChange: (...e) => { t(...e), l.onChange !== void 0 && l.onChange(...e); }, onBlur: (...e) => { n(), l.onBlur !== void 0 && l.onBlur(...e); }, ...r }) }); } //#endregion //#region lib/components/partials/EyeIcon.tsx function Y() { return /* @__PURE__ */ T("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [/* @__PURE__ */ T("g", { clipPath: "url(#eye-clip)", children: [/* @__PURE__ */ w("path", { opacity: "0.4", d: "M0.0781372 7.61562C-0.0249878 7.8625 -0.0249878 8.1375 0.0781372 8.38437C0.543762 9.5 1.52189 11.125 2.98439 12.4812C4.45626 13.8469 6.47814 15 9.00314 15C11.5281 15 13.55 13.85 15.0219 12.4812C16.4844 11.1219 17.4625 9.5 17.9281 8.38437C18.0313 8.1375 18.0313 7.8625 17.9281 7.61562C17.4625 6.5 16.4844 4.875 15.0219 3.51875C13.55 2.15312 11.5281 1 9.00314 1C6.47814 1 4.45314 2.15 2.98126 3.51875C1.51876 4.875 0.540637 6.5 0.0781372 7.61562ZM13.5 8C13.5 9.19347 13.0259 10.3381 12.182 11.182C11.3381 12.0259 10.1935 12.5 9.00001 12.5C7.80654 12.5 6.66195 12.0259 5.81803 11.182C4.97412 10.3381 4.50001 9.19347 4.50001 8C4.50001 6.80653 4.97412 5.66193 5.81803 4.81802C6.66195 3.97411 7.80654 3.5 9.00001 3.5C10.1935 3.5 11.3381 3.97411 12.182 4.81802C13.0259 5.66193 13.5 6.80653 13.5 8Z", fill: "currentColor" }), /* @__PURE__ */ w("path", { d: "M9.00001 6C9.00001 7.10312 8.10314 8 7.00001 8C6.64064 8 6.30314 7.90625 6.00939 7.7375C5.97814 8.07812 6.00626 8.42812 6.10001 8.775C6.52814 10.375 8.17501 11.325 9.77501 10.8969C11.375 10.4687 12.325 8.82187 11.8969 7.22187C11.5156 5.79375 10.1625 4.88437 8.73751 5.00937C8.90314 5.3 9.00001 5.6375 9.00001 6Z", fill: "currentColor" })] }), /* @__PURE__ */ w("defs", { children: /* @__PURE__ */ w("clipPath", { id: "eye-clip", children: /* @__PURE__ */ w("rect", { width: "18", height: "16", fill: "white" }) }) })] }); } //#endregion //#region lib/components/partials/EyeSlashIcon.tsx function X() { return /* @__PURE__ */ T("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [/* @__PURE__ */ T("g", { clipPath: "url(#eye-slash-clip)", children: [/* @__PURE__ */ w("path", { opacity: "0.4", d: "M0.0781372 7.61563C-0.0249878 7.86251 -0.0249878 8.13751 0.0781372 8.38438C0.543762 9.50001 1.52189 11.125 2.98439 12.4813C4.45626 13.8469 6.47814 15 9.00314 15C10.1688 15 11.2281 14.7531 12.175 14.3563L10.1688 12.35C9.79689 12.45 9.40626 12.5031 9.00314 12.5031C6.51876 12.5031 4.50314 10.4875 4.50314 8.00313C4.50314 7.60001 4.55626 7.20938 4.65626 6.83751L2.16876 4.35001C1.15314 5.50001 0.450012 6.72188 0.0781372 7.61563Z", fill: "currentColor" }), /* @__PURE__ */ w("path", { d: "M1.28126 -0.778131C0.987512 -1.07188 0.512512 -1.07188 0.221887 -0.778131C-0.0687376 -0.484381 -0.0718626 -0.00938112 0.218762 0.284369L16.7188 16.7844C17.0125 17.0781 17.4875 17.0781 17.7781 16.7844C18.0688 16.4906 18.0719 16.0156 17.7781 15.725L14.7656 12.7125C14.85 12.6375 14.9344 12.5625 15.0156 12.4875C16.4781 11.1281 17.4563 9.50624 17.9219 8.39062C18.025 8.14374 18.025 7.86874 17.9219 7.62187C17.4563 6.50624 16.4781 4.88124 15.0156 3.52499C13.5438 2.15937 11.5219 1.00624 8.99689 1.00624C7.22189 1.00624 5.69689 1.57499 4.43439 2.38749L1.28126 -0.778131ZM6.39064 4.33437C7.12501 3.80937 8.02814 3.49999 9.00001 3.49999C11.4844 3.49999 13.5 5.51562 13.5 7.99999C13.5 8.97187 13.1906 9.87187 12.6656 10.6094L11.5813 9.52499C11.8469 9.07812 11.9969 8.55624 11.9969 7.99999C11.9969 6.34374 10.6531 4.99999 8.99689 4.99999C8.44064 4.99999 7.91876 5.15312 7.47189 5.41562L6.38751 4.33124L6.39064 4.33437Z", fill: "currentColor" })] }), /* @__PURE__ */ w("defs", { children: /* @__PURE__ */ w("clipPath", { id: "eye-slash-clip", children: /* @__PURE__ */ w("rect", { width: "18", height: "16", fill: "white" }) }) })] }); } //#endregion //#region lib/components/RHFPasswordField.tsx var Z = (e) => { e.preventDefault(); }, Q = (e) => { e.preventDefault(); }; function $({ name: e, control: t, label: n, maskOptions: r }) { let [i, a] = C(!1); return /* @__PURE__ */ w(J, { name: e, control: t, inputDir: "ltr", label: n, type: i ? "text" : "password", maskOptions: r, slotProps: { input: { endAdornment: /* @__PURE__ */ w(u, { position: "end", children: /* @__PURE__ */ w(l, { tabIndex: -1, onClick: () => { a((e) => !e); }, onMouseDown: Q, onMouseUp: Z, children: w(i ? X : Y, {}) }) }) } } }); } //#endregion //#region lib/components/RHFDateFieldJalali.tsx function ee({ name: n, control: r, isReadOnly: i, hasEmptyHelper: a = !0, disabled: o, ...s }) { let c = t(); return /* @__PURE__ */ w(e, { name: n, control: r ?? c.control, disabled: o, render: ({ field: { value: e, onChange: t, onBlur: n, ...r }, fieldState: { error: o } }) => /* @__PURE__ */ w(A, { dateAdapter: M, children: /* @__PURE__ */ w(E, { fullWidth: !0, ...s, error: r.disabled !== !0 && o !== void 0, value: e ?? null, helperText: P(r.disabled, o?.message, s.helperText, a), slotProps: { ...s.slotProps, textField: (e) => ({ readOnly: i, ...typeof s.slotProps?.textField == "function" ? s.slotProps.textField(e) : s.slotProps?.textField }) }, onChange: (...e) => { t(...e), s.onChange !== void 0 && s.onChange(...e); }, onBlur: (...e) => { n(), s.onBlur !== void 0 && s.onBlur(...e); }, ...r }) }) }); } //#endregion //#region lib/components/RHFDateTimeFieldJalali.tsx function te({ name: n, control: r, isReadOnly: i, hasEmptyHelper: a = !0, disabled: o, ...s }) { let c = t(); return /* @__PURE__ */ w(e, { name: n, control: r ?? c.control, disabled: o, render: ({ field: { value: e, onChange: t, onBlur: n, ...r }, fieldState: { error: o } }) => /* @__PURE__ */ w(A, { dateAdapter: M, children: /* @__PURE__ */ w(O, { fullWidth: !0, ...s, error: r.disabled !== !0 && o !== void 0, value: e ?? null, helperText: P(r.disabled, o?.message, s.helperText, a), slotProps: { ...s.slotProps, textField: (e) => ({ readOnly: i, ...typeof s.slotProps?.textField == "function" ? s.slotProps.textField(e) : s.slotProps?.textField }) }, onChange: (...e) => { t(...e), s.onChange !== void 0 && s.onChange(...e); }, onBlur: (...e) => { n(), s.onBlur !== void 0 && s.onBlur(...e); }, ...r }) }) }); } //#endregion export { F as RHFAutoComplete, I as RHFCheckBox, ee as RHFDateFieldJalali, L as RHFDatePickerJalali, te as RHFDateTimeFieldJalali, R as RHFDateTimePickerJalali, $ as RHFPasswordField, z as RHFRadioGroup, U as RHFSelect, W as RHFSlider, G as RHFSwitch, K as RHFTextField, J as RHFTextMasked }; //# sourceMappingURL=index.js.map