react-spreadsheet/dist/SpreadsheetStateProvider.js

Simple, customizable yet performant spreadsheet for React

import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
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, { Component } from "react";
import shallowEqual from "fbjs/lib/shallowEqual"; // $FlowFixMe

import createStore from "unistore";
import devtools from "unistore/devtools";
import { Provider } from "unistore/react";
import * as Types from "./types";
import * as PointSet from "./point-set";
import * as Actions from "./actions";
import * as PointMap from "./point-map";
import * as Matrix from "./matrix";
import Spreadsheet from "./Spreadsheet";
export { createEmptyMatrix } from "./util";
var initialState = {
  selected: PointSet.from([]),
  copied: PointMap.from([]),
  active: null,
  mode: "view",
  rowDimensions: {},
  columnDimensions: {},
  lastChanged: null,
  bindings: PointMap.from([])
};

var SpreadsheetStateProvider = /*#__PURE__*/function (_Component) {
  _inherits(SpreadsheetStateProvider, _Component);

  var _super = _createSuper(SpreadsheetStateProvider);

  function SpreadsheetStateProvider(props) {
    var _this;

    _classCallCheck(this, SpreadsheetStateProvider);

    _this = _super.call(this, props);

    var state = _objectSpread({}, initialState, {
      data: _this.props.data
    });

    _this.store = true ? createStore(state) : devtools(createStore(state));
    _this.prevState = state;
    return _this;
  }

  _createClass(SpreadsheetStateProvider, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      var _this$props = this.props,
          data = _this$props.data,
          rest = _objectWithoutProperties(_this$props, ["data"]);

      var nextData = nextProps.data,
          nextRest = _objectWithoutProperties(nextProps, ["data"]);

      return !shallowEqual(rest, nextRest) || nextData !== this.prevState.data;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var _this$props2 = this.props,
          onChange = _this$props2.onChange,
          onModeChange = _this$props2.onModeChange,
          onSelect = _this$props2.onSelect,
          onActivate = _this$props2.onActivate,
          onCellCommit = _this$props2.onCellCommit;
      this.unsubscribe = this.store.subscribe(function (state) {
        var prevState = _this2.prevState;

        if (state.lastCommit && state.lastCommit !== prevState.lastCommit) {
          var _iterator = _createForOfIteratorHelper(state.lastCommit),
              _step;

          try {
            for (_iterator.s(); !(_step = _iterator.n()).done;) {
              var change = _step.value;
              onCellCommit(change.prevCell, change.nextCell, state.active);
            }
          } catch (err) {
            _iterator.e(err);
          } finally {
            _iterator.f();
          }
        }

        if (state.data !== prevState.data && state.data !== _this2.props.data) {
          onChange(state.data);
        }

        if (state.mode !== prevState.mode) {
          onModeChange(state.mode);
        }

        if (state.selected !== prevState.selected) {
          onSelect(PointSet.toArray(state.selected));
        }

        if (state.active !== prevState.active && state.active) {
          onActivate(state.active);
        }

        _this2.prevState = state;
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (this.props.data !== this.prevState.data) {
        this.store.setState(Actions.setData(this.store.getState(), this.props.data));
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.unsubscribe();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          data = _this$props3.data,
          rest = _objectWithoutProperties(_this$props3, ["data"]);

      return /*#__PURE__*/React.createElement(Provider, {
        store: this.store
      }, /*#__PURE__*/React.createElement(Spreadsheet, Object.assign({}, rest, {
        store: this.store
      })));
    }
  }]);

  return SpreadsheetStateProvider;
}(Component);

SpreadsheetStateProvider.defaultProps = {
  onChange: function onChange() {},
  onModeChange: function onModeChange() {},
  onSelect: function onSelect() {},
  onActivate: function onActivate() {},
  onCellCommit: function onCellCommit() {}
};
export { SpreadsheetStateProvider as default };