streaksheet - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

build/src/index.d.ts

@@ -1,3 +0,3 @@
-import React from 'react';
-import SectionRowMatcher from './SectionRowMatcher';
+import * as React from 'react';
+import { ComponentType } from 'react';
 export interface Row {
@@ -50,10 +50,23 @@ key: string;
 }
+export interface CellProps {
+    rowKey: string;
+    columnKey: string;
+}
+export interface SectionHeaderCellProps {
+    sectionKey: string;
+    columnKey: string;
+}
+export interface ColumnHeaderCellProps {
+    columnKey: string;
+}
 export interface Props {
     width: number;
     height: number;
-    renderCell(rowKey: string, columnKey: string): React.ReactElement;
-    renderSectionRowCell(sectionKey: string, columnKey: string): React.ReactElement;
+    Cell: ComponentType<CellProps>;
+    SectionHeaderCell: ComponentType<SectionHeaderCellProps>;
+    ColumnHeaderCell: ComponentType<ColumnHeaderCellProps>;
     columnAndOverviewData: ColumnAndOverviewData;
     refreshColumnAndOverviewData(): void;
-    getRows(sectionKey: string, startingIndex: number, countHint: number): Promise<RowsResult>;
+    getRows(sectionKey: string, startingIndex: number, countHint: number, abortSignal: AbortSignal): Promise<RowsResult>;
+    unloadRows?(sectionKey: string, keys: string[]): void;
     search?(query: string, direction: SearchDirection, startPosition: CellPosition, includeContext: boolean): Promise<SearchResult>;
@@ -63,27 +76,10 @@ defaultRowHeight: number;
     onItemsRendered?: (event: ItemsRenderedEvent) => void;
-    overscanColumnCount?: number;
-    overscanRowCount?: number;
+    renderOverscanColumnCount?: number;
+    renderOverscanRowCount?: number;
+    requestTriggerDistance?: number;
+    requestLimitDistance?: number;
+    dropLimitDistance?: number;
+    dropTriggerDistance?: number;
 }
-export interface ItemData {
-    sectionRowMatcher: SectionRowMatcher;
-    columnAndOverviewData: ColumnAndOverviewData;
-    rowsBySection: RowsBySection;
-    renderCell(rowKey: string, columnKey: string): React.ReactElement;
-}
-interface RowsBySection {
-    [sectionKey: string]: {
-        startIndex: number;
-        rowsResult: RowsResult;
-    };
-}
-interface State {
-    rowsBySection: RowsBySection;
-}
-export default class Protosheet extends React.Component<Props, State> {
-    state: {
-        rowsBySection: {};
-    };
-    componentDidMount(): void;
-    render(): JSX.Element;
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
+export interface StreakSheetRef {
     refreshRows(): void;
@@ -100,2 +96,3 @@ scrollTo(position: {
 }
-export {};
+declare const StreakSheet: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<StreakSheetRef>>>;
+export default StreakSheet;

build/src/index.js

@@ -12,26 +12,28 @@ "use strict";
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _sumBy = _interopRequireDefault(require("lodash/sumBy"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _pullAt = _interopRequireDefault(require("lodash/pullAt"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _sortedIndexBy = _interopRequireDefault(require("lodash/sortedIndexBy"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var React = _interopRequireWildcard(require("react"));
 
-var _sumBy = _interopRequireDefault(require("lodash/sumBy"));
+var _reactWindow = require("react-window");
 
-var _react = _interopRequireWildcard(require("react"));
+var _CellWrapper = _interopRequireDefault(require("./CellWrapper"));
 
-var _reactWindow = require("react-window");
+var _useSectionRowMatcher = _interopRequireDefault(require("./useSectionRowMatcher"));
 
-var _Cell = _interopRequireDefault(require("./Cell"));
+var _addEventListenerOnce = _interopRequireDefault(require("./addEventListenerOnce"));
 
-var _SectionRowMatcher = _interopRequireDefault(require("./SectionRowMatcher"));
+var _findStartedRowsRequestsOutsideRange = _interopRequireDefault(require("./scanRows/findStartedRowsRequestsOutsideRange"));
 
+var _findMissingRowsInRange = _interopRequireDefault(require("./scanRows/findMissingRowsInRange"));
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -43,20 +45,16 @@
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+var InternalSheetInnerElementCtx = (0, React.createContext)(undefined);
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var InternalSheetInnerElementCtx = (0, _react.createContext)(undefined);
-
 function InnerElement(props) {
-  var info = (0, _react.useContext)(InternalSheetInnerElementCtx);
+  var info = (0, React.useContext)(InternalSheetInnerElementCtx);
   var totalWidthLength = (0, _sumBy["default"])(info.sheetProps.columnAndOverviewData.columns, function (c) {
     return c.width;
   }) + 'px';
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: props.style
-  }, props.children, /*#__PURE__*/_react["default"].createElement("div", {
+  }, props.children, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -74,3 +72,3 @@ position: 'sticky',
     var key = _ref.key;
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: i,
@@ -88,5 +86,7 @@ style: {
       }
-    }, key);
+    }, /*#__PURE__*/React.createElement(info.sheetProps.ColumnHeaderCell, {
+      columnKey: key
+    }));
   })), info.sheetProps.columnAndOverviewData.sections.map(function (section) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: section.key,
@@ -103,3 +103,3 @@ style: {
     /*#__PURE__*/
-    _react["default"].createElement("div", {
+    React.createElement("div", {
       style: {
@@ -115,3 +115,3 @@ position: 'sticky',
     }, info.sheetProps.columnAndOverviewData.columns.map(function (column) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: column.key,
@@ -129,3 +129,6 @@ style: {
         }
-      }, info.sheetProps.renderSectionRowCell(section.key, column.key));
+      }, /*#__PURE__*/React.createElement(info.sheetProps.SectionHeaderCell, {
+        sectionKey: section.key,
+        columnKey: column.key
+      }));
     })));
@@ -139,146 +142,283 @@ }));
 */
-var Protosheet = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Protosheet, _React$Component);
+// eslint-disable-next-line react/display-name
+var StreakSheet = React.memo((0, React.forwardRef)(function StreakSheet(props, ref) {
+  var _props$renderOverscan, _props$renderOverscan2, _props$requestTrigger, _props$requestLimitDi, _props$dropLimitDista, _props$dropTriggerDis;
 
-  var _super = _createSuper(Protosheet);
+  // default prop values
+  var renderOverscanColumnCount = (_props$renderOverscan = props.renderOverscanColumnCount) !== null && _props$renderOverscan !== void 0 ? _props$renderOverscan : 5;
+  var renderOverscanRowCount = (_props$renderOverscan2 = props.renderOverscanRowCount) !== null && _props$renderOverscan2 !== void 0 ? _props$renderOverscan2 : 50;
+  var requestTriggerDistance = (_props$requestTrigger = props.requestTriggerDistance) !== null && _props$requestTrigger !== void 0 ? _props$requestTrigger : 50;
+  var requestLimitDistance = (_props$requestLimitDi = props.requestLimitDistance) !== null && _props$requestLimitDi !== void 0 ? _props$requestLimitDi : 100;
+  var dropLimitDistance = (_props$dropLimitDista = props.dropLimitDistance) !== null && _props$dropLimitDista !== void 0 ? _props$dropLimitDista : 100;
+  var dropTriggerDistance = (_props$dropTriggerDis = props.dropTriggerDistance) !== null && _props$dropTriggerDis !== void 0 ? _props$dropTriggerDis : 200; // end default prop values
+  // Changes to this don't need to trigger re-renders, so we just mutate the object in-place.
 
-  function Protosheet() {
-    var _this;
+  var _useState = (0, React.useState)({}),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      startedRowsRequests = _useState2[0]; // unmount cleanup
 
-    (0, _classCallCheck2["default"])(this, Protosheet);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  (0, React.useEffect)(function () {
+    return function () {
+      for (var _i = 0, _Object$values = Object.values(startedRowsRequests); _i < _Object$values.length; _i++) {
+        var requests = _Object$values[_i];
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      rowsBySection: {}
-    });
-    return _this;
-  }
+        var _iterator = _createForOfIteratorHelper(requests),
+            _step;
 
-  (0, _createClass2["default"])(Protosheet, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _request$abortControl;
 
-      // TODO request only necessary views when they're visible
-      var _iterator = _createForOfIteratorHelper(this.props.columnAndOverviewData.sections),
-          _step;
+            var request = _step.value;
+            (_request$abortControl = request.abortController) === null || _request$abortControl === void 0 ? void 0 : _request$abortControl.abort();
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    };
+  }, [startedRowsRequests]);
 
-      try {
-        var _loop = function _loop() {
-          var section = _step.value;
+  var _useState3 = (0, React.useState)({}),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      rowsBySection = _useState4[0],
+      setRowsBySection = _useState4[1];
 
-          _this2.props.getRows(section.key, 0, section.rowCount).then(function (rowsResult) {
-            _this2.setState(function (state) {
-              return _objectSpread({}, state, {
-                rowsBySection: _objectSpread({}, state.rowsBySection, (0, _defineProperty2["default"])({}, section.key, {
-                  startIndex: 0,
-                  rowsResult: rowsResult
-                }))
-              });
-            });
-          });
-        };
+  var gridRef = (0, React.useRef)(null);
+  (0, React.useImperativeHandle)(ref, function () {
+    return {
+      refreshRows: function refreshRows() {
+        throw new Error('unimplemented');
+      },
+      scrollTo: function scrollTo(position) {
+        position; // TODO gridRef.current!.something();
 
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          _loop();
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+        throw new Error('unimplemented');
+      },
+      scrollToItem: function scrollToItem(position) {
+        position; // TODO gridRef.current!.something();
+
+        throw new Error('unimplemented');
       }
+    };
+  }); // TODO have cell/column keys so adding a column doesn't re-render all subsequent columns?
+  // const frozenColumns = props.frozenColumns || 0;
+
+  var sectionRowMatcher = (0, _useSectionRowMatcher["default"])(props.columnAndOverviewData.sections.map(function (s) {
+    return s.rowCount;
+  })); // TODO memoize itemData
+
+  var itemData = {
+    sectionRowMatcher: sectionRowMatcher,
+    columnAndOverviewData: props.columnAndOverviewData,
+    rowsBySection: rowsBySection,
+    Cell: props.Cell
+  };
+  var totalRowCount = (0, _sumBy["default"])(props.columnAndOverviewData.sections, function (s) {
+    return (
+      /* sticky row */
+      1 + s.rowCount
+    );
+  }) + 1;
+  /* column headers row */
+
+  var sectionKeysToIndexes = (0, React.useMemo)(function () {
+    var sectionKeysToIndexes = {};
+
+    for (var i = 0; i < props.columnAndOverviewData.sections.length; i++) {
+      sectionKeysToIndexes[props.columnAndOverviewData.sections[i].key] = i;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this,
-          _this$props$overscanC,
-          _this$props$overscanR;
 
-      // TODO have cell/column keys so adding a column doesn't re-render all subsequent columns?
-      // const frozenColumns = this.props.frozenColumns || 0;
-      var sectionRowMatcher = new _SectionRowMatcher["default"](this.props.columnAndOverviewData.sections.map(function (s) {
-        return s.rowCount;
-      })); // TODO memoize itemData
+    return sectionKeysToIndexes;
+  }, [props.columnAndOverviewData.sections]);
 
-      var itemData = {
-        sectionRowMatcher: sectionRowMatcher,
-        columnAndOverviewData: this.props.columnAndOverviewData,
-        rowsBySection: this.state.rowsBySection,
-        renderCell: this.props.renderCell
+  var onItemsRendered = function onItemsRendered(_ref2) {
+    var visibleRowStartIndex = _ref2.visibleRowStartIndex,
+        visibleRowStopIndex = _ref2.visibleRowStopIndex;
+
+    // TODO is there stuff in here that can be extracted and unit-tested?
+    // TODO can this logic be extracted into a separate internal component like how
+    // react-window-infinite-loader works?
+    // SectionRow can have a negative section to represent the column headers,
+    // and a negative row to represent the section row. We don't care about these,
+    // so just fudge SectionRows pointing to those to point to the first item.
+    var adjustNegativeSectionOrRow = function adjustNegativeSectionOrRow(sectionRow) {
+      if (sectionRow.section < 0 || sectionRow.row < 0) {
+        return {
+          section: Math.max(0, sectionRow.section),
+          row: Math.max(0, sectionRow.row)
+        };
+      }
+
+      return sectionRow;
+    };
+
+    var getSectionRowRangeFromBufferAmount = function getSectionRowRangeFromBufferAmount(bufferAmount) {
+      return {
+        start: adjustNegativeSectionOrRow(sectionRowMatcher.getSectionRow(Math.max(0, visibleRowStartIndex - bufferAmount))),
+        stop: adjustNegativeSectionOrRow(sectionRowMatcher.getSectionRow(Math.min(totalRowCount - 1, visibleRowStopIndex + bufferAmount)))
       };
-      return /*#__PURE__*/_react["default"].createElement(InternalSheetInnerElementCtx.Provider, {
-        value: {
-          sheetProps: this.props,
-          sheetState: this.state
+    };
+
+    var requestTriggerRange = getSectionRowRangeFromBufferAmount(requestTriggerDistance);
+    var requestLimitRange = getSectionRowRangeFromBufferAmount(requestLimitDistance);
+    var dropLimitRange = getSectionRowRangeFromBufferAmount(dropLimitDistance);
+    var dropTriggerRange = getSectionRowRangeFromBufferAmount(dropTriggerDistance); // Check to see if any known rows or active requests are entirely outside the DropTriggerZone.
+
+    var dropTriggered = (0, _findStartedRowsRequestsOutsideRange["default"])(startedRowsRequests, sectionKeysToIndexes, dropTriggerRange, null);
+
+    if (dropTriggered) {
+      (0, _findStartedRowsRequestsOutsideRange["default"])(startedRowsRequests, sectionKeysToIndexes, dropLimitRange, function (outsideRequests) {
+        var sectionKey = outsideRequests.sectionKey,
+            requestIndexes = outsideRequests.requestIndexes;
+
+        if (requestIndexes === 'WHOLE SECTION') {
+          startedRowsRequests[sectionKey].forEach(function (request) {
+            var _request$abortControl2;
+
+            (_request$abortControl2 = request.abortController) === null || _request$abortControl2 === void 0 ? void 0 : _request$abortControl2.abort();
+            request.removerAbortController.abort();
+          });
+          delete startedRowsRequests[sectionKey];
+        } else {
+          (0, _pullAt["default"])(startedRowsRequests[sectionKey], requestIndexes).forEach(function (request) {
+            var _request$abortControl3;
+
+            (_request$abortControl3 = request.abortController) === null || _request$abortControl3 === void 0 ? void 0 : _request$abortControl3.abort();
+            request.removerAbortController.abort();
+          });
+
+          if (startedRowsRequests[sectionKey].length === 0) {
+            delete startedRowsRequests[sectionKey];
+          }
         }
-      }, /*#__PURE__*/_react["default"].createElement(_reactWindow.VariableSizeGrid, {
-        columnCount: this.props.columnAndOverviewData.columns.length,
-        columnWidth: function columnWidth(index) {
-          return _this3.props.columnAndOverviewData.columns[index].width;
-        },
-        rowCount: (0, _sumBy["default"])(this.props.columnAndOverviewData.sections, function (s) {
-          return (
-            /* sticky row */
-            1 + s.rowCount
-          );
-        }) + 1
-        /* column headers row */
-        ,
-        rowHeight: function rowHeight(index) {
-          var _sectionRowMatcher$ge = sectionRowMatcher.getSectionRow(index),
-              section = _sectionRowMatcher$ge.section,
-              row = _sectionRowMatcher$ge.row;
+      });
+    } // Done handling unloads.
+    // Now handle starting any necessary loads.
+    // Check if there are any gaps inside the requestTriggerZone
 
-          if (section !== -1 && row === -1) {
-            return _this3.props.columnAndOverviewData.sections[section].sectionRowHeight;
-          } else {
-            return _this3.props.defaultRowHeight;
-          }
-        },
-        width: this.props.width,
-        height: this.props.height,
-        innerElementType: InnerElement,
-        itemData: itemData,
-        itemKey: function itemKey(_ref2) {
-          var columnIndex = _ref2.columnIndex,
-              rowIndex = _ref2.rowIndex;
-          // TODO, use columnKey, and rowKey too if possible
-          return columnIndex + '-' + rowIndex;
-        },
-        overscanColumnCount: (_this$props$overscanC = this.props.overscanColumnCount) !== null && _this$props$overscanC !== void 0 ? _this$props$overscanC : 5,
-        overscanRowCount: (_this$props$overscanR = this.props.overscanRowCount) !== null && _this$props$overscanR !== void 0 ? _this$props$overscanR : 100
-      }, _Cell["default"]));
+
+    var requestTriggered = (0, _findMissingRowsInRange["default"])(startedRowsRequests, props.columnAndOverviewData.sections, requestTriggerRange, null);
+
+    if (requestTriggered) {
+      (0, _findMissingRowsInRange["default"])(startedRowsRequests, props.columnAndOverviewData.sections, requestLimitRange, function (missingRows) {
+        var section = props.columnAndOverviewData.sections[missingRows.sectionIndex];
+        var abortController = new AbortController();
+        var removerAbortController = new AbortController();
+        var request = {
+          startIndex: missingRows.startRowIndex,
+          countHint: missingRows.count,
+          abortController: abortController,
+          removerAbortController: removerAbortController
+        };
+
+        if (!startedRowsRequests[section.key]) {
+          startedRowsRequests[section.key] = [request];
+        } else {
+          var newIndex = (0, _sortedIndexBy["default"])(startedRowsRequests[section.key], request, function (r) {
+            return r.startIndex;
+          });
+          startedRowsRequests[section.key].splice(newIndex, 0, request);
+        }
+
+        props.getRows(section.key, missingRows.startRowIndex, missingRows.count, abortController.signal).then(function (rowsResult) {
+          if (abortController.signal.aborted) return;
+          request.abortController = null;
+          request.countHint = rowsResult.rows.length;
+          setRowsBySection(function (rowsBySection) {
+            // TODO add handling elsewhere for case where new rowsBySection value
+            // conflicts with columnAndOverviewData (set a flag and refresh it).
+            var newEntry = {
+              startIndex: missingRows.startRowIndex,
+              rowsResult: rowsResult
+            };
+            var rowsChunk = Object.prototype.hasOwnProperty.call(rowsBySection, section.key) ? rowsBySection[section.key] : [];
+            var indexToInsertAt = (0, _sortedIndexBy["default"])(rowsChunk, newEntry, function (e) {
+              return e.startIndex;
+            });
+            var newRowsChunk = [].concat((0, _toConsumableArray2["default"])(rowsChunk.slice(0, indexToInsertAt)), [newEntry], (0, _toConsumableArray2["default"])(rowsChunk.slice(indexToInsertAt)));
+            return _objectSpread(_objectSpread({}, rowsBySection), {}, (0, _defineProperty2["default"])({}, section.key, newRowsChunk));
+          });
+          (0, _addEventListenerOnce["default"])(removerAbortController.signal, 'abort', function () {
+            var _props$unloadRows;
+
+            setRowsBySection(function (rowsBySection) {
+              if (Object.prototype.hasOwnProperty.call(rowsBySection, section.key)) {
+                var newRowsChunk = rowsBySection[section.key].filter(function (rowsChunk) {
+                  return rowsChunk.startIndex !== missingRows.startRowIndex;
+                });
+
+                if (newRowsChunk.length) {
+                  return _objectSpread(_objectSpread({}, rowsBySection), {}, (0, _defineProperty2["default"])({}, section.key, newRowsChunk));
+                } else {
+                  var newRowsBySection = _objectSpread({}, rowsBySection);
+
+                  delete newRowsBySection[section.key];
+                  return newRowsBySection;
+                }
+              } else {
+                return rowsBySection;
+              }
+            });
+            (_props$unloadRows = props.unloadRows) === null || _props$unloadRows === void 0 ? void 0 : _props$unloadRows.call(props, section.key, rowsResult.rows.map(function (r) {
+              return r.key;
+            }));
+          });
+        }, function (err) {
+          if (abortController.signal.aborted) return;
+          throw err;
+        });
+      });
     }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      return this.props.defaultRowHeight !== nextProps.defaultRowHeight || this.props.columnAndOverviewData !== nextProps.columnAndOverviewData || this.props.frozenColumns !== nextProps.frozenColumns || this.state.rowsBySection !== nextState.rowsBySection;
-    }
-  }, {
-    key: "refreshRows",
-    value: function refreshRows() {// TODO
-    }
-  }, {
-    key: "scrollTo",
-    value: function scrollTo(position) {
-      position; // this.listRef.current.scrollToItem(250, 'smart');
+  };
 
-      throw new Error('unimplemented');
+  return /*#__PURE__*/React.createElement(InternalSheetInnerElementCtx.Provider, {
+    value: {
+      // TODO put less in context? use observedBits?
+      // TODO pass effective prop items (with default values applied)
+      sheetProps: props,
+      rowsBySection: rowsBySection
     }
-  }, {
-    key: "scrollToItem",
-    value: function scrollToItem(position) {
-      position;
-      throw new Error('unimplemented');
-    }
-  }]);
-  return Protosheet;
-}(_react["default"].Component);
+  }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid, {
+    ref: gridRef,
+    columnCount: props.columnAndOverviewData.columns.length,
+    columnWidth: function columnWidth(index) {
+      return props.columnAndOverviewData.columns[index].width;
+    },
+    estimatedColumnWidth: (0, _sumBy["default"])(props.columnAndOverviewData.columns, function (c) {
+      return c.width;
+    }) / props.columnAndOverviewData.columns.length,
+    rowCount: totalRowCount,
+    rowHeight: function rowHeight(index) {
+      var _sectionRowMatcher$ge = sectionRowMatcher.getSectionRow(index),
+          section = _sectionRowMatcher$ge.section,
+          row = _sectionRowMatcher$ge.row;
 
-exports["default"] = Protosheet;
+      if (section !== -1 && row === -1) {
+        return props.columnAndOverviewData.sections[section].sectionRowHeight;
+      } else {
+        return props.defaultRowHeight;
+      }
+    },
+    estimatedRowHeight: props.defaultRowHeight,
+    width: props.width,
+    height: props.height,
+    innerElementType: InnerElement,
+    itemData: itemData,
+    itemKey: function itemKey(_ref3) {
+      var columnIndex = _ref3.columnIndex,
+          rowIndex = _ref3.rowIndex;
+      // TODO, use columnKey, and maybe rowKey too if possible
+      return columnIndex + '-' + rowIndex;
+    },
+    overscanColumnCount: renderOverscanColumnCount,
+    overscanRowCount: renderOverscanRowCount,
+    onItemsRendered: onItemsRendered
+  }, _CellWrapper["default"]));
+}));
+var _default = StreakSheet;
+exports["default"] = _default;
 //# sourceMappingURL=index.js.map

build/src/SectionRowMatcher.d.ts

@@ -10,1 +10,2 @@ export interface SectionRow {
 }
+export declare function compareSectionRows(a: SectionRow, b: SectionRow): number;

build/src/SectionRowMatcher.js

@@ -8,2 +8,3 @@ "use strict";
 });
+exports.compareSectionRows = compareSectionRows;
 exports["default"] = void 0;
@@ -47,2 +48,12 @@
 exports["default"] = SectionRowMatcher;
+
+function compareSectionRows(a, b) {
+  if (a.section < b.section) {
+    return -1;
+  } else if (a.section === b.section) {
+    return a.row - b.row;
+  } else {
+    return 1;
+  }
+}
 //# sourceMappingURL=SectionRowMatcher.js.map

package.json

 {
   "name": "streaksheet",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "author": "Chris Cowan <[e-mail]>",
@@ -9,3 +9,3 @@ "license": "MIT",
   "scripts": {
-    "prepare": "rimraf build && babel -s true -d build/src/ src/ -x .ts,.tsx --ignore '**/*.test.tsx' && tsc",
+    "prepare": "rimraf build && babel -s true -d build/src/ src/ -x .ts,.tsx --ignore '**/*.test.ts' --ignore '**/*.test.tsx' && tsc",
     "example-watch": "parcel example/index.html",
@@ -38,9 +38,10 @@ "example-build": "parcel build example/index.html --public-url .",
     "@types/react-window": "^1.8.1",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
-    "babel-jest": "^25.1.0",
-    "eslint": "^6.8.0",
+    "@typescript-eslint/eslint-plugin": "^3.0.0",
+    "@typescript-eslint/parser": "^3.0.0",
+    "babel-jest": "^26.0.1",
+    "eslint": "^7.0.0",
     "eslint-plugin-react": "^7.18.3",
     "husky": "^4.2.3",
-    "jest": "^25.1.0",
+    "jest": "^26.0.1",
+    "node-abort-controller": "^1.0.4",
     "parcel-bundler": "^1.12.4",
@@ -50,4 +51,4 @@ "prettier": "^2.0.2",
     "pretty-quick": "^2.0.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-virtualized-auto-sizer": "^1.0.2",
@@ -63,3 +64,3 @@ "rimraf": "^3.0.2",
   "peerDependencies": {
-    "react": "^16.12.0"
+    "react": "^16.13.1"
   },
@@ -66,0 +67,0 @@ "husky": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93329

increased by94.88%

Number of package files

33

increased by94.12%

Lines of code

808

increased by66.26%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

11

increased byInfinity%

Worsened metrics

Dev dependency count

30

increased by3.45%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes