feat(refs): add getRef to focusable components (#218)

TheSharpieOne · eddywashere · commit cbfa0e01069e · 2016-11-01T08:39:09.000-07:00
diff --git a/src/Button.js b/src/Button.js
@@ -9,6 +9,7 @@ const propTypes = {
   disabled: PropTypes.bool,
   outline: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   onClick: PropTypes.func,
   size: PropTypes.string,
   children: PropTypes.node,
@@ -18,7 +19,7 @@ const propTypes = {
 
 const defaultProps = {
   color: 'secondary',
-  tag: 'button'
+  tag: 'button',
 };
 
 class Button extends React.Component {
@@ -49,6 +50,7 @@ class Button extends React.Component {
       outline,
       size,
       tag: Tag,
+      getRef,
       ...attributes
     } = this.props;
 
@@ -66,7 +68,7 @@ class Button extends React.Component {
     }
 
     return (
-      <Tag {...attributes} className={classes} onClick={this.onClick} />
+      <Tag {...attributes} className={classes} ref={getRef} onClick={this.onClick} />
     );
   }
 }
diff --git a/src/CardLink.js b/src/CardLink.js
@@ -4,6 +4,7 @@ import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
@@ -17,6 +18,7 @@ const CardLink = (props) => {
     className,
     cssModule,
     tag: Tag,
+    getRef,
     ...attributes
   } = props;
   const classes = mapToCssModules(classNames(
@@ -25,7 +27,7 @@ const CardLink = (props) => {
   ), cssModule);
 
   return (
-    <Tag {...attributes} className={classes} />
+    <Tag {...attributes} ref={getRef} className={classes} />
   );
 };
 
diff --git a/src/Form.js b/src/Form.js
@@ -5,7 +5,8 @@ import { mapToCssModules } from './utils';
 const propTypes = {
   children: PropTypes.node,
   inline: PropTypes.bool,
-  tag: PropTypes.string,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
@@ -20,6 +21,7 @@ const Form = (props) => {
     cssModule,
     inline,
     tag: Tag,
+    getRef,
     ...attributes,
   } = props;
 
@@ -29,7 +31,7 @@ const Form = (props) => {
   ), cssModule);
 
   return (
-    <Tag {...attributes} className={classes} />
+    <Tag {...attributes} ref={getRef} className={classes} />
   );
 };
 
diff --git a/src/Input.js b/src/Input.js
@@ -9,7 +9,8 @@ const propTypes = {
   type: PropTypes.string,
   size: PropTypes.string,
   state: PropTypes.string,
-  tag: PropTypes.string,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   static: PropTypes.bool,
   addon: PropTypes.bool,
   className: PropTypes.string,
@@ -32,6 +33,7 @@ class Input extends React.Component {
       tag,
       addon,
       static: staticInput,
+      getRef,
       ...attributes,
     } = this.props;
 
@@ -69,7 +71,7 @@ class Input extends React.Component {
     }
 
     return (
-      <Tag {...attributes} className={classes} />
+      <Tag {...attributes} ref={getRef} className={classes} />
     );
   }
 }
diff --git a/src/NavLink.js b/src/NavLink.js
@@ -4,6 +4,7 @@ import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   disabled: PropTypes.bool,
   active: PropTypes.bool,
   className: PropTypes.string,
@@ -13,7 +14,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-  tag: 'a'
+  tag: 'a',
 };
 
 class NavLink extends React.Component {
@@ -44,6 +45,7 @@ class NavLink extends React.Component {
       cssModule,
       active,
       tag: Tag,
+      getRef,
       ...attributes
     } = this.props;
 
@@ -57,7 +59,7 @@ class NavLink extends React.Component {
     ), cssModule);
 
     return (
-      <Tag {...attributes} onClick={this.onClick} className={classes} />
+      <Tag {...attributes} ref={getRef} onClick={this.onClick} className={classes} />
     );
   }
 }
