kopia lustrzana https://github.com/Tldraw/Tldraw
46 wiersze
1.2 KiB
TypeScript
46 wiersze
1.2 KiB
TypeScript
import * as React from 'react'
|
|
import { useIntl } from 'react-intl'
|
|
import { DMCheckboxItem, DMSubMenu } from '~components/Primitives/DropdownMenu'
|
|
import { useTldrawApp } from '~hooks'
|
|
import { TDLanguage, TDSnapshot } from '~types'
|
|
|
|
const settingsSelector = (s: TDSnapshot) => s.settings
|
|
|
|
type ILang = {
|
|
label: string
|
|
code: TDLanguage
|
|
}
|
|
|
|
export function LanguageMenu() {
|
|
const app = useTldrawApp()
|
|
const setting = app.useStore(settingsSelector)
|
|
const intl = useIntl()
|
|
|
|
const languages: ILang[] = [
|
|
{ label: 'English', code: 'en' },
|
|
{ label: 'Français', code: 'fr' },
|
|
{ label: 'Italiano', code: 'it' },
|
|
]
|
|
|
|
const handleChangeLanguage = React.useCallback(
|
|
(code: TDLanguage) => {
|
|
app.setSetting('language', code)
|
|
},
|
|
[app]
|
|
)
|
|
|
|
return (
|
|
<DMSubMenu label={intl.formatMessage({ id: 'language' })}>
|
|
{languages.map((language) => (
|
|
<DMCheckboxItem
|
|
checked={setting.language === language.code}
|
|
onCheckedChange={() => handleChangeLanguage(language.code)}
|
|
id={`TD-MenuItem-Language-${language}`}
|
|
>
|
|
{language.label}
|
|
</DMCheckboxItem>
|
|
))}
|
|
</DMSubMenu>
|
|
)
|
|
}
|