@blocklet/ui-react/lib/UserCenter/components/config-profile.js

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

import { jsxs as i, jsx as r } from "react/jsx-runtime";
import { Box as n, LinearProgress as g, Select as h, MenuItem as u } from "@mui/material";
import { useMemoizedFn as l, useReactive as p } from "ahooks";
import { translate as x } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as v } from "@arcblock/ux/lib/Locale/context";
import w from "@arcblock/ux/lib/Toast";
import C from "@arcblock/icons/lib/ArrowDown";
import { translations as y } from "../libs/locales.js";
import { client as I } from "../../libs/client.js";
import { formatAxiosError as b } from "../libs/utils.js";
const z = [
  { name: "English", code: "en" },
  { name: "中文", code: "zh" }
];
function B({ user: a, onSave: s }) {
  const { locale: c, changeLocale: m } = v(), d = l((e, o = {}) => x(y, e, c, "en", o)), t = p({
    locale: a.locale,
    loading: !1
  }), f = l(async (e) => {
    try {
      const { value: o } = e.target;
      t.loading = !0, await I.user.saveProfile({
        locale: o
      }), await s("profile"), m(o), t.locale = o;
    } catch (o) {
      w.error(b(o));
    } finally {
      t.loading = !1;
    }
  });
  return /* @__PURE__ */ i(
    n,
    {
      sx: {
        gap: 1,
        display: "grid",
        alignItems: "center",
        gridTemplateColumns: {
          xs: "1fr",
          sm: "max-content 1fr"
        }
      },
      children: [
        /* @__PURE__ */ r(n, { children: d("commonSetting.locale") }),
        /* @__PURE__ */ i(n, { children: [
          t.loading ? /* @__PURE__ */ r(
            g,
            {
              color: "primary",
              sx: {
                height: 2
              }
            }
          ) : /* @__PURE__ */ r(
            n,
            {
              sx: {
                height: 2,
                visibility: "hidden"
              }
            }
          ),
          /* @__PURE__ */ r(
            h,
            {
              value: t.locale,
              onChange: f,
              size: "small",
              IconComponent: (e) => /* @__PURE__ */ r(C, { ...e, width: 20, height: 20 }),
              sx: {
                minWidth: 200,
                "&:hover": {
                  "fieldset.MuiOutlinedInput-notchedOutline": {
                    borderColor: "divider"
                  }
                },
                fieldset: {
                  borderColor: "divider"
                }
              },
              children: (window.blocklet.languages || z).map((e) => /* @__PURE__ */ r(u, { value: e.code, children: e.name }, e.code))
            }
          )
        ] })
      ]
    }
  );
}
export {
  B as default
};