allow custom child elements

also add a comment for anyone unfamiliar with the input style

Author: agilgur5

lib/index.js

@@ -8,6 +8,7 @@ var FileInput = React.createClass({
         parent: {
           position: 'relative'
         },
+        // "invisible" above the text
         file: {
           position: 'absolute',
           top: 0,
@@ -32,6 +33,21 @@ var FileInput = React.createClass({
   },
 
   render: function() {
+    // Emulated file input for when there are no children
+    var emulatedInput = React.DOM.input({
+      type: 'text',
+      tabIndex: -1,
+      name: this.props.name + '_filename',
+      value: this.state.value,
+      className: this.props.className,
+      onChange: function() {},
+      placeholder: this.props.placeholder,
+      disabled: this.props.disabled,
+      style: this.state.styles.text
+    });
+    
+    var child = this.props.children ? this.props.children : emulatedInput;
+    
     return React.DOM.div({
         style: this.state.styles.parent
       },
@@ -47,18 +63,7 @@ var FileInput = React.createClass({
         style: this.state.styles.file
       }),
 
-      // Emulated file input
-      React.DOM.input({
-        type: 'text',
-        tabIndex: -1,
-        name: this.props.name + '_filename',
-        value: this.state.value,
-        className: this.props.className,
-        onChange: function() {},
-        placeholder: this.props.placeholder,
-        disabled: this.props.disabled,
-        style: this.state.styles.text
-      }));
+      child);
   }
 });