feat(Ref): add component

Author: Alexander Fedyashov

package.json

@@ -69,7 +69,7 @@
     "babel-plugin-__coverage__": "^11.0.0",
     "babel-plugin-lodash": "^3.2.10",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-plugin-transform-react-handled-props": "^0.2.3",
+    "babel-plugin-transform-react-handled-props": "^0.2.5",
     "babel-plugin-transform-react-remove-prop-types": "^0.3.2",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.18.0",

src/addons/Ref/Ref.js

@@ -18,7 +18,7 @@ export default class Ref extends Component {
      *
      * @param {HTMLElement} node - Referred node.
      */
-    innerRef: PropTypes.func.isRequired,
+    innerRef: PropTypes.func,
   }
 
   static _meta = {
@@ -28,9 +28,10 @@ export default class Ref extends Component {
 
   componentDidMount() {
     const { innerRef } = this.props
-    const node = findDOMNode(this)
 
-    innerRef(node)
+    // Heads up! Don't move this condition, it's a short circle that avoids run of `findDOMNode`
+    // if `innerRef` isn't passed
+    if (innerRef) innerRef(findDOMNode(this))
   }
 
   render() {

src/addons/TextArea/TextArea.js

@@ -127,8 +127,8 @@ class TextArea extends Component {
     return (
       <ElementType
         {...rest}
+        innerRef={this.handleRef}
         onChange={this.handleChange}
-        ref={this.handleRef}
         rows={rows}
         style={{ height, resize, ...style }}
         value={value}

src/behaviors/Visibility/Visibility.js

@@ -305,6 +305,6 @@ export default class Visibility extends Component {
     const ElementType = getElementType(Visibility, this.props)
     const rest = getUnhandledProps(Visibility, this.props)
 
-    return <ElementType {...rest} ref={this.handleRef}>{children}</ElementType>
+    return <ElementType {...rest} innerRef={this.handleRef}>{children}</ElementType>
   }
 }

src/elements/Button/Button.js

@@ -281,8 +281,8 @@ class Button extends Component {
         {...rest}
         className={classes}
         disabled={(disabled && ElementType === 'button') || undefined}
+        innerRef={this.handleRef}
         onClick={this.handleClick}
-        ref={this.handleRef}
         tabIndex={tabIndex}
       >
         {hasChildren && children}

src/elements/Image/Image.js

@@ -70,8 +70,9 @@ function Image(props) {
     className,
   )
   const rest = getUnhandledProps(Image, props)
+  const wrappedImage = !_.isNil(dimmer) || !_.isNil(label) || !_.isNil(wrapped) || !childrenUtils.isNil(children)
   const ElementType = getElementType(Image, props, () => {
-    if (!_.isNil(dimmer) || !_.isNil(label) || !_.isNil(wrapped) || !childrenUtils.isNil(children)) return 'div'
+    if (wrappedImage) return 'div'
   })
 
   if (!childrenUtils.isNil(children)) {
@@ -81,7 +82,7 @@ function Image(props) {
   const rootProps = { ...rest, className: classes }
   const imgTagProps = { alt, src, height, width }
 
-  if (ElementType === 'img') return <ElementType {...rootProps} {...imgTagProps} />
+  if (!wrappedImage) return <ElementType {...rootProps} {...imgTagProps} />
 
   return (
     <ElementType {...rootProps} href={href}>

src/addons/Ref/withRef.js renamed to src/hoc/withRef.js

@@ -1,22 +1,24 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-import Ref from './Ref'
+import Ref from '../addons/Ref'
 
-const withRef = Child => class extends Component {
+const withRef = Child => class refHOC extends Component {
   static propTypes = {
     /**
      * Called when componentDidMount.
      *
      * @param {HTMLElement} node - Referred node.
      */
-    innerRef: PropTypes.func.isRequired,
+    innerRef: PropTypes.func,
   }
 
   render() {
     const { innerRef, ...rest } = this.props
 
     if (typeof Child === 'string') return <Child {...rest} ref={innerRef} />
+    if (Child._meta) return <Child {...rest} innerRef={innerRef} />
+
     return (
       <Ref innerRef={innerRef}>
         <Child {...rest} />

src/lib/getElementType.js

@@ -1,4 +1,4 @@
-import withRef from 'src/addons/Ref/withRef'
+import withRef from 'src/hoc/withRef'
 
 /**
  * Returns a createElement() type based on the props of the Component.

src/modules/Dropdown/Dropdown.js

@@ -1263,13 +1263,13 @@ export default class Dropdown extends Component {
         {...rest}
         {...ariaOptions}
         className={classes}
+        innerRef={this.handleRef}
         onBlur={this.handleBlur}
         onClick={this.handleClick}
         onMouseDown={this.handleMouseDown}
         onFocus={this.handleFocus}
         onChange={this.handleChange}
         tabIndex={this.computeTabIndex()}
-        ref={this.handleRef}
       >
         {this.renderLabels()}
         {this.renderSearchInput()}

src/modules/Modal/Modal.js

@@ -288,15 +288,15 @@ class Modal extends Component {
 
     if (!childrenUtils.isNil(children)) {
       return (
-        <ElementType {...rest} className={classes} style={{ marginTop, ...style }} ref={this.handleRef}>
+        <ElementType {...rest} className={classes} style={{ marginTop, ...style }} innerRef={this.handleRef}>
           {closeIconJSX}
           {children}
         </ElementType>
       )
     }
 
     return (
-      <ElementType {...rest} className={classes} style={{ marginTop, ...style }} ref={this.handleRef}>
+      <ElementType {...rest} className={classes} style={{ marginTop, ...style }} innerRef={this.handleRef}>
         {closeIconJSX}
         {ModalHeader.create(header)}
         {ModalContent.create(content)}