diff --git a/packages/ra-core/src/controller/RecordContext.tsx b/packages/ra-core/src/controller/RecordContext.tsx index c87ef4e1471..4fd1885f7a7 100644 --- a/packages/ra-core/src/controller/RecordContext.tsx +++ b/packages/ra-core/src/controller/RecordContext.tsx @@ -55,7 +55,7 @@ export const useRecordContext = < RecordType extends Record | Omit = Record >( props: RecordType -) => { +): RecordType => { // Can't find a way to specify the RecordType when CreateContext is declared // @ts-ignore const context = useContext(RecordContext); diff --git a/packages/ra-ui-materialui/src/form/FormInput.tsx b/packages/ra-ui-materialui/src/form/FormInput.tsx index 647360e98db..0bf585fb87c 100644 --- a/packages/ra-ui-materialui/src/form/FormInput.tsx +++ b/packages/ra-ui-materialui/src/form/FormInput.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { FC, HtmlHTMLAttributes, ReactElement } from 'react'; +import { HtmlHTMLAttributes, ReactElement } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { makeStyles } from '@material-ui/core/styles'; @@ -8,7 +8,14 @@ import { Record } from 'ra-core'; import Labeled from '../input/Labeled'; import { ClassesOverride } from '../types'; -const sanitizeRestProps = ({ basePath, record, ...rest }) => rest; +const sanitizeRestProps = ({ + basePath, + record, + ...rest +}: { + basePath?: string; + record?: unknown; +}) => rest; const useStyles = makeStyles( theme => ({ @@ -17,9 +24,12 @@ const useStyles = makeStyles( { name: 'RaFormInput' } ); -const FormInput: FC = props => { +const FormInput = = Record>( + props: FormInputProps +) => { const { input, classes: classesOverride, ...rest } = props; const classes = useStyles(props); + const { id, ...inputProps } = input ? input.props : { id: undefined }; return input ? (
= props => { > {input.props.addLabel ? ( {React.cloneElement(input, { @@ -67,13 +77,20 @@ FormInput.propTypes = { input: PropTypes.node, }; -export interface FormInputProps extends HtmlHTMLAttributes { +export interface FormInputProps< + RecordType extends Record | Omit = Record +> extends HtmlHTMLAttributes { basePath: string; classes?: ClassesOverride; - input: ReactElement; + input: ReactElement<{ + label?: string; + source?: string; + id?: string; + [key: string]: unknown; + }>; margin?: 'none' | 'normal' | 'dense'; - record: Record; - resource: string; + record?: RecordType; + resource?: string; variant?: 'standard' | 'outlined' | 'filled'; } diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx index 31dc1d30a19..8a845f5b4b2 100644 --- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx +++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx @@ -6,9 +6,16 @@ import { ReactElement, ReactNode, } from 'react'; -import { FormGroupContextProvider, useTranslatableContext } from 'ra-core'; +import { + FormGroupContextProvider, + Record, + useRecordContext, + useTranslatableContext, +} from 'ra-core'; import { makeStyles } from '@material-ui/core/styles'; import { ClassesOverride } from '../types'; +import { FormInput } from '../form'; +import { useResourceContext } from 'ra-core'; /** * Default container for a group of translatable inputs inside a TranslatableInputs component. @@ -17,9 +24,19 @@ import { ClassesOverride } from '../types'; export const TranslatableInputsTabContent = ( props: TranslatableInputsTabContentProps ): ReactElement => { - const { children, groupKey = '', locale, ...other } = props; + const { + basePath, + children, + groupKey = '', + locale, + margin, + variant, + ...other + } = props; const { selectedLocale, getLabel, getSource } = useTranslatableContext(); const classes = useStyles(props); + const record = useRecordContext(props); + const resource = useResourceContext(props); return ( @@ -32,24 +49,38 @@ export const TranslatableInputsTabContent = ( {...other} > {Children.map(children, child => - isValidElement(child) - ? cloneElement(child, { - ...child.props, - label: getLabel(child.props.source), - source: getSource(child.props.source, locale), - }) - : null + isValidElement(child) ? ( + + ) : null )}
); }; -export type TranslatableInputsTabContentProps = { +export type TranslatableInputsTabContentProps< + RecordType extends Record | Omit = Record +> = { + basePath?: string; children: ReactNode; classes?: ClassesOverride; groupKey?: string; locale: string; + record?: RecordType; + resource?: string; + margin?: 'none' | 'normal' | 'dense'; + variant?: 'standard' | 'outlined' | 'filled'; }; const useStyles = makeStyles(