@blocklet/ui-react/lib/UserCenter/components/user-info/link-preview-input.js

Some useful front-end web components that can be used in Blocklets.

import { jsx as t, jsxs as m } from "react/jsx-runtime";
import { useState as v, useMemo as b } from "react";
import { styled as L, Box as d, Typography as w, IconButton as C, Button as I, useTheme as k, FormControl as D, TextField as F } from "@mui/material";
import { Remove as S, Add as B } from "@mui/icons-material";
import { translate as E } from "@arcblock/ux/lib/Locale/util";
import { useMemoizedFn as T } from "ahooks";
import { useLocaleContext as U } from "@arcblock/ux/lib/Locale/context";
import j from "@arcblock/icons/lib/Link";
import { mergeSx as z } from "@arcblock/ux/lib/Util/style";
import { withoutProtocol as M } from "ufo";
import { isValidUrl as f } from "./utils.js";
import { translations as P } from "../../libs/locales.js";
import { inputFieldStyle as R, commonInputStyle as W } from "../editable-field.js";
function _(e) {
  return M(e);
}
function A({
  value: e,
  onChange: n,
  errorMsg: i
}) {
  return /* @__PURE__ */ t(D, { fullWidth: !0, children: /* @__PURE__ */ t(
    F,
    {
      variant: "outlined",
      value: e,
      onChange: (a) => {
        const c = a.target.value;
        n(c);
      },
      fullWidth: !0,
      error: !!i,
      helperText: i,
      sx: z(R, i ? {} : W)
    }
  ) });
}
function V({ links: e = [], onChange: n }) {
  const { locale: i } = U(), l = T((o, r = {}) => E(P, o, i, "en", r)), [a, c] = v([!1]), u = b(() => {
    const o = e[e.length - 1];
    return !f(o) || a.length > 0 && a[a.length - 1];
  }, [a, e]), x = () => {
    (e.length < 5 || !u) && n([...e, ""]);
  }, g = (o) => {
    const r = e.filter((p, h) => h !== o), s = a.filter((p, h) => h !== o);
    c(s), n(r);
  }, y = (o, r) => {
    const s = [...e];
    s[o] = r;
    const p = [...a];
    p[o] = !!(r && !f(r)), c(p), n(s);
  };
  return /* @__PURE__ */ m(
    d,
    {
      sx: {
        width: "100%"
      },
      children: [
        /* @__PURE__ */ t(
          d,
          {
            sx: {
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              gap: 1
            },
            children: /* @__PURE__ */ t(w, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: l("profile.socialMedia") })
          }
        ),
        e.map((o, r) => /* @__PURE__ */ m(
          d,
          {
            sx: {
              display: "flex",
              alignItems: "flex-start",
              mb: 1
            },
            children: [
              /* @__PURE__ */ t(
                A,
                {
                  value: o,
                  onChange: (s) => y(r, s),
                  errorMsg: a[r] ? l("profile.invalidURL") : ""
                }
              ),
              /* @__PURE__ */ t(C, { onClick: () => g(r), children: /* @__PURE__ */ t(S, { sx: { color: "text.secondary" } }) })
            ]
          },
          r
        )),
        e.length < 5 && /* @__PURE__ */ m(
          I,
          {
            fullWidth: !0,
            variant: "outlined",
            disabled: u,
            onClick: x,
            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__ */ t(B, {}),
              " ",
              /* @__PURE__ */ t("span", { children: l("profile.addLink") })
            ]
          }
        )
      ]
    }
  );
}
function $({ link: e }) {
  const i = k().palette.mode === "dark";
  return e ? /* @__PURE__ */ t(j, { width: 20, height: 20, style: { filter: i ? "brightness(0) saturate(100%) invert(1)" : "none" } }) : null;
}
function oe({
  editable: e = !1,
  links: n = [],
  onChange: i
}) {
  return e ? /* @__PURE__ */ t(V, { links: n, onChange: i }) : /* @__PURE__ */ t(
    d,
    {
      sx: {
        width: "100%",
        display: "flex",
        flexDirection: "column",
        gap: 2
      },
      children: n.map((l) => /* @__PURE__ */ m(
        d,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            gap: 1,
            overflow: "hidden",
            width: "100%"
          },
          children: [
            /* @__PURE__ */ t($, { link: l }),
            /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(d, { component: "a", href: l, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: _(l) }) })
          ]
        },
        l
      ))
    }
  );
}
const q = L("span")`
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &,
  & > * {
    color: ${({ theme: e }) => e.palette.text.primary};
  }

  & > * {
    word-break: break-all;
  }

  .status {
    margin-left: 8px;
  }
`;
export {
  oe as LinkPreviewInput
};