@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
198 lines (195 loc) • 5.85 kB
JavaScript
import { jsx as e, jsxs as f } from "react/jsx-runtime";
import { useState as I, useMemo as C } from "react";
import { Box as p, Typography as y, IconButton as k, Button as D, useTheme as U, styled as S, FormControl as B, TextField as F } from "@mui/material";
import { Remove as T, Add as _ } from "@mui/icons-material";
import { translate as z } from "@arcblock/ux/lib/Locale/util";
import { useMemoizedFn as E } from "ahooks";
import { useLocaleContext as M } from "@arcblock/ux/lib/Locale/context";
import R from "@arcblock/icons/lib/Link";
import { mergeSx as j } from "@arcblock/ux/lib/Util/style";
import { withoutProtocol as A } from "ufo";
import { Icon as P } from "@iconify/react";
import { isValidUrl as h, getLogoByUrl as W, isDuplicateUrl as N } from "./utils.js";
import { translations as V } from "../../libs/locales.js";
import { inputFieldStyle as K, commonInputStyle as O } from "../editable-field.js";
const g = 10;
function X(t) {
return A(t);
}
function $({
value: t,
onChange: s,
errorMsg: l
}) {
return /* @__PURE__ */ e(B, { fullWidth: !0, children: /* @__PURE__ */ e(
F,
{
variant: "outlined",
value: t,
onChange: (i) => {
const u = i.target.value;
s(u);
},
fullWidth: !0,
error: !!l,
helperText: l,
sx: j(K, l ? {} : O)
}
) });
}
function q({ links: t = [], onChange: s }) {
const { locale: l } = M(), r = E((o, n = {}) => z(V, o, l, "en", n)), [i, u] = I([""]), x = C(() => {
const o = t[t.length - 1];
return !h(o) || i.length > 0 && i[i.length - 1];
}, [i, t]), v = () => {
(t.length < g || !x) && s([...t, ""]);
}, L = (o) => {
const n = t.filter((c, d) => d !== o), a = i.filter((c, d) => d !== o);
u(a), s(n);
}, b = (o, n) => {
const a = [...t];
a[o] = n;
const c = [...i], d = !!(n && !h(n));
c[o] = !1, d ? c[o] = d : a.filter((m, w) => m && h(m) && w !== o).some((m) => N(m, n)) && (c[o] = "duplicate"), u(c), s(a);
};
return /* @__PURE__ */ f(
p,
{
sx: {
width: "100%"
},
children: [
/* @__PURE__ */ e(
p,
{
sx: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: 1
},
children: /* @__PURE__ */ e(y, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: r("profile.socialMedia") })
}
),
t.map((o, n) => {
let a = "";
return i[n] === "duplicate" ? a = r("profile.duplicateURL") : i[n] === !0 ? a = r("profile.invalidURL") : a = "", /* @__PURE__ */ f(
p,
{
sx: {
display: "flex",
alignItems: "flex-start",
mb: 1
},
children: [
/* @__PURE__ */ e($, { value: o, onChange: (c) => b(n, c), errorMsg: a }),
/* @__PURE__ */ e(k, { onClick: () => L(n), children: /* @__PURE__ */ e(T, { sx: { color: "text.secondary" } }) })
]
},
n
);
}),
t.length < g ? /* @__PURE__ */ f(
D,
{
fullWidth: !0,
variant: "outlined",
disabled: !!x,
onClick: v,
size: "small",
sx: {
height: "40px",
border: "1px dashed",
borderColor: "grey.100",
color: "text.primary",
"&:hover": {
borderColor: "grey.100",
backgroundColor: "action.hover"
},
"&.Mui-disabled": {
borderStyle: "dashed"
}
},
children: [
/* @__PURE__ */ e(_, {}),
" ",
/* @__PURE__ */ e("span", { children: r("profile.addLink") })
]
}
) : /* @__PURE__ */ e(y, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.secondary" }, children: r("profile.maxLinkCount", { count: g }) })
]
}
);
}
function G({ link: t }) {
const l = U().palette.mode === "dark";
if (!t)
return null;
const { icon: r, options: i } = W(t) || {};
return r ? /* @__PURE__ */ e(
P,
{
icon: r,
width: 20,
height: 20,
style: {
filter: l && !i?.skipDarkInvert ? "brightness(0) saturate(100%) invert(1)" : "none",
transform: "scale(0.8)"
},
...i
}
) : /* @__PURE__ */ e(R, { width: 20, height: 20, style: { filter: l ? "brightness(0) saturate(100%) invert(1)" : "none" } });
}
function ut({
editable: t = !1,
links: s = [],
onChange: l
}) {
return t ? /* @__PURE__ */ e(q, { links: s, onChange: l }) : /* @__PURE__ */ e(
p,
{
sx: {
width: "100%",
display: "flex",
flexDirection: "column",
gap: 2
},
children: s.map((r) => /* @__PURE__ */ f(
p,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1,
overflow: "hidden",
width: "100%"
},
children: [
/* @__PURE__ */ e(G, { link: r }),
/* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(p, { component: "a", href: r, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: X(r) }) })
]
},
r
))
}
);
}
const H = S("span")`
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&,
& > * {
color: ${({ theme: t }) => t.palette.text.primary};
}
& > * {
word-break: break-all;
}
.status {
margin-left: 8px;
}
`;
export {
ut as LinkPreviewInput
};