tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 3.83 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../src/lib/ui/components/Dialogs.tsx"],
"sourcesContent": ["import { useContainer, useValue } from '@tldraw/editor'\nimport { Dialog as _Dialog } from 'radix-ui'\nimport { memo, useCallback, useRef } from 'react'\nimport { TLUiDialog, useDialogs } from '../context/dialogs'\n\n/** @internal */\nconst TldrawUiDialog = ({ id, component: ModalContent, preventBackgroundClose }: TLUiDialog) => {\n\tconst { removeDialog } = useDialogs()\n\tconst mouseDownInsideContentRef = useRef(false)\n\n\tconst container = useContainer()\n\n\tconst handleOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tremoveDialog(id)\n\t\t\t}\n\t\t},\n\t\t[id, removeDialog]\n\t)\n\n\treturn (\n\t\t<_Dialog.Root onOpenChange={handleOpenChange} defaultOpen>\n\t\t\t<_Dialog.Portal container={container}>\n\t\t\t\t<_Dialog.Overlay\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-dialog__overlay\"\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t// We pressed mouse down inside the content of the dialog then moved the mouse\n\t\t\t\t\t\t// outside it and let go of the mouse button. This should not close the dialog.\n\t\t\t\t\t\tif (mouseDownInsideContentRef.current) return\n\t\t\t\t\t\t// only close if the click is on the overlay itself, ignore bubbling clicks\n\t\t\t\t\t\tif (!preventBackgroundClose && e.target === e.currentTarget) handleOpenChange(false)\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<_Dialog.Content\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tclassName=\"tlui-dialog__content\"\n\t\t\t\t\t\taria-describedby={undefined}\n\t\t\t\t\t\tonMouseDown={() => (mouseDownInsideContentRef.current = true)}\n\t\t\t\t\t\tonMouseUp={() => (mouseDownInsideContentRef.current = false)}\n\t\t\t\t\t\tonInteractOutside={(e) => {\n\t\t\t\t\t\t\tmouseDownInsideContentRef.current = false\n\t\t\t\t\t\t\tif (preventBackgroundClose) {\n\t\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ModalContent\n\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\tmouseDownInsideContentRef.current = false\n\t\t\t\t\t\t\t\thandleOpenChange(false)\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</_Dialog.Content>\n\t\t\t\t</_Dialog.Overlay>\n\t\t\t</_Dialog.Portal>\n\t\t</_Dialog.Root>\n\t)\n}\n\n/** @public @react */\nexport const DefaultDialogs = memo(function DefaultDialogs() {\n\tconst { dialogs } = useDialogs()\n\tconst dialogsArray = useValue('dialogs', () => dialogs.get(), [dialogs])\n\treturn dialogsArray.map((dialog) => <TldrawUiDialog key={dialog.id} {...dialog} />)\n})\n"],
"mappings": "AAgDM;AAhDN,SAAS,cAAc,gBAAgB;AACvC,SAAS,UAAU,eAAe;AAClC,SAAS,MAAM,aAAa,cAAc;AAC1C,SAAqB,kBAAkB;AAGvC,MAAM,iBAAiB,CAAC,EAAE,IAAI,WAAW,cAAc,uBAAuB,MAAkB;AAC/F,QAAM,EAAE,aAAa,IAAI,WAAW;AACpC,QAAM,4BAA4B,OAAO,KAAK;AAE9C,QAAM,YAAY,aAAa;AAE/B,QAAM,mBAAmB;AAAA,IACxB,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,qBAAa,EAAE;AAAA,MAChB;AAAA,IACD;AAAA,IACA,CAAC,IAAI,YAAY;AAAA,EAClB;AAEA,SACC,oBAAC,QAAQ,MAAR,EAAa,cAAc,kBAAkB,aAAW,MACxD,8BAAC,QAAQ,QAAR,EAAe,WACf;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,KAAI;AAAA,MACJ,WAAU;AAAA,MACV,SAAS,CAAC,MAAM;AAGf,YAAI,0BAA0B,QAAS;AAEvC,YAAI,CAAC,0BAA0B,EAAE,WAAW,EAAE,cAAe,kBAAiB,KAAK;AAAA,MACpF;AAAA,MAEA;AAAA,QAAC,QAAQ;AAAA,QAAR;AAAA,UACA,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,oBAAkB;AAAA,UAClB,aAAa,MAAO,0BAA0B,UAAU;AAAA,UACxD,WAAW,MAAO,0BAA0B,UAAU;AAAA,UACtD,mBAAmB,CAAC,MAAM;AACzB,sCAA0B,UAAU;AACpC,gBAAI,wBAAwB;AAC3B,gBAAE,eAAe;AAAA,YAClB;AAAA,UACD;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,SAAS,MAAM;AACd,0CAA0B,UAAU;AACpC,iCAAiB,KAAK;AAAA,cACvB;AAAA;AAAA,UACD;AAAA;AAAA,MACD;AAAA;AAAA,EACD,GACD,GACD;AAEF;AAGO,MAAM,iBAAiB,KAAK,SAASA,kBAAiB;AAC5D,QAAM,EAAE,QAAQ,IAAI,WAAW;AAC/B,QAAM,eAAe,SAAS,WAAW,MAAM,QAAQ,IAAI,GAAG,CAAC,OAAO,CAAC;AACvE,SAAO,aAAa,IAAI,CAAC,WAAW,oBAAC,kBAAgC,GAAG,UAAf,OAAO,EAAgB,CAAE;AACnF,CAAC;",
"names": ["DefaultDialogs"]
}