checklist dropdown

4 files changed, 151 insertions, 22 deletions

diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
index da4d6c3..3a441fa 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
@@ -1,36 +1,35 @@
 import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-// import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-// import * as uploadActions from './upload.actions'
+
+import ChecklistDropdown from './checklist.dropdown'
+import ChecklistContent from './checklist.content'
 
 class Checklist extends Component {
-  componentDidMount() {
+  state = {
+    currentSection: 'all',
+  }
+  constructor(props) {
+    super(props)
+    this.handleSectionChange = this.handleSectionChange.bind(this)
+  }
+  handleSectionChange(currentSection) {
+    this.setState({ currentSection })
   }
   render() {
-    const { } = this.props
+    const { currentSection } = this.state
     return (
       <div className="checklist">
-        <div className="checklist-dropdown-column">
-          <div className="checklist-dropdown">
-          </div>
-        </div>
-        <div className="checklist-content">
-          <div className="checklist-dropdown">
-          </div>
-        </div>
+        <ChecklistDropdown
+          currentSection={currentSection}
+          onChange={this.handleSectionChange}
+        />
+        <ChecklistContent
+          currentSection={currentSection}
+        />
       </div>
     )
   }
 }
 
-const mapStateToProps = state => ({
-})
-
-const mapDispatchToProps = dispatch => ({
-  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(Checklist)
+export default Checklist
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
new file mode 100644
index 0000000..ae72adf
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+class ChecklistContent extends Component {
+  render() {
+    const { sections, currentSection } = this.props
+    return (
+      <div className="">
+        <div className="checklist-content">
+          <div className="checklist-table">
+            {sections.map(section => {
+              if (currentSection !== "all" || section.index !== currentSection) return
+              return (
+                <div key={section.index} />
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  sections: state.viewer.sections,
+})
+
+export default connect(mapStateToProps)(ChecklistContent)
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index b6ea6f1..4e87335 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -9,7 +9,56 @@
   transition: transform 0.2s;
   background: white;
   color: black;
+  font-size: 16px;
+  padding: 1.5rem;
 }
 .checklist-open .checklist {
   transform: translateZ(0) translateY(0);
 }
+
+
+/* dropdown */
+
+.checklist-dropdown-container {
+  width: 12rem;
+  cursor: pointer;
+}
+.checklist-dropdown {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid black;
+  padding-left: 0.5rem;
+}
+.checklist-dropdown .arrow-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 0.5rem;
+  border-left: 1px solid black;
+}
+.checklist-dropdown .arrow {
+  width: 2.5rem;
+  height: 2rem;
+}
+.checklist-dropdown-options {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  transition: height 0.2s;
+  overflow: hidden;
+  position: relative;
+  top: -1px;
+}
+.checklist-dropdown-options.open {
+  top: 0;
+}
+.checklist-dropdown-options div {
+  padding: 0.25rem 0.5rem;
+  transition: all 0.1s;
+}
+.checklist-dropdown-options div:hover {
+  color: white;
+  background: black;
+}
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js b/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
new file mode 100644
index 0000000..0ed2f0d
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { ROMAN_NUMERALS } from 'app/constants'
+import { Arrow } from '../nav/viewer.icons'
+
+class ChecklistDropdown extends Component {
+  state = {
+    open: false,
+  }
+  handleOpen() {
+    this.setState({ open: !this.state.open })
+  }
+  handleSelect(index) {
+    this.props.onChange(index)
+    this.setState({ open: false })
+  }
+  render() {
+    const { sections, currentSection } = this.props
+    const { open } = this.state
+    return (
+      <div className="checklist-dropdown-column">
+        <div className="checklist-dropdown-container">
+          <div className="checklist-dropdown" onClick={() => this.handleOpen()}>
+            {currentSection === 'all' ? 'View All' : 'Section ' + ROMAN_NUMERALS[currentSection]}
+            <div className='arrow-box'>
+              <Arrow type={open ? 'up' : 'down'} />
+            </div>
+          </div>
+          <div
+            className={open ? "checklist-dropdown-options open" : "checklist-dropdown-options"}
+            style={{ height: open ? ((sections.length * 2) + 'rem') : 0 }}
+          >
+            {sections.map(section => (
+              <div key={section.index} onClick={() => this.handleSelect(section.index)}>
+                {'Section '}{ROMAN_NUMERALS[section.index]}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  sections: state.viewer.sections,
+})
+
+export default connect(mapStateToProps)(ChecklistDropdown)