Merge pull request #38 from seburgi/master

Add basic support for input group addons.
twisty · Dec 14, 2015 · 168641d · 168641d
2 parents 2640623 + 8193a94
commit 168641d
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 5 deletions.
diff --git a/release/input.js b/release/input.js
@@ -16,12 +16,16 @@ var Input = React.createClass({
     mixins: [Formsy.Mixin, ComponentMixin],
 
     propTypes: {
-        type: React.PropTypes.oneOf(['color', 'date', 'datetime', 'datetime-local', 'email', 'hidden', 'month', 'number', 'password', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'])
+        type: React.PropTypes.oneOf(['color', 'date', 'datetime', 'datetime-local', 'email', 'hidden', 'month', 'number', 'password', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']),
+        addonBefore: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.node]),
+        addonAfter: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.node])
     },
 
     getDefaultProps: function getDefaultProps() {
         return {
-            type: 'text'
+            type: 'text',
+            addonBefore: null,
+            addonAfter: null
         };
     },
 
@@ -34,7 +38,15 @@ var Input = React.createClass({
     render: function render() {
         var element = this.renderElement();
 
-        if (this.getLayout() === 'elementOnly' || this.props.type === 'hidden') {
+        if (this.props.type === 'hidden') {
+            return element;
+        }
+
+        if (this.props.addonBefore || this.props.addonAfter) {
+            element = this.renderInputGroup(element);
+        }
+
+        if (this.getLayout() === 'elementOnly') {
             return element;
         }
 
@@ -69,6 +81,28 @@ var Input = React.createClass({
             onChange: this.changeValue,
             disabled: this.isFormDisabled() || this.props.disabled
         }));
+    },
+
+    renderInputGroup: function renderInputGroup(element) {
+        return React.createElement(
+            'div',
+            { className: 'input-group' },
+            this.renderAddon(this.props.addonBefore),
+            element,
+            this.renderAddon(this.props.addonAfter)
+        );
+    },
+
+    renderAddon: function renderAddon(addon) {
+        if (!addon) {
+            return '';
+        } else {
+            return React.createElement(
+                'span',
+                { className: 'input-group-addon' },
+                addon
+            );
+        }
     }
 
 });

diff --git a/src/input.js b/src/input.js
@@ -30,12 +30,22 @@ var Input = React.createClass({
             'time',
             'url',
             'week'
+        ]),
+        addonBefore: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.node
+        ]),
+        addonAfter: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.node
         ])
     },
 
     getDefaultProps: function() {
         return {
-            type: 'text'
+            type: 'text',
+            addonBefore: null,
+            addonAfter: null
         };
     },
 
@@ -48,7 +58,15 @@ var Input = React.createClass({
     render: function() {
         var element = this.renderElement();
 
-        if (this.getLayout() === 'elementOnly' || this.props.type === 'hidden') {
+        if (this.props.type === 'hidden') {
+            return element;
+        }
+
+        if (this.props.addonBefore || this.props.addonAfter) {
+            element = this.renderInputGroup(element);
+        }
+
+        if (this.getLayout() === 'elementOnly') {
             return element;
         }
 
@@ -88,6 +106,24 @@ var Input = React.createClass({
                 disabled={this.isFormDisabled() || this.props.disabled}
             />
         );
+    },
+
+    renderInputGroup: function(element) {
+        return (
+            <div className="input-group">
+                {this.renderAddon(this.props.addonBefore)}
+                {element}
+                {this.renderAddon(this.props.addonAfter)}
+            </div>
+        );
+    },
+
+    renderAddon: function(addon) {
+        if(!addon) {
+            return '';
+        } else {
+            return <span className="input-group-addon">{addon}</span>;
+        }
     }
 
 });