STCOM-1291 avoid defaultProps in functional components (#2285)

`defaultProps` for functional components will be deprecated in React v19 in favor of ES6 default parameters. Refs STCOM-1291
folio-org · May 15, 2024 · 1db2f16 · 1db2f16
1 parent b21648b
commit 1db2f16
Show file tree

Hide file tree

Showing 34 changed files with 171 additions and 348 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * `<MultiSelection/>`'s overlay will use the overlay container as its boundary when the `renderToOverlay` prop is applied, as opposed to the scrollParent of the control. Refs STCOM-1282.
 * Add `isCursorAtEnd` property to `TextArea` to place the cursor at the end of the value. Refs STCOM-1289.
 * Focus the last modified query field when opening `<AdvancedSearch>`. Refs STCOM-1288.
+* Avoid deprecated `defaultProps` for functional components. Refs STCOM-1291.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

diff --git a/lib/Accordion/Accordion.js b/lib/Accordion/Accordion.js
@@ -86,26 +86,27 @@ const getHighestStackOrder = () => {
   return highest;
 }
 
+
 const Accordion = (props) => {
   const {
     accordionSet,
     children,
+    className = '',
     closedByDefault,
     contentHeight,
     contentId: contentIdProp,
     contentRef,
     disabled,
-    header,
-    headerProps,
+    header = DefaultAccordionHeader,
+    headerProps = { headingLevel: 3 },
     id,
+    label,
+    onClickToggle = noop,
     onToggle: onToggleProp,
     open,
-    separator,
+    separator = true,
     toggleKeyHandlers,
     toggleKeyMap,
-    className,
-    onClickToggle,
-    label,
   } = props;
 
   const toggle = useRef(null);
@@ -236,11 +237,5 @@ const Accordion = (props) => {
 };
 
 Accordion.propTypes = propTypes;
-Accordion.defaultProps = {
-  className: '',
-  header: DefaultAccordionHeader,
-  separator: true,
-  onClickToggle: noop,
-};
 
 export default withAccordionSet(Accordion);
diff --git a/lib/Accordion/headers/DefaultAccordionHeader.js b/lib/Accordion/headers/DefaultAccordionHeader.js
@@ -19,13 +19,8 @@ const propTypes = {
   toggleRef: PropTypes.func,
 };
 
-const defaultProps = {
-  headerProps: {
-    headingLevel: 3,
-  }
-};
-
-const DefaultAccordionHeader = (props) => {
+const DefaultAccordionHeader = ({ headerProps = { headingLevel: 3 }, ...rest }) => {
+  const props = { headerProps, ...rest };
   function handleHeaderClick(e) {
     const { id, label } = props;
     props.onToggle({ id, label });
@@ -92,6 +87,5 @@ const DefaultAccordionHeader = (props) => {
 };
 
 DefaultAccordionHeader.propTypes = propTypes;
-DefaultAccordionHeader.defaultProps = defaultProps;
 
 export default DefaultAccordionHeader;
diff --git a/lib/AdvancedSearch/AdvancedSearch.js b/lib/AdvancedSearch/AdvancedSearch.js
@@ -36,12 +36,12 @@ const AdvancedSearch = ({
   searchOptions,
   onSearch,
   onCancel,
-  queryBuilder,
-  rowFormatter,
-  hasQueryOption,
-  hasMatchSelection,
-  defaultSearchOptionValue,
-  firstRowInitialSearch,
+  queryBuilder = defaultQueryBuilder,
+  rowFormatter = defaultRowFormatter,
+  hasQueryOption = true,
+  hasMatchSelection = true,
+  defaultSearchOptionValue = '',
+  firstRowInitialSearch = null,
   queryToRow,
   children,
 }) => {
@@ -103,13 +103,5 @@ const AdvancedSearch = ({
 };
 
 AdvancedSearch.propTypes = propTypes;
-AdvancedSearch.defaultProps = {
-  queryBuilder: defaultQueryBuilder,
-  defaultSearchOptionValue: '',
-  rowFormatter: defaultRowFormatter,
-  firstRowInitialSearch: null,
-  hasQueryOption: true,
-  hasMatchSelection: true,
-};
 
 export default AdvancedSearch;
diff --git a/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js b/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js
@@ -45,7 +45,7 @@ const AdvancedSearchRow = ({
   rowState,
   searchOptions,
   onChange,
-  errorMessage,
+  errorMessage = '',
   hasMatchSelection,
 }) => {
   const intl = useIntl();
@@ -134,8 +134,5 @@ const AdvancedSearchRow = ({
 };
 
 AdvancedSearchRow.propTypes = propTypes;
-AdvancedSearchRow.defaultProps = {
-  errorMessage: '',
-};
 
 export default AdvancedSearchRow;
diff --git a/lib/Badge/Badge.js b/lib/Badge/Badge.js
@@ -3,9 +3,14 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import css from './Badge.css';
 
-const Badge = props => (
-  <span className={classnames(props.className, css.badge, css[props.color], css[props.size])}>
-    <span className={css.label}>{props.children}</span>
+const Badge = ({
+  children,
+  className,
+  color = 'default',
+  size = 'medium',
+}) => (
+  <span className={classnames(className, css.badge, css[color], css[size])}>
+    <span className={css.label}>{children}</span>
   </span>
 );
 
@@ -16,9 +21,4 @@ Badge.propTypes = {
   size: PropTypes.oneOf(['small', 'medium']),
 };
 
-Badge.defaultProps = {
-  color: 'default',
-  size: 'medium',
-};
-
 export default Badge;
diff --git a/lib/Button/Button.js b/lib/Button/Button.js
@@ -31,12 +31,13 @@ export const propTypes = {
   type: PropTypes.string,
 };
 
-const defaultProps = {
-  buttonStyle: 'default',
-  type: 'button',
-};
-
-const Button = React.forwardRef((props, ref) => {
+const Button = React.forwardRef((
+  {
+    buttonStyle = 'default',
+    type = 'button',
+    ...rest
+  }, ref) => {
+  const props = { buttonStyle, type, ...rest };
   function getStyle() {
     const buttonBuiltIn = [];
     if (/\s/.test(props.buttonStyle)) {
@@ -81,7 +82,7 @@ const Button = React.forwardRef((props, ref) => {
     'type',
     'to',
   ]);
-  const { children, onClick, type, to, buttonRef } = props;
+  const { children, onClick, to, buttonRef } = props;
 
   const sharedProps = {
     ...inputCustom,
@@ -136,6 +137,5 @@ const Button = React.forwardRef((props, ref) => {
 
 Button.displayName = 'Button';
 Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
 
 export default Button;
diff --git a/lib/ButtonGroup/ButtonGroup.js b/lib/ButtonGroup/ButtonGroup.js
@@ -10,20 +10,13 @@ const propTypes = {
   tagName: PropTypes.string,
 };
 
-const defaultProps = {
-  fullWidth: false,
-  tagName: 'div'
-};
-
-const ButtonGroup = (props) => {
-  const {
-    children,
-    className,
-    fullWidth,
-    tagName: Tag,
-    ...rest
-  } = props;
-
+const ButtonGroup = ({
+  children,
+  className,
+  fullWidth = false,
+  tagName: Tag = 'div',
+  ...rest
+}) => {
   return (
     <Tag
       className={
@@ -41,6 +34,5 @@ const ButtonGroup = (props) => {
 };
 
 ButtonGroup.propTypes = propTypes;
-ButtonGroup.defaultProps = defaultProps;
 
 export default ButtonGroup;
diff --git a/lib/Callout/CalloutElement.js b/lib/Callout/CalloutElement.js
@@ -35,35 +35,36 @@ const propTypes = {
   type: PropTypes.string,
 };
 
-const defaultProps = {
-  timeout: '6000',
-  transition: 'slide',
-  type: 'success',
-};
-
-const CalloutElement = props => (
-  <Transition
-    {...props}
-    timeout={300}
-    appear
-  >
-    {transitionState => (
-      <div className={css.calloutRow}>
-        <div
-          className={getClassNamefromTransitionState(transitionState, props.type, css.calloutBase, props.transition)}
-          data-test-callout-element
-          id={props.id}
-        >
-          <Icon icon={getIconForType(props.type)} />
-          <div className={css.message}>{props.message}</div>
-          <IconButton icon="times" onClick={() => props.onDismiss(props.id)} data-test-callout-element-close-button />
+const CalloutElement = ({
+  timeout = '6000',
+  transition = 'slide',
+  type = 'success',
+  ...rest
+}) => {
+  const props = { timeout, transition, type, ...rest };
+  return (
+    <Transition
+      {...props}
+      timeout={300}
+      appear
+    >
+      {transitionState => (
+        <div className={css.calloutRow}>
+          <div
+            className={getClassNamefromTransitionState(transitionState, props.type, css.calloutBase, props.transition)}
+            data-test-callout-element
+            id={props.id}
+          >
+            <Icon icon={getIconForType(props.type)} />
+            <div className={css.message}>{props.message}</div>
+            <IconButton icon="times" onClick={() => props.onDismiss(props.id)} data-test-callout-element-close-button />
+          </div>
         </div>
-      </div>
-    )}
-  </Transition>
-);
+      )}
+    </Transition>
+  );
+}
 
 CalloutElement.propTypes = propTypes;
-CalloutElement.defaultProps = defaultProps;
 
 export default CalloutElement;
diff --git a/lib/ConfirmationModal/ConfirmationModal.js b/lib/ConfirmationModal/ConfirmationModal.js
@@ -28,24 +28,19 @@ const propTypes = {
   open: PropTypes.bool.isRequired,
 };
 
-const defaultProps = {
-  bodyTag: 'p',
-  buttonStyle: 'primary',
-  cancelButtonStyle: 'default',
-  isConfirmButtonDisabled: false,
-};
-
-const ConfirmationModal = (props) => {
+const ConfirmationModal = ({
+    bodyTag: Element = 'p',
+    buttonStyle = 'primary',
+    cancelButtonStyle = 'default',
+    isConfirmButtonDisabled = false,
+    ...rest
+  }) => {
+  const props = { Element, buttonStyle, cancelButtonStyle, isConfirmButtonDisabled, ...rest };
   const footerPrimary = useRef(null);
   const contentId = useRef(uniqueId('modal-content')).current;
   const testId = props.id || uniqueId('confirmation-');
   const cancelLabel = props.cancelLabel || <FormattedMessage id="stripes-components.cancel" />;
   const confirmLabel = props.confirmLabel || <FormattedMessage id="stripes-components.submit" />;
-  const {
-    bodyTag: Element,
-    onCancel,
-    isConfirmButtonDisabled,
-  } = props;
 
   const footer = (
     <ModalFooter>
@@ -73,7 +68,7 @@ const ConfirmationModal = (props) => {
   return (
     <Modal
       open={props.open}
-      onClose={onCancel}
+      onClose={props.onCancel}
       onOpen={() => { focusFooterPrimary(footerPrimary); }}
       id={testId}
       label={props.heading}
@@ -94,6 +89,5 @@ const ConfirmationModal = (props) => {
 };
 
 ConfirmationModal.propTypes = propTypes;
-ConfirmationModal.defaultProps = defaultProps;
 
 export default ConfirmationModal;