@blocklet/ui-react/lib/UserCenter/components/settings.js

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

import { jsx as o, jsxs as y } from "react/jsx-runtime";
import { useEffect as v } from "react";
import { Box as s, Typography as x } from "@mui/material";
import { ROLES as b } from "@abtnode/constant";
import { useMemoizedFn as S, useCreation as l } from "ahooks";
import { translate as C } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as w } from "@arcblock/ux/lib/Locale/context";
import { mergeSx as L } from "@arcblock/ux/lib/Util/style";
import D from "@arcblock/react-hooks/lib/useBrowser";
import { getBlockletSDK as P } from "@blocklet/js-sdk";
import { translations as T } from "../libs/locales.js";
import B from "./notification.js";
import E from "./privacy.js";
import M from "../../UserSessions/components/user-sessions.js";
import W from "./third-party-login/index.js";
import O from "./config-profile.js";
import R from "./danger-zone.js";
function _({
  user: r,
  settings: a,
  onSave: m,
  isMobile: c,
  ...i
}) {
  const p = P(), { locale: d } = w(), u = D().arcSphere, n = S((e, t = {}) => C(T, e, d, "en", t)), g = l(() => r.passports?.some((e) => e.role === b.OWNER), [r]), f = l(() => (a?.userCenterTabs || []).map((t) => ({
    key: t.value,
    name: t.label,
    value: t.protected,
    isPrivate: t.isPrivate
  })), [a?.userCenterTabs]), h = l(() => [
    u ? void 0 : {
      label: n("commonSetting.title"),
      value: "common",
      content: /* @__PURE__ */ o(O, { user: r, onSave: m })
    },
    {
      label: n("notificationManagement"),
      value: "notification",
      content: /* @__PURE__ */ o(B, { user: r, isMobile: c })
    },
    {
      label: n("thirdPartyLogin.title"),
      value: "thirdPartyLogin",
      content: /* @__PURE__ */ o(W, { user: r })
    },
    {
      label: n("privacyManagement"),
      value: "privacy",
      // @ts-ignore
      content: /* @__PURE__ */ o(E, { configList: f, onSave: m })
    },
    {
      label: n("sessionManagement"),
      value: "session",
      content: /* @__PURE__ */ o(
        M,
        {
          user: r,
          showUser: !1,
          getUserSessions: (e) => p.userSession.getMyLoginSessions({}, e)
        }
      )
    },
    !g && i.onDestroySelf && typeof i.onDestroySelf == "function" ? {
      label: n("dangerZone.title"),
      value: "dangerZone",
      content: /* @__PURE__ */ o(R, { onDestroySelf: i.onDestroySelf }),
      sx: {
        borderColor: "error.main"
      }
    } : null
  ].filter(Boolean), [r, f, c]);
  return v(() => {
    const e = window.location.hash.slice(1);
    e && document.getElementById(e)?.scrollIntoView({ behavior: "smooth" });
  }, []), /* @__PURE__ */ o(
    s,
    {
      ...i,
      sx: {
        ...i?.sx,
        display: "flex",
        flexDirection: "column",
        gap: 2.5,
        minWidth: {
          md: 500
        },
        maxWidth: "100%"
      },
      children: h.map((e) => e ? /* @__PURE__ */ y(
        s,
        {
          id: e.value,
          sx: L(
            {
              border: "1px solid",
              borderColor: "divider",
              borderRadius: 1,
              p: 2,
              "&:last-child": {
                mb: 5
              }
            },
            e.sx
          ),
          children: [
            /* @__PURE__ */ o(
              x,
              {
                sx: {
                  color: "text.primary",
                  fontWeight: 600
                },
                children: e.label
              }
            ),
            /* @__PURE__ */ o(
              s,
              {
                sx: {
                  mt: 2.5
                },
                children: e.content
              }
            )
          ]
        },
        e.value
      ) : null)
    }
  );
}
export {
  _ as default
};