fix: convert functional components to be forwardRef components vs red…

…efining them as such Tests were failing because the top level component was a wrapper vs the actual component that was exposed. This also makes it so defaultProps and PropTypes are attached to the actual component exported.
kybru91 · Feb 4, 2023 · 86578ab · 86578ab
1 parent 17a141a
commit 86578ab
Show file tree

Hide file tree

Showing 17 changed files with 64 additions and 61 deletions.
diff --git a/src/Accordion.js b/src/Accordion.js
@@ -29,15 +29,15 @@ const defaultProps = {
   tag: 'div',
 };
 
-function Accordion(props) {
+const Accordion = React.forwardRef((props, ref) => {
   const {
     flush,
     open,
     toggle,
     className,
     cssModule,
     tag: Tag,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
   const classes = mapToCssModules(
@@ -57,9 +57,9 @@ function Accordion(props) {
       <Tag {...attributes} className={classes} ref={innerRef} />
     </AccordionContext.Provider>
   );
-}
+})
 
 Accordion.propTypes = propTypes;
 Accordion.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Accordion innerRef={ref} {...props} />);
+export default Accordion;
diff --git a/src/AccordionBody.js b/src/AccordionBody.js
@@ -27,7 +27,7 @@ const defaultProps = {
   tag: 'div',
 };
 
-function AccordionBody(props) {
+const AccordionBody = React.forwardRef((props, ref) => {
   const {
     className,
     cssModule,
@@ -57,9 +57,9 @@ function AccordionBody(props) {
       <Tag className="accordion-body">{children}</Tag>
     </Collapse>
   );
-}
+})
 
 AccordionBody.propTypes = propTypes;
 AccordionBody.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <AccordionBody innerRef={ref} {...props} />);
+export default AccordionBody;
diff --git a/src/AccordionHeader.js b/src/AccordionHeader.js
@@ -25,12 +25,12 @@ const defaultProps = {
   tag: 'h2',
 };
 
-function AccordionHeader(props) {
+const AccordionHeader = React.forwardRef((props, ref) => {
   const {
     className,
     cssModule,
     tag: Tag,
-    innerRef,
+    innerRef = ref,
     children,
     targetId,
     ...attributes
@@ -62,9 +62,9 @@ function AccordionHeader(props) {
       </button>
     </Tag>
   );
-}
+})
 
 AccordionHeader.propTypes = propTypes;
 AccordionHeader.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <AccordionHeader innerRef={ref} {...props} />);
+export default AccordionHeader;
diff --git a/src/AccordionItem.js b/src/AccordionItem.js
@@ -22,17 +22,17 @@ const defaultProps = {
   tag: 'div',
 };
 
-function AccordionItem(props) {
-  const { className, cssModule, tag: Tag, innerRef, ...attributes } = props;
+const AccordionItem = React.forwardRef((props, ref) => {
+  const { className, cssModule, tag: Tag, innerRef = ref, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'accordion-item'),
     cssModule,
   );
 
   return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+})
 
 AccordionItem.propTypes = propTypes;
 AccordionItem.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <AccordionItem innerRef={ref} {...props} />);
+export default AccordionItem;
diff --git a/src/Alert.js b/src/Alert.js
@@ -46,7 +46,7 @@ const defaultProps = {
   },
 };
 
-function Alert(props) {
+const Alert = React.forwardRef((props, ref) => {
   const {
     className,
     closeClassName,
@@ -103,9 +103,9 @@ function Alert(props) {
       {children}
     </Fade>
   );
-}
+});
 
 Alert.propTypes = propTypes;
 Alert.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Alert innerRef={ref} {...props} />);
+export default Alert;
diff --git a/src/Badge.js b/src/Badge.js
@@ -29,12 +29,12 @@ const defaultProps = {
   tag: 'span',
 };
 
-function Badge(props) {
+const Badge = React.forwardRef((props, ref) => {
   let {
     className,
     cssModule,
     color,
-    innerRef,
+    innerRef = ref,
     pill,
     tag: Tag,
     ...attributes
@@ -55,9 +55,9 @@ function Badge(props) {
   }
 
   return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+});
 
 Badge.propTypes = propTypes;
 Badge.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Badge innerRef={ref} {...props} />);
+export default Badge;
diff --git a/src/Button.js b/src/Button.js
@@ -42,7 +42,7 @@ const defaultProps = {
   tag: 'button',
 };
 
-function Button(props) {
+const Button = React.forwardRef((props, ref) => {
   const onClick = useCallback(
     (e) => {
       if (props.disabled) {
@@ -68,7 +68,7 @@ function Button(props) {
     outline,
     size,
     tag: Tag,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
 
@@ -104,9 +104,9 @@ function Button(props) {
       aria-label={ariaLabel}
     />
   );
-}
+});
 
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Button innerRef={ref} {...props} />);
+export default Button;
diff --git a/src/CardBody.js b/src/CardBody.js
@@ -21,17 +21,17 @@ const defaultProps = {
   tag: 'div',
 };
 
-function CardBody(props) {
-  const { className, cssModule, innerRef, tag: Tag, ...attributes } = props;
+const CardBody = React.forwardRef((props, ref) => {
+  const { className, cssModule, innerRef = ref, tag: Tag, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'card-body'),
     cssModule,
   );
 
   return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+});
 
 CardBody.propTypes = propTypes;
 CardBody.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <CardBody innerRef={ref} {...props} />);
+export default CardBody;
diff --git a/src/CardLink.js b/src/CardLink.js
@@ -18,17 +18,17 @@ const defaultProps = {
   tag: 'a',
 };
 
-function CardLink(props) {
-  const { className, cssModule, tag: Tag, innerRef, ...attributes } = props;
+const CardLink = React.forwardRef((props, ref) => {
+  const { className, cssModule, tag: Tag, innerRef = ref, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'card-link'),
     cssModule,
   );
 
   return <Tag {...attributes} ref={innerRef} className={classes} />;
-}
+})
 
 CardLink.propTypes = propTypes;
 CardLink.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <CardLink innerRef={ref} {...props} />);
+export default CardLink;
diff --git a/src/CloseButton.js b/src/CloseButton.js
@@ -25,8 +25,8 @@ const defaultProps = {
   'aria-label': 'close',
 };
 
-function CloseButton(props) {
-  const { className, cssModule, variant, innerRef, ...attributes } = props;
+const CloseButton = React.forwardRef((props, ref) => {
+  const { className, cssModule, variant, innerRef = ref, ...attributes } = props;
 
   const classes = mapToCssModules(
     classNames(className, 'btn-close', variant && `btn-close-${variant}`),
@@ -35,9 +35,9 @@ function CloseButton(props) {
   return (
     <button ref={innerRef} type="button" className={classes} {...attributes} />
   );
-}
+});
 
 CloseButton.propTypes = propTypes;
 CloseButton.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <CloseButton innerRef={ref} {...props} />);
+export default CloseButton;
diff --git a/src/Fade.js b/src/Fade.js
@@ -41,15 +41,15 @@ const defaultProps = {
   in: true,
 };
 
-function Fade(props) {
+const Fade = React.forwardRef((props, ref) => {
   const {
     tag: Tag,
     baseClass,
     baseClassActive,
     className,
     cssModule,
     children,
-    innerRef,
+    innerRef = ref,
     ...otherProps
   } = props;
 
@@ -72,9 +72,9 @@ function Fade(props) {
       }}
     </Transition>
   );
-}
+});
 
 Fade.propTypes = propTypes;
 Fade.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Fade innerRef={ref} {...props} />);
+export default Fade;
diff --git a/src/Form.js b/src/Form.js
@@ -17,6 +17,8 @@ const propTypes = {
 const defaultProps = {
   tag: 'form',
 };
+
+// TODO: Simple conversion of functional component "good-first-task"
 class Form extends Component {
   constructor(props) {
     super(props);

diff --git a/src/Placeholder.js b/src/Placeholder.js
@@ -25,12 +25,12 @@ const defaultProps = {
   tag: 'span',
 };
 
-function Placeholder(props) {
+const Placeholder = React.forwardRef((props, ref) => {
   let {
     className,
     cssModule,
     color,
-    innerRef,
+    innerRef = ref,
     tag: Tag,
     animation,
     size,
@@ -56,9 +56,9 @@ function Placeholder(props) {
   );
 
   return <Tag {...modifiedAttributes} className={classes} ref={innerRef} />;
-}
+})
 
 Placeholder.propTypes = propTypes;
 Placeholder.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Placeholder innerRef={ref} {...props} />);
+export default Placeholder;
diff --git a/src/Table.js b/src/Table.js
@@ -37,7 +37,7 @@ const defaultProps = {
   responsiveTag: 'div',
 };
 
-function Table(props) {
+const Table = React.forwardRef((props, ref) => {
   const {
     className,
     cssModule,
@@ -84,9 +84,9 @@ function Table(props) {
   }
 
   return table;
-}
+})
 
 Table.propTypes = propTypes;
 Table.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Table innerRef={ref} {...props} />);
+export default Table;
diff --git a/src/Toast.js b/src/Toast.js
@@ -29,7 +29,7 @@ const defaultProps = {
   },
 };
 
-function Toast(props) {
+const Toast = React.forwardRef((props, ref) => {
   const {
     className,
     cssModule,
@@ -38,7 +38,7 @@ function Toast(props) {
     children,
     transition,
     fade,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
 
@@ -64,9 +64,9 @@ function Toast(props) {
       {children}
     </Fade>
   );
-}
+})
 
 Toast.propTypes = propTypes;
 Toast.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Toast innerRef={ref} {...props} />);
+export default Toast;
diff --git a/src/ToastBody.js b/src/ToastBody.js
@@ -18,17 +18,17 @@ const defaultProps = {
   tag: 'div',
 };
 
-function ToastBody(props) {
-  const { className, cssModule, innerRef, tag: Tag, ...attributes } = props;
+const ToastBody = React.forwardRef((props, ref) => {
+  const { className, cssModule, innerRef = ref, tag: Tag, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'toast-body'),
     cssModule,
   );
 
   return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+});
 
 ToastBody.propTypes = propTypes;
 ToastBody.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <ToastBody innerRef={ref} {...props} />);
+export default ToastBody;