feat: Table components now forward ref

react/Table/Readme.md

@@ -8,11 +8,12 @@ import {
   TableCell
 } from 'cozy-ui/transpiled/react/Table';
 
+let refRow = ''
 const cellStyles = { flexGrow: 1 };
 
 <Table>
   <TableHead>
-    <TableRow>
+    <TableRow ref={c => (refRow = c)} onClick={() => alert(refRow)}>
       <TableHeader style={cellStyles}>Firstname</TableHeader>
       <TableHeader style={cellStyles}>Lastname</TableHeader>
     </TableRow>

react/Table/index.jsx

@@ -1,39 +1,69 @@
 import React from 'react'
-import styles from './styles.styl'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+
+import styles from './styles.styl'
 
-export const Table = props => {
+export const Table = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.Table, className)} {...rest} />
-}
+  return <div className={cx(styles.Table, className)} {...rest} ref={ref} />
+})
 
-export const TableHead = props => {
+export const TableHead = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableHead, className)} {...rest} />
-}
+  return <div className={cx(styles.TableHead, className)} {...rest} ref={ref} />
+})
 
-export const TableBody = props => {
+export const TableBody = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableBody, className)} {...rest} />
-}
+  return <div className={cx(styles.TableBody, className)} {...rest} ref={ref} />
+})
 
-export const TableRow = props => {
+export const TableRow = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableRow, className)} {...rest} />
-}
+  return <div className={cx(styles.TableRow, className)} {...rest} ref={ref} />
+})
 
-export const TableCell = props => {
+export const TableCell = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableCell, className)} {...rest} />
-}
+  return <div className={cx(styles.TableCell, className)} {...rest} ref={ref} />
+})
 
-export const TableHeader = props => {
+export const TableHeader = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableHeader, className)} {...rest} />
+  return (
+    <div className={cx(styles.TableHeader, className)} {...rest} ref={ref} />
+  )
+})
+
+Table.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+TableHead.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+TableBody.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+
+TableRow.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+TableCell.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+TableHeader.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 }