import * as React from 'react' ; import { ReactElement , ReactNode } from 'react' ; import { TranslatableContextProvider , useTranslatable , UseTranslatableOptions , Record , useRecordContext , } from 'ra-core' ; import { TranslatableFieldsTabs } from './TranslatableFieldsTabs' ; import { TranslatableFieldsTabContent } from './TranslatableFieldsTabContent' ; import { makeStyles } from '@material-ui/core/styles' ; import { ClassesOverride } from '../types' ; example example param props param { string } props . defaultLocale param { string [ ] } props . locales param { ReactElement } props . selector export const TranslatableFields = ( props ) : ReactElement => { const { defaultLocale , locales , groupKey = '' , selector = < TranslatableFieldsTabs groupKey = { groupKey } />, children, resource, basePath, } = props; const record = useRecordContext ( props ) ; const context = useTranslatable ( { defaultLocale , locales } ) ; const classes = useStyles ( props ) ; return ( < div className = { classes . root } > < TranslatableContextProvider value = { context } > { selector } { locales . map ( locale => ( < TranslatableFieldsTabContent key = { locale } basePath = { basePath } locale = { locale } record = { record } resource = { resource } groupKey = { groupKey } > { children } < /TranslatableFieldsTabContent>))} < /TranslatableContextProvider> < /div>); } ; export interface TranslatableFieldsProps extends UseTranslatableOptions { basePath ? : string ; children : ReactNode ; classes ? : ClassesOverride < typeof useStyles > ; record ? : Record ; resource ? : string ; selector ? : ReactElement ; groupKey ? : string ; } const useStyles = makeStyles ( theme => ( { root : { flexGrow : 1 , marginTop : theme . spacing ( 1 ) , marginBottom : theme . spacing ( 0.5 ) , } , } ) , { name : 'RaTranslatableFields' } ) ;