From a06fc7173845005a23648b40e327bf15fe13b725 Mon Sep 17 00:00:00 2001
From: John Furrow <johnf@mesosphere.io>
Date: Sun, 8 Nov 2015 16:01:57 -0800
Subject: [PATCH] Add Textbox Repeater component

---
 .../components/forms/TextboxRepeater.js       | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 client/source/scripts/components/forms/TextboxRepeater.js

diff --git a/client/source/scripts/components/forms/TextboxRepeater.js b/client/source/scripts/components/forms/TextboxRepeater.js
new file mode 100644
index 00000000..d100d3fd
--- /dev/null
+++ b/client/source/scripts/components/forms/TextboxRepeater.js
@@ -0,0 +1,69 @@
+import classnames from 'classnames';
+import React from 'react';
+
+import Icon from '../icons/Icon.js';
+
+const methodsToBind = [
+  'getTextboxes',
+  'handleTextboxChange'
+];
+
+export default class TextboxRepeater extends React.Component {
+
+  constructor() {
+    super();
+
+    methodsToBind.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
+  getTextboxes() {
+    let textboxes = this.props.textboxes.map((textbox, index) => {
+      let addButton = (
+        <button className="textbox-repeater__button textbox-repeater__add"
+          onClick={this.props.handleTextboxAdd.bind(textbox, index)}>
+          <Icon icon="addMini" size="mini" />
+        </button>
+      );
+      let removeButton = null;
+
+      if (index > 0) {
+        removeButton = (
+          <button className="textbox-repeater__button textbox-repeater__remove"
+            onClick={this.props.handleTextboxRemove.bind(textbox, index)}>
+            <Icon icon="removeMini" size="mini" />
+          </button>
+        );
+      }
+
+      return (
+        <div className="textbox__wrapper form__row" key={index}>
+          <input className="textbox"
+            onChange={this.handleTextboxChange.bind(textbox, index)}
+            placeholder={this.props.placeholder}
+            value={textbox.value}
+            type="text" />
+          <div className="textbox-repeater__button-group">
+            {removeButton}
+            {addButton}
+          </div>
+        </div>
+      );
+    });
+    return textboxes;
+  }
+
+  handleTextboxChange(index, event) {
+    this.props.handleTextboxChange(index, event.target.value);
+  }
+
+  render() {
+    return (
+      <div className="textbox-repeater">
+        {this.getTextboxes()}
+      </div>
+    );
+  }
+
+}