tldraw/dist-cjs/lib/ui/components/SharePanel/PeopleMenu.js

A tiny little drawing editor.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var PeopleMenu_exports = {};
__export(PeopleMenu_exports, {
  PeopleMenu: () => PeopleMenu
});
module.exports = __toCommonJS(PeopleMenu_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_editor = require("@tldraw/editor");
var import_radix_ui = require("radix-ui");
var import_constants = require("../../constants");
var import_breakpoints = require("../../context/breakpoints");
var import_useCollaborationStatus = require("../../hooks/useCollaborationStatus");
var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
var import_OfflineIndicator = require("../OfflineIndicator/OfflineIndicator");
var import_PeopleMenuAvatar = require("./PeopleMenuAvatar");
var import_PeopleMenuItem = require("./PeopleMenuItem");
var import_PeopleMenuMore = require("./PeopleMenuMore");
var import_UserPresenceEditor = require("./UserPresenceEditor");
function PeopleMenu({ children }) {
  const msg = (0, import_useTranslation.useTranslation)();
  const container = (0, import_editor.useContainer)();
  const editor = (0, import_editor.useEditor)();
  const userIds = (0, import_editor.usePeerIds)();
  const userColor = (0, import_editor.useValue)("user", () => editor.user.getColor(), [editor]);
  const userName = (0, import_editor.useValue)("user", () => editor.user.getName(), [editor]);
  const [isOpen, onOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)("people menu");
  const breakpoint = (0, import_breakpoints.useBreakpoint)();
  const maxAvatars = breakpoint <= import_constants.PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5;
  const collaborationStatus = (0, import_useCollaborationStatus.useCollaborationStatus)();
  if (collaborationStatus === "offline") {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OfflineIndicator.OfflineIndicator, {});
  }
  if (!userIds.length) return null;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_radix_ui.Popover.Root, { onOpenChange, open: isOpen, children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Trigger, { dir: "ltr", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "tlui-people-menu__avatars-button", title: msg("people-menu.title"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-people-menu__avatars", children: [
      userIds.slice(-maxAvatars).map((userId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuAvatar.PeopleMenuAvatar, { userId }, userId)),
      userIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "div",
        {
          className: "tlui-people-menu__avatar",
          style: {
            backgroundColor: userColor
          },
          children: userName?.[0] ?? ""
        }
      ),
      userIds.length > maxAvatars && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuMore.PeopleMenuMore, { count: userIds.length - maxAvatars })
    ] }) }) }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_radix_ui.Popover.Content,
      {
        dir: "ltr",
        className: "tlui-menu",
        side: "bottom",
        sideOffset: 2,
        collisionPadding: 4,
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-people-menu__wrapper", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-people-menu__section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_UserPresenceEditor.UserPresenceEditor, {}) }),
          userIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-people-menu__section", children: userIds.map((userId) => {
            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuItem.PeopleMenuItem, { userId }, userId + "_presence");
          }) }),
          children
        ] })
      }
    ) })
  ] });
}
//# sourceMappingURL=PeopleMenu.js.map