feat(Ref): add component

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 = {
@@ -27,9 +27,12 @@ export default class Ref extends Component {
   }
 
   componentDidMount() {
+    // Heads up! Don't move this condition, it's a short circle that avoids run of `findDOMNode`
+    // if `innerRef` isn't passed
     const { innerRef } = this.props
-    const node = findDOMNode(this)
+    if(!innerRef) return
 
+    const node = findDOMNode(this)
     innerRef(node)
   }
 

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 → src/hoc/withRef.js

@@ -1,22 +1,23 @@
 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} />
+
     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)}

src/modules/Popup/Popup.js

@@ -349,7 +349,7 @@ export default class Popup extends Component {
     const ElementType = getElementType(Popup, this.props)
 
     const popupJSX = (
-      <ElementType {...rest} className={classes} style={style} ref={this.handlePopupRef}>
+      <ElementType {...rest} className={classes} style={style} innerRef={this.handlePopupRef}>
         {children}
         {childrenUtils.isNil(children) && PopupHeader.create(header)}
         {childrenUtils.isNil(children) && PopupContent.create(content)}

test/setup.js

@@ -8,11 +8,13 @@ import dirtyChai from 'dirty-chai'
 import sinonChai from 'sinon-chai'
 import * as enzyme from 'enzyme'
 
+import { shallow } from './utils'
+
 //
 // Enzyme
 //
 global.enzyme = enzyme
-global.shallow = enzyme.shallow
+global.shallow = shallow
 global.render = enzyme.render
 global.mount = enzyme.mount
 

test/utils/index.js

@@ -2,4 +2,5 @@ export * from './assertNodeContains'
 export { default as consoleUtil } from './consoleUtil'
 export { default as domEvent } from './domEvent'
 export { default as sandbox } from './sandbox'
+export { default as shallow } from './shallow'
 export { default as syntheticEvent } from './syntheticEvent'

test/utils/shallow.js

@@ -0,0 +1,12 @@
+import { shallow } from 'enzyme'
+
+const meetsName = (wrapper, name) => name === wrapper.type().name
+
+export default (...args) => {
+  let wrapper = shallow(...args)
+
+  if (meetsName(wrapper, 'refHOC')) wrapper = wrapper.dive()
+  if (meetsName(wrapper, 'Ref')) wrapper = wrapper.dive()
+
+  return wrapper
+}