Samuel Newman
6ccda945e5
* add telephone code select * add flags * run svgo on flags * get it somewhat working on web * get web closed state working * verify country code we get from geo * trim down names to shorter common versions * add labels to other selects * make international tel codes a static object * add component to storybook * Update src/lib/international-telephone-codes.ts Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * update to new geo hook * use Intl.DisplayNames, add polyfill * use in rather than keys().includes() --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
import {msg} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {sanitizeAppLanguageSetting} from '#/locale/helpers'
|
|
import {APP_LANGUAGES} from '#/locale/languages'
|
|
import * as Select from '#/components/Select'
|
|
|
|
export function LanguageSelect({
|
|
value,
|
|
onChange,
|
|
items = APP_LANGUAGES.map(l => ({
|
|
label: l.name,
|
|
value: l.code2,
|
|
})),
|
|
label,
|
|
}: {
|
|
value?: string
|
|
onChange: (value: string) => void
|
|
items?: {label: string; value: string}[]
|
|
label?: string
|
|
}) {
|
|
const {_} = useLingui()
|
|
|
|
const handleOnChange = React.useCallback(
|
|
(value: string) => {
|
|
if (!value) return
|
|
onChange(sanitizeAppLanguageSetting(value))
|
|
},
|
|
[onChange],
|
|
)
|
|
|
|
return (
|
|
<Select.Root
|
|
value={value ? sanitizeAppLanguageSetting(value) : undefined}
|
|
onValueChange={handleOnChange}>
|
|
<Select.Trigger label={_(msg`Select language`)}>
|
|
<Select.ValueText placeholder={_(msg`Select language`)} />
|
|
<Select.Icon />
|
|
</Select.Trigger>
|
|
<Select.Content
|
|
label={label}
|
|
renderItem={({label, value}) => (
|
|
<Select.Item value={value} label={label}>
|
|
<Select.ItemIndicator />
|
|
<Select.ItemText>{label}</Select.ItemText>
|
|
</Select.Item>
|
|
)}
|
|
items={items}
|
|
/>
|
|
</Select.Root>
|
|
)
|
|
}
|