adding tabs, icons , filePicker

Author: Parth Shah

components/FilePicker/FilePicker.jsx

@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react'
+import _ from 'lodash'
+import filepicker from 'filepicker-js'
+
+class FilePicker extends React.Component {
+  constructor(props) {
+    super(props)
+    this.onChange = this.onChange.bind(this)
+  }
+
+  onChange(event) {
+    this.props.onSuccess(this.props.options.multiple ? event.fpfiles : event.fpfile)
+  }
+
+  componentDidMount() {
+    const filepickerElement = this.refs.filepicker
+    filepicker.setKey(this.props.apiKey)
+    filepicker.constructWidget(filepickerElement)
+    filepickerElement.addEventListener('change', this.onChange, false);
+  }
+
+  componentWillUnmount() {
+    this.refs.filepicker.removeEventListener('change', this.onChange, false);
+  }
+
+  render() {
+    const { apiKey, onSuccess, mode, options } = this.props
+    const element = this.refs.target
+
+    // add data-fp- prefix to all keys
+    const opts = _.mapKeys(options, (v,k) => {
+      const hyphenated = k.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
+      return `data-fp-${hyphenated}`
+    })
+    return <input type={mode} ref="filepicker" onchange={this.onChange} {...opts} />
+  }
+}
+
+FilePicker.propTypes = {
+  apiKey: PropTypes.string.isRequired,
+  mode: PropTypes.string.isRequired,
+  options: PropTypes.object.isRequired,
+  onSuccess: PropTypes.func.isRequired
+}
+
+export default FilePicker

components/Forms/BaseInputField.jsx

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Component, PropTypes } from 'react'
+import React, { Component, PropTypes } from 'react'
 import _ from 'lodash'
 
 /**

components/Forms/Fields.jsx

@@ -4,6 +4,7 @@ import SubmitButton from './SubmitButton'
 import TextInput from './TextInput'
 import TextareaInput from './TextareaInput'
 import RadioGroupInput from './RadioGroupInput'
+import RadioButton from './RadioButton'
 import SliderRadioGroupInput from './SliderRadioGroupInput'
 import TiledCheckboxInput from './TiledCheckboxInput'
 
@@ -14,6 +15,7 @@ export default {
   TextInput,
   TextareaInput,
   RadioGroupInput,
+  RadioButton,
   SliderRadioGroupInput,
   TiledCheckboxInput
 }

components/Forms/RadioButton.jsx

@@ -0,0 +1,22 @@
+'use strict'
+
+import React, { Component } from 'react'
+
+class RadioButton extends Component {
+  render() {
+    const { name, index, label, selectedValue, value, onChange } = this.props
+    const id = [name, 'option', index].join('-')
+    return (
+      <div className="radio">
+        <input type="radio"
+          name={name} id={id} value={value}
+          checked={value === selectedValue}
+          onChange={onChange}
+        />
+        <label htmlFor={id}>{label}</label>
+      </div>
+    )
+  }
+}
+
+export default RadioButton

components/Forms/RadioGroupInput.jsx

@@ -4,23 +4,7 @@ import React, { Component, PropTypes } from 'react'
 import _ from 'lodash'
 import classNames from 'classnames'
 import BaseInputField from './BaseInputField'
-
-class RadioButton extends Component {
-  render() {
-    const { name, index, label, selectedValue, value, onChange } = this.props
-    const id = [name, 'option', index].join('-')
-    return (
-      <div className="radio">
-        <input type="radio"
-          name={name} id={id} value={value}
-          checked={value === selectedValue}
-          onChange={onChange}
-        />
-        <label htmlFor={id}>{label}</label>
-      </div>
-    )
-  }
-}
+import RadioButton from './RadioButton'
 
 class RadioGroupInput extends BaseInputField {
   constructor(props) {

components/Icons/CloseIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const CloseIcon = ({ width = '14px', height = '14px' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <title>Fill 75</title>
+      <desc>Created with Sketch.</desc>
+      <defs></defs>
+      <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd">
+          <g id="Settings-form-elements" transform="translate(-1160.000000, -2822.000000)" fill="#DCDCE0">
+              <polygon id="Fill-75" points="1171.14085 2822 1167 2826.23944 1162.85915 2822 1160 2824.85915 1164.23944 2829 1160 2833.14085 1162.85915 2836 1167 2831.76056 1171.14085 2836 1174 2833.14085 1169.76056 2829 1174 2824.85915"></polygon>
+          </g>
+      </g>
+    </svg>
+  )
+}
+
+export default CloseIcon

components/Icons/EditIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const EditIcon = ({ width = '16px', height = '16px' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <title>Fill 146</title>
+        <desc>Created with Sketch.</desc>
+        <defs></defs>
+        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd">
+            <g id="Settings-form-elements" transform="translate(-1122.000000, -1407.000000)" fill="#888894">
+                <path d="M1134,1413.6 L1131.4,1411 L1133,1409.4 L1135.6,1412 L1134,1413.6 Z M1126.6,1421 L1124,1421 L1124,1418.4 L1130,1412.4 L1132.6,1415 L1126.6,1421 Z M1133.7,1407.3 C1133.3,1406.9 1132.7,1406.9 1132.3,1407.3 L1122.3,1417.3 C1122.1,1417.5 1122,1417.7 1122,1418 L1122,1422 C1122,1422.6 1122.4,1423 1123,1423 L1127,1423 C1127.3,1423 1127.5,1422.9 1127.7,1422.7 L1137.7,1412.7 C1138.1,1412.3 1138.1,1411.7 1137.7,1411.3 L1133.7,1407.3 Z" id="Fill-146"></path>
+            </g>
+        </g>
+    </svg>
+  )
+}
+
+export default EditIcon

components/Icons/SaveIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const SaveIcon = ({ width = '14px', height = '14px' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <title>Fill 88</title>
+        <desc>Created with Sketch.</desc>
+        <defs></defs>
+        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd">
+            <g id="Settings-form-elements" transform="translate(-1122.000000, -1505.000000)" fill="#1A85FF">
+                <polygon id="Fill-88" points="1127.6 1513 1124.4 1509.8 1122 1512.2 1127.6 1517.8 1138 1507.4 1135.6 1505"></polygon>
+            </g>
+        </g>
+    </svg>
+  )
+}
+
+export default SaveIcon

components/Icons/TrashIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const TrashIcon = ({ width = '16px', height = '16px' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <title>Combined Shape</title>
+      <desc>Created with Sketch.</desc>
+      <defs></defs>
+      <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd">
+        <g id="Settings-form-elements" transform="translate(-1156.000000, -1407.000000)" fill="#888894">
+          <path d="M1168,1408 C1168,1407.4 1167.6,1407 1167,1407 L1161,1407 C1160.4,1407 1160,1407.4 1160,1408 L1160,1410 L1156,1410 L1156,1412 L1157,1412 L1157,1422 C1157,1422.6 1157.4,1423 1158,1423 L1170,1423 C1170.6,1423 1171,1422.6 1171,1422 L1171,1412 L1172,1412 L1172,1410 L1168,1410 L1168,1408 Z M1169,1421 L1159,1421 L1159,1412 L1169,1412 L1169,1421 Z M1162,1409 L1166,1409 L1166,1410 L1162,1410 L1162,1409 Z M1161,1414 L1163,1414 L1163,1420 L1161,1420 L1161,1414 Z M1165,1414 L1167,1414 L1167,1420 L1165,1420 L1165,1414 Z" id="Combined-Shape"></path>
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+export default TrashIcon

components/Tabs/Tabs.jsx

@@ -6,8 +6,8 @@ require('./Tabs.scss')
 
 const Tabs = ({activeKey, children, onSelect}) => {
   const renderTabPill = ({props: {title, eventKey}}) => (
-    <li key={eventKey} className={cn({active: activeKey === eventKey})}>
-      <a onClick={function(e) { onSelect(eventKey, e)} }>{title}</a>
+    <li key={eventKey} onClick={function(e) { onSelect(eventKey, e)} } className={cn({active: activeKey === eventKey})}>
+      <a>{title}</a>
     </li>
   )
   const activeChild = ({props: {eventKey}}) => eventKey === activeKey