1 import './formControls.jsx';
3 import React from 'react'
4 import SelectOption from 'widgets/form_controls/selectOption.jsx';
5 import imgAdd from '../../../node_modules/open-iconic/svg/plus.svg'
6 import imgRemove from '../../../node_modules/open-iconic/svg/trash.svg'
7 import TextInput from 'widgets/form_controls/textInput.jsx';
8 import Input from 'widgets/form_controls/input.jsx';
10 export class FormSection extends React.Component {
12 let className = 'FormSection ' + this.props.className;
15 style={this.props.style}
18 <div className="FormSection-title">
21 <div className="FormSection-body">
30 FormSection.defaultProps = {
37 export class InputCollection extends React.Component {
40 this.collection = props.collection;
42 buildTextInput(onChange, v, i) {
45 readonly={this.props.readonly}
49 onChange= {onChange.bind(null, i)}
53 buildSelectOption(initial, options, onChange, v, i) {
56 readonly={this.props.readonly}
57 key={`${i}-${v.replace(' ', '_')}`}
61 onChange={onChange.bind(null, i)}
69 const props = this.props;
71 let className = "InputCollection";
72 if (props.className) {
73 className = `${className} ${props.className}`;
75 if (props.type == 'select') {
76 inputType = this.buildSelectOption.bind(this, props.initial, props.options, props.onChange);
78 inputType = this.buildTextInput.bind(this, props.onChange)
81 <div className="InputCollection-wrapper">
82 {props.collection.map((v,i) => {
84 <div key={i} className={className} >
87 props.readonly ? null : <span onClick={props.RemoveItemFn.bind(null, i)} className="removeInput"><img src={imgRemove} />Remove</span>}
91 { props.readonly ? null : <span onClick={props.AddItemFn} className="addInput"><img src={imgAdd} />Add</span>}
98 InputCollection.defaultProps = {
101 onChange: function(i, e) {
103 Updating with: ${e.target.value}
107 AddItemFn: function(e) {
108 console.log(`Adding a new item to collection`)
110 RemoveItemFn: function(i, e) {
111 console.log(`Removing item from collection at index of: ${i}`)