react-annotator/dist/js/AnnotatorForm.js

A React mixin to allow for user annotations directly on images.

'use strict';

var React = require('react/addons');

var AnnotatorForm = React.createClass({displayName: "AnnotatorForm",

  mixins: [React.addons.LinkedStateMixin],

  propTypes: {
    xPos: React.PropTypes.oneOfType([
      React.PropTypes.number,
      React.PropTypes.string
    ]).isRequired,
    yPos: React.PropTypes.oneOfType([
      React.PropTypes.number,
      React.PropTypes.string
    ]).isRequired,
    saveAnnotation: React.PropTypes.func.isRequired,
    closeForm: React.PropTypes.func.isRequired
  },

  getInitialState: function() {
    return {
      text: ''
    };
  },

  componentDidMount: function() {
    this.refs.textarea.getDOMNode().focus();
  },

  componentDidUpdate: function(prevProps) {
    if ( prevProps.xPos !== this.props.xPos || prevProps.yPos !== this.props.yPos ) {
      this.setState({ text: '' });
      this.refs.textarea.getDOMNode().focus();
    }
  },

  handleKeyDown: function(evt) {
    var keyCode = evt.keyCode || evt.which;

    if ( keyCode === '27' || keyCode === 27 ) {
      this.props.closeForm();
    } else if ( keyCode === '13' || keyCode === 13 ) {
      evt.preventDefault();
      this.props.saveAnnotation(this.state.text);
    }
  },

  render: function() {
    var styles = {
      'position': 'absolute',
      'top': this.props.yPos,
      'left': this.props.xPos
    };

    return (
      React.createElement("div", {className: "annotator-form", style: styles}, 
        React.createElement("textarea", {ref: "textarea", 
                  placeholder: "Write a comment...", 
                  valueLink: this.linkState('text'), 
                  onBlur: this.props.closeForm, 
                  onKeyDown: this.handleKeyDown})
      )
    );
  }

});

module.exports = AnnotatorForm;