feat(Input): enable refs on Input components (#178)

eddywashere · web-flow · commit ed9e58423e07 · 2016-10-16T09:08:11.000-07:00
diff --git a/src/Input.js b/src/Input.js
@@ -1,3 +1,5 @@
+/* eslint react/prefer-stateless-function: 0 */
+
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
@@ -17,55 +19,57 @@ const defaultProps = {
   type: 'text',
 };
 
-const Input = (props) => {
-  const {
-    className,
-    type,
-    size,
-    state,
-    tag,
-    addon,
-    static: staticInput,
-    ...attributes,
-  } = props;
+class Input extends React.Component {
+  render() {
+    const {
+      className,
+      type,
+      size,
+      state,
+      tag,
+      addon,
+      static: staticInput,
+      ...attributes,
+    } = this.props;
 
-  const checkInput = ['radio', 'checkbox'].indexOf(type) > -1;
+    const checkInput = ['radio', 'checkbox'].indexOf(type) > -1;
 
-  const fileInput = type === 'file';
-  const textareaInput = type === 'textarea';
-  const selectInput = type === 'select';
-  let Tag = selectInput || textareaInput ? type : 'input';
+    const fileInput = type === 'file';
+    const textareaInput = type === 'textarea';
+    const selectInput = type === 'select';
+    let Tag = selectInput || textareaInput ? type : 'input';
 
-  let formControlClass = 'form-control';
+    let formControlClass = 'form-control';
 
-  if (staticInput) {
-    formControlClass = `${formControlClass}-static`;
-    Tag = tag;
-  } else if (fileInput) {
-    formControlClass = `${formControlClass}-file`;
-  } else if (checkInput) {
-    if (addon) {
-      formControlClass = null;
-    } else {
-      formControlClass = 'form-check-input';
+    if (staticInput) {
+      formControlClass = `${formControlClass}-static`;
+      Tag = tag;
+    } else if (fileInput) {
+      formControlClass = `${formControlClass}-file`;
+    } else if (checkInput) {
+      if (addon) {
+        formControlClass = null;
+      } else {
+        formControlClass = 'form-check-input';
+      }
     }
-  }
 
-  const classes = classNames(
-    className,
-    state ? `form-control-${state}` : false,
-    size ? `form-control-${size}` : false,
-    formControlClass
-  );
+    const classes = classNames(
+      className,
+      state ? `form-control-${state}` : false,
+      size ? `form-control-${size}` : false,
+      formControlClass
+    );
 
-  if (Tag === 'input') {
-    attributes.type = type;
-  }
+    if (Tag === 'input') {
+      attributes.type = type;
+    }
 
-  return (
-    <Tag {...attributes} className={classes} />
-  );
-};
+    return (
+      <Tag {...attributes} className={classes} />
+    );
+  }
+}
 
 Input.propTypes = propTypes;
 Input.defaultProps = defaultProps;
