import * as React from 'react' ; import { ReactElement , ReactNode } from 'react' ; import { TranslatableContextProvider , useTranslatable , UseTranslatableOptions , } from 'ra-core' ; import { TranslatableInputsTabs } from './TranslatableInputsTabs' ; import { TranslatableInputsTabContent } from './TranslatableInputsTabContent' ; import { makeStyles } from '@material-ui/core/styles' ; example example param props param { string } props . defaultLocale param { string [ ] } props . locales param { ReactElement } props . selector export const TranslatableInputs = ( props ) : ReactElement => { const { defaultLocale , locales , groupKey = '' , selector = < TranslatableInputsTabs groupKey = { groupKey } />, children, variant, margin, } = props; const context = useTranslatable ( { defaultLocale , locales } ) ; const classes = useStyles ( props ) ; return ( < div className = { classes . root } > < TranslatableContextProvider value = { context } > { selector } { locales . map ( locale => ( < TranslatableInputsTabContent key = { locale } locale = { locale } groupKey = { groupKey } variant = { variant } margin = { margin } > { children } < /TranslatableInputsTabContent>))} < /TranslatableContextProvider> < /div>); } ; export interface TranslatableInputsProps extends UseTranslatableOptions { selector ? : ReactElement ; children : ReactNode ; groupKey ? : string ; margin ? : 'none' | 'normal' | 'dense' ; variant ? : 'standard' | 'outlined' | 'filled' ; } const useStyles = makeStyles ( theme => ( { root : { flexGrow : 1 , marginTop : theme . spacing ( 1 ) , marginBottom : theme . spacing ( 0.5 ) , } , } ) , { name : 'RaTranslatableInputs' } ) ;