react-spreadsheet/dist/Cell.js

Simple, customizable yet performant spreadsheet for React

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import React, { PureComponent } from "react";
import classnames from "classnames";
import { connect } from "unistore/react";
import * as PointSet from "./point-set";
import * as PointMap from "./point-map";
import * as Matrix from "./matrix";
import * as Types from "./types";
import * as Actions from "./actions";
import { isActive, getOffsetRect } from "./util";
export var Cell = /*#__PURE__*/function (_PureComponent) {
  _inherits(Cell, _PureComponent);

  var _super = _createSuper(Cell);

  function Cell() {
    var _this;

    _classCallCheck(this, Cell);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _this.handleRoot = function (root) {
      _this.root = root;
    };

    _this.handleMouseDown = function (e) {
      var _this$props = _this.props,
          row = _this$props.row,
          column = _this$props.column,
          setCellDimensions = _this$props.setCellDimensions,
          select = _this$props.select,
          activate = _this$props.activate,
          mode = _this$props.mode;

      if (mode === "view") {
        setCellDimensions({
          row: row,
          column: column
        }, getOffsetRect(e.currentTarget));

        if (e.shiftKey) {
          select({
            row: row,
            column: column
          });
          return;
        }

        activate({
          row: row,
          column: column
        });
      }
    };

    _this.handleMouseOver = function (e) {
      var _this$props2 = _this.props,
          row = _this$props2.row,
          column = _this$props2.column,
          dragging = _this$props2.dragging,
          setCellDimensions = _this$props2.setCellDimensions,
          select = _this$props2.select;

      if (dragging) {
        setCellDimensions({
          row: row,
          column: column
        }, getOffsetRect(e.currentTarget));
        select({
          row: row,
          column: column
        });
      }
    };

    return _this;
  }

  _createClass(Cell, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var _this$props3 = this.props,
          row = _this$props3.row,
          column = _this$props3.column,
          active = _this$props3.active,
          selected = _this$props3.selected,
          mode = _this$props3.mode,
          setCellDimensions = _this$props3.setCellDimensions;

      if (selected && this.root) {
        setCellDimensions({
          row: row,
          column: column
        }, getOffsetRect(this.root));
      }

      if (this.root && active && mode === "view") {
        this.root.focus();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          row = _this$props4.row,
          column = _this$props4.column,
          getValue = _this$props4.getValue,
          formulaParser = _this$props4.formulaParser;
      var _this$props5 = this.props,
          DataViewer = _this$props5.DataViewer,
          data = _this$props5.data;

      if (data && data.DataViewer) {
        var _data = data;
        DataViewer = _data.DataViewer;
        data = _objectWithoutProperties(_data, ["DataViewer"]);
        _data;
      }

      return /*#__PURE__*/React.createElement("td", {
        ref: this.handleRoot,
        className: classnames("Spreadsheet__cell", data && data.readOnly && "Spreadsheet__cell--readonly", data && data.className),
        onMouseOver: this.handleMouseOver,
        onMouseDown: this.handleMouseDown,
        tabIndex: 0
      }, /*#__PURE__*/React.createElement(DataViewer, {
        row: row,
        column: column,
        cell: data,
        getValue: getValue,
        formulaParser: formulaParser
      }));
    }
  }]);

  return Cell;
}(PureComponent);

function mapStateToProps(_ref, _ref2) {
  var data = _ref.data,
      active = _ref.active,
      selected = _ref.selected,
      copied = _ref.copied,
      hasPasted = _ref.hasPasted,
      mode = _ref.mode,
      dragging = _ref.dragging,
      lastChanged = _ref.lastChanged,
      bindings = _ref.bindings;
  var column = _ref2.column,
      row = _ref2.row;
  var point = {
    row: row,
    column: column
  };
  var cellIsActive = isActive(active, point);
  var cellBindings = PointMap.get(point, bindings);
  return {
    active: cellIsActive,
    selected: PointSet.has(selected, point),
    copied: PointMap.has(point, copied),
    mode: cellIsActive ? mode : "view",
    data: Matrix.get(row, column, data),
    dragging: dragging,

    /** @todo refactor */
    _bindingChanged: cellBindings && lastChanged && PointSet.has(cellBindings, lastChanged) ? {} : null
  };
}

export var enhance = connect(mapStateToProps, function () {
  return {
    select: Actions.select,
    activate: Actions.activate,
    setCellDimensions: Actions.setCellDimensions
  };
});