import { useState , useMemo } from 'react' ; import { useResourceContext } from '../core' ; import { getFieldLabelTranslationArgs } from '../util' ; import { TranslatableContextValue } from './TranslatableContext' ; import useLocale from './useLocale' ; import useTranslate from './useTranslate' ; param options param { string } options . defaultLocale param { string [ ] } options . locales returns export const useTranslatable = ( options ) : TranslatableContextValue => { const localeFromUI = useLocale ( ) ; const { defaultLocale = localeFromUI , locales } = options ; const [ selectedLocale , setSelectedLocale ] = useState ( defaultLocale ) ; const resource = useResourceContext ( { } ) ; const translate = useTranslate ( ) ; const context = useMemo < TranslatableContextValue > ( ( ) => ( { getSource : ( source , locale = selectedLocale ) => `${ source }.${ locale }` , getLabel : ( source , label ? ) => { return translate ( ... getFieldLabelTranslationArgs ( { source , resource , label , } ) ) ; } , locales , selectedLocale , selectLocale : setSelectedLocale , } ) , [ locales , resource , selectedLocale , translate ] ) ; return context ; } ; export type UseTranslatableOptions = { defaultLocale ? : string ; locales : string [ ] ; } ;