new folder modalにcolor select追加

lib/components/modal/CreateNewFolder.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
 import { createFolder } from 'boost/actions'
 import store from 'boost/store'
+import FolderMark from 'boost/components/FolderMark'
 
 export default class CreateNewFolder extends React.Component {
   constructor (props) {
@@ -9,6 +10,7 @@ export default class CreateNewFolder extends React.Component {
 
     this.state = {
       name: '',
+      color: Math.round(Math.random() * 7),
       alert: null
     }
   }
@@ -20,9 +22,11 @@ export default class CreateNewFolder extends React.Component {
   handleConfirmButton (e) {
     this.setState({alert: null}, () => {
       let { close } = this.props
-      let name = this.state.name
+      let { name, color } = this.state
+
       let input = {
-        name
+        name,
+        color
       }
 
       try {
@@ -38,6 +42,14 @@ export default class CreateNewFolder extends React.Component {
     })
   }
 
+  handleColorClick (colorIndex) {
+    return e => {
+      this.setState({
+        color: colorIndex
+      })
+    }
+  }
+
   render () {
     let alert = this.state.alert
     let alertElement = alert != null ? (
@@ -45,6 +57,21 @@ export default class CreateNewFolder extends React.Component {
           {alert.message}
         </p>
       ) : null
+    let colorIndexes = []
+    for (let i = 0; i < 8; i++) {
+      colorIndexes.push(i)
+    }
+    let colorElements = colorIndexes.map(index => {
+      let className = index === this.state.color
+        ? 'active'
+        : null
+
+      return (
+        <span className='option' key={index} onClick={e => this.handleColorClick(index)(e)}>
+          <FolderMark className={className} color={index}/>
+        </span>
+      )
+    })
 
     return (
       <div className='CreateNewFolder modal'>
@@ -53,6 +80,9 @@ export default class CreateNewFolder extends React.Component {
         <div className='title'>Create new folder</div>
 
         <input className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
+        <div className='colorSelect'>
+          {colorElements}
+        </div>
         {alertElement}
 
         <button onClick={e => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>