ERM-3273 React v19: refactor stripes-erm-components away from default…

… props for functional components (#686) * set default values directly in the prop statements of components Co-authored-by: EthanFreestone <[email protected]>
folio-org · Jun 19, 2024 · c9b5519 · c9b5519
1 parent 8c439cd
commit c9b5519
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 31 deletions.
diff --git a/lib/CustomMetaSection/CustomMetaSectionHeader.js b/lib/CustomMetaSection/CustomMetaSectionHeader.js
@@ -15,36 +15,37 @@ const propTypes = {
   open: PropTypes.bool,
 };
 
-const defaultProps = {
-  headingLevel: 4
-};
-
-const CustomMetaAccordionHeader = (props) => {
+const CustomMetaAccordionHeader = ({
+  contentId,
+  displayWhenClosed,
+  displayWhenOpen,
+  headingLevel = 4,
+  id,
+  label,
+  onToggle,
+  open
+}) => {
   let toggleElem = null;
   let labelElem = null;
   let containerElem = null;
 
   function handleHeaderClick(e) {
-    const { id, label } = props;
-    props.onToggle({ id, label });
+    onToggle({ id, label });
     e.stopPropagation();
   }
 
   function handleKeyPress(e) {
     e.preventDefault();
-    if (e.charCode === 13 || e.charCode === 32) { // enter key or space key...
+    if (e.charCode === 13 || e.charCode === 32) { // enter key or space key
       if (e.target === toggleElem || e.target === labelElem || e.target === containerElem) {
-        const { id, label } = props;
-        props.onToggle({ id, label });
+        onToggle({ id, label });
       }
     }
   }
 
-  const { label, open, displayWhenOpen, displayWhenClosed, contentId } = props;
-
   return (
     <div ref={(ref) => { containerElem = ref; }} className={css.headerWrapper}>
-      <Headline className="sr-only" margin="none" size="small" tag={`h${props.headingLevel}`}>
+      <Headline className="sr-only" margin="none" size="small" tag={`h${headingLevel}`}>
         <FormattedMessage id="stripes-components.metaSection.screenReaderLabel" />
       </Headline>
       <button
@@ -58,7 +59,7 @@ const CustomMetaAccordionHeader = (props) => {
         type="button"
       >
         <div className={css.metaHeader}>
-          <Icon icon={props.open ? 'caret-up' : 'caret-down'} size="small" />
+          <Icon icon={open ? 'caret-up' : 'caret-down'} size="small" />
           <div ref={(ref) => { labelElem = ref; }}>
             <div className={css.metaHeaderLabel}>{label}</div>
           </div>
@@ -70,6 +71,5 @@ const CustomMetaAccordionHeader = (props) => {
 };
 
 CustomMetaAccordionHeader.propTypes = propTypes;
-CustomMetaAccordionHeader.defaultProps = defaultProps;
 
 export default CustomMetaAccordionHeader;
diff --git a/lib/DocumentsFieldArray/DocumentsFieldArray.js b/lib/DocumentsFieldArray/DocumentsFieldArray.js
@@ -13,11 +13,11 @@ import EditCard from '../EditCard';
 import DocumentField from './DocumentField';
 
 const DocumentsFieldArray = ({
-  addDocBtnLabel,
+  addDocBtnLabel = <FormattedMessage id="stripes-erm-components.doc.addDoc" />,
   deleteBtnTooltipMsgId,
   documentCategories,
-  hasDownloadPerm,
-  isEmptyMessage,
+  hasDownloadPerm = false,
+  isEmptyMessage = <FormattedMessage id="stripes-erm-components.doc.noDocs" />,
   fields: { name },
   onDownloadFile,
   onUploadFile
@@ -98,10 +98,4 @@ DocumentsFieldArray.propTypes = {
   onUploadFile: PropTypes.func,
 };
 
-DocumentsFieldArray.defaultProps = {
-  addDocBtnLabel: <FormattedMessage id="stripes-erm-components.doc.addDoc" />,
-  hasDownloadPerm: false,
-  isEmptyMessage: <FormattedMessage id="stripes-erm-components.doc.noDocs" />,
-};
-
 export default DocumentsFieldArray;
diff --git a/lib/InternalContactsFieldArray/InternalContactsFieldArray.js b/lib/InternalContactsFieldArray/InternalContactsFieldArray.js
@@ -17,8 +17,8 @@ import { composeValidators, requiredValidator as required } from '../utils';
 import UserField from './UserField';
 
 const InternalContactsFieldArray = ({
-  addContactBtnLabel,
-  isEmptyMessage,
+  addContactBtnLabel = <FormattedMessage id="stripes-erm-components.contacts.addContact" />,
+  isEmptyMessage = <FormattedMessage id="stripes-erm-components.contacts.noContacts" />,
   fields: { name },
   contactRoles,
   users: propUsers
@@ -134,9 +134,4 @@ InternalContactsFieldArray.propTypes = {
   users: PropTypes.arrayOf(PropTypes.object)
 };
 
-InternalContactsFieldArray.defaultProps = {
-  addContactBtnLabel: <FormattedMessage id="stripes-erm-components.contacts.addContact" />,
-  isEmptyMessage: <FormattedMessage id="stripes-erm-components.contacts.noContacts" />,
-};
-
 export default InternalContactsFieldArray;