tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 4.42 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../../src/lib/ui/components/SharePanel/PeopleMenu.tsx"],
"sourcesContent": ["import * as Popover from '@radix-ui/react-popover'\nimport { preventDefault, useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { ReactNode } from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tdisplayUserWhenAlone: boolean\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ displayUserWhenAlone, children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\n\treturn (\n\t\t<Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t{userIds.length > 5 && <PeopleMenuMore count={userIds.length - 5} />}\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-5).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{(displayUserWhenAlone || userIds.length > 0) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName === 'New User' ? '' : userName[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</Popover.Trigger>\n\t\t\t<Popover.Portal container={container}>\n\t\t\t\t<Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t\tonEscapeKeyDown={preventDefault}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</Popover.Content>\n\t\t\t</Popover.Portal>\n\t\t</Popover.Root>\n\t)\n}\n"],
"mappings": "AAiC4B,cACvB,YADuB;AAjC5B,YAAY,aAAa;AACzB,SAAS,gBAAgB,cAAc,WAAW,YAAY,gBAAgB;AAE9E,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAS5B,SAAS,WAAW,EAAE,sBAAsB,SAAS,GAAoB;AAC/E,QAAM,MAAM,eAAe;AAE3B,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,UAAU;AAEzB,QAAM,UAAU,WAAW;AAC3B,QAAM,YAAY,SAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,WAAW,SAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,aAAa;AAE1D,SACC,qBAAC,QAAQ,MAAR,EAAa,cAA4B,MAAM,QAC/C;AAAA,wBAAC,QAAQ,SAAR,EAAgB,KAAI,OAAM,SAAO,MACjC,+BAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GACjF;AAAA,cAAQ,SAAS,KAAK,oBAAC,kBAAe,OAAO,QAAQ,SAAS,GAAG;AAAA,MAClE,qBAAC,SAAI,WAAU,6BACb;AAAA,gBAAQ,MAAM,EAAE,EAAE,IAAI,CAAC,WACvB,oBAAC,oBAA8B,UAAR,MAAwB,CAC/C;AAAA,SACC,wBAAwB,QAAQ,SAAS,MAC1C;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAO;AAAA,cACN,iBAAiB;AAAA,YAClB;AAAA,YAEC,uBAAa,aAAa,KAAK,SAAS,CAAC,KAAK;AAAA;AAAA,QAChD;AAAA,SAEF;AAAA,OACD,GACD;AAAA,IACA,oBAAC,QAAQ,QAAR,EAAe,WACf;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAClB,iBAAiB;AAAA,QAEjB,+BAAC,SAAI,WAAU,6BACd;AAAA,8BAAC,SAAI,WAAU,6BACd,8BAAC,sBAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,oBAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,oBAAC,kBAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
"names": []
}