@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
100 lines (99 loc) • 3.2 kB
JavaScript
import { jsxs as b, jsx as t } from "react/jsx-runtime";
import { useState as m, useRef as z, useEffect as g } from "react";
import { Select as y, ListSubheader as T, TextField as w, MenuItem as M } from "@mui/material";
import { useMemoizedFn as c, useDebounce as I } from "ahooks";
import { KeyboardArrowDown as S } from "@mui/icons-material";
import { useLocaleContext as D } from "@arcblock/ux/lib/Locale/context";
import { translate as O } from "@arcblock/ux/lib/Locale/util";
import P from "@arcblock/ux/lib/Empty";
import { getTimezones as F } from "./utils.js";
import { translations as L } from "../../libs/locales.js";
const r = F();
function V({ value: p, onChange: f, disabled: i = !1, mode: h = "self" }) {
const { locale: x } = D(), n = c((e, o = {}) => O(L, e, x, "en", o)), [l, v] = m(r), [s, C] = m(""), a = I(s, { wait: 500 }), u = z(null), d = c(
(e) => e ? r.filter((o) => o.value.toLowerCase().includes(e.toLowerCase())) : r
);
return g(() => {
const e = d(a);
v(e ?? r), setTimeout(() => {
u.current?.focus();
}, 0);
}, [a, d]), /* @__PURE__ */ b(
y,
{
className: `timezone-select ${i ? "disabled" : ""}`,
value: p,
onChange: (e) => f(e.target.value),
disabled: i,
displayEmpty: !0,
variant: "outlined",
placeholder: n("profile.timezone"),
IconComponent: (e) => /* @__PURE__ */ t(
S,
{
...e,
sx: { fontSize: 18, color: (o) => `${o.palette.text.secondary} !important` }
}
),
MenuProps: {
autoFocus: !1,
PaperProps: {
style: {
maxHeight: "400px"
}
},
style: {
zIndex: h === "drawer" ? 9999 : 1300
}
},
sx: {
width: "100%",
"&:hover": {
"fieldset.MuiOutlinedInput-notchedOutline": {
borderColor: "divider"
}
},
"fieldset.MuiOutlinedInput-notchedOutline": {
borderColor: "divider"
}
},
children: [
/* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(
w,
{
inputRef: u,
autoFocus: !0,
value: s,
placeholder: n("profile.timezone"),
variant: "outlined",
size: "small",
fullWidth: !0,
onChange: (e) => C(e.target.value),
onClick: (e) => e.stopPropagation(),
onKeyDown: (e) => e.stopPropagation(),
sx: {
marginTop: "8px",
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "divider",
borderWidth: "1px"
},
"&:hover fieldset": {
borderColor: "divider"
},
"&.Mui-focused fieldset": {
borderColor: "divider"
}
}
}
}
) }),
l.map((e) => /* @__PURE__ */ t(M, { value: e.value, children: e.label }, e.value)),
l.length > 0 ? null : /* @__PURE__ */ t(P, { children: n("emptyContent") })
]
}
);
}
export {
V as TimezoneSelect
};