Files
payloadcms/packages/next/src/views/Version/SelectLocales/index.tsx
2024-05-29 14:01:13 -04:00

42 lines
1.1 KiB
TypeScript

'use client'
import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect'
import { useLocale } from '@payloadcms/ui/providers/Locale'
import { useTranslation } from '@payloadcms/ui/providers/Translation'
import React from 'react'
import type { Props } from './types.js'
import './index.scss'
const baseClass = 'select-version-locales'
export const SelectLocales: React.FC<Props> = ({ onChange, options, value }) => {
const { t } = useTranslation()
const { code } = useLocale()
const format = (items) => {
return items.map((item) => {
if (typeof item.label === 'string') return item
if (typeof item.label !== 'string' && item.label[code]) {
return {
label: item.label[code],
value: item.value,
}
}
})
}
return (
<div className={baseClass}>
<div className={`${baseClass}__label`}>{t('version:showLocales')}</div>
<ReactSelect
isMulti
onChange={onChange}
options={format(options)}
placeholder={t('version:selectLocales')}
value={format(value)}
/>
</div>
)
}