@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
231 lines (230 loc) • 8.05 kB
JavaScript
import { jsxs as i, jsx as e, Fragment as P } from "react/jsx-runtime";
import { useState as c, useEffect as q, useMemo as Q, Suspense as D, createElement as I } from "react";
import { Dialog as V, DialogTitle as G, Typography as f, IconButton as H, DialogContent as J, FormControl as k, InputLabel as z, Select as W, MenuItem as w, ListItemIcon as M, Box as g, DialogActions as K, Button as v } from "@mui/material";
import b from "dayjs";
import { Close as U } from "@mui/icons-material";
import { translate as X } from "@arcblock/ux/lib/Locale/util";
import { useMemoizedFn as Y } from "ahooks";
import R from "@arcblock/icons/lib/ArrowDown";
import { useLocaleContext as Z } from "@arcblock/ux/lib/Locale/context";
import { DurationEnum as u } from "../../../@types/index.js";
import { translations as _ } from "../../libs/locales.js";
import $ from "./date-picker.js";
import { defaultButtonStyle as T, primaryButtonStyle as tt } from "../user-info/utils.js";
const B = {
padding: "8px 16px",
borderRadius: "8px",
"&:hover": {
"fieldset.MuiOutlinedInput-notchedOutline": {
borderColor: "divider"
}
},
"fieldset.MuiOutlinedInput-notchedOutline": {
borderColor: "divider",
borderRadius: "8px"
},
".MuiSelect-select": {
padding: "0 !important",
display: "flex",
alignItems: "center"
}
};
function ht({
open: A,
onClose: d,
data: p,
selected: n,
onSelect: m,
timezone: E = void 0
}) {
const { locale: O } = Z(), o = Y((t, a = {}) => X(_, t, O, "en", a)), [l, C] = c(n?.value || ""), [r, S] = c(n?.duration || ""), [s, h] = c(n?.dateRange?.[1] || ""), [j, x] = c(!1);
q(() => {
C(n?.value || ""), S(n?.duration || ""), h(n?.dateRange?.[1] || "");
}, [n]);
const F = Q(() => l && r, [l, r]), L = p.find((t) => t.id === l), N = (t) => {
m({
value: t.id,
...t.duration ? { duration: t.duration } : {}
}), d();
}, y = (t = !1) => {
if (t)
m(void 0);
else {
const a = b();
m({
value: l,
...r ? { duration: r } : {},
...r === u.Custom && s ? { dateRange: [a.toDate(), b(s).toDate()] } : {}
});
}
d();
};
return /* @__PURE__ */ i(
V,
{
open: A,
onClose: d,
maxWidth: "xs",
fullWidth: !0,
PaperProps: {
sx: {
borderRadius: "8px"
}
},
children: [
/* @__PURE__ */ i(G, { sx: { borderBottom: "1px solid", borderColor: "divider" }, children: [
/* @__PURE__ */ e(f, { variant: "body1", sx: { fontSize: "16px !important", mb: 0 }, children: o("profile.setStatus") }),
/* @__PURE__ */ e(
H,
{
"aria-label": "close",
onClick: d,
sx: {
position: "absolute",
right: 8,
top: 8,
color: (t) => t.palette.grey[500]
},
children: /* @__PURE__ */ e(U, {})
}
)
] }),
/* @__PURE__ */ i(J, { children: [
/* @__PURE__ */ i(k, { fullWidth: !0, sx: { mt: 2 }, children: [
/* @__PURE__ */ e(z, { size: "small", sx: { fontSize: "14px" }, children: o("profile.setStatus") }),
/* @__PURE__ */ e(
W,
{
value: l,
label: o("profile.setStatus"),
onChange: (t) => {
C(t.target.value), x(!0);
},
variant: "outlined",
IconComponent: (t) => /* @__PURE__ */ e(R, { ...t, width: 20, height: 20 }),
sx: B,
children: p.map((t) => /* @__PURE__ */ e(w, { value: t.id, children: /* @__PURE__ */ i(D, { fallback: null, children: [
t.icon && /* @__PURE__ */ e(M, { style: { minWidth: "24px" }, children: I(t.icon, {
style: { fontSize: "16px", width: "16px", height: "16px" }
}) }),
t.name
] }) }, t.id))
}
)
] }),
l ? /* @__PURE__ */ i(k, { fullWidth: !0, sx: { mt: "24px" }, children: [
/* @__PURE__ */ e(z, { size: "small", sx: { fontSize: "14px" }, children: o("profile.removeStatusAfter") }),
/* @__PURE__ */ e(
W,
{
value: r,
label: o("profile.removeStatusAfter"),
onChange: (t) => {
const { value: a } = t.target;
S(a), a === u.Custom && h(b().toDate()), x(!0);
},
variant: "outlined",
IconComponent: (t) => /* @__PURE__ */ e(R, { ...t, width: 20, height: 20 }),
sx: B,
children: L?.children?.map((t) => /* @__PURE__ */ e(w, { value: t.id, children: t.name }, t.id))
}
)
] }) : /* @__PURE__ */ i(g, { sx: { mt: "24px" }, children: [
/* @__PURE__ */ e(
f,
{
variant: "body2",
sx: {
color: "text.secondary"
},
children: o("profile.quickSettings")
}
),
p.map((t) => /* @__PURE__ */ e(
g,
{
onClick: () => N(t),
sx: {
display: "flex",
alignItems: "center",
gap: "4px",
p: "4px",
cursor: "pointer",
borderRadius: "8px",
"&:hover": {
bgcolor: "action.hover"
}
},
children: /* @__PURE__ */ i(D, { fallback: null, children: [
t.icon && /* @__PURE__ */ e(M, { style: { minWidth: "24px" }, children: I(t.icon, {
style: { fontSize: "16px", width: "16px", height: "16px" }
}) }),
t.name,
t.durationName && /* @__PURE__ */ i(
f,
{
variant: "body2",
sx: {
color: "text.secondary"
},
children: [
"- ",
t.durationName
]
}
)
] })
},
t.id
))
] }),
r === u.Custom && /* @__PURE__ */ e(g, { sx: { mt: "24px" }, children: /* @__PURE__ */ e(
$,
{
value: s,
onChange: (t) => {
h(t), x(!0);
},
label: o("profile.selectEndTime"),
timezone: E,
error: r === u.Custom && !s,
helperText: r === u.Custom && !s ? o("profile.pleaseSelectTime") : void 0
}
) })
] }),
/* @__PURE__ */ e(K, { sx: { p: "16px 24px", borderTop: "1px solid", borderColor: "divider" }, children: n?.value && !j ? /* @__PURE__ */ e(
v,
{
sx: { ...T, minWidth: "54px" },
size: "small",
variant: "outlined",
onClick: () => y(!0),
children: o("profile.cleanStatus")
}
) : /* @__PURE__ */ i(P, { children: [
/* @__PURE__ */ e(v, { size: "small", variant: "outlined", sx: { ...T, minWidth: "54px" }, onClick: d, children: o("common.cancel") }),
/* @__PURE__ */ e(
v,
{
sx: {
...tt,
minWidth: "54px",
"&.Mui-disabled": {
backgroundColor: "rgba(0, 0, 0, 0.12)"
}
},
disabled: !F,
onClick: () => y(!1),
size: "small",
variant: "outlined",
children: o("common.confirm")
}
)
] }) })
]
}
);
}
export {
ht as default
};