streaksheet - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

build/src/CellWrapper.js

@@ -50,3 +50,3 @@ "use strict";
 
-  if (position.rowIndex === -1) {
+  if (!position || position.rowIndex === -1) {
     return null;
@@ -53,0 +53,0 @@ }

build/src/ColumnHeaderCellWrapper.d.ts

@@ -7,3 +7,3 @@ import { ComponentType } from 'react';
     columnWidths: number[];
-    containerRect: DOMRectReadOnly;
+    container: HTMLElement;
     height: number;
@@ -14,3 +14,3 @@ minimumColumnWidth: number;
 }
-export default function ColumnHeaderCellWrapper({ ColumnHeaderCell, column, columnWidths, containerRect, height, minimumColumnWidth, onReorder, onResize, }: Props): JSX.Element;
+export default function ColumnHeaderCellWrapper({ ColumnHeaderCell, column, columnWidths, container, height, minimumColumnWidth, onReorder, onResize, }: Props): JSX.Element;
 export {};

build/src/ColumnHeaderCellWrapper.js

@@ -20,3 +20,3 @@ "use strict";
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _ColumnReorderOverlay = _interopRequireDefault(require("./ColumnReorderOverlay"));
 
@@ -26,3 +26,3 @@ var _ColumnResizeHandle = _interopRequireDefault(require("./ColumnResizeHandle"));
 function ColumnHeaderCellWrapper(_ref) {
-  var _ref$current, _absoluteColumnBounds;
+  var _ref$current, _absoluteColumnBounds, _absoluteColumnBounds2;
 
@@ -32,3 +32,3 @@ var ColumnHeaderCell = _ref.ColumnHeaderCell,
       columnWidths = _ref.columnWidths,
-      containerRect = _ref.containerRect,
+      container = _ref.container,
       height = _ref.height,
@@ -38,2 +38,6 @@ minimumColumnWidth = _ref.minimumColumnWidth,
       onResize = _ref.onResize;
+  var isHidden = column.isHidden,
+      isResizable = column.isResizable,
+      key = column.key,
+      width = column.width;
   var ref = (0, _react.useRef)(null);
@@ -48,4 +52,4 @@
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      mouseMoveX = _useState4[0],
-      setMouseMoveX = _useState4[1];
+      mouseX = _useState4[0],
+      setMouseX = _useState4[1];
 
@@ -55,9 +59,15 @@ var handleMouseMove = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
-    setMouseMoveX(event.pageX);
+    setMouseX(event.pageX);
   }, []);
-  var isHidden = column.isHidden,
-      isResizable = column.isResizable,
-      key = column.key,
-      width = column.width;
+  var handleResizeHandleMove = (0, _react.useCallback)(function (delta) {
+    var newWidth = Math.max(width + delta, minimumColumnWidth);
+
+    if (newWidth === width) {
+      return;
+    }
+
+    onResize(newWidth);
+  }, [onResize, minimumColumnWidth, width]);
   var columnRect = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect();
+  var containerRect = container.getBoundingClientRect();
   var absoluteColumnBounds = columnWidths.map(function (columnWidth, columnIndex) {
@@ -80,8 +90,3 @@ var left = containerRect.left + (0, _sum["default"])((0, _take["default"])(columnWidths, columnIndex));
         setMouseDownX(null);
-        setMouseMoveX(null);
-
-        if (!columnRect) {
-          return;
-        }
-
+        setMouseX(null);
         var targetColumnIndex = absoluteColumnBounds.findIndex(function (_ref2) {
@@ -97,3 +102,3 @@ var left = _ref2.left,
       setMouseDownX(event.pageX);
-      setMouseMoveX(event.pageX);
+      setMouseX(event.pageX);
     },
@@ -106,3 +111,3 @@ ref: ref,
       boxSizing: 'border-box',
-      cursor: mouseDownX != null && mouseMoveX != null ? 'grabbing' : 'grab',
+      cursor: mouseDownX != null && mouseX != null ? 'grabbing' : 'grab',
       display: 'inline-block',
@@ -120,39 +125,18 @@ height: height + 'px',
     columnRect: columnRect,
-    liveResize: true,
+    container: container,
+    liveResize: false,
     minimumColumnWidth: minimumColumnWidth,
-    onMove: function onMove(delta) {
-      var newWidth = Math.max(width + delta, minimumColumnWidth);
-
-      if (newWidth === width) {
-        return;
-      }
-
-      onResize(newWidth);
-    }
-  })), mouseDownX != null && mouseMoveX != null && columnRect && _reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      backgroundColor: 'rgba(0, 0, 0, 0.1)',
-      bottom: 0,
-      cursor: 'grabbing',
-      left: mouseMoveX - (mouseDownX - columnRect.left) + 'px',
-      position: 'absolute',
-      top: columnRect.bottom + 'px',
-      width: width + 'px'
-    }
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      backgroundColor: 'rgba(0, 0, 0, 0.4)',
-      bottom: 0,
-      cursor: 'grabbing',
-      left: (_absoluteColumnBounds = absoluteColumnBounds.find(function (_ref3) {
-        var left = _ref3.left,
-            right = _ref3.right;
-        return mouseMoveX >= left && mouseMoveX <= right;
-      })) === null || _absoluteColumnBounds === void 0 ? void 0 : _absoluteColumnBounds.left,
-      position: 'absolute',
-      top: columnRect.bottom + 'px',
-      width: 5 + 'px'
-    }
-  })), document.body));
+    onMove: handleResizeHandleMove
+  })), columnRect != null && mouseDownX != null && mouseX != null && /*#__PURE__*/_react["default"].createElement(_ColumnReorderOverlay["default"], {
+    columnRect: columnRect,
+    container: container,
+    mouseDownX: mouseDownX,
+    mouseX: mouseX,
+    targetColumnLeft: (_absoluteColumnBounds = (_absoluteColumnBounds2 = absoluteColumnBounds.find(function (_ref3) {
+      var left = _ref3.left,
+          right = _ref3.right;
+      return mouseX >= left && mouseX <= right;
+    })) === null || _absoluteColumnBounds2 === void 0 ? void 0 : _absoluteColumnBounds2.left) !== null && _absoluteColumnBounds !== void 0 ? _absoluteColumnBounds : 0
+  }));
 }
 //# sourceMappingURL=ColumnHeaderCellWrapper.js.map

build/src/ColumnResizeHandle.d.ts

 import React from 'react';
 interface Props {
     columnRect: DOMRectReadOnly;
+    container: HTMLElement;
     liveResize: boolean;
@@ -9,3 +10,3 @@ minimumColumnWidth: number;
 }
-export default function ColumnResizeHandle({ columnRect, liveResize, minimumColumnWidth, onMove, width, }: Props): React.ReactPortal;
+export default function ColumnResizeHandle({ columnRect, container, liveResize, minimumColumnWidth, onMove, width, }: Props): React.ReactPortal;
 export {};

build/src/ColumnResizeHandle.js

@@ -20,2 +20,3 @@ "use strict";
   var columnRect = _ref.columnRect,
+      container = _ref.container,
       liveResize = _ref.liveResize,
@@ -29,32 +30,45 @@ minimumColumnWidth = _ref.minimumColumnWidth,
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isDragging = _useState2[0],
-      setIsDragging = _useState2[1];
+      isHovering = _useState2[0],
+      setIsHovering = _useState2[1]; // Could be a :hover style
 
-  var _useState3 = (0, _react.useState)(false),
+
+  var _useState3 = (0, _react.useState)(null),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isHovering = _useState4[0],
-      setIsHovering = _useState4[1]; // Could be a :hover style
+      mouseX = _useState4[0],
+      setMouseX = _useState4[1]; // Null when not dragging
 
 
-  var _useState5 = (0, _react.useState)(columnRect.right),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      left = _useState6[0],
-      setLeft = _useState6[1];
+  var isDragging = mouseX != null;
+  var getDelta = (0, _react.useCallback)(function (mouseX) {
+    if (mouseX == null) {
+      return 0;
+    }
 
+    var minDelta = minimumColumnWidth - columnRect.width;
+    return Math.max(mouseX - columnRect.right, minDelta);
+  }, [columnRect.right, columnRect.width, minimumColumnWidth]);
   var handleMouseMove = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
-    var left = Math.max(event.pageX, columnRect.left + minimumColumnWidth);
 
     if (liveResize) {
-      var _delta = left - columnRect.right;
+      var _delta = getDelta(event.clientX);
 
       onMove(_delta);
-    } else {
-      setLeft(left);
     }
-  }, [columnRect.left, columnRect.right, liveResize, minimumColumnWidth, onMove]);
+
+    setMouseX(event.clientX);
+  }, [getDelta, liveResize, onMove]);
   (0, _react.useEffect)(function () {
-    return setLeft(columnRect.right);
-  }, [columnRect.right]);
+    if (!isDragging) {
+      return;
+    }
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return function () {
+      return window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [handleMouseMove, isDragging]);
+  var containerRect = container.getBoundingClientRect();
+  var left = columnRect.right - containerRect.left + getDelta(mouseX);
   return _reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -64,14 +78,16 @@ onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
-      window.addEventListener('mousemove', handleMouseMove);
+      setMouseX(event.clientX);
       window.addEventListener('mouseup', function (event) {
         event.preventDefault();
         event.stopPropagation();
-        window.removeEventListener('mousemove', handleMouseMove);
-        var delta = event.pageX - columnRect.right;
-        onMove(delta);
-        setIsDragging(false);
+        setMouseX(null);
+
+        if (!liveResize) {
+          var _delta2 = getDelta(event.clientX);
+
+          onMove(_delta2);
+        }
       }, {
         once: true
       });
-      setIsDragging(true);
     },
@@ -87,8 +103,9 @@ onMouseEnter: function onMouseEnter() {
       cursor: 'col-resize',
-      height: columnRect.height,
-      left: left,
+      height: columnRect.height + 'px',
+      left: left + 'px',
       position: 'absolute',
-      top: columnRect.top,
+      top: 0,
       transform: 'translateX(-50%)',
-      width: width + 'px'
+      width: width + 'px',
+      zIndex: 10
     }
@@ -99,9 +116,9 @@ }), isDragging && /*#__PURE__*/_react["default"].createElement("div", {
       bottom: 0,
-      left: left,
+      left: left + 'px',
       position: 'absolute',
-      top: columnRect.top + columnRect.height,
+      top: columnRect.height + 'px',
       width: '1px'
     }
-  })), document.body);
+  })), container);
 }
 //# sourceMappingURL=ColumnResizeHandle.js.map

build/src/index.d.ts

 import * as React from 'react';
 import { ComponentType } from 'react';
+import useSheetData from './useSheetData';
 import type { CellKeys, KeyedPasteTarget, UnsupportedOperation } from './internalTypes';
-export interface Row {
-    key: string;
-}
-export interface RowsResult {
-    rows: Row[];
-    reachedEnd: boolean;
-}
-export interface Section {
-    isHidden: boolean;
-    key: string;
-    rowCount: number;
-    sectionRowHeight: number;
-}
-export interface ColumnAndOverviewData {
-    columns: ColumnInfo[];
-    sections: Section[];
-}
-export interface ColumnInfo {
-    isHidden: boolean;
-    isResizable: boolean;
-    key: string;
-    width: number;
-}
+import type { ColumnAndOverviewData, ColumnInfo, Row, RowId, RowsResult, Section, SheetData, SheetDataOptions } from './useSheetData';
+export { useSheetData };
+export type { SheetDataOptions, SheetData, Section, ColumnInfo, ColumnAndOverviewData, Row, RowsResult, RowId, };
 export interface CellPosition {
@@ -74,16 +55,8 @@ sectionKey: string;
     ColumnHeaderCell: ComponentType<ColumnHeaderCellProps>;
-    columnAndOverviewData: ColumnAndOverviewData;
-    refreshColumnAndOverviewData(): void;
-    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>;
     defaultRowHeight: number;
     frozenColumns?: number;
-    onItemsRendered?: (event: ItemsRenderedEvent) => void;
     renderOverscanColumnCount?: number;
     renderOverscanRowCount?: number;
-    requestTriggerDistance?: number;
-    requestLimitDistance?: number;
-    dropLimitDistance?: number;
-    dropTriggerDistance?: number;
+    sheetData: SheetData;
     onEditingStart?: (sectionKey: string, rowKey: string, columnKey: string) => void;
@@ -90,0 +63,0 @@ onEditingStop?: (sectionKey: string, rowKey: string, columnKey: string) => void;

build/src/index.js

@@ -10,14 +10,12 @@ "use strict";
 });
+Object.defineProperty(exports, "useSheetData", {
+  enumerable: true,
+  get: function get() {
+    return _useSheetData["default"];
+  }
+});
 exports["default"] = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _pullAt = _interopRequireDefault(require("lodash/pullAt"));
-
-var _sortedIndexBy = _interopRequireDefault(require("lodash/sortedIndexBy"));
-
 var _sumBy = _interopRequireDefault(require("lodash/sumBy"));
@@ -35,14 +33,6 @@
 
+var _getSectionRowIndex = _interopRequireDefault(require("./getSectionRowIndex"));
+
 var _isNotNil = _interopRequireDefault(require("./isNotNil"));
 
-var _useSectionRowMatcher = _interopRequireDefault(require("./useSectionRowMatcher"));
-
-var _addEventListenerOnce = _interopRequireDefault(require("./addEventListenerOnce"));
-
-var _findStartedRowsRequestsOutsideRange = _interopRequireDefault(require("./scanRows/findStartedRowsRequestsOutsideRange"));
-
-var _findMissingRowsInRange = _interopRequireDefault(require("./scanRows/findMissingRowsInRange"));
-
-var _getSectionRowIndex = _interopRequireDefault(require("./getSectionRowIndex"));
-
 var _getCellsInRegion = _interopRequireDefault(require("./selection/getCellsInRegion"));
@@ -60,12 +50,4 @@
 
-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; }
+var _useSheetData = _interopRequireDefault(require("./useSheetData"));
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createForOfIteratorHelper(o) { if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (o = _unsupportedIterableToArray(o))) { var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var it, normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-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; }
-
 var DEFAULT_MINIMUM_COLUMN_WIDTH = 50; // px
@@ -77,3 +59,3 @@
   var _ref = (0, React.useContext)(InternalSheetInnerElementCtx),
-      containerRect = _ref.containerRect,
+      container = _ref.container,
       resetAfterColumnIndex = _ref.resetAfterColumnIndex,
@@ -84,7 +66,8 @@ sheetProps = _ref.sheetProps;
       SectionHeaderCell = sheetProps.SectionHeaderCell,
-      columnAndOverviewData = sheetProps.columnAndOverviewData,
       defaultRowHeight = sheetProps.defaultRowHeight,
       minimumColumnWidth = sheetProps.minimumColumnWidth,
       onReorderColumn = sheetProps.onReorderColumn,
-      onResizeColumn = sheetProps.onResizeColumn;
+      onResizeColumn = sheetProps.onResizeColumn,
+      sheetData = sheetProps.sheetData;
+  var columnAndOverviewData = sheetData.columnAndOverviewData;
   var columnWidths = columnAndOverviewData.columns.map(function (column) {
@@ -109,3 +92,3 @@ return column.width;
     }
-  }, containerRect && columnAndOverviewData.columns.map(function (column, columnIndex) {
+  }, container && columnAndOverviewData.columns.map(function (column, columnIndex) {
     return /*#__PURE__*/React.createElement(_ColumnHeaderCellWrapper["default"], {
@@ -115,3 +98,3 @@ ColumnHeaderCell: ColumnHeaderCell,
       columnWidths: columnWidths,
-      containerRect: containerRect,
+      container: container,
       height: defaultRowHeight,
@@ -185,27 +168,25 @@ key: column.key,
 var StreakSheet = React.memo((0, React.forwardRef)(function StreakSheet(props, ref) {
-  var _props$renderOverscan, _props$renderOverscan2, _props$requestTrigger, _props$requestLimitDi, _props$dropLimitDista, _props$dropTriggerDis, _gridOuterRef$current;
+  var _copyOperation$region2;
 
-  var onEditingStart = props.onEditingStart,
+  var Cell = props.Cell,
+      defaultRowHeight = props.defaultRowHeight,
+      height = props.height,
+      onEditingStart = props.onEditingStart,
       onEditingStop = props.onEditingStop,
       onOpenSearch = props.onOpenSearch,
       onPaste = props.onPaste,
-      onUnsupportedOperation = props.onUnsupportedOperation; // default prop values
+      onSwapColumns = props.onSwapColumns,
+      onUnsupportedOperation = props.onUnsupportedOperation,
+      _props$renderOverscan = props.renderOverscanColumnCount,
+      renderOverscanColumnCount = _props$renderOverscan === void 0 ? 5 : _props$renderOverscan,
+      _props$renderOverscan2 = props.renderOverscanRowCount,
+      renderOverscanRowCount = _props$renderOverscan2 === void 0 ? 50 : _props$renderOverscan2,
+      sheetData = props.sheetData,
+      width = props.width;
+  var columnAndOverviewData = sheetData.columnAndOverviewData,
+      rowsBySection = sheetData.rowsBySection,
+      sectionRowMatcher = sheetData.sectionRowMatcher,
+      totalRowCount = sheetData.totalRowCount;
+  var totalColumnCount = columnAndOverviewData.columns.length;
 
-  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
-
-  var totalRowCount = (0, _sumBy["default"])(props.columnAndOverviewData.sections, function (s) {
-    return (
-      /* sticky row */
-      1 + (s.isHidden ? 0 : s.rowCount)
-    );
-  }) + 1;
-  /* column headers row */
-
-  var totalColumnCount = props.columnAndOverviewData.columns.length;
-
   var _useReducer = (0, React.useReducer)(function (state, action) {
@@ -231,50 +212,14 @@ return (0, _selectionReducer["default"])(state, action, totalRowCount, totalColumnCount);
       isDragging = _useState6[0],
-      setIsDragging = _useState6[1]; // Changes to this don't need to trigger re-renders, so we just mutate the object in-place.
+      setIsDragging = _useState6[1];
 
-
-  var _useState7 = (0, React.useState)({}),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 1),
-      startedRowsRequests = _useState8[0]; // unmount cleanup
-
-
-  (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];
-
-        var _iterator = _createForOfIteratorHelper(requests),
-            _step;
-
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var _request$abortControl;
-
-            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]);
-
-  var _useState9 = (0, React.useState)({}),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      rowsBySection = _useState10[0],
-      setRowsBySection = _useState10[1];
-
   var gridOuterRef = (0, React.useRef)(null);
   var gridRef = (0, React.useRef)(null);
-  var sectionRowMatcher = (0, _useSectionRowMatcher["default"])(props.columnAndOverviewData.sections);
   var cellIndexesToKeys = (0, React.useCallback)(function (rowIndex, columnIndex) {
     var position = sectionRowMatcher.getSectionRow(rowIndex);
 
-    if (position.rowIndex === -1) {
+    if (!position || position.rowIndex === -1) {
       return null;
     }
 
-    var section = props.columnAndOverviewData.sections[position.sectionIndex];
+    var section = columnAndOverviewData.sections[position.sectionIndex];
     var sectionRows = rowsBySection[section.key];
@@ -293,5 +238,5 @@
 
-    var columnKey = props.columnAndOverviewData.columns[columnIndex].key;
+    var columnKey = columnAndOverviewData.columns[columnIndex].key;
     return [section.key, row.key, columnKey];
-  }, [props.columnAndOverviewData, rowsBySection, sectionRowMatcher]);
+  }, [columnAndOverviewData, rowsBySection, sectionRowMatcher]);
   var copy = (0, React.useCallback)(function (didCut) {
@@ -726,7 +671,7 @@ if (selection.length === 0 || !onPaste) {
 
-        if (!props.onSwapColumns) {
+        if (!onSwapColumns) {
           throw new Error('onSwapColumns must be provided if calling moveColumnLeft');
         }
 
-        var columnIndex = props.columnAndOverviewData.columns.findIndex(function (column) {
+        var columnIndex = columnAndOverviewData.columns.findIndex(function (column) {
           return column.key === columnKey;
@@ -740,4 +685,4 @@ });
         var leftColumnIndex = columnIndex - 1;
-        var leftColumnKey = props.columnAndOverviewData.columns[leftColumnIndex].key;
-        props.onSwapColumns(columnKey, leftColumnKey);
+        var leftColumnKey = columnAndOverviewData.columns[leftColumnIndex].key;
+        onSwapColumns(columnKey, leftColumnKey);
         (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.resetAfterColumnIndex(leftColumnIndex);
@@ -748,11 +693,11 @@ },
 
-        if (!props.onSwapColumns) {
+        if (!onSwapColumns) {
           throw new Error('onSwapColumns must be provided if calling moveColumnRight');
         }
 
-        var columnIndex = props.columnAndOverviewData.columns.findIndex(function (column) {
+        var columnIndex = columnAndOverviewData.columns.findIndex(function (column) {
           return column.key === columnKey;
         });
 
-        if (columnIndex === props.columnAndOverviewData.columns.length - 1) {
+        if (columnIndex === columnAndOverviewData.columns.length - 1) {
           throw new Error('Cannot move rightmost column further right');
@@ -762,4 +707,4 @@ }
         var rightColumnIndex = columnIndex + 1;
-        var rightColumnKey = props.columnAndOverviewData.columns[rightColumnIndex].key;
-        props.onSwapColumns(columnKey, rightColumnKey);
+        var rightColumnKey = columnAndOverviewData.columns[rightColumnIndex].key;
+        onSwapColumns(columnKey, rightColumnKey);
         (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.resetAfterColumnIndex(columnIndex);
@@ -775,3 +720,3 @@ },
           align: 'start',
-          rowIndex: (0, _getSectionRowIndex["default"])(props.columnAndOverviewData.sections, sectionKey)
+          rowIndex: (0, _getSectionRowIndex["default"])(columnAndOverviewData.sections, sectionKey)
         });
@@ -785,158 +730,16 @@ }
   var itemData = {
+    copiedRegion: (_copyOperation$region2 = copyOperation === null || copyOperation === void 0 ? void 0 : copyOperation.region) !== null && _copyOperation$region2 !== void 0 ? _copyOperation$region2 : null,
     cellIndexesToKeys: cellIndexesToKeys,
-    copiedRegion: (copyOperation === null || copyOperation === void 0 ? void 0 : copyOperation.region) || null,
     sectionRowMatcher: sectionRowMatcher,
     selection: selection,
-    columnAndOverviewData: props.columnAndOverviewData,
-    rowsBySection: rowsBySection,
-    Cell: props.Cell
+    columnAndOverviewData: sheetData.columnAndOverviewData,
+    rowsBySection: sheetData.rowsBySection,
+    Cell: Cell
   };
-  var sectionKeysToIndexes = (0, React.useMemo)(function () {
-    var sectionKeysToIndexes = {};
+  var sheetDataForStreakSheet = sheetData.useByStreakSheet();
 
-    for (var i = 0; i < props.columnAndOverviewData.sections.length; i++) {
-      sectionKeysToIndexes[props.columnAndOverviewData.sections[i].key] = i;
-    }
-
-    return sectionKeysToIndexes;
-  }, [props.columnAndOverviewData.sections]);
-
   var onItemsRendered = function onItemsRendered(_ref9) {
     var visibleRowStartIndex = _ref9.visibleRowStartIndex,
         visibleRowStopIndex = _ref9.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.rowIndex < 0 || sectionRow.sectionIndex < 0) {
-        return {
-          rowIndex: Math.max(0, sectionRow.rowIndex),
-          sectionIndex: Math.max(0, sectionRow.sectionIndex)
-        };
-      }
-
-      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)))
-      };
-    };
-
-    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];
-          }
-        }
-      });
-    } // Done handling unloads.
-    // Now handle starting any necessary loads.
-    // Check if there are any gaps inside the requestTriggerZone
-
-
-    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;
-        });
-      });
-    }
+    sheetDataForStreakSheet.onScroll(visibleRowStartIndex, visibleRowStopIndex);
   };
@@ -948,3 +751,3 @@
       // TODO pass effective prop items (with default values applied)
-      containerRect: (_gridOuterRef$current = gridOuterRef.current) === null || _gridOuterRef$current === void 0 ? void 0 : _gridOuterRef$current.getBoundingClientRect(),
+      container: gridOuterRef.current,
       resetAfterColumnIndex: function resetAfterColumnIndex(index, shouldForceUpdate) {
@@ -955,3 +758,3 @@ var _gridRef$current4;
       },
-      rowsBySection: rowsBySection,
+      rowsBySection: sheetData.rowsBySection,
       sheetProps: props
@@ -962,5 +765,8 @@ }
     ref: gridRef,
-    columnCount: totalColumnCount,
+    columnCount: columnAndOverviewData.columns.length,
+    estimatedColumnWidth: (0, _sumBy["default"])(columnAndOverviewData.columns, function (c) {
+      return c.width;
+    }) / columnAndOverviewData.columns.length,
     columnWidth: function columnWidth(index) {
-      var columns = props.columnAndOverviewData.columns;
+      var columns = columnAndOverviewData.columns;
       var column = columns[index];
@@ -974,20 +780,22 @@
     },
-    estimatedColumnWidth: (0, _sumBy["default"])(props.columnAndOverviewData.columns, function (c) {
-      return c.width;
-    }) / totalColumnCount,
     rowCount: totalRowCount,
     rowHeight: function rowHeight(index) {
-      var _sectionRowMatcher$ge = sectionRowMatcher.getSectionRow(index),
-          sectionIndex = _sectionRowMatcher$ge.sectionIndex,
-          rowIndex = _sectionRowMatcher$ge.rowIndex;
+      var position = sectionRowMatcher.getSectionRow(index);
 
+      if (!position) {
+        return defaultRowHeight;
+      }
+
+      var sectionIndex = position.sectionIndex,
+          rowIndex = position.rowIndex;
+
       if (sectionIndex !== -1 && rowIndex === -1) {
-        return props.columnAndOverviewData.sections[sectionIndex].sectionRowHeight;
+        return columnAndOverviewData.sections[sectionIndex].sectionRowHeight;
       } else {
-        return props.defaultRowHeight;
+        return defaultRowHeight;
       }
     },
-    estimatedRowHeight: props.defaultRowHeight,
-    width: props.width,
-    height: props.height,
+    estimatedRowHeight: defaultRowHeight,
+    width: width,
+    height: height,
     innerElementType: InnerElement,
@@ -994,0 +802,0 @@ itemData: itemData,

build/src/scanRows/findMissingRowsInRange.d.ts

 import type { SectionRowRange, StartedRowsRequests } from '../internalTypes';
-import type { Section } from '..';
+import type { Section } from '../useSheetData';
 export interface MissingRows {
@@ -4,0 +4,0 @@ sectionIndex: number;

package.json

 {
   "name": "streaksheet",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "author": "Chris Cowan <[e-mail]>",
@@ -42,2 +42,3 @@ "license": "MIT",
     "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "husky": "^4.2.3",
@@ -50,5 +51,2 @@ "jest": "^26.0.1",
     "pretty-quick": "^2.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-virtualized-auto-sizer": "^1.0.2",
     "rimraf": "^3.0.2",
@@ -59,4 +57,6 @@ "typescript": "^3.8.3"
     "@babel/runtime": "^7.8.4",
-    "eslint-plugin-react-hooks": "^4.0.4",
     "lodash": "^4.17.15",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5"
@@ -63,0 +63,0 @@ },

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

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

Improved metrics

Total package byte prevSize

270684

increased by5.74%

Dev dependency count

28

decreased by-6.67%

Number of package files

122

increased by5.17%

Lines of code

2556

increased by6.81%

Worsened metrics

Dependency count

7

increased by40%

Dependency changes

• + Addedreact@^16.13.1

• + Addedreact-dom@^16.13.1

• + Addedreact-virtualized-auto-sizer@^1.0.2

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-virtualized-auto-sizer@1.0.24(transitive)

• + Addedscheduler@0.19.1(transitive)

• - Removedeslint-plugin-react-hooks@^4.0.4

• - Removed@eslint-community/eslint-utils@4.4.1(transitive)

• - Removed@eslint-community/regexpp@4.12.1(transitive)

• - Removed@eslint/eslintrc@2.1.4(transitive)

• - Removed@eslint/js@8.57.1(transitive)

• - Removed@humanwhocodes/config-array@0.13.0(transitive)

• - Removed@humanwhocodes/module-importer@1.0.1(transitive)

• - Removed@humanwhocodes/object-schema@2.0.3(transitive)

• - Removed@nodelib/fs.scandir@2.1.5(transitive)

• - Removed@nodelib/fs.stat@2.0.5(transitive)

• - Removed@nodelib/fs.walk@1.2.8(transitive)

• - Removed@ungap/structured-clone@1.2.0(transitive)

• - Removedacorn@8.14.0(transitive)

• - Removedacorn-jsx@5.3.2(transitive)

• - Removedajv@6.12.6(transitive)

• - Removedansi-regex@5.0.1(transitive)

• - Removedansi-styles@4.3.0(transitive)

• - Removedargparse@2.0.1(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedchalk@4.1.2(transitive)

• - Removedcolor-convert@2.0.1(transitive)

• - Removedcolor-name@1.1.4(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedcross-spawn@7.0.6(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removeddeep-is@0.1.4(transitive)

• - Removeddoctrine@3.0.0(transitive)

• - Removedescape-string-regexp@4.0.0(transitive)

• - Removedeslint@8.57.1(transitive)

• - Removedeslint-plugin-react-hooks@4.6.2(transitive)

• - Removedeslint-scope@7.2.2(transitive)

• - Removedeslint-visitor-keys@3.4.3(transitive)

• - Removedespree@9.6.1(transitive)

• - Removedesquery@1.6.0(transitive)

• - Removedesrecurse@4.3.0(transitive)

• - Removedestraverse@5.3.0(transitive)

• - Removedesutils@2.0.3(transitive)

• - Removedfast-deep-equal@3.1.3(transitive)

• - Removedfast-json-stable-stringify@2.1.0(transitive)

• - Removedfast-levenshtein@2.0.6(transitive)

• - Removedfastq@1.17.1(transitive)

• - Removedfile-entry-cache@6.0.1(transitive)

• - Removedfind-up@5.0.0(transitive)

• - Removedflat-cache@3.2.0(transitive)

• - Removedflatted@3.3.2(transitive)

• - Removedfs.realpath@1.0.0(transitive)

• - Removedglob@7.2.3(transitive)

• - Removedglob-parent@6.0.2(transitive)

• - Removedglobals@13.24.0(transitive)

• - Removedgraphemer@1.4.0(transitive)

• - Removedhas-flag@4.0.0(transitive)

• - Removedignore@5.3.2(transitive)

• - Removedimport-fresh@3.3.0(transitive)

• - Removedimurmurhash@0.1.4(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedis-extglob@2.1.1(transitive)

• - Removedis-glob@4.0.3(transitive)

• - Removedis-path-inside@3.0.3(transitive)

• - Removedisexe@2.0.0(transitive)

• - Removedjs-yaml@4.1.0(transitive)

• - Removedjson-buffer@3.0.1(transitive)

• - Removedjson-schema-traverse@0.4.1(transitive)

• - Removedjson-stable-stringify-without-jsonify@1.0.1(transitive)

• - Removedkeyv@4.5.4(transitive)

• - Removedlevn@0.4.1(transitive)

• - Removedlocate-path@6.0.0(transitive)

• - Removedlodash.merge@4.6.2(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedms@2.1.3(transitive)

• - Removednatural-compare@1.4.0(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedoptionator@0.9.4(transitive)

• - Removedp-limit@3.1.0(transitive)

• - Removedp-locate@5.0.0(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedpath-exists@4.0.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedpath-key@3.1.1(transitive)

• - Removedprelude-ls@1.2.1(transitive)

• - Removedpunycode@2.3.1(transitive)

• - Removedqueue-microtask@1.2.3(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedreusify@1.0.4(transitive)

• - Removedrimraf@3.0.2(transitive)

• - Removedrun-parallel@1.2.0(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removedshebang-command@2.0.0(transitive)

• - Removedshebang-regex@3.0.0(transitive)

• - Removedstrip-ansi@6.0.1(transitive)

• - Removedstrip-json-comments@3.1.1(transitive)

• - Removedsupports-color@7.2.0(transitive)

• - Removedtext-table@0.2.0(transitive)

• - Removedtype-check@0.4.0(transitive)

• - Removedtype-fest@0.20.2(transitive)

• - Removeduri-js@4.4.1(transitive)

• - Removedwhich@2.0.2(transitive)

• - Removedword-wrap@1.2.5(transitive)

• - Removedwrappy@1.0.2(transitive)

• - Removedyocto-queue@0.1.0(transitive)