UNPKG

tldraw

Version:

A tiny little drawing editor.

8 lines (7 loc) 4.01 kB
{ "version": 3, "sources": ["../../../../../src/lib/ui/components/SharePanel/PeopleMenuItem.tsx"], "sourcesContent": ["import { track, useEditor, usePresence } from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiIcon } from '../primitives/TldrawUiIcon'\nimport { TldrawUiRow } from '../primitives/layout'\n\nexport const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst presence = usePresence(userId)\n\n\tconst handleFollowClick = useCallback(() => {\n\t\tif (editor.getInstanceState().followingUserId === userId) {\n\t\t\teditor.stopFollowingUser()\n\t\t\ttrackEvent('stop-following', { source: 'people-menu' })\n\t\t} else {\n\t\t\teditor.startFollowingUser(userId)\n\t\t\ttrackEvent('start-following', { source: 'people-menu' })\n\t\t}\n\t}, [editor, userId, trackEvent])\n\n\tconst theyAreFollowingYou = presence?.followingUserId === editor.user.getId()\n\tconst youAreFollowingThem = editor.getInstanceState().followingUserId === userId\n\n\tif (!presence) return null\n\n\treturn (\n\t\t<TldrawUiRow\n\t\t\tclassName=\"tlui-people-menu__item\"\n\t\t\tdata-follow={youAreFollowingThem || theyAreFollowingYou}\n\t\t>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"menu\"\n\t\t\t\tclassName=\"tlui-people-menu__item__button\"\n\t\t\t\tonClick={() => editor.zoomToUser(userId)}\n\t\t\t\tonDoubleClick={handleFollowClick}\n\t\t\t>\n\t\t\t\t<TldrawUiIcon label={msg('people-menu.avatar-color')} icon=\"color\" color={presence.color} />\n\t\t\t\t<div className=\"tlui-people-menu__name\">\n\t\t\t\t\t{presence.userName?.trim() || msg('people-menu.anonymous-user')}\n\t\t\t\t</div>\n\t\t\t</TldrawUiButton>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\tclassName=\"tlui-people-menu__item__follow\"\n\t\t\t\ttitle={\n\t\t\t\t\ttheyAreFollowingYou\n\t\t\t\t\t\t? msg('people-menu.leading')\n\t\t\t\t\t\t: youAreFollowingThem\n\t\t\t\t\t\t\t? msg('people-menu.following')\n\t\t\t\t\t\t\t: msg('people-menu.follow')\n\t\t\t\t}\n\t\t\t\tonClick={handleFollowClick}\n\t\t\t\tdisabled={theyAreFollowingYou}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\ticon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}\n\t\t\t\t/>\n\t\t\t</TldrawUiButton>\n\t\t</TldrawUiRow>\n\t)\n})\n"], "mappings": "AAoCG,SAMC,KAND;AApCH,SAAS,OAAO,WAAW,mBAAmB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,iBAAiB,MAAM,SAASA,gBAAe,EAAE,OAAO,GAAuB;AAC3F,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY;AAE/B,QAAM,WAAW,YAAY,MAAM;AAEnC,QAAM,oBAAoB,YAAY,MAAM;AAC3C,QAAI,OAAO,iBAAiB,EAAE,oBAAoB,QAAQ;AACzD,aAAO,kBAAkB;AACzB,iBAAW,kBAAkB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACvD,OAAO;AACN,aAAO,mBAAmB,MAAM;AAChC,iBAAW,mBAAmB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACxD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,UAAU,CAAC;AAE/B,QAAM,sBAAsB,UAAU,oBAAoB,OAAO,KAAK,MAAM;AAC5E,QAAM,sBAAsB,OAAO,iBAAiB,EAAE,oBAAoB;AAE1E,MAAI,CAAC,SAAU,QAAO;AAEtB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAa,uBAAuB;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM,OAAO,WAAW,MAAM;AAAA,YACvC,eAAe;AAAA,YAEf;AAAA,kCAAC,gBAAa,OAAO,IAAI,0BAA0B,GAAG,MAAK,SAAQ,OAAO,SAAS,OAAO;AAAA,cAC1F,oBAAC,SAAI,WAAU,0BACb,mBAAS,UAAU,KAAK,KAAK,IAAI,4BAA4B,GAC/D;AAAA;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OACC,sBACG,IAAI,qBAAqB,IACzB,sBACC,IAAI,uBAAuB,IAC3B,IAAI,oBAAoB;AAAA,YAE7B,SAAS;AAAA,YACT,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACA,MAAM,sBAAsB,YAAY,sBAAsB,cAAc;AAAA;AAAA,YAC7E;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF,CAAC;", "names": ["PeopleMenuItem"] }