Merge pull request #2940 from SUI-Components/atom-panel-forward-ref

feat(components/atom/panel): add forward ref

Author: andresin87

components/atom/panel/src/ColorPanel.js

@@ -1,24 +1,27 @@
+import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
 import PolymorphicElement from '@s-ui/react-primitive-polymorphic-element'
 
 import {ALPHA, BORDER_RADIUS, COLORS, DEFAULT_ALPHA, DEFAULT_COLOR, ELEVATION, getColorClassNames} from './settings.js'
 
-const ColorPanel = ({
-  as = 'div',
-  alpha = DEFAULT_ALPHA,
-  color = DEFAULT_COLOR,
-  children,
-  id,
-  className,
-  ...otherProps
-}) => {
-  return (
-    <PolymorphicElement as={as} id={id} className={getColorClassNames({className, alpha, color, ...otherProps})}>
-      {children}
-    </PolymorphicElement>
-  )
-}
+const ColorPanel = forwardRef(
+  (
+    {as = 'div', alpha = DEFAULT_ALPHA, color = DEFAULT_COLOR, children, id, className, ...otherProps},
+    forwardedRef
+  ) => {
+    return (
+      <PolymorphicElement
+        ref={forwardedRef}
+        as={as}
+        id={id}
+        className={getColorClassNames({className, alpha, color, ...otherProps})}
+      >
+        {children}
+      </PolymorphicElement>
+    )
+  }
+)
 
 ColorPanel.displayName = 'ColorPanel'
 

components/atom/panel/src/ImagePanel.js

@@ -1,3 +1,4 @@
+import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
 import PolymorphicElement from '@s-ui/react-primitive-polymorphic-element'
@@ -13,26 +14,32 @@ import {
   getImageStyles
 } from './settings.js'
 
-const ImagePanel = ({
-  as = 'div',
-  id,
-  verticalAlign = DEFAULT_VERTICAL_ALIGNMENT,
-  horizontalAlign = DEFAULT_HORIZONTAL_ALIGNMENT,
-  children,
-  className,
-  ...props
-}) => {
-  return (
-    <PolymorphicElement
-      as={as}
-      id={id}
-      className={getImageClassNames({className, ...props})}
-      style={getImageStyles(props)}
-    >
-      {children}
-    </PolymorphicElement>
-  )
-}
+const ImagePanel = forwardRef(
+  (
+    {
+      as = 'div',
+      id,
+      verticalAlign = DEFAULT_VERTICAL_ALIGNMENT,
+      horizontalAlign = DEFAULT_HORIZONTAL_ALIGNMENT,
+      children,
+      className,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    return (
+      <PolymorphicElement
+        ref={forwardedRef}
+        as={as}
+        id={id}
+        className={getImageClassNames({className, ...props})}
+        style={getImageStyles(props)}
+      >
+        {children}
+      </PolymorphicElement>
+    )
+  }
+)
 
 ImagePanel.displayName = 'ImagePanel'
 

components/atom/panel/src/index.js

@@ -1,3 +1,4 @@
+import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
 import ColorPanel from './ColorPanel.js'
@@ -14,32 +15,38 @@ import {
 } from './settings.js'
 import ImagePanel from './ImagePanel.js'
 
-const AtomPanel = ({
-  alpha,
-  color,
-  elevation = DEFAULT_ELEVATION,
-  horizontalAlign,
-  verticalAlign,
-  rounded = DEFAULT_BORDER_RADIUS,
-  src,
-  className,
-  ...props
-}) => {
-  const [Component, componentProps] = isImagePanel({src})
-    ? [ImagePanel, {src, horizontalAlign, verticalAlign}]
-    : [ColorPanel, {alpha}]
+const AtomPanel = forwardRef(
+  (
+    {
+      alpha,
+      color,
+      elevation = DEFAULT_ELEVATION,
+      horizontalAlign,
+      verticalAlign,
+      rounded = DEFAULT_BORDER_RADIUS,
+      src,
+      className,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const [Component, componentProps] = isImagePanel({src})
+      ? [ImagePanel, {src, horizontalAlign, verticalAlign}]
+      : [ColorPanel, {alpha}]
 
-  return (
-    <Component
-      className={className}
-      color={color}
-      elevation={elevation}
-      rounded={rounded}
-      {...componentProps}
-      {...props}
-    />
-  )
-}
+    return (
+      <Component
+        ref={forwardedRef}
+        className={className}
+        color={color}
+        elevation={elevation}
+        rounded={rounded}
+        {...componentProps}
+        {...props}
+      />
+    )
+  }
+)
 
 AtomPanel.displayName = 'AtomPanel'
 

components/atom/panel/test/index.test.js

@@ -5,6 +5,7 @@
 /* eslint react/jsx-no-undef:0 */
 /* eslint no-undef:0 */
 
+import {createRef} from 'react'
 import ReactDOM from 'react-dom'
 
 import chai, {expect} from 'chai'
@@ -93,6 +94,40 @@ describe(json.name, () => {
       expect(findClassName(container.innerHTML)).to.not.be.null
     })
 
+    describe('forwardRef', () => {
+      it('should return forwardRef html DIV element when giving a ref to the component', () => {
+        // Given
+        const props = {}
+        const ref = createRef()
+
+        // When
+        const component = <Component {...props} ref={ref} />
+        const div = document.createElement('div')
+        ReactDOM.render(component, div)
+
+        // Then
+        expect(ref.current).to.not.equal(undefined)
+        expect(ref.current.nodeName).to.equal('DIV')
+      })
+
+      it('should return forwardRef html DIV element when giving a ref to the component', () => {
+        // Given
+        const props = {
+          src: '#'
+        }
+        const ref = createRef()
+
+        // When
+        const component = <Component {...props} ref={ref} />
+        const div = document.createElement('div')
+        ReactDOM.render(component, div)
+
+        // Then
+        expect(ref.current).to.not.equal(undefined)
+        expect(ref.current.nodeName).to.equal('DIV')
+      })
+    })
+
     describe('ColorPanel', () => {
       it('should render without crashing', () => {
         // Given