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

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

import { jsxs as E, jsx as n, Fragment as k } from "react/jsx-runtime";
import { lazy as M, useRef as D, useState as I, useMemo as g, Suspense as T } from "react";
import v from "lodash/noop";
import e from "prop-types";
import { Box as b, CircularProgress as X } from "@mui/material";
import { styled as Z } from "@arcblock/ux/lib/Theme";
import { joinURL as y } from "ufo";
import { useMemoizedFn as l } from "ahooks";
import $ from "@mui/icons-material/CameraAlt";
import { translate as K } from "@arcblock/ux/lib/Locale/util";
import q from "@arcblock/ux/lib/Img";
import B from "./locales.js";
const H = M(() => import("@blocklet/uploader").then((t) => ({ default: t.Uploader }))), P = "/blocklet", V = [".png", ".jpg", ".jpeg", ".webp", ".bmp", ".ico"], G = 5 * 1024 * 1024, A = 256, S = 3;
function J(t, o, a) {
  return y(t, P, o, "orgs", "avatar", a);
}
function Q(t, o) {
  return y(t, P, o, "orgs", "avatar", "upload");
}
function Y({
  org: t = null,
  size: o = 80,
  teamDid: a = "",
  prefix: i = "/.well-known/service",
  locale: U = "en",
  headers: R = v,
  onChange: O = v,
  onError: x = v,
  editable: p = !0
}) {
  const C = l((r, h = {}) => K(B, r, U, "en", h)), u = D(null), [d, c] = I(!1), [m, F] = I(""), s = g(() => a || (typeof window < "u" ? window.blocklet?.did : ""), [a]), f = g(() => s ? Q(i, s) : null, [i, s]), _ = p && !!f, z = l(() => {
    _ && !d && u.current?.open();
  }), L = l((r) => {
    u.current?.close(), c(!1);
    const { avatarPath: h } = r.data;
    F(r.uploadURL), O(h);
  }), N = l(() => {
    c(!0);
  }), W = l((r) => {
    c(!1), console.error("Avatar upload failed:", r), x(r);
  }), w = g(() => {
    if (m)
      return m;
    const r = t?.avatar;
    return r ? t?.id ? J(i, s, r) : r.startsWith("http://") || r.startsWith("https://") || r.startsWith("/") ? r : y(i, r) : null;
  }, [m, t?.avatar, t?.id, i, s]), j = t?.name || "";
  return /* @__PURE__ */ E(tt, { $size: o, $editable: p, $uploading: d, onClick: z, children: [
    f && /* @__PURE__ */ n(T, { fallback: null, children: /* @__PURE__ */ n(
      H,
      {
        ref: u,
        locale: U,
        popup: !0,
        onUploadFinish: L,
        onUploadStart: N,
        onError: W,
        plugins: ["ImageEditor"],
        installerProps: { disabled: !0 },
        apiPathProps: {
          uploader: f,
          disableMediaKitPrefix: !0,
          disableMediaKitStatus: !0
        },
        coreProps: {
          restrictions: {
            allowedFileExts: V,
            maxFileSize: G,
            maxNumberOfFiles: 1
          }
        },
        dashboardProps: {
          autoOpen: "imageEditor"
        },
        imageEditorProps: {
          actions: {
            revert: !0,
            rotate: !0,
            granularRotate: !0,
            flip: !0,
            zoomIn: !0,
            zoomOut: !0,
            cropSquare: !1,
            cropWidescreen: !1,
            cropWidescreenVertical: !1
          },
          cropperOptions: {
            autoCrop: !0,
            autoCropArea: 1,
            aspectRatio: 1,
            initialAspectRatio: 1,
            croppedCanvasOptions: {
              minWidth: A,
              minHeight: A
            }
          }
        },
        tusProps: {
          headers: R
        }
      }
    ) }),
    /* @__PURE__ */ n(
      q,
      {
        src: w || "",
        alt: j,
        width: o,
        height: o,
        ratio: 1,
        size: "cover",
        position: "center",
        lazy: !1,
        style: {
          borderRadius: "50%",
          overflow: "hidden"
        }
      },
      w || "no-avatar"
    ),
    p && /* @__PURE__ */ n(b, { className: "upload-overlay", children: d ? /* @__PURE__ */ n(X, { size: o / S, sx: { color: "white" } }) : /* @__PURE__ */ E(k, { children: [
      /* @__PURE__ */ n($, { sx: { fontSize: o / S, color: "white" } }),
      /* @__PURE__ */ n(b, { component: "span", sx: { fontSize: 12, color: "white" }, children: C("upload") })
    ] }) })
  ] });
}
Y.propTypes = {
  org: e.shape({
    id: e.string,
    name: e.string,
    avatar: e.string
  }),
  size: e.number,
  teamDid: e.string,
  prefix: e.string,
  headers: e.func,
  onChange: e.func,
  onError: e.func,
  editable: e.bool,
  locale: e.string
};
const tt = Z(b, {
  shouldForwardProp: (t) => !["$size", "$editable", "$uploading"].includes(t)
})(({ $size: t, $editable: o, $uploading: a }) => ({
  position: "relative",
  width: t,
  height: t,
  borderRadius: "50%",
  overflow: "hidden",
  cursor: o && !a ? "pointer" : "default",
  ".upload-overlay": {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    opacity: a ? 1 : 0,
    transition: "opacity 0.2s ease-in-out"
  },
  "&:hover .upload-overlay": {
    opacity: o ? 1 : 0
  }
}));
export {
  Y as default
};