react-microspreadsheet/lib/Cell.js

A pluggable spreadsheet component.

// Generated by CoffeeScript 1.8.0
var Cell, React, dispatcher, div, input, mori, span, table, tbody, td, tr, _ref;

React = require('react');

mori = require('mori');

_ref = React.DOM, table = _ref.table, tbody = _ref.tbody, tr = _ref.tr, td = _ref.td, div = _ref.div, span = _ref.span, input = _ref.input;

dispatcher = require('./dispatcher');

Cell = React.createClass({
  displayName: 'ReactMicroSpreadsheetCell',
  shouldComponentUpdate: function(nextProps) {
    if (mori.equals(this.props.cell, nextProps.cell)) {
      return false;
    } else {
      return true;
    }
  },
  wasEditing: false,
  componentDidUpdate: function(prevProps) {
    var caret, node;
    if (this.refs.input) {
      node = this.refs.input.getDOMNode();
      caret = this.props.caretPosition === null ? node.value.length : this.props.caretPosition;
      if (!this.wasEditing) {
        node.focus();
        node.setSelectionRange(caret, caret);
        this.wasEditing = true;
      } else if (node !== document.activeElement) {
        node.focus();
        node.setSelectionRange(caret, caret);
      } else if (this.props.caretPosition !== null && this.props.caretPosition !== prevProps.caretPosition) {
        node.setSelectionRange(caret, caret);
      }
    }
    if (!this.refs.input) {
      return this.wasEditing = false;
    }
  },
  render: function() {
    return td({
      className: "cell " + (mori.get(this.props.cell, 'selected') ? 'selected' : '') + " " + (mori.get(this.props.cell, 'multi') ? 'multi-selected' : ''),
      onMouseUp: this.handleMouseUp,
      onMouseEnter: this.handleMouseEnter
    }, div({}, mori.get(this.props.cell, 'editing') ? input({
      ref: 'input',
      className: 'mousetrap',
      onChange: this.handleChange,
      onClick: this.handleClickInput,
      onDoubleClick: this.handleDoubleClickInput,
      onSelect: this.handleSelectText,
      value: mori.get(this.props.cell, 'raw')
    }) : span({
      onClick: this.handleClick,
      onDoubleClick: this.handleDoubleClick,
      onTouchStart: this.handleRouchStart,
      onTouchEnd: this.handleRouchEnd,
      onTouchCancel: this.handleRouchEnd,
      onMouseDown: this.handleMouseDown
    }, mori.get(this.props.cell, 'calc'))), mori.get(this.props.cell, 'last-multi') ? div({
      className: 'strap',
      onMouseDown: this.handleMouseDownStrap
    }) : void 0);
  },
  handleChange: function(e) {
    e.preventDefault();
    return dispatcher.handleCellEdited(e.target.value);
  },
  handleClickInput: function(e) {
    return dispatcher.handleCellInputClicked(e);
  },
  handleDoubleClickInput: function(e) {
    return dispatcher.handleCellInputDoubleClicked(e);
  },
  handleSelectText: function(e) {
    return dispatcher.handleSelectText(e);
  },
  handleClick: function(e) {
    e.preventDefault();
    return dispatcher.handleCellClicked([this.props.rowKey, this.props.key]);
  },
  handleDoubleClick: function(e) {
    e.preventDefault();
    return dispatcher.handleCellDoubleClicked([this.props.rowKey, this.props.key]);
  },
  handleTouchStart: function(e) {
    return this.timer = setTimeout(this.handleLongTouch, 700);
  },
  handleTouchEnd: function(e) {
    return clearTimeout(this.timer);
  },
  handleLongTouch: function() {
    return dispatcher.handleCellDoubleClicked([this.props.rowKey, this.props.key]);
  },
  handleMouseDownStrap: function(e) {
    e.stopPropagation();
    e.preventDefault();
    return dispatcher.handleMouseDownStrap([this.props.rowKey, this.props.key]);
  },
  handleMouseDown: function(e) {
    e.preventDefault();
    return dispatcher.handleCellMouseDown([this.props.rowKey, this.props.key]);
  },
  handleMouseUp: function(e) {
    return dispatcher.handleCellMouseUp([this.props.rowKey, this.props.key]);
  },
  handleMouseEnter: function(e) {
    e.preventDefault();
    return dispatcher.handleCellMouseEnter([this.props.rowKey, this.props.key]);
  }
});

module.exports = Cell;