@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
94 lines (93 loc) • 2.69 kB
JavaScript
import { jsxs as h, jsx as t } from "react/jsx-runtime";
import { useState as a, useMemo as v, useEffect as d } from "react";
import { Select as x, ListSubheader as b, TextField as C, MenuItem as z } from "@mui/material";
import g from "lodash/debounce";
import { KeyboardArrowDown as T } from "@mui/icons-material";
import { getTimezones as w } from "./utils.js";
const r = w();
function P({ value: s, onChange: u, disabled: l = !1, mode: c = "self" }) {
const [m, p] = a(r), [i, f] = a(""), o = v(
() => g((e) => e ? r.filter((n) => n.value.toLowerCase().includes(e.toLowerCase())) : r, 300),
[]
);
return d(() => {
const e = o(i);
p(e ?? r);
}, [i, o]), d(() => () => {
o.cancel();
}, [o]), /* @__PURE__ */ h(
x,
{
className: `timezone-select ${l ? "disabled" : ""}`,
value: s,
onChange: (e) => u(e.target.value),
disabled: l,
displayEmpty: !0,
variant: "outlined",
placeholder: "Timezone",
IconComponent: (e) => /* @__PURE__ */ t(
T,
{
...e,
sx: { fontSize: 18, color: (n) => `${n.palette.text.secondary} !important` }
}
),
MenuProps: {
PaperProps: {
style: {
maxHeight: "400px"
}
},
style: {
zIndex: c === "drawer" ? 9999 : 1300
}
},
sx: {
width: "100%",
"&:hover": {
"fieldset.MuiOutlinedInput-notchedOutline": {
borderColor: "divider"
}
},
"fieldset.MuiOutlinedInput-notchedOutline": {
borderColor: "divider"
}
},
children: [
/* @__PURE__ */ t(b, { children: /* @__PURE__ */ t(
C,
{
autoFocus: !0,
value: i,
placeholder: "Timezone",
variant: "outlined",
size: "small",
fullWidth: !0,
onChange: (e) => f(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"
}
}
}
}
) }),
m.map((e) => /* @__PURE__ */ t(z, { value: e.value, children: e.label }, e.value))
]
}
);
}
export {
P as TimezoneSelect
};