Merge pull request #4961 from yjcxy12/addon-info-forward-ref

add forwardRef support to addon-info

addons/info/package.json

@@ -31,6 +31,7 @@
     "nested-object-assign": "^1.0.1",
     "prop-types": "^15.6.2",
     "react-addons-create-fragment": "^15.5.3",
+    "react-is": "^16.6.1",
     "react-lifecycles-compat": "^3.0.4",
     "util-deprecate": "^1.0.2"
   },

addons/info/src/components/Node.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isForwardRef } from 'react-is';
 import PropTypes from 'prop-types';
 import Props from './Props';
 
@@ -72,6 +73,43 @@ export default function Node(props) {
     );
   }
 
+  if (isForwardRef(node)) {
+    const childElement = node.type.render(node.props);
+    return (
+      <div>
+        <div style={containerStyleCopy}>
+          <span style={tagStyle}>
+            &lt;
+            {`ForwardRef`}
+          </span>
+          <Props
+            node={node}
+            maxPropsIntoLine={maxPropsIntoLine}
+            maxPropObjectKeys={maxPropObjectKeys}
+            maxPropArrayLength={maxPropArrayLength}
+            maxPropStringLength={maxPropStringLength}
+          />
+          <span style={tagStyle}>&gt;</span>
+        </div>
+        <Node
+          node={childElement}
+          depth={depth + 1}
+          maxPropsIntoLine={maxPropsIntoLine}
+          maxPropObjectKeys={maxPropObjectKeys}
+          maxPropArrayLength={maxPropArrayLength}
+          maxPropStringLength={maxPropStringLength}
+        />
+        <div style={containerStyleCopy}>
+          <span style={tagStyle}>
+            &lt;/
+            {`ForwardRef`}
+            &gt;
+          </span>
+        </div>
+      </div>
+    );
+  }
+
   // Single-line tag
   if (!children) {
     return (

addons/info/src/components/Story.js

@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: 0 */
 
 import React, { Component, createElement } from 'react';
+import { isForwardRef } from 'react-is';
 import { polyfill } from 'react-lifecycles-compat';
 import PropTypes from 'prop-types';
 import global from 'global';
@@ -337,9 +338,13 @@ class Story extends Component {
       if (innerChildren.props && innerChildren.props.children) {
         extract(innerChildren.props.children);
       }
+      if (isForwardRef(innerChildren)) {
+        extract(innerChildren.type.render(innerChildren.props));
+      }
       if (
         typeof innerChildren === 'string' ||
         typeof innerChildren.type === 'string' ||
+        isForwardRef(innerChildren) ||
         (Array.isArray(propTablesExclude) && // also ignore excluded types
           ~propTablesExclude.indexOf(innerChildren.type)) // eslint-disable-line no-bitwise
       ) {

examples/official-storybook/components/ForwardedRefButton.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import BaseButton from './BaseButton';
+
+const ForwardedRefButton = forwardRef((props, ref) => <BaseButton {...props} forwardedRef={ref} />);
+
+ForwardedRefButton.defaultProps = {
+  disabled: false,
+  onClick: () => {},
+  style: {},
+};
+
+ForwardedRefButton.propTypes = {
+  /** Boolean indicating whether the button should render as disabled */
+  disabled: PropTypes.bool,
+  /** button label. */
+  label: PropTypes.string.isRequired,
+  /** onClick handler */
+  onClick: PropTypes.func,
+  /** Custom styles */
+  style: PropTypes.shape({}),
+};
+
+export default ForwardedRefButton;