fix(components): add forwardRef to all components that were missing

It wasn't clear why some components had ref forwarded and other didn't. To fix this, all components now (and from now on) forward their refs BREAKING CHANGE: All components now support ref forwarding.
estevanmaito · Jul 19, 2020 · fb240a2 · fb240a2
1 parent 3e3c8a6
commit fb240a2
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 51 deletions.
diff --git a/src/Badge.js b/src/Badge.js
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function Badge(props) {
+const Badge = React.forwardRef(function Badge(props, ref) {
   const { className, children, type, ...other } = props
 
   const {
@@ -22,11 +22,11 @@ function Badge(props) {
   const cls = classNames(baseStyle, typeStyle[type], className)
 
   return (
-    <span className={cls} {...other}>
+    <span className={cls} ref={ref} {...other}>
       {children}
     </span>
   )
-}
+})
 
 Badge.propTypes = {
   children: PropTypes.node,

diff --git a/src/Card.js b/src/Card.js
@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function Card({ className, children, colored }) {
+const Card = React.forwardRef(function Card(props, ref) {
+  const { className, children, colored, ...other } = props
   const {
     theme: { card },
   } = useContext(ThemeContext)
@@ -13,8 +14,12 @@ function Card({ className, children, colored }) {
 
   const cls = classNames(baseStyle, !colored && uncoloredStyle, className)
 
-  return <div className={cls}>{children}</div>
-}
+  return (
+    <div className={cls} ref={ref} {...other}>
+      {children}
+    </div>
+  )
+})
 
 Card.propTypes = {
   children: PropTypes.element,

diff --git a/src/CardBody.js b/src/CardBody.js
@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function CardBody({ className, children }) {
+const CardBody = React.forwardRef(function CardBody(props, ref) {
+  const { className, children, ...other } = props
   const {
     theme: { cardBody },
   } = useContext(ThemeContext)
@@ -12,8 +13,12 @@ function CardBody({ className, children }) {
 
   const cls = classNames(baseStyle, className)
 
-  return <div className={cls}>{children}</div>
-}
+  return (
+    <div className={cls} ref={ref} {...other}>
+      {children}
+    </div>
+  )
+})
 
 CardBody.propTypes = {
   children: PropTypes.element,

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -5,7 +5,8 @@ import { ThemeContext } from './context/ThemeContext'
 import Transition from './Transition'
 import FocusLock from 'react-focus-lock'
 
-function Dropdown({ children, onClose, isOpen, className, align, ...other }) {
+const Dropdown = React.forwardRef(function Dropdown(props, ref) {
+  const { children, onClose, isOpen, className, align, ...other } = props
   const {
     theme: { dropdown },
   } = useContext(ThemeContext)
@@ -44,7 +45,7 @@ function Dropdown({ children, onClose, isOpen, className, align, ...other }) {
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div>
+      <div ref={ref}>
         <FocusLock returnFocus>
           <ul className={cls} ref={dropdownRef} aria-label="submenu" {...other}>
             {children}
@@ -53,7 +54,7 @@ function Dropdown({ children, onClose, isOpen, className, align, ...other }) {
       </div>
     </Transition>
   )
-}
+})
 
 Dropdown.propTypes = {
   children: PropTypes.node,

diff --git a/src/HelperText.js b/src/HelperText.js
@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function HelperText({ children, valid, className }) {
+const HelperText = React.forwardRef(function HelperText(props, ref) {
+  const { children, valid, className, ...other } = props
   const {
     theme: { helperText },
   } = useContext(ThemeContext)
@@ -24,8 +25,12 @@ function HelperText({ children, valid, className }) {
 
   const cls = classNames(baseStyle, validationStyle(valid), className)
 
-  return <span className={cls}>{children}</span>
-}
+  return (
+    <span className={cls} ref={ref} {...other}>
+      {children}
+    </span>
+  )
+})
 
 HelperText.propTypes = {
   children: PropTypes.node,

diff --git a/src/Label.js b/src/Label.js
@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function Label({ children, check, radio, disabled, className }) {
+const Label = React.forwardRef(function Label(props, ref) {
+  const { children, check, radio, disabled, className, ...other } = props
   const {
     theme: { label },
   } = useContext(ThemeContext)
@@ -20,8 +21,12 @@ function Label({ children, check, radio, disabled, className }) {
     className
   )
 
-  return <label className={cls}>{children}</label>
-}
+  return (
+    <label className={cls} ref={ref} {...other}>
+      {children}
+    </label>
+  )
+})
 
 Label.propTypes = {
   children: PropTypes.element,

diff --git a/src/ModalBody.js b/src/ModalBody.js
@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function ModalBody({ children, className }) {
+const ModalBody = React.forwardRef(function ModalBody(props, ref) {
+  const { children, className, ...other } = props
   const {
     theme: { modalBody },
   } = useContext(ThemeContext)
@@ -12,8 +13,12 @@ function ModalBody({ children, className }) {
 
   const cls = classNames(baseStyle, className)
 
-  return <div className={cls}>{children}</div>
-}
+  return (
+    <div className={cls} ref={ref} {...other}>
+      {children}
+    </div>
+  )
+})
 
 ModalBody.propTypes = {
   children: PropTypes.node,

diff --git a/src/ModalFooter.js b/src/ModalFooter.js
@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function ModalFooter({ children, className }) {
+const ModalFooter = React.forwardRef(function ModalFooter(props, ref) {
+  const { children, className, ...other } = props
   const {
     theme: { modalFooter },
   } = useContext(ThemeContext)
@@ -12,8 +13,12 @@ function ModalFooter({ children, className }) {
 
   const cls = classNames(baseStyle, className)
 
-  return <footer className={cls}>{children}</footer>
-}
+  return (
+    <footer className={cls} ref={ref} {...other}>
+      {children}
+    </footer>
+  )
+})
 
 ModalFooter.propTypes = {
   children: PropTypes.node,

diff --git a/src/ModalHeader.js b/src/ModalHeader.js
@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function ModalHeader({ children, className }) {
+const ModalHeader = React.forwardRef(function ModalHeader(props, ref) {
+  const { children, className, ...other } = props
   const {
     theme: { modalHeader },
   } = useContext(ThemeContext)
@@ -12,8 +13,12 @@ function ModalHeader({ children, className }) {
 
   const cls = classNames(baseStyle, className)
 
-  return <p className={cls}>{children}</p>
-}
+  return (
+    <p className={cls} ref={ref} {...other}>
+      {children}
+    </p>
+  )
+})
 
 ModalHeader.propTypes = {
   children: PropTypes.node,

diff --git a/src/Pagination.js b/src/Pagination.js
@@ -66,7 +66,8 @@ PageButton.propTypes = {
 
 export const EmptyPageButton = () => <span className="px-2 py-1">...</span>
 
-function Pagination({ totalResults, resultsPerPage, label, onChange }) {
+const Pagination = React.forwardRef(function Pagination(props, ref) {
+  const { totalResults, resultsPerPage, label, onChange, ...other } = props
   const [pages, setPages] = useState([])
   const [activePage, setActivePage] = useState(1)
 
@@ -132,7 +133,10 @@ function Pagination({ totalResults, resultsPerPage, label, onChange }) {
   const baseStyle = pagination.base
 
   return (
-    <div className={baseStyle}>
+    <div className={baseStyle} ref={ref} {...other}>
+      {/*
+       * This (label) should probably be an option, and not the default
+       */}
       <span className="flex items-center font-semibold tracking-wide uppercase">
         Showing {activePage * resultsPerPage - resultsPerPage + 1}-
         {Math.min.apply(this, [activePage * resultsPerPage, totalResults])} of {totalResults}
@@ -173,7 +177,7 @@ function Pagination({ totalResults, resultsPerPage, label, onChange }) {
       </div>
     </div>
   )
-}
+})
 
 Pagination.propTypes = {
   totalResults: PropTypes.number.isRequired,

diff --git a/src/Table.js b/src/Table.js
@@ -1,13 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-function Table({ children }) {
+const Table = React.forwardRef(function Table(props, ref) {
+  const { children, ...other } = props
   return (
     <div className="w-full overflow-x-auto">
-      <table className="w-full whitespace-no-wrap">{children}</table>
+      <table className="w-full whitespace-no-wrap" ref={ref} {...other}>
+        {children}
+      </table>
     </div>
   )
-}
+})
 
 Table.propTypes = {
   children: PropTypes.node,

diff --git a/src/TableBody.js b/src/TableBody.js
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function TableBody(props) {
+const TableBody = React.forwardRef(function TableBody(props, ref) {
   const { className, children, ...other } = props
 
   const {
@@ -15,11 +15,11 @@ function TableBody(props) {
   const cls = classNames(baseStyle, className)
 
   return (
-    <tbody className={cls} {...other}>
+    <tbody className={cls} ref={ref} {...other}>
       {children}
     </tbody>
   )
-}
+})
 
 TableBody.propTypes = {
   children: PropTypes.node,

diff --git a/src/TableCell.js b/src/TableCell.js
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function TableCell(props) {
+const TableCell = React.forwardRef(function TableCell(props, ref) {
   const { className, children, ...other } = props
 
   const {
@@ -15,11 +15,11 @@ function TableCell(props) {
   const cls = classNames(baseStyle, className)
 
   return (
-    <td className={cls} {...other}>
+    <td className={cls} ref={ref} {...other}>
       {children}
     </td>
   )
-}
+})
 
 TableCell.propTypes = {
   children: PropTypes.node,

diff --git a/src/TableContainer.js b/src/TableContainer.js
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function TableContainer(props) {
+const TableContainer = React.forwardRef(function TableContainer(props, ref) {
   const { className, children, ...other } = props
 
   const {
@@ -15,11 +15,11 @@ function TableContainer(props) {
   const cls = classNames(baseStyle, className)
 
   return (
-    <div className={cls} {...other}>
+    <div className={cls} ref={ref} {...other}>
       {children}
     </div>
   )
-}
+})
 
 TableContainer.propTypes = {
   children: PropTypes.node,

diff --git a/src/TableFooter.js b/src/TableFooter.js
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function TableFooter(props) {
+const TableFooter = React.forwardRef(function TableFooter(props, ref) {
   const { className, children, ...other } = props
 
   const {
@@ -15,11 +15,11 @@ function TableFooter(props) {
   const cls = classNames(baseStyle, className)
 
   return (
-    <div className={cls} {...other}>
+    <div className={cls} ref={ref} {...other}>
       {children}
     </div>
   )
-}
+})
 
 TableFooter.propTypes = {
   children: PropTypes.node,

diff --git a/src/TableHeader.js b/src/TableHeader.js
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { ThemeContext } from './context/ThemeContext'
 
-function TableHeader(props) {
+const TableHeader = React.forwardRef(function TableHeader(props, ref) {
   const { className, children, ...other } = props
 
   const {
@@ -15,11 +15,11 @@ function TableHeader(props) {
   const cls = classNames(baseStyle, className)
 
   return (
-    <thead className={cls} {...other}>
+    <thead className={cls} ref={ref} {...other}>
       {children}
     </thead>
   )
-}
+})
 
 TableHeader.propTypes = {
   children: PropTypes.node,