@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
199 lines (198 loc) • 6.35 kB
JavaScript
import { jsx as e, jsxs as l, Fragment as f } from "react/jsx-runtime";
import { Typography as z, CircularProgress as M, IconButton as i, Box as a, Select as S, MenuItem as g, TextField as q, InputAdornment as A } from "@mui/material";
import { useMemoizedFn as n, useReactive as B, useCreation as F } from "ahooks";
import s from "lodash/noop";
import T from "is-url";
import { Icon as t } from "@iconify/react";
import j from "@iconify-icons/material-symbols/close-rounded";
import D from "@iconify-icons/material-symbols/check";
import O from "@iconify-icons/material-symbols/send-rounded";
import P from "@iconify-icons/material-symbols/edit-square-outline-rounded";
import U from "@iconify-icons/material-symbols/delete-outline-rounded";
import { translate as W } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as E } from "@arcblock/ux/lib/Locale/context";
import { translations as L } from "../libs/locales.js";
function or({
onTest: x = s,
onDelete: h = s,
onSave: b = s,
onCancel: y = s,
type: c = "slack",
url: u = "",
edit: C = !1
}) {
const { locale: k } = E(), d = n((o, w = {}) => W(L, o, k, "en", w)), r = B({
type: c || "slack",
url: u || "",
edit: C ?? !1,
error: "",
loading: !1
}), m = n(() => r.url ? T(r.url) ? (r.error = "", !0) : (r.error = d("common.invalid"), !1) : (r.error = d("common.required"), !1)), I = n(() => {
r.edit = !1, r.url = u || "", r.type = c || "slack", r.error = "", r.loading = !1, y();
}), R = n(async (o) => {
r.loading = !0, await x(o), r.loading = !1;
}), p = n((o) => () => {
m() && o({
type: r.type,
url: r.url
});
}), v = F(() => r.error ? /* @__PURE__ */ e(z, { component: "span", color: "error", children: r.error }) : r.edit ? r.loading ? /* @__PURE__ */ e(M, { size: 16 }) : /* @__PURE__ */ e(
i,
{
size: "small",
onClick: p(R),
sx: {
mr: -1
},
children: /* @__PURE__ */ e(t, { icon: O })
}
) : null, [r.error, r.edit, r.loading]);
return /* @__PURE__ */ l(
a,
{
sx: {
display: "flex",
gap: 1.5,
width: "100%",
alignItems: {
xs: "flex-start",
md: "center"
},
flexDirection: {
xs: "column",
md: "row"
}
},
children: [
/* @__PURE__ */ l(
S,
{
sx: {
borderRadius: 1,
"&.Mui-disabled": {
backgroundColor: "grey.50"
}
},
disabled: !r.edit || r.loading,
size: "small",
value: r.type,
onChange: (o) => {
r.type = o.target.value;
},
children: [
/* @__PURE__ */ e(g, { value: "api", children: d("webhook.url") }),
/* @__PURE__ */ e(g, { value: "slack", children: d("webhook.slack") })
]
}
),
/* @__PURE__ */ l(
a,
{
sx: {
display: "flex",
alignItems: "center",
gap: 0.5,
width: "100%"
},
children: [
/* @__PURE__ */ e(
q,
{
sx: {
flex: 1,
".MuiInputBase-root": {
borderRadius: 1,
"&.Mui-disabled": {
backgroundColor: "grey.50"
}
}
},
disabled: !r.edit || r.loading,
fullWidth: !0,
size: "small",
required: !0,
value: r.url,
onChange: (o) => {
r.url = o.target.value, m();
},
error: !!r.error,
slotProps: {
input: {
endAdornment: /* @__PURE__ */ e(A, { position: "end", children: v })
}
}
}
),
/* @__PURE__ */ e(a, { sx: { display: "flex", gap: 0.5 }, children: r.edit ? /* @__PURE__ */ l(f, { children: [
/* @__PURE__ */ e(
i,
{
color: "success",
onClick: p((...o) => {
b(...o), r.edit = !1;
}),
sx: {
borderRadius: 1,
border: "1px solid",
borderColor: "grey.200"
},
children: /* @__PURE__ */ e(t, { icon: D })
}
),
/* @__PURE__ */ e(
i,
{
color: "error",
onClick: I,
sx: {
borderRadius: 1,
border: "1px solid",
borderColor: "grey.200"
},
children: /* @__PURE__ */ e(t, { icon: j })
}
)
] }) : /* @__PURE__ */ l(f, { children: [
/* @__PURE__ */ e(
i,
{
onClick: () => {
r.edit = !0;
},
sx: {
borderRadius: 1,
border: "1px solid",
borderColor: "grey.200"
},
children: /* @__PURE__ */ e(t, { icon: P })
}
),
/* @__PURE__ */ e(
i,
{
color: "error",
onClick: () => {
h({
type: r.type,
url: r.url
});
},
sx: {
borderRadius: 1,
border: "1px solid",
borderColor: "grey.200"
},
children: /* @__PURE__ */ e(t, { icon: U })
}
)
] }) })
]
}
)
]
}
);
}
export {
or as default
};