Merge pull request #1440 from data-driven-forms/default-props

fix(all): replace defaultProps with inline function defaults

Author: Hyperkid123

packages/ant-component-mapper/src/date-picker/date-picker.js

@@ -5,8 +5,8 @@ import { validationError } from '../validation-error/validation-error';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import FormGroup from '../form-group';
 
-const DatePicker = (props) => {
-  const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta, FormItemProps, ...rest } =
+const DatePicker = ({ placeholder = 'Select date', ...props }) => {
+  const { input, isReadOnly, isDisabled, isRequired, label, helperText, description, validateOnMount, meta, FormItemProps, ...rest } =
     useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
 
@@ -50,8 +50,4 @@ DatePicker.propTypes = {
   FormItemProps: PropTypes.object,
 };
 
-DatePicker.defaultProps = {
-  placeholder: 'Select date',
-};
-
 export default DatePicker;

packages/ant-component-mapper/src/field-array/field-array.js

@@ -103,32 +103,32 @@ const DynamicArray = ({ ...props }) => {
     fields: formFields,
     defaultItem,
     meta,
-    minItems,
-    maxItems,
-    noItemsMessage,
+    minItems = 0,
+    maxItems = Infinity,
+    noItemsMessage = 'No items added',
     FormFieldGridProps,
     FormControlProps,
     buttonLabels,
     validateOnMount,
     isRequired,
     helperText,
     // customization props
-    FormItemProps,
-    ArrayItemProps,
-    FieldsContainerProps,
-    RemoveContainerProps,
-    RemoveButtonProps,
-    FieldArrayRowProps,
-    FieldArrayRowCol,
-    FieldArrayHeaderProps,
-    FieldArrayLabelProps,
-    FieldArrayButtonsProps,
-    UndoButtonProps,
-    RedoButtonProps,
-    AddButtonProps,
-    FieldArrayDescriptionProps,
-    NoItemsMessageProps,
-    ErrorMessageProps,
+    FormItemProps = {},
+    ArrayItemProps = {},
+    FieldsContainerProps = {},
+    RemoveContainerProps = {},
+    RemoveButtonProps = {},
+    FieldArrayRowProps = {},
+    FieldArrayRowCol = {},
+    FieldArrayHeaderProps = {},
+    FieldArrayLabelProps = {},
+    FieldArrayButtonsProps = {},
+    UndoButtonProps = {},
+    RedoButtonProps = {},
+    AddButtonProps = {},
+    FieldArrayDescriptionProps = {},
+    NoItemsMessageProps = {},
+    ErrorMessageProps = {},
     ...rest
   } = useFieldApi(props);
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -275,26 +275,4 @@ DynamicArray.propTypes = {
   ErrorMessageProps: PropTypes.object,
 };
 
-DynamicArray.defaultProps = {
-  maxItems: Infinity,
-  minItems: 0,
-  noItemsMessage: 'No items added',
-  FormItemProps: {},
-  ArrayItemProps: {},
-  FieldsContainerProps: {},
-  RemoveContainerProps: {},
-  RemoveButtonProps: {},
-  FieldArrayRowProps: {},
-  FieldArrayRowCol: {},
-  FieldArrayHeaderProps: {},
-  FieldArrayLabelProps: {},
-  FieldArrayButtonsProps: {},
-  UndoButtonProps: {},
-  RedoButtonProps: {},
-  AddButtonProps: {},
-  FieldArrayDescriptionProps: {},
-  NoItemsMessageProps: {},
-  ErrorMessageProps: {},
-};
-
 export default DynamicArray;

packages/ant-component-mapper/src/form-template/form-template.js

@@ -6,8 +6,8 @@ import { childrenPropTypes } from '@data-driven-forms/common/prop-types-template
 
 const { Title, Paragraph } = Typography;
 
-const Form = ({ children, onSubmit, ...props }) => (
-  <AntForm onFinish={onSubmit} {...props}>
+const Form = ({ children, onSubmit, layout = 'vertical', ...props }) => (
+  <AntForm onFinish={onSubmit} layout={layout} {...props}>
     {children}
   </AntForm>
 );
@@ -18,10 +18,6 @@ Form.propTypes = {
   children: childrenPropTypes,
 };
 
-Form.defaultProps = {
-  layout: 'vertical',
-};
-
 const Description = ({ children, ...props }) => (
   <Typography {...props}>
     <Paragraph>{children}</Paragraph>

packages/ant-component-mapper/src/radio/radio.js

@@ -17,11 +17,23 @@ RadioOption.propTypes = {
 };
 
 const Radio = ({ name, component, ...props }) => {
-  const { options, isDisabled, label, isRequired, helperText, description, isReadOnly, meta, validateOnMount, FormItemProps, input, ...rest } =
-    useFieldApi({
-      ...props,
-      name,
-    });
+  const {
+    options = [],
+    isDisabled,
+    label,
+    isRequired,
+    helperText,
+    description,
+    isReadOnly,
+    meta,
+    validateOnMount,
+    FormItemProps,
+    input,
+    ...rest
+  } = useFieldApi({
+    ...props,
+    name,
+  });
 
   return (
     <FormGroup
@@ -58,8 +70,4 @@ Radio.propTypes = {
   component: PropTypes.string,
 };
 
-Radio.defaultProps = {
-  options: [],
-};
-
 export default Radio;

packages/ant-component-mapper/src/time-picker/time-picker.js

@@ -6,8 +6,20 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import FormGroup from '../form-group';
 
 const TimePicker = (props) => {
-  const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta, FormItemProps, ...rest } =
-    useFieldApi(props);
+  const {
+    input,
+    isReadOnly,
+    isDisabled,
+    placeholder = 'Select date',
+    isRequired,
+    label,
+    helperText,
+    description,
+    validateOnMount,
+    meta,
+    FormItemProps,
+    ...rest
+  } = useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
 
   return (
@@ -52,8 +64,4 @@ TimePicker.propTypes = {
   FormItemProps: PropTypes.object,
 };
 
-TimePicker.defaultProps = {
-  placeholder: 'Select date',
-};
-
 export default TimePicker;

packages/ant-component-mapper/src/wizard/wizard-step.js

@@ -5,7 +5,7 @@ import WizardStepButtons from './step-buttons';
 
 import './wizard-step.css';
 
-const WizardStep = ({ fields, formOptions, WizardStepProps, ...rest }) => (
+const WizardStep = ({ fields = [], formOptions, WizardStepProps, ...rest }) => (
   <Fragment>
     <div className="ddorg__ant-component-mapper_wizard-step" {...WizardStepProps}>
       {fields.map((item) => formOptions.renderForm([item], formOptions))}
@@ -22,8 +22,4 @@ WizardStep.propTypes = {
   WizardStepProps: PropTypes.object,
 };
 
-WizardStep.defaultProps = {
-  fields: [],
-};
-
 export default WizardStep;

packages/blueprint-component-mapper/src/date-picker/date-picker.js

@@ -7,18 +7,21 @@ import { DatePicker as BDatePicker } from '@blueprintjs/datetime';
 import FormGroupWrapper from '../form-group/form-group';
 import propsCatcher from '../props-catcher/props-catcher';
 
-const DatePicker = ({ input, disabled, placeholder, valueRenderer, PopoverProps, ButtonProps, ...props }) => (
+const DatePicker = ({
+  input,
+  disabled,
+  placeholder = 'Select date...',
+  valueRenderer = (value) => value.toString(),
+  PopoverProps,
+  ButtonProps,
+  ...props
+}) => (
   <Popover disabled={disabled} {...PopoverProps}>
     <Button text={input.value ? valueRenderer(input.value) : placeholder} disabled={disabled} {...ButtonProps} />
     <BDatePicker id={input.name} {...propsCatcher(props)} {...input} value={input.value || null} />
   </Popover>
 );
 
-DatePicker.defaultProps = {
-  placeholder: 'Select date...',
-  valueRenderer: (value) => value.toString(),
-};
-
 DatePicker.propTypes = {
   input: PropTypes.object,
   disabled: PropTypes.bool,