SImplify defaultProps handling

Author: djhi

packages/ra-ui-materialui/src/field/BooleanField.tsx

@@ -89,9 +89,6 @@ BooleanFieldImpl.displayName = 'BooleanFieldImpl';
 
 export const BooleanField = genericMemo(BooleanFieldImpl);
 
-BooleanField.propTypes = BooleanFieldImpl.propTypes;
-BooleanField.displayName = 'BooleanField';
-
 export interface BooleanFieldProps<
     RecordType extends Record<string, unknown> = Record<string, any>
 > extends FieldProps<RecordType>,

packages/ra-ui-materialui/src/field/ChipField.tsx

@@ -51,9 +51,6 @@ ChipFieldImpl.displayName = 'ChipFieldImpl';
 
 export const ChipField = genericMemo(ChipFieldImpl);
 
-ChipField.propTypes = ChipFieldImpl.propTypes;
-ChipField.displayName = 'ChipField';
-
 export interface ChipFieldProps<
     RecordType extends Record<string, unknown> = Record<string, any>
 > extends FieldProps<RecordType>,

packages/ra-ui-materialui/src/field/DateField.tsx

@@ -136,9 +136,6 @@ DateFieldImpl.displayName = 'DateFieldImpl';
 
 export const DateField = genericMemo(DateFieldImpl);
 
-DateField.propTypes = DateFieldImpl.propTypes;
-DateField.displayName = 'DateField';
-
 export interface DateFieldProps<
     RecordType extends Record<string, unknown> = Record<string, any>
 > extends FieldProps<RecordType>,

packages/ra-ui-materialui/src/field/EmailField.tsx

@@ -49,9 +49,6 @@ EmailFieldImpl.displayName = 'EmailFieldImpl';
 
 export const EmailField = genericMemo(EmailFieldImpl);
 
-EmailField.propTypes = EmailFieldImpl.propTypes;
-EmailField.displayName = 'EmailField';
-
 export interface EmailFieldProps<
     RecordType extends Record<string, unknown> = Record<string, any>
 > extends FieldProps<RecordType>,

packages/ra-ui-materialui/src/field/NumberField.tsx

@@ -97,21 +97,12 @@ NumberFieldImpl.propTypes = {
 };
 
 // what? TypeScript loses the displayName if we don't set it explicitly
-// Declaring it first on the NumberFieldImpl makes TS happy to accept it on NumberField
 NumberFieldImpl.displayName = 'NumberFieldImpl';
-// We have to set the defaultProps on both the NumberFieldImpl and NumberField.
-// On NumberFieldImpl because that will make it possible to reference defaultProps in user components by making
-// TS happy and allows us to also declare defaultProps on NumberField.
 NumberFieldImpl.defaultProps = {
     textAlign: 'right',
 };
 
 export const NumberField = genericMemo(NumberFieldImpl);
-NumberField.displayName = 'NumberField';
-// On NumberField because that will allow children inspection to work.
-NumberField.defaultProps = NumberFieldImpl.defaultProps;
-
-NumberField.propTypes = NumberFieldImpl.propTypes;
 
 export interface NumberFieldProps<
     RecordType extends Record<string, unknown> = Record<string, any>

packages/ra-ui-materialui/src/field/RichTextField.tsx

@@ -73,9 +73,6 @@ RichTextFieldImpl.displayName = 'RichTextFieldImpl';
 
 export const RichTextField = genericMemo(RichTextFieldImpl);
 
-RichTextField.displayName = 'RichTextField';
-RichTextField.propTypes = RichTextFieldImpl.propTypes;
-
 // We only support the case when sanitize() returns a string
 // hence we need to force the RETURN_DOM_FRAGMENT and RETURN_DOM
 // options to false

packages/ra-ui-materialui/src/field/SelectField.tsx

@@ -142,9 +142,6 @@ SelectFieldImpl.propTypes = {
     translateChoice: PropTypes.bool,
 };
 
-// We have to set the defaultProps on both the SelectFieldImpl and NumberField.
-// On SelectFieldImpl because that will make it possible to reference defaultProps in user components by making
-// TS happy and allows us to also declare defaultProps on NumberField.
 SelectFieldImpl.defaultProps = {
     optionText: 'name',
     optionValue: 'id',
@@ -154,11 +151,6 @@ SelectFieldImpl.displayName = 'SelectFieldImpl';
 
 export const SelectField = genericMemo(SelectFieldImpl);
 
-// On SelectField because that will allow children inspection to work.
-SelectField.defaultProps = SelectFieldImpl.defaultProps;
-SelectField.propTypes = SelectFieldImpl.propTypes;
-SelectField.displayName = 'SelectField';
-
 export interface SelectFieldProps<
     RecordType extends Record<string, unknown> = Record<string, any>
 > extends ChoicesProps,

packages/ra-ui-materialui/src/field/TextField.tsx

@@ -42,9 +42,6 @@ TextFieldImpl.displayName = 'TextFieldImpl';
 
 export const TextField = genericMemo(TextFieldImpl);
 
-TextField.displayName = 'TextField';
-TextField.propTypes = TextFieldImpl.propTypes;
-
 export interface TextFieldProps<
     RecordType extends Record<string, unknown> = Record<string, any>
 > extends FieldProps<RecordType>,

packages/ra-ui-materialui/src/field/UrlField.tsx

@@ -47,8 +47,6 @@ UrlFieldImpl.propTypes = fieldPropTypes;
 UrlFieldImpl.displayName = 'UrlFieldImpl';
 
 export const UrlField = genericMemo(UrlFieldImpl);
-UrlField.propTypes = UrlFieldImpl.propTypes;
-UrlField.displayName = 'UrlField';
 
 export interface UrlFieldProps<
     RecordType extends Record<string, unknown> = Record<string, any>

packages/ra-ui-materialui/src/field/genericMemo.ts

@@ -1,7 +1,21 @@
-import { memo } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 /**
  * A version of React.memo that preserves the original component type allowing it to accept generics.
  * See {@link https://stackoverflow.com/a/70890101}
  */
-export const genericMemo: <T>(component: T) => T = memo;
+export const genericMemo: <T extends FunctionComponent>(component: T) => T = <
+    T extends FunctionComponent
+>(
+    component: T
+) => {
+    const result = (memo(component) as unknown) as T;
+
+    // We have to set the propTypes, defaultProps and displayName on both the field implementation and the memoized version.
+    // On the implementation so that the memoized version can pick them up and users may reference the defaultProps in their components.
+    // On the memoized version so that components that inspect their children props may read them.
+    result.propTypes = component.propTypes;
+    result.defaultProps = component.defaultProps;
+    result.displayName = component.displayName.replace('Impl', '');
+    return result;
+};