@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 h, Select as u, MenuItem as p } from "@mui/material";
import { useMemoizedFn as l, useReactive as x } from "ahooks";
import { translate as v } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as w } from "@arcblock/ux/lib/Locale/context";
import C from "@arcblock/ux/lib/Toast";
import y from "@arcblock/icons/lib/ArrowDown";
import { getBlockletSDK as I } from "@blocklet/js-sdk";
import { translations as b } from "../libs/locales.js";
import { formatAxiosError as S } from "../libs/utils.js";
const z = [
  { name: "English", code: "en" },
  { name: "中文", code: "zh" }
];
function T({ user: a, onSave: c }) {
  const { locale: s, changeLocale: m } = w(), d = I(), f = l((e, o = {}) => v(b, e, s, "en", o)), t = x({
    locale: a.locale,
    loading: !1
  }), g = l(async (e) => {
    try {
      const { value: o } = e.target;
      t.loading = !0, await d.user.saveProfile({
        locale: o
      }), await c("profile"), m(o), t.locale = o;
    } catch (o) {
      C.error(S(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: f("commonSetting.locale") }),
        /* @__PURE__ */ i(n, { children: [
          t.loading ? /* @__PURE__ */ r(
            h,
            {
              color: "primary",
              sx: {
                height: 2
              }
            }
          ) : /* @__PURE__ */ r(
            n,
            {
              sx: {
                height: 2,
                visibility: "hidden"
              }
            }
          ),
          /* @__PURE__ */ r(
            u,
            {
              value: t.locale,
              onChange: g,
              size: "small",
              IconComponent: (e) => /* @__PURE__ */ r(y, { ...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(p, { value: e.code, children: e.name }, e.code))
            }
          )
        ] })
      ]
    }
  );
}
export {
  T as default
};