Merge pull request #9124 from marmelab/9112-destructuring-defaultprops

Remove deprecated defaultProps in jsx components

Author: fzaninotto

packages/ra-ui-materialui/src/auth/Login.tsx

@@ -28,7 +28,7 @@ import { LoginForm as DefaultLoginForm } from './LoginForm';
  *     );
  */
 export const Login = (props: LoginProps) => {
-    const { children, backgroundImage, ...rest } = props;
+    const { children = defaultLoginForm, backgroundImage, ...rest } = props;
     const containerRef = useRef<HTMLDivElement>();
     let backgroundImageLoaded = false;
     const checkAuth = useCheckAuth();
@@ -79,6 +79,8 @@ export const Login = (props: LoginProps) => {
     );
 };
 
+const defaultLoginForm = <DefaultLoginForm />;
+
 export interface LoginProps extends HtmlHTMLAttributes<HTMLDivElement> {
     backgroundImage?: string;
     children?: ReactNode;
@@ -127,7 +129,3 @@ Login.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
 };
-
-Login.defaultProps = {
-    children: <DefaultLoginForm />,
-};

packages/ra-ui-materialui/src/button/BulkUpdateButton.tsx

@@ -34,12 +34,16 @@ import { MutationMode } from 'ra-core';
  * );
  */
 export const BulkUpdateButton = (props: BulkUpdateButtonProps) => {
-    const { mutationMode, ...rest } = props;
+    const { mutationMode = 'undoable', data = defaultData, ...rest } = props;
 
     return mutationMode === 'undoable' ? (
-        <BulkUpdateWithUndoButton {...rest} />
+        <BulkUpdateWithUndoButton data={data} {...rest} />
     ) : (
-        <BulkUpdateWithConfirmButton mutationMode={mutationMode} {...rest} />
+        <BulkUpdateWithConfirmButton
+            mutationMode={mutationMode}
+            data={data}
+            {...rest}
+        />
     );
 };
 
@@ -58,7 +62,4 @@ BulkUpdateButton.propTypes = {
     icon: PropTypes.element,
 };
 
-BulkUpdateButton.defaultProps = {
-    mutationMode: 'undoable',
-    data: [],
-};
+const defaultData = [];

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

@@ -63,7 +63,7 @@ export const ReferenceField = <
 >(
     props: ReferenceFieldProps<RecordType, ReferenceRecordType>
 ) => {
-    const { source, emptyText, ...rest } = props;
+    const { source, emptyText, link = 'edit', ...rest } = props;
     const record = useRecordContext<RecordType>(props);
     const id = get(record, source);
     const translate = useTranslate();
@@ -77,6 +77,7 @@ export const ReferenceField = <
     ) : (
         <NonEmptyReferenceField<RecordType, ReferenceRecordType>
             {...rest}
+            link={link}
             emptyText={emptyText}
             record={record}
             id={id as Identifier}
@@ -102,11 +103,7 @@ ReferenceField.propTypes = {
         PropTypes.string,
         PropTypes.bool,
         PropTypes.func,
-    ]).isRequired,
-};
-
-ReferenceField.defaultProps = {
-    link: 'edit',
+    ]),
 };
 
 export interface ReferenceFieldProps<

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

@@ -67,14 +67,14 @@ export const ReferenceManyField = <
 ) => {
     const {
         children,
-        filter,
+        filter = defaultFilter,
         page = 1,
         pagination = null,
-        perPage,
+        perPage = 25,
         reference,
         resource,
-        sort,
-        source,
+        sort = defaultSort,
+        source = 'id',
         target,
     } = props;
     const record = useRecordContext(props);
@@ -128,21 +128,14 @@ ReferenceManyField.propTypes = {
     resource: PropTypes.string,
     sortBy: PropTypes.string,
     sortByOrder: fieldPropTypes.sortByOrder,
-    source: PropTypes.string.isRequired,
+    source: PropTypes.string,
     sort: PropTypes.exact({
         field: PropTypes.string,
         order: PropTypes.string,
     }),
     target: PropTypes.string.isRequired,
 };
 
-ReferenceManyField.defaultProps = {
-    filter: {},
-    perPage: 25,
-    sort: { field: 'id', order: 'DESC' },
-    source: 'id',
-};
-
 // FIXME kept for backwards compatibility, unused, to be removed in v5
 export const ReferenceManyFieldView: FC<ReferenceManyFieldViewProps> = props => {
     const { children, pagination } = props;
@@ -181,3 +174,6 @@ ReferenceManyFieldView.propTypes = {
     reference: PropTypes.string,
     setSort: PropTypes.func,
 };
+
+const defaultFilter = {};
+const defaultSort = { field: 'id', order: 'DESC' };

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

@@ -35,7 +35,7 @@ export const ReferenceOneField = <
     const {
         children,
         reference,
-        source,
+        source = 'id',
         target,
         emptyText,
         sort,
@@ -120,13 +120,12 @@ ReferenceOneField.propTypes = {
     label: fieldPropTypes.label,
     record: PropTypes.any,
     reference: PropTypes.string.isRequired,
-    source: PropTypes.string.isRequired,
+    source: PropTypes.string,
     target: PropTypes.string.isRequired,
     queryOptions: PropTypes.any,
 };
 
 ReferenceOneField.defaultProps = {
-    source: 'id',
     // disable sorting on this field by default as its default source prop ('id')
     // will match the default sort ({ field: 'id', order: 'DESC'})
     // leading to an incorrect sort indicator in a datagrid header

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

@@ -85,9 +85,9 @@ const SelectFieldImpl = <
         emptyText,
         source,
         choices,
-        optionValue,
-        optionText,
-        translateChoice,
+        optionValue = 'id',
+        optionText = 'name',
+        translateChoice = true,
         ...rest
     } = props;
     const record = useRecordContext(props);
@@ -142,11 +142,6 @@ SelectFieldImpl.propTypes = {
     translateChoice: PropTypes.bool,
 };
 
-SelectFieldImpl.defaultProps = {
-    optionText: 'name',
-    optionValue: 'id',
-    translateChoice: true,
-};
 SelectFieldImpl.displayName = 'SelectFieldImpl';
 
 export const SelectField = genericMemo(SelectFieldImpl);

packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.tsx

@@ -204,10 +204,6 @@ export const ArrayInput = (props: ArrayInputProps) => {
     );
 };
 
-ArrayInput.defaultProps = {
-    options: {},
-};
-
 export const getArrayInputError = error => {
     if (Array.isArray(error)) {
         return undefined;

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx

@@ -49,9 +49,9 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
         resource,
         source,
         disabled,
-        disableAdd,
+        disableAdd = false,
         disableClear,
-        disableRemove,
+        disableRemove = false,
         disableReordering,
         inline,
         getItemLabel = false,
@@ -229,11 +229,6 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
     ) : null;
 };
 
-SimpleFormIterator.defaultProps = {
-    disableAdd: false,
-    disableRemove: false,
-};
-
 SimpleFormIterator.propTypes = {
     addButton: PropTypes.element,
     removeButton: PropTypes.element,

packages/ra-ui-materialui/src/input/BooleanInput.tsx

@@ -30,7 +30,7 @@ export const BooleanInput = (props: BooleanInputProps) => {
         resource,
         source,
         validate,
-        options,
+        options = defaultOptions,
         sx,
         ...rest
     } = props;
@@ -114,12 +114,10 @@ BooleanInput.propTypes = {
     disabled: PropTypes.bool,
 };
 
-BooleanInput.defaultProps = {
-    options: {},
-};
-
 export type BooleanInputProps = CommonInputProps &
     SwitchProps &
     Omit<FormGroupProps, 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus'> & {
-        options: SwitchProps;
+        options?: SwitchProps;
     };
+
+const defaultOptions = {};

packages/ra-ui-materialui/src/input/FileInputPreview.tsx

@@ -53,10 +53,6 @@ FileInputPreview.propTypes = {
     removeIcon: PropTypes.element,
 };
 
-FileInputPreview.defaultProps = {
-    file: undefined,
-};
-
 const PREFIX = 'RaFileInputPreview';
 
 const FileInputPreviewClasses = {