feat(Ref): support of forwardRef() API

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))
+
 <!--------------------------------[ v0.12.0 ]------------------------------- -->
 ## [v0.12.0](https://github.com/stardust-ui/react/tree/v0.12.0) (2018-11-19)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.11.0...v0.12.0)

docs/src/examples/components/Ref/Types/RefExampleForwardRef.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Grid, Ref, Segment } from '@stardust-ui/react'
+
+const ExampleButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+  <div>
+    <button {...props} ref={ref} />
+  </div>
+))
+
+class RefExampleForwardRef extends React.Component {
+  forwardedRef = React.createRef<HTMLButtonElement>()
+  state = { isMounted: false }
+
+  componentDidMount() {
+    this.setState({ isMounted: true })
+  }
+
+  render() {
+    const { isMounted } = this.state
+    const buttonNode = this.forwardedRef.current
+
+    return (
+      <Grid columns={2}>
+        <Segment>
+          <p>
+            A button below uses <code>forwardRef</code> API.
+          </p>
+
+          <Ref innerRef={this.forwardedRef}>
+            <ExampleButton>A button</ExampleButton>
+          </Ref>
+        </Segment>
+
+        {isMounted && (
+          <code style={{ margin: 10 }}>
+            <pre>
+              {JSON.stringify(
+                {
+                  nodeName: buttonNode.nodeName,
+                  nodeType: buttonNode.nodeType,
+                  textContent: buttonNode.textContent,
+                },
+                null,
+                2,
+              )}
+            </pre>
+          </code>
+        )}
+      </Grid>
+    )
+  }
+}
+
+export default RefExampleForwardRef

docs/src/examples/components/Ref/Types/index.tsx

@@ -15,6 +15,15 @@ const RefTypesExamples = () => (
       }
       examplePath="components/Ref/Types/RefExampleRef"
     />
+    <ComponentExample
+      title="Forward Ref"
+      description={
+        <span>
+          Works with <code>forwardRef</code> API.
+        </span>
+      }
+      examplePath="components/Ref/Types/RefExampleForwardRef"
+    />
   </ExampleSection>
 )
 

package.json

@@ -90,6 +90,7 @@
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
     "react-fela": "^7.2.0",
+    "react-is": "^16.6.3",
     "react-popper": "^1.0.2",
     "what-input": "^5.1.2"
   },
@@ -105,6 +106,7 @@
     "@types/react": "^16.3.17",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-dom": "^16.0.6",
+    "@types/react-is": "^16.5.0",
     "@types/react-router": "^4.0.27",
     "awesome-typescript-loader": "^5.2.1",
     "connect-history-api-fallback": "^1.3.0",

src/components/Ref/Ref.tsx

@@ -1,26 +1,37 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { findDOMNode } from 'react-dom'
+import { isForwardRef } from 'react-is'
 
 import { ReactChildren } from '../../../types/utils'
 import { handleRef } from '../../lib'
 
 export interface RefProps {
-  children?: ReactChildren
+  children: ReactChildren
   innerRef?: React.Ref<any>
 }
 
+export interface RefState {
+  child: React.ReactElement<any> & { ref: React.Ref<any> }
+  isForward: boolean
+}
+
 /**
  * This component exposes a callback prop that always returns the DOM node of both functional and class component
  * children.
  */
-export default class Ref extends React.Component<RefProps> {
+export default class Ref extends React.Component<RefProps, RefState> {
+  state = {
+    child: null,
+    isForward: false,
+  }
+
   static propTypes = {
     /**
      *  Used to set content when using childrenApi - internal only
      *  @docSiteIgnore
      */
-    children: PropTypes.element,
+    children: PropTypes.element.isRequired,
 
     /**
      * Called when a child component will be mounted or updated.
@@ -30,15 +41,39 @@ export default class Ref extends React.Component<RefProps> {
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }
 
+  static getDerivedStateFromProps(props: RefProps) {
+    const child = React.Children.only(props.children)
+
+    return {
+      child,
+      isForward: isForwardRef(child),
+    }
+  }
+
   componentDidMount() {
-    handleRef(this.props.innerRef, findDOMNode(this))
+    if (!this.state.isForward) {
+      handleRef(this.props.innerRef, findDOMNode(this))
+    }
   }
 
   componentWillUnmount() {
-    handleRef(this.props.innerRef, null)
+    if (!this.state.isForward) {
+      handleRef(this.props.innerRef, null)
+    }
+  }
+
+  private handleRefOverride = (node: HTMLElement) => {
+    handleRef(this.state.child.ref, node)
+    handleRef(this.props.innerRef, node)
   }
 
   render() {
-    return this.props.children && React.Children.only(this.props.children)
+    const { child, isForward } = this.state
+
+    return isForward
+      ? React.cloneElement(child, {
+          ref: this.handleRefOverride,
+        })
+      : child
   }
 }

test/specs/components/Ref/Ref-test.tsx

@@ -4,6 +4,12 @@ import * as React from 'react'
 import Ref from 'src/components/Ref/Ref'
 import { CompositeClass, CompositeFunction, DOMClass, DOMFunction } from './fixtures'
 
+const TestButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+  <div>
+    <button ref={ref} />
+  </div>
+))
+
 const testInnerRef = Component => {
   const innerRef = jest.fn()
   const node = mount(
@@ -57,5 +63,19 @@ describe('Ref', () => {
       expect(innerRef).toHaveBeenCalledTimes(1)
       expect(innerRef).toHaveBeenCalledWith(null)
     })
+
+    it('works with "forwardRef" API', () => {
+      const forwardedRef = React.createRef<HTMLButtonElement>()
+      const innerRef = React.createRef()
+
+      mount(
+        <Ref innerRef={innerRef}>
+          <TestButton ref={forwardedRef} />
+        </Ref>,
+      )
+
+      expect(forwardedRef.current).toBeInstanceOf(Element)
+      expect(innerRef.current).toBeInstanceOf(Element)
+    })
   })
 })

yarn.lock

@@ -140,6 +140,13 @@
     "@types/node" "*"
     "@types/react" "*"
 
+"@types/react-is@^16.5.0":
+  version "16.5.0"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-16.5.0.tgz#6b0dd43e60fa7c82b48faf7b487543079a61015a"
+  integrity sha512-yUYPioB2Sh5d4csgpW/vJwxWM0RG1/QbGiwYap2m/bEAQKRwbagYRc5C7oK2AM9QC2vr2ZViCgpm0DpDpFQ6XA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router@^4.0.27":
   version "4.0.27"
   resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-4.0.27.tgz#553f54df7c4b09d6046b0201ce9b91c46b2940e3"
@@ -7492,7 +7499,7 @@ react-is@^16.4.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
   integrity sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==
 
-react-is@^16.6.1:
+react-is@^16.6.1, react-is@^16.6.3:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
   integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==