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 = ( + + ); + let removeButton = null; + + if (index > 0) { + removeButton = ( + + ); + } + + return ( +
+ +
+ {removeButton} + {addButton} +
+
+ ); + }); + return textboxes; + } + + handleTextboxChange(index, event) { + this.props.handleTextboxChange(index, event.target.value); + } + + render() { + return ( +
+ {this.getTextboxes()} +
+ ); + } + +}