display the form

1 files changed, 95 insertions, 0 deletions

diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js
new file mode 100644
index 0000000..9b02478
--- /dev/null
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -0,0 +1,95 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../../../../actions'
+// import * as alignActions from '../align.actions'
+
+import { ZOOM_STEPS } from '../../constants'
+import { clamp } from '../../../../util'
+import { timeToPosition } from '../../align.util'
+import { Select } from '../../../../common'
+
+const TIMESTAMP_TYPES = ['sentence', 'header'].map(name => ({ name, label: name }))
+
+class AnnotationForm extends Component {
+  state = {
+    data: {},
+  }
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+  }
+  componentDidMount(){
+    this.setState({
+      data: { ...this.props.annotation },
+    })
+  }
+  componentDidUpdate(prevProps){
+    if (this.props.annotation !== prevProps.annotation) {
+      this.setState({
+        data: { ...this.props.annotation },
+      })
+    }
+  }
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+  handleSelect(name, value) {
+    this.setState({
+      data: {
+        ...this.state.data,
+        [name]: value,
+      }
+    })
+  }
+  render() {
+    const { timeline } = this.props
+    const { data } = this.state
+    if (!data.start_ts) return <div></div>
+    return (
+      <div
+        className='annotationForm'
+        style={{
+          top: timeToPosition(data.start_ts, timeline),
+        }}
+      >
+        <div>
+          <textarea
+            value={data.text}
+            onChange={this.handleChange}
+          />
+        </div>
+        <div className='row'>
+          <Select
+            name='type'
+            selected={data.type}
+            options={TIMESTAMP_TYPES}
+            defaultOption='text'
+            onChange={this.handleSelect}
+          />
+          <button>Save</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+
+/*
+- get the first sentence from the text
+- display the form at that point
+*/
+
+const mapStateToProps = state => ({
+  annotation: state.align.annotation,
+  timeline: state.align.timeline,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AnnotationForm)