Finder

browser/finder/StorageSection.js

@@ -0,0 +1,72 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StorageSection.styl'
+
+class StorageSection extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: true
+    }
+  }
+
+  handleToggleButtonClick (e) {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+  handleHeaderClick (e) {
+    let { storage } = this.props
+    this.props.handleStorageButtonClick(e, storage.key)
+  }
+
+  handleFolderClick (e, folder) {
+    let { storage } = this.props
+    this.props.handleFolderButtonClick(e, storage.key, folder.key)
+  }
+
+  render () {
+    let { storage, filter } = this.props
+    let folderList = storage.folders
+      .map((folder) => {
+        return (
+          <button styleName={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key
+              ? 'folderList-item--active'
+              : 'folderList-item'
+            }
+            style={{borderColor: folder.color}}
+            key={folder.key}
+            onClick={(e) => this.handleFolderClick(e, folder)}
+          >
+            {folder.name}
+          </button>
+        )
+      })
+    return (
+      <div styleName='root'>
+        <div styleName='header'>
+          <button styleName='header-toggleButton'
+            onClick={(e) => this.handleToggleButtonClick(e)}
+          ><i className='fa fa-caret-down'/></button>
+          <button styleName={filter.type === 'STORAGE' && filter.storage === storage.key
+              ? 'header-name--active'
+              : 'header-name'
+            }
+            onClick={(e) => this.handleHeaderClick(e)}
+          >{storage.name}</button>
+        </div>
+        {this.state.isOpen &&
+          <div styleName='folderList'>
+            {folderList}
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+StorageSection.propTypes = {
+}
+
+export default CSSModules(StorageSection, styles)