STSMACOM-835 avoid defaultProps in functional components (#1480)

`defaultProps` for functional components will be deprecated in React v19 in favor of ES6 default parameters. STSMACOM-835
folio-org · Oct 3, 2024 · 1fd99db · 1fd99db
1 parent 7524e80
commit 1fd99db
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 165 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@
 * Display `System` user when there is no `updatedByUserId` field in metadata. Refs STSMACOM-858.
 * Fix `<DateRangeFilter>` only shows an error in one of failed inputs. Fixes STSMACOM-857.
 * Omit (don't disable) "+ New" button in `<EditableList>` when user lacks permission. Refs STSMACOM-836.
+* Avoid deprecated `defaultProps` for functional components. Refs STSMACOM-835.
 
 ## [9.1.3](https://github.com/folio-org/stripes-smart-components/tree/v9.1.3) (2024-05-06)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v9.1.2...v9.1.3)

diff --git a/lib/AddressFieldGroup/AddressEdit/AddressEdit.js b/lib/AddressFieldGroup/AddressEdit/AddressEdit.js
@@ -53,63 +53,67 @@ const propTypes = {
   visibleFields: PropTypes.arrayOf(PropTypes.string),
 };
 
-const defaultProps = {
-  fieldComponents: {
-    country: TextField,
-    addressLine1: TextField,
-    addressLine2: TextField,
-    city: TextField,
-    stateRegion: TextField,
-    zipCode: TextField,
-    addressType: {
-      component: TextField,
-      validate: validateAddressType,
-    },
+const defaultFieldComponents = {
+  country: TextField,
+  addressLine1: TextField,
+  addressLine2: TextField,
+  city: TextField,
+  stateRegion: TextField,
+  zipCode: TextField,
+  addressType: {
+    component: TextField,
+    validate: validateAddressType,
   },
-  headerComponent: address => (
-    <Field
-      label="Primary Address"
-      name="primaryAddress"
-      type="checkbox"
-      id={`PrimaryAddress---${address.id}`}
-      component={Checkbox}
-    />
-  ),
-  labelMap: {
-    addressType: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressType" />,
-    addressLine1: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressLine1" />,
-    addressLine2: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressLine2" />,
-    stateRegion: <FormattedMessage id="stripes-smart-components.addressEdit.label.stateRegion" />,
-    zipCode: <FormattedMessage id="stripes-smart-components.addressEdit.label.zipCode" />,
-    country: <FormattedMessage id="stripes-smart-components.addressEdit.label.country" />,
-    city: <FormattedMessage id="stripes-smart-components.addressEdit.label.city" />,
-  },
-  visibleFields: [
-    'country',
-    'addressLine1',
-    'addressLine2',
-    'city',
-    'stateRegion',
-    'zipCode',
-    'addressType',
-  ],
 };
 
-const AddressEdit = (props) => {
+const defaultHeaderComponent = address => (
+  <Field
+    label="Primary Address"
+    name="primaryAddress"
+    type="checkbox"
+    id={`PrimaryAddress---${address.id}`}
+    component={Checkbox}
+  />
+);
+
+const defaultLabelMap = {
+  addressType: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressType" />,
+  addressLine1: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressLine1" />,
+  addressLine2: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressLine2" />,
+  stateRegion: <FormattedMessage id="stripes-smart-components.addressEdit.label.stateRegion" />,
+  zipCode: <FormattedMessage id="stripes-smart-components.addressEdit.label.zipCode" />,
+  country: <FormattedMessage id="stripes-smart-components.addressEdit.label.country" />,
+  city: <FormattedMessage id="stripes-smart-components.addressEdit.label.city" />,
+};
+
+const defaultVisibleFields = [
+  'country',
+  'addressLine1',
+  'addressLine2',
+  'city',
+  'stateRegion',
+  'zipCode',
+  'addressType',
+];
+
+const AddressEdit = ({
+  fieldComponents = defaultFieldComponents,
+  headerComponent = defaultHeaderComponent,
+  labelMap = defaultLabelMap,
+  visibleFields = defaultVisibleFields,
+  ...rest
+}) => {
+  const props = { fieldComponents, headerComponent, labelMap, visibleFields, ...rest };
   const {
     addressObject,
     canDelete,
     uiId,
     handleSubmit,
     handleDelete,
     handleCancel,
-    labelMap,
-    visibleFields,
-    headerComponent,
-    fieldComponents
   } = props;
 
-  const mergedFieldComponents = Object.assign(defaultProps.fieldComponents, fieldComponents);
+  const mergedFieldComponents = { ...defaultFieldComponents, ...fieldComponents };
   const groupArray = [];
   let rowArray = [];
 
@@ -182,7 +186,6 @@ const AddressEdit = (props) => {
 };
 
 AddressEdit.propTypes = propTypes;
-AddressEdit.defaultProps = defaultProps;
 
 export default stripesFinalForm({
   navigationCheck: true,

diff --git a/lib/AddressFieldGroup/AddressView/AddressView.js b/lib/AddressFieldGroup/AddressView/AddressView.js
@@ -18,15 +18,15 @@ const propTypes = {
   visibleFields: PropTypes.arrayOf(PropTypes.string),
 };
 
-const defaultProps = {
-  headerField: 'primaryAddress',
-  headerFormatter: address => (
+function AddressView({
+  headerField = 'primaryAddress',
+  headerFormatter = address => (
     <FormattedMessage
       id={`stripes-smart-components.address.${address.primaryAddress ? 'primary' : 'alternate'}`}
     />
   ),
-  headingLevel: 5,
-  visibleFields: [
+  headingLevel = 5,
+  visibleFields = [
     'addressType',
     'addressLine1',
     'addressLine2',
@@ -35,17 +35,14 @@ const defaultProps = {
     'zipCode',
     'country',
   ],
-};
-
-function AddressView(props) {
+  ...rest
+}) {
+  const props = { headerField, headerFormatter, headingLevel, visibleFields, ...rest };
   const {
     addressObject,
     canEdit,
     handleEdit,
-    headerFormatter,
-    headingLevel,
     uiId,
-    visibleFields
   } = props;
 
   const defaultLabelMap = {
@@ -108,6 +105,5 @@ function AddressView(props) {
 }
 
 AddressView.propTypes = propTypes;
-AddressView.defaultProps = defaultProps;
 
 export default AddressView;
diff --git a/lib/ChangeDueDateDialog/LoanList.js b/lib/ChangeDueDateDialog/LoanList.js
@@ -26,14 +26,6 @@ const propTypes = {
   })
 };
 
-const defaultProps = {
-  allowSelection: true,
-  height: 400,
-  loans: [],
-  loanSelection: {},
-  requestCounts: {},
-};
-
 const manifest = Object.freeze({
   loanPolicies: {
     type: 'okapi',
@@ -44,13 +36,17 @@ const manifest = Object.freeze({
   },
 });
 
-const LoanList = (props) => {
-  const {
-    loanSelection,
-    onToggleLoanSelection,
-    requestCounts,
-  } = props;
-
+const LoanList = ({
+  alerts,
+  allowSelection = true,
+  height = 400,
+  loans = [],
+  loanSelection = {},
+  onToggleBulkLoanSelection,
+  onToggleLoanSelection,
+  requestCounts = {},
+  resources,
+}) => {
   const { formatMessage } = useIntl();
 
   const visibleColumns = [
@@ -64,22 +60,22 @@ const LoanList = (props) => {
     'loanListLoanPolicy',
   ];
 
-  if (props.allowSelection) visibleColumns.unshift('selected');
+  if (allowSelection) visibleColumns.unshift('selected');
 
   const rowUpdater = (rowData) => requestCounts[rowData.itemId];
 
   return (
     <MultiColumnList
       interactive={false}
-      height={props.height}
-      contentData={props.loans}
+      height={height}
+      contentData={loans}
       visibleColumns={visibleColumns}
       rowUpdater={rowUpdater}
       columnMapping={{
         selected: <Checkbox
           name="selected-all"
           checked={Object.values(loanSelection).includes(false) !== true}
-          onChange={props.onToggleBulkLoanSelection}
+          onChange={onToggleBulkLoanSelection}
           aria-label={formatMessage({ id: 'stripes-smart-components.cddd.selectAllLoans' })}
         />,
         loanListAlertDetails: <FormattedMessage id="stripes-smart-components.cddd.header.alertDetails" />,
@@ -101,7 +97,7 @@ const LoanList = (props) => {
             { loanName: get(loan, ['item', 'title']) }
           )}
         />,
-        loanListAlertDetails: loan => props.alerts[loan.id] || '',
+        loanListAlertDetails: loan => alerts[loan.id] || '',
         loanListTitle: loan => get(loan, ['item', 'title']),
         loanListItemStatus: loan => get(loan, ['item', 'status', 'name']),
         loanListCurrentDueDate:
@@ -110,7 +106,7 @@ const LoanList = (props) => {
         loanListBarcode: loan => get(loan, ['item', 'barcode']),
         loanListEffectiveCallNumber: loan => getEffectiveCallNumber(loan),
         loanListLoanPolicy: loan => {
-          const policies = get(props, ['resources', 'loanPolicies', 'records', 0, 'loanPolicies'], []);
+          const policies = get(resources, ['loanPolicies', 'records', 0, 'loanPolicies'], []);
           const policy = policies.find(p => p.id === loan.loanPolicyId) || {};
           return policy.name;
         },
@@ -128,7 +124,6 @@ const LoanList = (props) => {
   );
 };
 
-LoanList.defaultProps = defaultProps;
 LoanList.propTypes = propTypes;
 LoanList.manifest = manifest;
 

diff --git a/lib/ColumnManager/ColumnManager.js b/lib/ColumnManager/ColumnManager.js
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import useColumnManager from './useColumnManager';
 import ColumnManagerMenu from './ColumnManagerMenu';
 
-const ColumnManager = ({ id, columnMapping, children, excludeKeys, persist, visibleColumns: visibleColumnsProp }) => {
+const ColumnManager = ({ id, columnMapping = {}, children, excludeKeys = [], persist, visibleColumns: visibleColumnsProp }) => {
   const prefixId = `column-manager-${id}`;
 
   const nonToggleableColumns = useRef(excludeKeys).current;
@@ -45,11 +45,6 @@ const ColumnManager = ({ id, columnMapping, children, excludeKeys, persist, visi
   return children(renderProps);
 };
 
-ColumnManager.defaultProps = {
-  columnMapping: {},
-  excludeKeys: [],
-};
-
 ColumnManager.propTypes = {
   children: PropTypes.func.isRequired,
   columnMapping: PropTypes.object.isRequired,

diff --git a/lib/ColumnManager/ColumnManagerMenu.js b/lib/ColumnManager/ColumnManagerMenu.js
@@ -7,8 +7,8 @@ import { Checkbox, MenuSection } from '@folio/stripes-components';
 const ColumnManagerMenu = ({
   prefix,
   columnMapping,
-  visibleColumns,
-  excludeColumns,
+  visibleColumns = [],
+  excludeColumns = [],
   toggleColumn,
 }) => {
   const intl = useIntl();
@@ -51,9 +51,4 @@ ColumnManagerMenu.propTypes = {
   visibleColumns: PropTypes.arrayOf(PropTypes.string),
 };
 
-ColumnManagerMenu.defaultProps = {
-  visibleColumns: [],
-  excludeColumns: [],
-};
-
 export default ColumnManagerMenu;
diff --git a/lib/CustomFields/components/CustomFieldsForm/CustomFieldsForm.js b/lib/CustomFields/components/CustomFieldsForm/CustomFieldsForm.js
@@ -107,10 +107,6 @@ const propTypes = {
   viewRoute: PropTypes.string.isRequired,
 };
 
-const defaultProps = {
-  fieldOptionsStats: null,
-};
-
 const CustomFieldsForm = ({
   submitting,
   viewRoute,
@@ -130,7 +126,7 @@ const CustomFieldsForm = ({
   onFormReset,
   saveCustomFields,
   optionsStatsLoaded,
-  fieldOptionsStats,
+  fieldOptionsStats = null,
   onOptionDelete,
   optionsToDelete,
 }) => {
@@ -383,7 +379,6 @@ const CustomFieldsForm = ({
 };
 
 CustomFieldsForm.propTypes = propTypes;
-CustomFieldsForm.defaultProps = defaultProps;
 
 export default stripesFinalForm({
   navigationCheck: true,

diff --git a/...ields/components/FieldAccordion/edit-fields/components/AddOptionButton/AddOptionButton.js b/...ields/components/FieldAccordion/edit-fields/components/AddOptionButton/AddOptionButton.js
@@ -11,13 +11,9 @@ const propTypes = {
   optionsToAddLeft: PropTypes.number,
 };
 
-const defaultProps = {
-  optionsToAddLeft: null,
-};
-
 const AddOptionButton = ({
   onClick,
-  optionsToAddLeft,
+  optionsToAddLeft = null,
 }) => (
   <>
     {optionsToAddLeft !== null && (
@@ -42,6 +38,5 @@ const AddOptionButton = ({
 );
 
 AddOptionButton.propTypes = propTypes;
-AddOptionButton.defaultProps = defaultProps;
 
 export default AddOptionButton;
diff --git a/...omFields/components/FieldAccordion/edit-fields/shared-fields/OptionsField/OptionsField.js b/...omFields/components/FieldAccordion/edit-fields/shared-fields/OptionsField/OptionsField.js
@@ -36,20 +36,15 @@ const propTypes = {
   usedOptions: PropTypes.arrayOf(PropTypes.string),
 };
 
-const defaultProps = {
-  isMultiSelect: false,
-  maxOptionsNumber: null,
-};
-
 const isLabelDuplicated = (label, allLabels) => {
   return allLabels.filter(currentLabel => label === currentLabel).length > 1;
 };
 
 const OptionsField = ({
   fieldNamePrefix,
-  maxOptionsNumber,
+  maxOptionsNumber = null,
   changeFieldValue,
-  isMultiSelect,
+  isMultiSelect = false,
   usedOptions,
   optionsStatsLoaded,
   onOptionDelete,
@@ -269,6 +264,5 @@ const OptionsField = ({
 };
 
 OptionsField.propTypes = propTypes;
-OptionsField.defaultProps = defaultProps;
 
 export default OptionsField;