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

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

import { jsx as a } from "react/jsx-runtime";
import { Box as f, Typography as x } from "@mui/material";
import d from "@arcblock/ux/lib/Switch";
import { useState as w } from "react";
import { useMemoizedFn as l } from "ahooks";
import { translate as y } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as v } from "@arcblock/ux/lib/Locale/context";
import c from "@arcblock/ux/lib/Toast";
import { translations as S } from "../libs/locales.js";
import { client as g } from "../../libs/client.js";
import { formatAxiosError as b } from "../libs/utils.js";
function A({
  configList: n,
  onSave: m
}) {
  const [i, u] = w(n), { locale: p } = v(), s = l((r, t = {}) => y(S, r, p, "en", t)), h = l(async (r, t) => {
    try {
      const e = await g.user.saveUserPrivacyConfig({
        [r]: !t
      });
      u(
        i.map((o) => ({
          ...o,
          value: e?.[o.key] ?? o.value
        }))
      ), c.success(s("saveSuccess")), m("privacy");
    } catch (e) {
      c.error(b(e));
    }
  });
  return /* @__PURE__ */ a(
    f,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        gap: 1,
        alignItems: "start",
        ".MuiFormControlLabel-root": {
          gap: 1,
          m: 0,
          flexDirection: {
            xs: "row-reverse",
            md: "row"
          },
          width: {
            xs: "100%",
            md: "unset"
          }
        },
        ".MuiSwitch-track": {
          borderRadius: "100vw"
        },
        ".MuiSwitch-thumb": {
          borderRadius: "100%"
        },
        ".MuiSwitch-root.MuiSwitch-sizeSmall": {
          height: "20px",
          width: "36px",
          ".MuiSwitch-thumb": {
            width: "16px",
            height: "16px"
          }
        }
      },
      children: i.map((r) => r.isPrivate ? null : /* @__PURE__ */ a(
        d,
        {
          checked: !r.value,
          labelProps: {
            label: /* @__PURE__ */ a(
              x,
              {
                sx: {
                  color: "text.primary",
                  fontSize: 14,
                  display: "flex",
                  flexFlow: "wrap",
                  columnGap: 1,
                  flex: 1
                },
                children: s("toPublic", { name: r.name })
              }
            )
          },
          size: "small",
          onChange: (t) => h(r.key, t.target.checked)
        },
        r.key
      ))
    }
  );
}
export {
  A as default
};