checklist dropdown

1 files changed, 51 insertions, 0 deletions

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)