skyquake/framework/widgets/form_controls/formControls.jsx

   1 import './formControls.jsx';
   2
   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';
   9
  10 export class FormSection extends React.Component {
  11     render() {
  12         let className = 'FormSection ' + this.props.className;
  13         let html = (
  14             <div
  15                 style={this.props.style}
  16                 className={className}
  17             >
  18                 <div className="FormSection-title">
  19                     {this.props.title}
  20                 </div>
  21                 <div className="FormSection-body">
  22                     {this.props.children}
  23                 </div>
  24             </div>
  25         );
  26         return html;
  27     }
  28 }
  29
  30 FormSection.defaultProps = {
  31     className: ''
  32 }
  33
  34 /**
  35  * AddItemFn:
  36  */
  37 export class InputCollection extends React.Component {
  38     constructor(props) {
  39         super(props);
  40         this.collection = props.collection;
  41     }
  42     buildTextInput(onChange, v, i) {
  43         return (
  44             <Input
  45                 readonly={this.props.readonly}
  46                 style={{flex: '1 1'}}
  47                 key={i}
  48                 value={v}
  49                 onChange= {onChange.bind(null, i)}
  50             />
  51         )
  52     }
  53     buildSelectOption(initial, options, onChange, v, i) {
  54         return (
  55             <SelectOption
  56                 readonly={this.props.readonly}
  57                 key={`${i}-${v.replace(' ', '_')}`}
  58                 intial={initial}
  59                 defaultValue={v}
  60                 options={options}
  61                 onChange={onChange.bind(null, i)}
  62             />
  63         );
  64     }
  65     showInput() {
  66
  67     }
  68     render() {
  69         const props = this.props;
  70         let inputType;
  71         let className = "InputCollection";
  72         if (props.className) {
  73             className = `${className} ${props.className}`;
  74         }
  75         if (props.type == 'select') {
  76             inputType = this.buildSelectOption.bind(this, props.initial, props.options, props.onChange);
  77         } else {
  78             inputType = this.buildTextInput.bind(this, props.onChange)
  79         }
  80         let html = (
  81             <div className="InputCollection-wrapper">
  82                 {props.collection.map((v,i) => {
  83                     return (
  84                         <div key={i} className={className} >
  85                             {inputType(v, i)}
  86                             {
  87                                 props.readonly ? null : <span onClick={props.RemoveItemFn.bind(null, i)} className="removeInput"><img src={imgRemove} />Remove</span>}
  88                         </div>
  89                     )
  90                 })}
  91                 { props.readonly ? null : <span onClick={props.AddItemFn} className="addInput"><img src={imgAdd} />Add</span>}
  92             </div>
  93         );
  94         return html;
  95     }
  96 }
  97
  98 InputCollection.defaultProps = {
  99     input: Input,
 100     collection: [],
 101     onChange: function(i, e) {
 102         console.log(`
 103                         Updating with: ${e.target.value}
 104                         At index of: ${i}
 105                     `)
 106     },
 107     AddItemFn: function(e) {
 108         console.log(`Adding a new item to collection`)
 109     },
 110     RemoveItemFn: function(i, e) {
 111         console.log(`Removing item from collection at index of: ${i}`)
 112     }
 113 }