{ "version": 3, "sources": ["../../../../../src/lib/ui/hooks/useTranslation/useTranslation.tsx"], "sourcesContent": ["import { track, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { useAssetUrls } from '../useAssetUrls'\nimport { TLUiTranslationKey } from './TLUiTranslationKey'\nimport { DEFAULT_TRANSLATION } from './defaultTranslation'\nimport { TLUiTranslation, fetchTranslation } from './translations'\n\n/** @public */\nexport interface TLUiTranslationProviderProps {\n\tchildren: any\n\t/**\n\t * (optional) A collection of overrides different locales.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * \n\t * ```\n\t */\n\toverrides?: Record>\n}\n\n/** @public */\nexport type TLUiTranslationContextType = TLUiTranslation\n\nconst TranslationsContext = React.createContext(\n\t{} as TLUiTranslationContextType\n)\n\nconst useCurrentTranslation = () => React.useContext(TranslationsContext)\n\n/**\n * Provides a translation context to the editor.\n *\n * @internal\n */\nexport const TranslationProvider = track(function TranslationProvider({\n\toverrides,\n\tchildren,\n}: TLUiTranslationProviderProps) {\n\tconst editor = useEditor()\n\tconst locale = editor.user.locale\n\tconst getAssetUrl = useAssetUrls()\n\n\tconst [currentTranslation, setCurrentTranslation] = React.useState(() => {\n\t\tif (overrides && overrides['en']) {\n\t\t\treturn {\n\t\t\t\tlocale: 'en',\n\t\t\t\tlabel: 'English',\n\t\t\t\tmessages: { ...DEFAULT_TRANSLATION, ...overrides['en'] },\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tlocale: 'en',\n\t\t\tlabel: 'English',\n\t\t\tmessages: DEFAULT_TRANSLATION,\n\t\t}\n\t})\n\n\tReact.useEffect(() => {\n\t\tlet isCancelled = false\n\n\t\tasync function loadTranslation() {\n\t\t\tconst translation = await fetchTranslation(locale, getAssetUrl)\n\n\t\t\tif (translation && !isCancelled) {\n\t\t\t\tif (overrides && overrides[locale]) {\n\t\t\t\t\tsetCurrentTranslation({\n\t\t\t\t\t\t...translation,\n\t\t\t\t\t\tmessages: { ...translation.messages, ...overrides[locale] },\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\tsetCurrentTranslation(translation)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tloadTranslation()\n\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t}\n\t}, [getAssetUrl, locale, overrides])\n\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t)\n})\n\n/**\n * Returns a function to translate a translation key into a string based on the current translation.\n *\n * @example\n *\n * ```ts\n * const msg = useTranslation()\n * const label = msg('style-panel.styles')\n * ```\n *\n * @public\n */\nexport function useTranslation() {\n\tconst translation = useCurrentTranslation()\n\treturn React.useCallback(\n\t\tfunction msg(id: TLUiTranslationKey) {\n\t\t\treturn translation.messages[id] ?? id\n\t\t},\n\t\t[translation]\n\t)\n}\n"], "mappings": "AAsFE;AAtFF,SAAS,OAAO,iBAAiB;AACjC,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAE7B,SAAS,2BAA2B;AACpC,SAA0B,wBAAwB;AAoBlD,MAAM,sBAAsB,MAAM;AAAA,EACjC,CAAC;AACF;AAEA,MAAM,wBAAwB,MAAM,MAAM,WAAW,mBAAmB;AAOjE,MAAM,sBAAsB,MAAM,SAASA,qBAAoB;AAAA,EACrE;AAAA,EACA;AACD,GAAiC;AAChC,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,OAAO,KAAK;AAC3B,QAAM,cAAc,aAAa;AAEjC,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,MAAM,SAA0B,MAAM;AACzF,QAAI,aAAa,UAAU,IAAI,GAAG;AACjC,aAAO;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU,EAAE,GAAG,qBAAqB,GAAG,UAAU,IAAI,EAAE;AAAA,MACxD;AAAA,IACD;AAEA,WAAO;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACX;AAAA,EACD,CAAC;AAED,QAAM,UAAU,MAAM;AACrB,QAAI,cAAc;AAElB,mBAAe,kBAAkB;AAChC,YAAM,cAAc,MAAM,iBAAiB,QAAQ,WAAW;AAE9D,UAAI,eAAe,CAAC,aAAa;AAChC,YAAI,aAAa,UAAU,MAAM,GAAG;AACnC,gCAAsB;AAAA,YACrB,GAAG;AAAA,YACH,UAAU,EAAE,GAAG,YAAY,UAAU,GAAG,UAAU,MAAM,EAAE;AAAA,UAC3D,CAAC;AAAA,QACF,OAAO;AACN,gCAAsB,WAAW;AAAA,QAClC;AAAA,MACD;AAAA,IACD;AAEA,oBAAgB;AAEhB,WAAO,MAAM;AACZ,oBAAc;AAAA,IACf;AAAA,EACD,GAAG,CAAC,aAAa,QAAQ,SAAS,CAAC;AAEnC,SACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,oBACnC,UACF;AAEF,CAAC;AAcM,SAAS,iBAAiB;AAChC,QAAM,cAAc,sBAAsB;AAC1C,SAAO,MAAM;AAAA,IACZ,SAAS,IAAI,IAAwB;AACpC,aAAO,YAAY,SAAS,EAAE,KAAK;AAAA,IACpC;AAAA,IACA,CAAC,WAAW;AAAA,EACb;AACD;", "names": ["TranslationProvider"] }