streaksheet - npm Package Compare versions

Comparing version 0.5.3 to 0.6.0

build/src/CellContainer.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,10 +17,2 @@
 
-var _didCellChange = _interopRequireDefault(require("./didCellChange"));
-
-var _getCellBordersInRegion = _interopRequireDefault(require("./selection/getCellBordersInRegion"));
-
-var _isCellSelectionStart = _interopRequireDefault(require("./selection/isCellSelectionStart"));
-
-var _isRowHighlighted = _interopRequireDefault(require("./selection/isRowHighlighted"));
-
 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; }
@@ -41,5 +31,3 @@
       cellIndexesToKeys = data.cellIndexesToKeys,
-      copiedRegion = data.copiedRegion,
-      sectionRowMatcher = data.sectionRowMatcher,
-      selection = data.selection;
+      sectionRowMatcher = data.sectionRowMatcher;
   var position = sectionRowMatcher.getSectionRow(rowIndex);
@@ -65,66 +53,2 @@
     content = null;
-  }
-
-  var bordersInCopiedRegion = copiedRegion ? _getCellBordersInRegion["default"].apply(void 0, [rowIndex, columnIndex].concat((0, _toConsumableArray2["default"])(copiedRegion))) : null;
-  var bordersInSelection = selection.map(function (_ref2) {
-    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-        start = _ref3[0],
-        end = _ref3[1];
-
-    return (0, _getCellBordersInRegion["default"])(rowIndex, columnIndex, start, end);
-  }).reduce(function (borders, bordersInRegion) {
-    return bordersInRegion ? (borders || []).concat(bordersInRegion) : borders;
-  }, null);
-  var isInCopiedRegion = bordersInCopiedRegion != null;
-  var isInHighlightedRow = (0, _isRowHighlighted["default"])(rowIndex, selection);
-  var isInSelection = bordersInSelection != null;
-  var isSelectionStart = (0, _isCellSelectionStart["default"])(rowIndex, columnIndex, selection);
-  var backgroundColor;
-  var borderBottom = DEFAULT_BORDER_STYLE;
-  var borderLeft = DEFAULT_BORDER_STYLE;
-  var borderRight = DEFAULT_BORDER_STYLE;
-  var borderTop = DEFAULT_BORDER_STYLE;
-
-  if (isSelectionStart) {
-    backgroundColor = 'rgb(100, 100, 100)';
-    borderBottom = borderLeft = borderRight = borderTop = 'rgb(0, 0, 0)';
-  } else if (isInCopiedRegion) {
-    var borderStyle = '1px dashed rgb(0, 0, 0)';
-
-    if (bordersInCopiedRegion === null || bordersInCopiedRegion === void 0 ? void 0 : bordersInCopiedRegion.includes('BOTTOM')) {
-      borderBottom = borderStyle;
-    }
-
-    if (bordersInCopiedRegion === null || bordersInCopiedRegion === void 0 ? void 0 : bordersInCopiedRegion.includes('LEFT')) {
-      borderLeft = borderStyle;
-    }
-
-    if (bordersInCopiedRegion === null || bordersInCopiedRegion === void 0 ? void 0 : bordersInCopiedRegion.includes('RIGHT')) {
-      borderRight = borderStyle;
-    }
-
-    if (bordersInCopiedRegion === null || bordersInCopiedRegion === void 0 ? void 0 : bordersInCopiedRegion.includes('TOP')) {
-      borderTop = borderStyle;
-    }
-  } else if (isInSelection) {
-    backgroundColor = 'rgb(240, 240, 240)';
-    var _borderStyle = '1px solid rgb(0, 0, 0)';
-
-    if (bordersInSelection === null || bordersInSelection === void 0 ? void 0 : bordersInSelection.includes('BOTTOM')) {
-      borderBottom = _borderStyle;
-    }
-
-    if (bordersInSelection === null || bordersInSelection === void 0 ? void 0 : bordersInSelection.includes('LEFT')) {
-      borderLeft = _borderStyle;
-    }
-
-    if (bordersInSelection === null || bordersInSelection === void 0 ? void 0 : bordersInSelection.includes('RIGHT')) {
-      borderRight = _borderStyle;
-    }
-
-    if (bordersInSelection === null || bordersInSelection === void 0 ? void 0 : bordersInSelection.includes('TOP')) {
-      borderTop = _borderStyle;
-    }
-  } else if (isInHighlightedRow) {
-    backgroundColor = 'rgb(200, 200, 200)';
   } // We attach cell information using data attributes so that it can be read
@@ -139,7 +63,6 @@ // from the event target in event delegates (e.g. the click handler in the
     style: data.styles.cell(_objectSpread({
-      backgroundColor: backgroundColor,
-      borderBottom: borderBottom,
-      borderLeft: borderLeft,
-      borderRight: borderRight,
-      borderTop: borderTop,
+      borderBottom: DEFAULT_BORDER_STYLE,
+      borderLeft: DEFAULT_BORDER_STYLE,
+      borderRight: DEFAULT_BORDER_STYLE,
+      borderTop: DEFAULT_BORDER_STYLE,
       boxSizing: 'border-box',
@@ -151,9 +74,3 @@ // elements that can be overlapped by sticky stuff can not be contain:layout
     }, style), {
-      bordersInCopiedRegion: bordersInCopiedRegion,
-      bordersInSelection: bordersInSelection,
       columnIndex: columnIndex,
-      isInCopiedRegion: isInCopiedRegion,
-      isInHighlightedRow: isInHighlightedRow,
-      isInSelection: isInSelection,
-      isSelectionStart: isSelectionStart,
       rowIndex: rowIndex
@@ -163,3 +80,5 @@ })
 }, function (prevProps, nextProps) {
-  return !(0, _didCellChange["default"])(prevProps, nextProps);
+  // Only the data prop may change.
+  // TODO only update if the specific cell content updated
+  return prevProps.data === nextProps.data;
 });
@@ -166,0 +85,0 @@

build/src/index.d.ts

@@ -1,3 +0,2 @@
-import React, { CSSProperties } from 'react';
-import { ComponentType } from 'react';
+import React, { ComponentType, CSSProperties } from 'react';
 import useSheetData from './useSheetData';
@@ -51,9 +50,3 @@ import type { CellKeys, KeyedPasteTarget, UnsupportedOperation } from './internalTypes';
     cell: (base: CSSProperties, state: {
-        bordersInCopiedRegion: Border[] | null;
-        bordersInSelection: Border[] | null;
         columnIndex: number;
-        isInCopiedRegion: boolean;
-        isInHighlightedRow: boolean;
-        isInSelection: boolean;
-        isSelectionStart: boolean;
         rowIndex: number;
@@ -73,3 +66,6 @@ }) => CSSProperties;
     columnResizeIndicator: (base: CSSProperties) => CSSProperties;
+    copiedRegionOverlay: (base: CSSProperties) => CSSProperties;
     grid: (base: CSSProperties) => CSSProperties;
+    highlightedRowOverlay: (base: CSSProperties) => CSSProperties;
+    primarySelectedCellOverlay: (base: CSSProperties) => CSSProperties;
     sectionHeaderCellContainer: (base: CSSProperties, state: {
@@ -79,2 +75,3 @@ columnIndex: number;
     sectionHeadersContainer: (base: CSSProperties) => CSSProperties;
+    selectionOverlay: (base: CSSProperties) => CSSProperties;
 }
@@ -81,0 +78,0 @@ export interface Props {

build/src/index.js

@@ -34,2 +34,4 @@ "use strict";
 
+var _SelectionOverlays = _interopRequireDefault(require("./SelectionOverlays"));
+
 var _getSectionRowIndex = _interopRequireDefault(require("./getSectionRowIndex"));
@@ -171,3 +173,3 @@
 var StreakSheet = _react["default"].memo((0, _react.forwardRef)(function StreakSheet(props, ref) {
-  var _props$styles, _props$styles2, _props$styles3, _props$styles4, _props$styles5, _props$styles6, _props$styles7, _props$styles8, _props$styles9, _props$styles10, _copyOperation$region2;
+  var _props$styles, _props$styles2, _props$styles3, _props$styles4, _props$styles5, _props$styles6, _props$styles7, _props$styles8, _props$styles9, _props$styles10, _props$styles11, _props$styles12, _props$styles13, _props$styles14;
 
@@ -197,5 +199,9 @@ var Cell = props.Cell,
     columnResizeIndicator: ((_props$styles7 = props.styles) === null || _props$styles7 === void 0 ? void 0 : _props$styles7.columnResizeIndicator) || _identity["default"],
-    grid: ((_props$styles8 = props.styles) === null || _props$styles8 === void 0 ? void 0 : _props$styles8.grid) || _identity["default"],
-    sectionHeaderCellContainer: ((_props$styles9 = props.styles) === null || _props$styles9 === void 0 ? void 0 : _props$styles9.sectionHeaderCellContainer) || _identity["default"],
-    sectionHeadersContainer: ((_props$styles10 = props.styles) === null || _props$styles10 === void 0 ? void 0 : _props$styles10.sectionHeadersContainer) || _identity["default"]
+    copiedRegionOverlay: ((_props$styles8 = props.styles) === null || _props$styles8 === void 0 ? void 0 : _props$styles8.copiedRegionOverlay) || _identity["default"],
+    grid: ((_props$styles9 = props.styles) === null || _props$styles9 === void 0 ? void 0 : _props$styles9.grid) || _identity["default"],
+    highlightedRowOverlay: ((_props$styles10 = props.styles) === null || _props$styles10 === void 0 ? void 0 : _props$styles10.highlightedRowOverlay) || _identity["default"],
+    primarySelectedCellOverlay: ((_props$styles11 = props.styles) === null || _props$styles11 === void 0 ? void 0 : _props$styles11.primarySelectedCellOverlay) || _identity["default"],
+    sectionHeaderCellContainer: ((_props$styles12 = props.styles) === null || _props$styles12 === void 0 ? void 0 : _props$styles12.sectionHeaderCellContainer) || _identity["default"],
+    sectionHeadersContainer: ((_props$styles13 = props.styles) === null || _props$styles13 === void 0 ? void 0 : _props$styles13.sectionHeadersContainer) || _identity["default"],
+    selectionOverlay: ((_props$styles14 = props.styles) === null || _props$styles14 === void 0 ? void 0 : _props$styles14.selectionOverlay) || _identity["default"]
   };
@@ -232,2 +238,3 @@ var columnAndOverviewData = sheetData.columnAndOverviewData,
   var gridRef = (0, _react.useRef)(null);
+  var selectionOverlaysContainerRef = (0, _react.useRef)(document.createElement('div'));
   var cellIndexesToKeys = (0, _react.useCallback)(function (rowIndex, columnIndex) {
@@ -650,2 +657,7 @@ var position = sectionRowMatcher.getSectionRow(rowIndex);
   }, [handleGridDoubleClick, handleGridKeyDown, handleGridMouseDown, handleGridMouseMove, handleGridMouseUp]);
+  (0, _react.useEffect)(function () {
+    var _gridOuterRef$current;
+
+    (_gridOuterRef$current = gridOuterRef.current) === null || _gridOuterRef$current === void 0 ? void 0 : _gridOuterRef$current.append(selectionOverlaysContainerRef.current);
+  }, []);
   (0, _react.useImperativeHandle)(ref, function () {
@@ -744,6 +756,4 @@ return {
     columnAndOverviewData: sheetData.columnAndOverviewData,
-    copiedRegion: (_copyOperation$region2 = copyOperation === null || copyOperation === void 0 ? void 0 : copyOperation.region) !== null && _copyOperation$region2 !== void 0 ? _copyOperation$region2 : null,
     rowsBySection: sheetData.rowsBySection,
     sectionRowMatcher: sectionRowMatcher,
-    selection: selection,
     styles: styles
@@ -832,3 +842,11 @@ };
     style: styles.grid({})
-  }, _CellContainer["default"]));
+  }, _CellContainer["default"]), /*#__PURE__*/_react["default"].createElement(_SelectionOverlays["default"], {
+    columnAndOverviewData: columnAndOverviewData,
+    container: selectionOverlaysContainerRef.current,
+    copiedRegion: copyOperation === null || copyOperation === void 0 ? void 0 : copyOperation.region,
+    defaultRowHeight: defaultRowHeight,
+    sectionRowMatcher: sectionRowMatcher,
+    selection: selection,
+    styles: styles
+  }));
 }));
@@ -835,0 +853,0 @@

build/src/internalTypes.d.ts

@@ -18,6 +18,4 @@ import type { ComponentType } from 'react';
     columnAndOverviewData: ColumnAndOverviewData;
-    copiedRegion: [CellIndexes, CellIndexes] | null;
     rowsBySection: RowsBySection;
     sectionRowMatcher: SectionRowMatcher;
-    selection: SelectionState;
     styles: Styles;
@@ -24,0 +22,0 @@ }

package.json

 {
   "name": "streaksheet",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "author": "Chris Cowan <[e-mail]>",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -79,4 +79,8 @@ # StreakSheet
 - `columnResizeIndicator`
+- `copiedRegionOverlay`
 - `grid`
+- `highlightedRowOverlay`
+- `primarySelectedCellOverlay`
 - `sectionHeaderCellContainer`
 - `sectionHeadersContainer`
+- `selectionOverlay`

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

Number of lines in readme file

86

increased by4.88%

Worsened metrics

Total package byte prevSize

276898

decreased by-3.39%

Number of package files

97

decreased by-19.83%

Lines of code

2551

decreased by-4.24%

No dependency changes