tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 5.86 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../src/lib/ui/components/Toasts.tsx"],
"sourcesContent": ["import { useValue } from '@tldraw/editor'\nimport { Toast as _Toast } from 'radix-ui'\nimport { memo } from 'react'\nimport { AlertSeverity, TLUiToast, useToasts } from '../context/toasts'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel'\nimport { TldrawUiIcon } from './primitives/TldrawUiIcon'\n\nconst DEFAULT_TOAST_DURATION = 4000\n\nconst SEVERITY_TO_ICON: { [msg in AlertSeverity]: TLUiIconType } = {\n\tsuccess: 'check-circle',\n\twarning: 'warning-triangle',\n\terror: 'cross-circle',\n\tinfo: 'info-circle',\n}\n\n/** @internal */\nfunction TldrawUiToast({ toast }: { toast: TLUiToast }) {\n\tconst { removeToast } = useToasts()\n\tconst msg = useTranslation()\n\n\tconst onOpenChange = (isOpen: boolean) => {\n\t\tif (!isOpen) {\n\t\t\tremoveToast(toast.id)\n\t\t}\n\t}\n\n\tconst hasActions = toast.actions && toast.actions.length > 0\n\n\tconst icon = toast.icon || (toast.severity && SEVERITY_TO_ICON[toast.severity])\n\tconst iconLabel = toast.iconLabel || (toast.severity ? msg(`toast.${toast.severity}`) : '')\n\n\treturn (\n\t\t<_Toast.Root\n\t\t\tonOpenChange={onOpenChange}\n\t\t\tclassName=\"tlui-toast__container\"\n\t\t\tduration={toast.keepOpen ? Infinity : DEFAULT_TOAST_DURATION}\n\t\t\tdata-severity={toast.severity}\n\t\t>\n\t\t\t{icon && (\n\t\t\t\t<div className=\"tlui-toast__icon\">\n\t\t\t\t\t<TldrawUiIcon label={iconLabel} icon={icon} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName=\"tlui-toast__main\"\n\t\t\t\tdata-title={!!toast.title}\n\t\t\t\tdata-description={!!toast.description}\n\t\t\t\tdata-actions={!!toast.actions}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-toast__content\">\n\t\t\t\t\t{toast.title && <_Toast.Title className=\"tlui-toast__title\">{toast.title}</_Toast.Title>}\n\t\t\t\t\t{toast.description && (\n\t\t\t\t\t\t<_Toast.Description className=\"tlui-toast__description\">\n\t\t\t\t\t\t\t{toast.description}\n\t\t\t\t\t\t</_Toast.Description>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{toast.actions && (\n\t\t\t\t\t<div className=\"tlui-toast__actions\">\n\t\t\t\t\t\t{toast.actions.map((action, i) => (\n\t\t\t\t\t\t\t<_Toast.Action key={i} altText={action.label} asChild onClick={action.onClick}>\n\t\t\t\t\t\t\t\t<TldrawUiButton type={action.type}>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{action.label}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t</_Toast.Action>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<_Toast.Close asChild>\n\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\tclassName=\"tlui-toast__close\"\n\t\t\t\t\t\t\t\tstyle={{ marginLeft: 'auto' }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{toast.closeLabel ?? msg('toast.close')}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t</_Toast.Close>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!hasActions && (\n\t\t\t\t<_Toast.Close asChild>\n\t\t\t\t\t<TldrawUiButton type=\"normal\" className=\"tlui-toast__close\">\n\t\t\t\t\t\t<TldrawUiButtonLabel>{toast.closeLabel ?? msg('toast.close')}</TldrawUiButtonLabel>\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</_Toast.Close>\n\t\t\t)}\n\t\t</_Toast.Root>\n\t)\n}\n\n/** @public @react */\nexport const DefaultToasts = memo(function TldrawUiToasts() {\n\tconst { toasts } = useToasts()\n\tconst toastsArray = useValue('toasts', () => toasts.get(), [])\n\treturn (\n\t\t<>\n\t\t\t{toastsArray.map((toast) => (\n\t\t\t\t<TldrawUiToast key={toast.id} toast={toast} />\n\t\t\t))}\n\t\t\t<_Toast.ToastViewport className=\"tlui-toast__viewport\" />\n\t\t</>\n\t)\n})\n"],
"mappings": "AA4CK,SAsDH,UAtDG,KASD,YATC;AA5CL,SAAS,gBAAgB;AACzB,SAAS,SAAS,cAAc;AAChC,SAAS,YAAY;AACrB,SAAmC,iBAAiB;AACpD,SAAS,sBAAsB;AAE/B,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAE7B,MAAM,yBAAyB;AAE/B,MAAM,mBAA6D;AAAA,EAClE,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACP;AAGA,SAAS,cAAc,EAAE,MAAM,GAAyB;AACvD,QAAM,EAAE,YAAY,IAAI,UAAU;AAClC,QAAM,MAAM,eAAe;AAE3B,QAAM,eAAe,CAAC,WAAoB;AACzC,QAAI,CAAC,QAAQ;AACZ,kBAAY,MAAM,EAAE;AAAA,IACrB;AAAA,EACD;AAEA,QAAM,aAAa,MAAM,WAAW,MAAM,QAAQ,SAAS;AAE3D,QAAM,OAAO,MAAM,QAAS,MAAM,YAAY,iBAAiB,MAAM,QAAQ;AAC7E,QAAM,YAAY,MAAM,cAAc,MAAM,WAAW,IAAI,SAAS,MAAM,QAAQ,EAAE,IAAI;AAExF,SACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM,WAAW,WAAW;AAAA,MACtC,iBAAe,MAAM;AAAA,MAEpB;AAAA,gBACA,oBAAC,SAAI,WAAU,oBACd,8BAAC,gBAAa,OAAO,WAAW,MAAY,GAC7C;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,cAAY,CAAC,CAAC,MAAM;AAAA,YACpB,oBAAkB,CAAC,CAAC,MAAM;AAAA,YAC1B,gBAAc,CAAC,CAAC,MAAM;AAAA,YAEtB;AAAA,mCAAC,SAAI,WAAU,uBACb;AAAA,sBAAM,SAAS,oBAAC,OAAO,OAAP,EAAa,WAAU,qBAAqB,gBAAM,OAAM;AAAA,gBACxE,MAAM,eACN,oBAAC,OAAO,aAAP,EAAmB,WAAU,2BAC5B,gBAAM,aACR;AAAA,iBAEF;AAAA,cACC,MAAM,WACN,qBAAC,SAAI,WAAU,uBACb;AAAA,sBAAM,QAAQ,IAAI,CAAC,QAAQ,MAC3B,oBAAC,OAAO,QAAP,EAAsB,SAAS,OAAO,OAAO,SAAO,MAAC,SAAS,OAAO,SACrE,8BAAC,kBAAe,MAAM,OAAO,MAC5B,8BAAC,uBAAqB,iBAAO,OAAM,GACpC,KAHmB,CAIpB,CACA;AAAA,gBACD,oBAAC,OAAO,OAAP,EAAa,SAAO,MACpB;AAAA,kBAAC;AAAA;AAAA,oBACA,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,OAAO;AAAA,oBAE5B,8BAAC,uBAAqB,gBAAM,cAAc,IAAI,aAAa,GAAE;AAAA;AAAA,gBAC9D,GACD;AAAA,iBACD;AAAA;AAAA;AAAA,QAEF;AAAA,QACC,CAAC,cACD,oBAAC,OAAO,OAAP,EAAa,SAAO,MACpB,8BAAC,kBAAe,MAAK,UAAS,WAAU,qBACvC,8BAAC,uBAAqB,gBAAM,cAAc,IAAI,aAAa,GAAE,GAC9D,GACD;AAAA;AAAA;AAAA,EAEF;AAEF;AAGO,MAAM,gBAAgB,KAAK,SAAS,iBAAiB;AAC3D,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,cAAc,SAAS,UAAU,MAAM,OAAO,IAAI,GAAG,CAAC,CAAC;AAC7D,SACC,iCACE;AAAA,gBAAY,IAAI,CAAC,UACjB,oBAAC,iBAA6B,SAAV,MAAM,EAAkB,CAC5C;AAAA,IACD,oBAAC,OAAO,eAAP,EAAqB,WAAU,wBAAuB;AAAA,KACxD;AAEF,CAAC;",
"names": []
}