synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
60 lines (59 loc) • 1.92 kB
JavaScript
import { jsxs as c, jsx as i } from "react/jsx-runtime";
import { FormControl as y, Input as b, Box as w, InputLabel as I, Typography as L } from "@mui/material";
import F from "@mui/material/FormHelperText";
import { useId as S, useState as j } from "react";
function m(t) {
return t.trim().split(/\W+/).filter((e) => !!e).length;
}
function v(t) {
const { wordCount: e, maxWords: n, minWords: r } = t;
let l = "grey.700";
e > 0 && (r != null && e < r || n != null && e > n) ? l = "error.main" : e > 0 && (l = "success.main");
let o = `${e.toLocaleString()}`;
return n && (o += ` of ${n.toLocaleString()}`), o += " words", r && (o += ` (min. ${r.toLocaleString()})`), /* @__PURE__ */ i(L, { component: "div", variant: "smallText1", sx: { color: l }, children: o });
}
function D(t) {
const { minWords: e, maxWords: n, label: r, helperText: l, ...o } = t, { value: s, onChange: h } = o, f = S(), d = t.id ?? f, a = d + "-helperText", [x, p] = j(0), W = typeof s == "string" ? m(s) : x, g = (u) => {
const T = u.target.value;
p(m(T)), h?.(u);
}, C = /* @__PURE__ */ c(
w,
{
sx: {
display: "flex",
justifyContent: "space-between",
alignItems: "baseline",
width: "100%"
},
children: [
/* @__PURE__ */ i(I, { sx: { position: "static" }, htmlFor: d, children: r }),
/* @__PURE__ */ i(
v,
{
wordCount: W,
minWords: e,
maxWords: n
}
)
]
}
);
return /* @__PURE__ */ c(y, { required: t.required, fullWidth: t.fullWidth, children: [
C,
/* @__PURE__ */ i(
b,
{
...o,
"aria-describedby": a,
id: d,
onChange: g
}
),
/* @__PURE__ */ i(F, { id: a, children: t.helperText })
] });
}
export {
D as default,
m as getWordCount
};
//# sourceMappingURL=TextFieldWithWordLimit.js.map