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