UNPKG

tldraw

Version:

A tiny little drawing editor.

8 lines (7 loc) 4.7 kB
{ "version": 3, "sources": ["../../../../../src/lib/ui/components/SharePanel/UserPresenceEditor.tsx"], "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\nimport { useCallback, useRef, useState } 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 { TldrawUiInput } from '../primitives/TldrawUiInput'\nimport { UserPresenceColorPicker } from './UserPresenceColorPicker'\n\nexport function UserPresenceEditor() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst userName = useValue('userName', () => editor.user.getName(), [])\n\tconst msg = useTranslation()\n\n\tconst rOriginalName = useRef(userName)\n\tconst rCurrentName = useRef(userName)\n\n\t// Whether the user is editing their name or not\n\tconst [isEditingName, setIsEditingName] = useState(false)\n\tconst toggleEditingName = useCallback(() => {\n\t\tsetIsEditingName((s) => !s)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: string) => {\n\t\t\trCurrentName.current = value\n\t\t\teditor.user.updateUserPreferences({ name: value })\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handleBlur = useCallback(() => {\n\t\tif (rOriginalName.current === rCurrentName.current) return\n\t\ttrackEvent('change-user-name', { source: 'people-menu' })\n\t\trOriginalName.current = rCurrentName.current\n\t}, [trackEvent])\n\n\tconst handleCancel = useCallback(() => {\n\t\tsetIsEditingName(false)\n\t\teditor.user.updateUserPreferences({ name: rOriginalName.current })\n\t\teditor.menus.clearOpenMenus()\n\t}, [editor])\n\n\treturn (\n\t\t<div className=\"tlui-people-menu__user\">\n\t\t\t<UserPresenceColorPicker />\n\t\t\t{isEditingName ? (\n\t\t\t\t<TldrawUiInput\n\t\t\t\t\tclassName=\"tlui-people-menu__user__input\"\n\t\t\t\t\tdefaultValue={userName}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\tonComplete={toggleEditingName}\n\t\t\t\t\tonCancel={handleCancel}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tshouldManuallyMaintainScrollPositionWhenFocused\n\t\t\t\t\tautoFocus\n\t\t\t\t\tautoSelect\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"tlui-people-menu__user__name\"\n\t\t\t\t\t\tonDoubleClick={() => {\n\t\t\t\t\t\t\tif (!isEditingName) setIsEditingName(true)\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{userName}\n\t\t\t\t\t</div>\n\t\t\t\t\t{userName === 'New User' ? (\n\t\t\t\t\t\t<div className=\"tlui-people-menu__user__label\">{msg('people-menu.user')}</div>\n\t\t\t\t\t) : null}\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\tclassName=\"tlui-people-menu__user__edit\"\n\t\t\t\tdata-testid=\"people-menu.change-name\"\n\t\t\t\ttitle={msg('people-menu.change-name')}\n\t\t\t\tonClick={toggleEditingName}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon icon={isEditingName ? 'check' : 'edit'} />\n\t\t\t</TldrawUiButton>\n\t\t</div>\n\t)\n}\n"], "mappings": "AA8CG,SAcC,UAdD,KAcC,YAdD;AA9CH,SAAS,WAAW,gBAAgB;AACpC,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AAEjC,SAAS,qBAAqB;AACpC,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,YAAY;AAC/B,QAAM,WAAW,SAAS,YAAY,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,CAAC;AACrE,QAAM,MAAM,eAAe;AAE3B,QAAM,gBAAgB,OAAO,QAAQ;AACrC,QAAM,eAAe,OAAO,QAAQ;AAGpC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,oBAAoB,YAAY,MAAM;AAC3C,qBAAiB,CAAC,MAAM,CAAC,CAAC;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAAC,UAAkB;AAClB,mBAAa,UAAU;AACvB,aAAO,KAAK,sBAAsB,EAAE,MAAM,MAAM,CAAC;AAAA,IAClD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,aAAa,YAAY,MAAM;AACpC,QAAI,cAAc,YAAY,aAAa,QAAS;AACpD,eAAW,oBAAoB,EAAE,QAAQ,cAAc,CAAC;AACxD,kBAAc,UAAU,aAAa;AAAA,EACtC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAe,YAAY,MAAM;AACtC,qBAAiB,KAAK;AACtB,WAAO,KAAK,sBAAsB,EAAE,MAAM,cAAc,QAAQ,CAAC;AACjE,WAAO,MAAM,eAAe;AAAA,EAC7B,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,qBAAC,SAAI,WAAU,0BACd;AAAA,wBAAC,2BAAwB;AAAA,IACxB,gBACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,cAAc;AAAA,QACd,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,iDAA+C;AAAA,QAC/C,WAAS;AAAA,QACT,YAAU;AAAA;AAAA,IACX,IAEA,iCACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,eAAe,MAAM;AACpB,gBAAI,CAAC,cAAe,kBAAiB,IAAI;AAAA,UAC1C;AAAA,UAEC;AAAA;AAAA,MACF;AAAA,MACC,aAAa,aACb,oBAAC,SAAI,WAAU,iCAAiC,cAAI,kBAAkB,GAAE,IACrE;AAAA,OACL;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO,IAAI,yBAAyB;AAAA,QACpC,SAAS;AAAA,QAET,8BAAC,sBAAmB,MAAM,gBAAgB,UAAU,QAAQ;AAAA;AAAA,IAC7D;AAAA,KACD;AAEF;", "names": [] }