@blocklet/ui-react/lib/common/org-switch/create.js

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

import { jsxs as m, jsx as o, Fragment as P } from "react/jsx-runtime";
import { useState as D, useEffect as q } from "react";
import a from "prop-types";
import { useMemoizedFn as d, useReactive as U } from "ahooks";
import u from "lodash/noop";
import G from "@arcblock/ux/lib/Dialog";
import { DialogContentText as H, Box as J, Typography as p, TextField as w, Alert as K, CircularProgress as N } from "@mui/material";
import Q from "@arcblock/ux/lib/Toast";
import O from "@arcblock/ux/lib/Button";
import { translate as V } from "@arcblock/ux/lib/Locale/util";
import { formatAxiosError as X } from "../../UserCenter/libs/utils.js";
import Y from "./use-org.js";
import Z from "./locales.js";
import $ from "./avatar-uploader.js";
const f = "create", g = "edit";
function v({
  mode: _ = f,
  org: i = null,
  onSuccess: b = u,
  onCancel: h = u,
  locale: M = "en",
  teamDid: A = "",
  prefix: F = "/.well-known/service",
  headers: B = u
}) {
  const s = _ === g, [c, y] = D(!1), [E, n] = D(""), { createOrg: k, updateOrg: z } = Y(), I = A || (typeof window < "u" ? window.blocklet?.did : ""), e = d((r, l = {}) => V(Z, r, M, "en", l)), t = U({
    name: "",
    description: "",
    avatar: ""
  });
  q(() => {
    s && i && (t.name = i.name || "", t.description = i.description || "", t.avatar = i.avatar || "");
  }, [s, i]);
  const L = d((r) => {
    n(""), t.avatar = r;
  }), R = d(() => {
    const r = t.name.trim();
    return r ? r.length > 25 ? (n(e("nameTooLong", { length: 25 })), !1) : t.description.trim().length > 255 ? (n(e("descriptionTooLong", { length: 255 })), !1) : t.avatar ? !0 : (n(e("avatarEmpty")), !1) : (n(e("nameEmpty")), !1);
  }), S = async () => {
    if (!R())
      return;
    n(""), y(!0);
    const r = t.name.trim(), l = t.description.trim(), T = t.avatar;
    try {
      s && i?.id ? await z(i.id, {
        name: r,
        description: l,
        avatar: T
      }) : await k({
        name: r,
        description: l,
        avatar: T
      }), b();
    } catch (x) {
      console.error(x);
      const C = X(x);
      n(C), Q.error(C);
    } finally {
      y(!1);
    }
  }, W = s ? e("mutate.title", { mode: e("edit") }) : e("mutate.title", { mode: e("create") }), j = e(s ? "save" : "create");
  return /* @__PURE__ */ m(
    G,
    {
      title: W,
      fullWidth: !0,
      open: !0,
      onClose: h,
      showCloseButton: !1,
      actions: /* @__PURE__ */ m(P, { children: [
        /* @__PURE__ */ o(O, { onClick: h, color: "inherit", children: e("cancel") }),
        /* @__PURE__ */ m(
          O,
          {
            "data-cy": "mutate-org-confirm",
            onClick: S,
            color: "primary",
            disabled: c,
            variant: "contained",
            autoFocus: !0,
            children: [
              c && /* @__PURE__ */ o(N, { size: 16, sx: { mr: 1 } }),
              j
            ]
          }
        )
      ] }),
      children: [
        /* @__PURE__ */ m(H, { component: "div", children: [
          /* @__PURE__ */ m(
            J,
            {
              sx: {
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                py: 2
              },
              children: [
                /* @__PURE__ */ o(
                  $,
                  {
                    org: s ? i : { name: t.name },
                    size: 90,
                    teamDid: I,
                    prefix: F,
                    headers: B,
                    onChange: L,
                    value: t.avatar,
                    editable: !0
                  }
                ),
                /* @__PURE__ */ o(p, { variant: "caption", color: "text.secondary", sx: { mt: 1 }, children: e("avatar") })
              ]
            }
          ),
          /* @__PURE__ */ o(p, { component: "div", style: { marginTop: 16 }, children: /* @__PURE__ */ o(
            w,
            {
              label: e("mutate.name"),
              autoComplete: "off",
              variant: "outlined",
              name: "name",
              "data-cy": "mutate-org-input-name",
              fullWidth: !0,
              autoFocus: !0,
              value: t.name,
              onChange: (r) => {
                n(""), t.name = r.target.value;
              },
              disabled: c,
              required: !0
            }
          ) }),
          /* @__PURE__ */ o(p, { component: "div", style: { marginTop: 16, marginBottom: 16 }, children: /* @__PURE__ */ o(
            w,
            {
              label: e("mutate.description"),
              autoComplete: "off",
              variant: "outlined",
              name: "description",
              "data-cy": "mutate-org-input-description",
              fullWidth: !0,
              value: t.description,
              onChange: (r) => {
                n(""), t.description = r.target.value;
              },
              disabled: c,
              multiline: !0,
              rows: 3
            }
          ) })
        ] }),
        !!E && /* @__PURE__ */ o(K, { severity: "error", style: { width: "100%", margin: 0 }, children: E })
      ]
    }
  );
}
v.propTypes = {
  /** 操作模式：'create' 创建 | 'edit' 编辑 */
  mode: a.oneOf([f, g]),
  /** 编辑模式下的组织数据 */
  org: a.shape({
    id: a.string,
    name: a.string,
    description: a.string,
    avatar: a.string
  }),
  onSuccess: a.func,
  onCancel: a.func,
  locale: a.string,
  teamDid: a.string,
  prefix: a.string,
  headers: a.func
};
v.MODE_CREATE = f;
v.MODE_EDIT = g;
export {
  v as CreateOrgDialog,
  v as default
};