mui-chips-input
Version:
A chips input designed for the React library MUI
275 lines (268 loc) • 7.51 kB
JavaScript
import e, { createElement as t } from "react";
import n from "@mui/material/Chip";
import { styled as r } from "@mui/material/styles";
import { jsx as i } from "react/jsx-runtime";
import a from "@mui/icons-material/Close";
import o from "@mui/material/ClickAwayListener";
import s from "@mui/material/IconButton";
import c from "@mui/material/TextField";
//#region src/shared/constants/event.ts
var l = {
enter: "Enter",
backspace: "Backspace"
}, u = { ime: 229 }, d = { ChipStyled: r(n)(({ theme: e, size: t }) => `
max-width: 100%;
margin: 2px 4px;
height: ${t === "small" ? "26px" : "32px"};
&[aria-disabled="true"] > svg {
color: ${e.palette.action.disabled};
cursor: default;
}
&.MuiChipsInput-Chip-Editing {
background-color: ${e.palette.primary.light};
color: ${e.palette.primary.contrastText};
}
`) }, f = ({ className: e, index: t, onDelete: n, disabled: r, onEdit: a, isEditing: o, disableEdition: s, ...c }) => {
let u = (e) => {
e.key === l.enter && n(t);
}, f = (e) => {
e?.preventDefault?.(), e?.stopPropagation?.(), n(t);
};
return /* @__PURE__ */ i(d.ChipStyled, {
className: `MuiChipsInput-Chip ${o ? "MuiChipsInput-Chip-Editing" : ""} ${e || ""}`,
onKeyDown: u,
disabled: r,
onDoubleClick: s ? void 0 : (e) => {
e.target.textContent === c.label && (r || a(t));
},
tabIndex: r ? -1 : 0,
"aria-disabled": r,
onDelete: f,
...c
});
};
//#endregion
//#region src/shared/helpers/boolean.ts
function p(e) {
return typeof e == "boolean";
}
//#endregion
//#region src/shared/helpers/object.ts
function m(e) {
return typeof e == "object" && !Array.isArray(e) && e !== null;
}
//#endregion
//#region src/shared/helpers/ref.ts
function h(e, t) {
typeof t == "function" ? t(e) : t && m(t) && "current" in t && (t.current = e);
}
//#endregion
//#region src/components/TextFieldChip/TextFieldChips.styled.ts
var g = r("div")`
top: 50%;
transform: translateY(-50%);
right: 10px;
position: absolute;
`, _ = r(c)((e) => `
max-width: 100%;
.MuiInputBase-root {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
row-gap: 5px;
padding-top: ${e.size === "small" ? "5px" : "9px"};
padding-right: 30px;
padding-bottom: ${e.size === "small" ? "5px" : "9px"};
padding-left: 10px;
input {
min-width: 30px;
width: auto;
flex-grow: 1;
text-overflow: ellipsis;
padding: ${e.size === "small" ? "3.5px 4px" : "7.5px 4px"};
align-self: center;
}
}
`), v = {
ChipStyled: r(n)(({ theme: e, size: t }) => `
max-width: 100%;
margin: 2px 4px;
height: ${t === "small" ? "26px" : "32px"};
&[aria-disabled="true"] > svg.MuiChip-deleteIcon {
color: ${e.palette.action.disabled};
cursor: default;
}
`),
TextFieldStyled: _,
EndAdornmentClose: g
}, y = e.forwardRef(({ chips: n, onAddChip: r, onEditChip: c, onDeleteChip: d, onInputChange: m, disabled: g, clearInputOnBlur: _, addOnBlur: y, validate: b, error: x, helperText: S, hideClearAll: C, slotProps: w, size: T, disableDeleteOnBackspace: ee, disableEdition: te, className: E, renderChip: D, addOnWhichKey: O, onFocus: k, onDeleteAllChips: A, inputRef: j, inputValue: M, ...N }, P) => {
let [ne, re] = e.useState(""), [F, I] = e.useState(""), L = e.useRef(null), R = e.useRef(!1), z = typeof M == "string", [B, V] = e.useState(null), H = () => {
I("");
}, U = z ? M : ne, W = (e) => {
m?.(e), z || re(e);
}, G = (e) => {
W(n[e]), V(e), H();
}, K = () => {
V(null);
}, q = () => {
H(), W("");
}, J = (e) => {
W(e.target.value);
}, Y = (e, t) => (n) => {
if (typeof b == "function") {
let n = b(e);
if (n === !1) {
t?.preventDefault();
return;
}
if (!p(n) && n.isError) {
t?.preventDefault(), I(n.textError);
return;
}
}
n();
}, X = (e, t, n) => {
Y(e, n)(() => {
c?.(e, t), K(), q();
});
}, Z = (e, t) => {
Y(e, t)(() => {
r?.(U.trim()), q();
});
}, Q = () => {
if (R.current) {
if (B !== null) K(), q();
else if (y) {
if (U.length > 0) {
let e = U.trim();
e.length === 0 ? q() : B === null ? Z(e) : X(e, B);
}
} else _ && q();
R.current = !1;
}
}, ie = (e) => {
L.current = e, j && h(e, j), P && h(e, P);
}, ae = (e, t) => t === u.ime ? !1 : O ? Array.isArray(O) ? O.includes(e) : O === e : e === l.enter, oe = (e) => {
let t = ae(e.key, e.keyCode), r = e.key === l.backspace, i = U.trim();
if (!t && e.code === "Tab") {
Q();
return;
}
if (t && e.preventDefault(), U.length > 0 && t) i.length === 0 ? q() : B === null ? Z(i, e) : X(i, B, e);
else if (r && U.length === 0 && n.length > 0 && !ee) {
let e = n.length - 1;
d?.(e), B === e && K();
}
}, se = (e) => {
e.preventDefault(), k?.(e), R.current = !0;
}, ce = (e) => {
e.preventDefault(), !C && !g && (A?.(), q(), K());
}, le = (e) => {
e === B ? (q(), K()) : G(e), L.current?.focus();
}, ue = (e) => {
g || (d?.(e), B !== null && (K(), q()));
}, $ = n.length > 0, { htmlInput: de, input: fe, ...pe } = w || {};
return /* @__PURE__ */ i(o, {
onClickAway: Q,
children: /* @__PURE__ */ i(v.TextFieldStyled, {
value: U,
onChange: J,
ref: P,
className: `MuiChipsInput-TextField ${E || ""}`,
size: T,
placeholder: "Type and press enter",
onFocus: se,
slotProps: {
htmlInput: {
onKeyDown: oe,
enterKeyHint: "done",
ref: ie,
...de
},
input: {
startAdornment: $ ? n.map((e, n) => {
let r = `chip-${n}`, i = {
index: n,
onEdit: le,
label: e,
title: e,
isEditing: n === B,
size: T,
disabled: g,
disableEdition: te,
onDelete: ue
};
return D ? D(f, r, i) : /* @__PURE__ */ t(f, {
...i,
key: r
});
}) : null,
endAdornment: C ? null : /* @__PURE__ */ i(v.EndAdornmentClose, {
style: { visibility: $ ? "visible" : "hidden" },
children: /* @__PURE__ */ i(s, {
"aria-label": "Clear",
title: "Clear",
disabled: g,
size: "small",
onClick: ce,
children: /* @__PURE__ */ i(a, { fontSize: "small" })
})
}),
...fe
},
...pe
},
disabled: g,
error: !!F || x,
helperText: F || S,
...N
})
});
});
//#endregion
//#region src/shared/helpers/array.ts
function b(e, t) {
return [...e, t];
}
function x(e, t) {
return e.filter((e, n) => t !== n);
}
function S(e, t, n) {
return e.map((e, r) => t === r ? n : e);
}
//#endregion
//#region src/index.tsx
var C = [], w = ({ value: e = C, onChange: t, onAddChip: n, onInputChange: r, onDeleteChip: a, disabled: o, validate: s, clearInputOnBlur: c, addOnBlur: u, hideClearAll: d, disableDeleteOnBackspace: f, onEditChip: p, renderChip: m, disableEdition: h, ref: g, addOnWhichKey: _ = l.enter, inputValue: v, ...w }) => /* @__PURE__ */ i(y, {
chips: e,
onAddChip: (r) => {
if (o) return;
let i = b(e, r), a = i.length - 1;
n?.(r, a), t?.(i);
},
onInputChange: r,
disableDeleteOnBackspace: f,
onDeleteChip: (n) => {
if (o) return;
let r = e[n];
t?.(x(e, n)), a?.(r, n);
},
onEditChip: (n, r) => {
o || h || (t?.(S(e, r, n)), p?.(n, r));
},
renderChip: m,
onDeleteAllChips: () => {
t?.([]);
},
clearInputOnBlur: c,
addOnBlur: u,
disabled: o,
disableEdition: h,
validate: s,
inputValue: v,
hideClearAll: d,
addOnWhichKey: _,
...w,
ref: g
});
//#endregion
export { w as MuiChipsInput };