feat(Ref): add component

Author: layershifter

index.d.ts

@@ -2,6 +2,7 @@
 export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm';
 export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
 export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';
+export { default as Ref, RefProps } from './dist/commonjs/addons/Ref';
 export { default as Select, SelectProps } from './dist/commonjs/addons/Select';
 export { default as TextArea, TextAreaProps, TextAreaOnChangeData } from './dist/commonjs/addons/TextArea';
 

src/addons/Ref/Ref.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DOMElement } from 'react';
+
+export interface RefProps {
+  [key: string]: any;
+
+  /** Primary content. */
+  children: React.ReactNode;
+
+  /**
+   * Called when componentDidMount.
+   *
+   * @param {DOMElement} node - Referred node.
+   */
+  innerRef: (node: DOMElement) => void;
+}
+
+declare const Ref: React.ComponentClass<RefProps>;
+
+export default Ref;

src/addons/Ref/Ref.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import { Children, Component } from 'react'
+import { findDOMNode } from 'react-dom'
+
+import { META } from '../../lib'
+
+/**
+ * This component exposes a callback prop that always returns the DOM node of both functional and class component
+ * children.
+ */
+export default class Ref extends Component {
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+
+    /**
+     * Called when componentDidMount.
+     *
+     * @param {DOMElement} node - Referred node.
+     */
+    innerRef: PropTypes.func.isRequired,
+  }
+
+  static _meta = {
+    name: 'Ref',
+    type: META.TYPES.ADDON,
+  }
+
+  componentDidMount() {
+    const { innerRef } = this.props
+    const node = findDOMNode(this)
+
+    innerRef(node)
+  }
+
+  render() {
+    const { children } = this.props
+
+    return Children.only(children)
+  }
+}

src/addons/Ref/index.d.ts

@@ -0,0 +1 @@
+export { default, RefProps } from './Ref';

src/addons/Ref/index.js

@@ -0,0 +1 @@
+export default from './Ref'

src/index.js

@@ -2,6 +2,7 @@
 export { default as Confirm } from './addons/Confirm'
 export { default as Portal } from './addons/Portal'
 export { default as Radio } from './addons/Radio'
+export { default as Ref } from './addons/Ref'
 export { default as Select } from './addons/Select'
 export { default as TextArea } from './addons/TextArea'
 

test/specs/addons/Ref/Ref-test.js

@@ -0,0 +1,60 @@
+import _ from 'lodash'
+import React from 'react'
+
+import Ref from 'src/addons/Ref/Ref'
+import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
+import { CompositeClass, CompositeFunction, DOMClass, DOMFunction } from './fixtures'
+
+const nodeMount = (Component, innerRef) => (
+  mount(
+    <Ref innerRef={innerRef}>
+      <Component />
+    </Ref>
+  )
+    .find('#node')
+    .getDOMNode()
+)
+
+describe('Ref', () => {
+  common.hasValidTypings(Ref, null, {
+    requiredProps: {
+      children: <div />,
+      innerRef: _.noop,
+    },
+  })
+
+  describe('innerRef', () => {
+    it('returns node from a functional component with DOM node', () => {
+      const innerRef = sandbox.spy()
+      const node = nodeMount(DOMFunction, innerRef)
+
+      innerRef.should.have.been.calledOnce()
+      innerRef.should.have.been.calledWithMatch(node)
+    })
+
+    it('returns node from a functional component', () => {
+      const innerRef = sandbox.spy()
+      const node = nodeMount(CompositeFunction, innerRef)
+
+      innerRef.should.have.been.calledOnce()
+      innerRef.should.have.been.calledWithMatch(node)
+    })
+
+    it('returns node from a class component with DOM node', () => {
+      const innerRef = sandbox.spy()
+      const node = nodeMount(DOMClass, innerRef)
+
+      innerRef.should.have.been.calledOnce()
+      innerRef.should.have.been.calledWithMatch(node)
+    })
+
+    it('returns node from a class component', () => {
+      const innerRef = sandbox.spy()
+      const node = nodeMount(CompositeClass, innerRef)
+
+      innerRef.should.have.been.calledOnce()
+      innerRef.should.have.been.calledWithMatch(node)
+    })
+  })
+})

test/specs/addons/Ref/fixtures.js

@@ -0,0 +1,18 @@
+/* eslint-disable react/no-multi-comp */
+import React, { Component } from 'react'
+
+export const DOMFunction = (props) => <div {...props} id='node' />
+
+export const CompositeFunction = (props) => <DOMFunction {...props} />
+
+export class DOMClass extends Component {
+  render() {
+    return <div {...this.props} id='node' />
+  }
+}
+
+export class CompositeClass extends Component {
+  render() {
+    return <DOMClass {...this.props} />
+  }
+}