Merge pull request #5848 from marmelab/fix-translatable-inputs-display

Fix translatable inputs display
marmelab · Feb 2, 2021 · 51f7262 · 51f7262
2 parents ac6f065 + 6c52afd
commit 51f7262
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 20 deletions.
diff --git 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, 'id'> = Record
 >(
     props: RecordType
-) => {
+): RecordType => {
     // Can't find a way to specify the RecordType when CreateContext is declared
     // @ts-ignore
     const context = useContext<RecordType>(RecordContext);

diff --git 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<FormInputProps> = props => {
+const FormInput = <RecordType extends Record | Omit<Record, 'id'> = Record>(
+    props: FormInputProps<RecordType>
+) => {
     const { input, classes: classesOverride, ...rest } = props;
     const classes = useStyles(props);
+    const { id, ...inputProps } = input ? input.props : { id: undefined };
     return input ? (
         <div
             className={classnames(
@@ -30,8 +40,8 @@ const FormInput: FC<FormInputProps> = props => {
         >
             {input.props.addLabel ? (
                 <Labeled
-                    id={input.props.id || input.props.source}
-                    {...input.props}
+                    id={id || input.props.source}
+                    {...inputProps}
                     {...sanitizeRestProps(rest)}
                 >
                     {React.cloneElement(input, {
@@ -67,13 +77,20 @@ FormInput.propTypes = {
     input: PropTypes.node,
 };
 
-export interface FormInputProps extends HtmlHTMLAttributes<HTMLDivElement> {
+export interface FormInputProps<
+    RecordType extends Record | Omit<Record, 'id'> = Record
+> extends HtmlHTMLAttributes<HTMLDivElement> {
     basePath: string;
     classes?: ClassesOverride<typeof useStyles>;
-    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
@@ -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 (
         <FormGroupContextProvider name={`${groupKey}${locale}`}>
@@ -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) ? (
+                        <FormInput
+                            basePath={basePath}
+                            input={cloneElement(child, {
+                                ...child.props,
+                                label: getLabel(child.props.source),
+                                source: getSource(child.props.source, locale),
+                            })}
+                            record={record}
+                            resource={resource}
+                            variant={child.props.variant || variant}
+                            margin={child.props.margin || margin}
+                        />
+                    ) : null
                 )}
             </div>
         </FormGroupContextProvider>
     );
 };
 
-export type TranslatableInputsTabContentProps = {
+export type TranslatableInputsTabContentProps<
+    RecordType extends Record | Omit<Record, 'id'> = Record
+> = {
+    basePath?: string;
     children: ReactNode;
     classes?: ClassesOverride<typeof useStyles>;
     groupKey?: string;
     locale: string;
+    record?: RecordType;
+    resource?: string;
+    margin?: 'none' | 'normal' | 'dense';
+    variant?: 'standard' | 'outlined' | 'filled';
 };
 
 const useStyles = makeStyles(