sheet-happens 0.0.6 → 0.0.10

package/dist/index.d.ts

@@ -1,8 +1,16 @@
-import { MouseEvent } from 'react';
+import React, { MouseEvent, CSSProperties, ReactElement } from 'react';
 declare type PropTypes = string | number | boolean | Style | CellContentType;
 declare type RowOrColumnProperty<T extends PropTypes> = T | Array<T> | ((index: number) => T);
 declare type CellProperty<T extends PropTypes> = T | Array<Array<T>> | ((x: number, y: number) => T);
 declare type CellContentType = null | number | string | CellContent;
+declare type InputStyle = Pick<CSSProperties, 'position' | 'top' | 'left' | 'width' | 'height' | 'outline' | 'border' | 'textAlign' | 'color' | 'fontSize' | 'fontFamily'>;
+export interface SheetInputProps {
+    value: string;
+    autoFocus: boolean;
+    onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    onChange: (valiue: string) => void;
+    style: InputStyle;
+}
 export interface Change {
     x: number;
     y: number;
@@ -15,7 +23,7 @@ export interface CellContentItem {
     width?: number;
     height?: number;
     horiozntalAlign?: 'left' | 'right' | 'center';
-    onClick?: () => void;
+    onClick?: (e: MouseEvent) => void;
 }
 export interface CellContent {
     items: Array<CellContentItem>;
@@ -36,6 +44,7 @@ export interface SheetProps {
     sourceData?: CellProperty<string | number | null>;
     displayData?: CellProperty<CellContentType>;
     editData?: CellProperty<string>;
+    inputComponent?: (x: number, y: number, props: SheetInputProps, commitEditingCell?: () => void) => ReactElement | undefined;
     onSelectionChanged?: (x1: number, y1: number, x2: number, y2: number) => void;
     onRightClick?: (e: SheetMouseEvent) => void;
     onChange?: (changes: Array<Change>) => void;

package/dist/index.js

@@ -592,6 +592,8 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
 }
 
 function Sheet(props) {
+  var _props$inputComponent;
+
   var canvasRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var copyPasteTextAreaRef = React.useRef(null);
@@ -834,74 +836,138 @@ function Sheet(props) {
 
     resizeCanvas(canvas);
     var yCoord = columnHeaderHeight;
+    var xCoord = rowHeaderWidth;
+
+    for (var _iterator10 = _createForOfIteratorHelperLoose(columnSizes.index), _step10; !(_step10 = _iterator10()).done;) {
+      var x = _step10.value;
+      var ch = columnHeaders(x);
+      var cellW = cellWidth(x);
+
+      if (ch && typeof ch === 'object' && ch.items) {
+        var finalStyle = void 0;
+
+        for (var _iterator12 = _createForOfIteratorHelperLoose(ch.items), _step12; !(_step12 = _iterator12()).done;) {
+          var obj = _step12.value;
+
+          if (obj.onClick) {
+            if (!finalStyle) {
+              finalStyle = createStyleObject(columnHeaderStyle(x), defaultCellStyle);
+            }
+
+            var w = obj.content instanceof HTMLImageElement ? obj.width || cellW : 0;
+            var absX1 = applyAlignment(xCoord, cellW, finalStyle, w, obj.horiozntalAlign) + obj.x;
+            var absY1 = columnHeaderHeight * 0.5 + obj.y;
+            var absX2 = absX1 + (obj.width || 0);
+            var absY2 = absY1 + (obj.height || 0);
+            var hitTarget = {
+              x: absX1,
+              y: absY1,
+              w: obj.width,
+              h: obj.height,
+              onClick: obj.onClick
+            };
+            var x1key = Math.floor(absX1 / xBinSize);
+            var x2key = Math.floor(absX2 / xBinSize);
+            var y1key = Math.floor(absY1 / yBinSize);
+            var y2key = Math.floor(absY2 / yBinSize);
+
+            for (var xkey = x1key; xkey <= x2key; xkey++) {
+              if (!hitM[xkey]) {
+                hitM[xkey] = {};
+              }
+
+              var xbin = hitM[xkey];
+
+              for (var ykey = y1key; ykey <= y2key; ykey++) {
+                if (!xbin[ykey]) {
+                  xbin[ykey] = [];
+                }
 
-    for (var _iterator10 = _createForOfIteratorHelperLoose(rowSizes.index), _step10; !(_step10 = _iterator10()).done;) {
-      var y = _step10.value;
-      var xCoord = rowHeaderWidth;
+                xbin[ykey].push(hitTarget);
+              }
+            }
+          }
+        }
+      }
+
+      xCoord += cellW;
+    }
+
+    for (var _iterator11 = _createForOfIteratorHelperLoose(rowSizes.index), _step11; !(_step11 = _iterator11()).done;) {
+      var y = _step11.value;
+      xCoord = rowHeaderWidth;
+
+      for (var _iterator13 = _createForOfIteratorHelperLoose(columnSizes.index), _step13; !(_step13 = _iterator13()).done;) {
+        var _x2 = _step13.value;
+        var cellContent = displayData(_x2, y);
 
-      for (var _iterator11 = _createForOfIteratorHelperLoose(columnSizes.index), _step11; !(_step11 = _iterator11()).done;) {
-        var x = _step11.value;
-        var cellContent = displayData(x, y);
-        var cellW = cellWidth(x);
+        var _cellW = cellWidth(_x2);
 
         if (cellContent === null || cellContent === undefined) {
-          xCoord += cellW;
+          xCoord += _cellW;
           continue;
         }
 
         var xx = xCoord;
         var yy = yCoord + cellHeight(y) * 0.5;
 
-        if (typeof cellContent === 'object') {
-          var finalStyle = void 0;
+        if (typeof cellContent === 'object' && cellContent.items) {
+          var _finalStyle = void 0;
 
-          for (var _iterator12 = _createForOfIteratorHelperLoose(cellContent.items), _step12; !(_step12 = _iterator12()).done;) {
-            var obj = _step12.value;
+          for (var _iterator14 = _createForOfIteratorHelperLoose(cellContent.items), _step14; !(_step14 = _iterator14()).done;) {
+            var _obj = _step14.value;
 
-            if (obj.onClick) {
-              if (!finalStyle) {
-                finalStyle = createStyleObject(cellStyle(x, y), defaultCellStyle);
+            if (_obj.onClick) {
+              if (!_finalStyle) {
+                _finalStyle = createStyleObject(cellStyle(_x2, y), defaultCellStyle);
               }
 
-              var w = obj.content instanceof HTMLImageElement ? obj.width || cellW : 0;
-              var absX1 = applyAlignment(xx, cellW, finalStyle, w, obj.horiozntalAlign) + obj.x;
-              var absY1 = yy + obj.y;
-              var absX2 = absX1 + (obj.width || 0);
-              var absY2 = absY1 + (obj.height || 0);
-              var hitTarget = {
-                cellX: x,
-                cellY: y,
-                x: absX1,
-                y: absY1,
-                w: obj.width,
-                h: obj.height,
-                onClick: obj.onClick
+              var _w = _obj.content instanceof HTMLImageElement ? _obj.width || _cellW : 0;
+
+              var _absX = applyAlignment(xx, _cellW, _finalStyle, _w, _obj.horiozntalAlign) + _obj.x;
+
+              var _absY = yy + _obj.y;
+
+              var _absX2 = _absX + (_obj.width || 0);
+
+              var _absY2 = _absY + (_obj.height || 0);
+
+              var _hitTarget = {
+                x: _absX,
+                y: _absY,
+                w: _obj.width,
+                h: _obj.height,
+                onClick: _obj.onClick
               };
-              var x1key = Math.floor(absX1 / xBinSize);
-              var x2key = Math.floor(absX2 / xBinSize);
-              var y1key = Math.floor(absY1 / yBinSize);
-              var y2key = Math.floor(absY2 / yBinSize);
-
-              for (var xkey = x1key; xkey <= x2key; xkey++) {
-                if (!hitM[xkey]) {
-                  hitM[xkey] = {};
+
+              var _x1key = Math.floor(_absX / xBinSize);
+
+              var _x2key = Math.floor(_absX2 / xBinSize);
+
+              var _y1key = Math.floor(_absY / yBinSize);
+
+              var _y2key = Math.floor(_absY2 / yBinSize);
+
+              for (var _xkey = _x1key; _xkey <= _x2key; _xkey++) {
+                if (!hitM[_xkey]) {
+                  hitM[_xkey] = {};
                 }
 
-                var xbin = hitM[xkey];
+                var _xbin = hitM[_xkey];
 
-                for (var ykey = y1key; ykey <= y2key; ykey++) {
-                  if (!xbin[ykey]) {
-                    xbin[ykey] = [];
+                for (var _ykey = _y1key; _ykey <= _y2key; _ykey++) {
+                  if (!_xbin[_ykey]) {
+                    _xbin[_ykey] = [];
                   }
 
-                  xbin[ykey].push(hitTarget);
+                  _xbin[_ykey].push(_hitTarget);
                 }
               }
             }
           }
         }
 
-        xCoord += cellW;
+        xCoord += _cellW;
       }
 
       yCoord += cellHeight(y);
@@ -985,8 +1051,8 @@ function Sheet(props) {
   });
 
   var findTable = function findTable(element) {
-    for (var _iterator13 = _createForOfIteratorHelperLoose(element.children), _step13; !(_step13 = _iterator13()).done;) {
-      var child = _step13.value;
+    for (var _iterator15 = _createForOfIteratorHelperLoose(element.children), _step15; !(_step15 = _iterator15()).done;) {
+      var child = _step15.value;
 
       if (child.nodeName === 'TABLE') {
         return child;
@@ -1035,23 +1101,39 @@ function Sheet(props) {
       return;
     }
 
-    for (var _iterator14 = _createForOfIteratorHelperLoose(tableNode.children), _step14; !(_step14 = _iterator14()).done;) {
-      var tableChild = _step14.value;
+    for (var _iterator16 = _createForOfIteratorHelperLoose(tableNode.children), _step16; !(_step16 = _iterator16()).done;) {
+      var tableChild = _step16.value;
 
       if (tableChild.nodeName === 'TBODY') {
-        for (var _iterator15 = _createForOfIteratorHelperLoose(tableChild.children), _step15; !(_step15 = _iterator15()).done;) {
-          var tr = _step15.value;
+        for (var _iterator17 = _createForOfIteratorHelperLoose(tableChild.children), _step17; !(_step17 = _iterator17()).done;) {
+          var tr = _step17.value;
           x = pasteLocX;
 
           if (tr.nodeName === 'TR') {
-            for (var _iterator16 = _createForOfIteratorHelperLoose(tr.children), _step16; !(_step16 = _iterator16()).done;) {
-              var td = _step16.value;
+            for (var _iterator18 = _createForOfIteratorHelperLoose(tr.children), _step18; !(_step18 = _iterator18()).done;) {
+              var td = _step18.value;
 
               if (td.nodeName === 'TD') {
+                var str = '';
+
+                if (td.children.length !== 0 && td.children[0].nodeName === 'P') {
+                  var p = td.children[0];
+
+                  if (p.children.length !== 0 && p.children[0].nodeName === 'FONT') {
+                    str = p.children[0].innerHTML;
+                  } else {
+                    str = p.innerHTML;
+                  }
+                } else {
+                  str = td.innerHTML;
+                }
+
+                str = str.replaceAll('\n', '');
+                str = str.replaceAll(/\s\s+/g, ' ');
                 changes.push({
                   y: y,
                   x: x,
-                  value: td.innerHTML
+                  value: str
                 });
                 x++;
               }
@@ -1170,12 +1252,12 @@ function Sheet(props) {
     }
   };
 
-  var commitEditingCell = function commitEditingCell() {
+  var commitEditingCell = function commitEditingCell(value) {
     if (props.onChange) {
       props.onChange([{
         x: editCell.x,
         y: editCell.y,
-        value: editValue
+        value: value != null ? value : editValue
       }]);
     }
 
@@ -1246,6 +1328,7 @@ function Sheet(props) {
       return;
     }
 
+    setSelectionInProgress(false);
     var rect = e.target.getBoundingClientRect();
     var x = e.clientX - rect.left;
     var y = e.clientY - rect.top;
@@ -1258,8 +1341,8 @@ function Sheet(props) {
     var hitTargetKeyY = Math.floor(y / yBinSize);
 
     if (hitMap[hitTargetKeyX] && hitMap[hitTargetKeyX][hitTargetKeyY]) {
-      for (var _iterator17 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step17; !(_step17 = _iterator17()).done;) {
-        var hitTarget = _step17.value;
+      for (var _iterator19 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step19; !(_step19 = _iterator19()).done;) {
+        var hitTarget = _step19.value;
 
         if (hitTarget.x <= x && x <= hitTarget.x + hitTarget.w && hitTarget.y <= y && y <= hitTarget.y + hitTarget.h) {
           setButtonClickMouseDownCoordinates({
@@ -1273,42 +1356,38 @@ function Sheet(props) {
     }
 
     if (y < columnHeaderHeight) {
-      var xx = rowHeaderWidth;
-
-      for (var _iterator18 = _createForOfIteratorHelperLoose(columnSizes.index), _step18; !(_step18 = _iterator18()).done;) {
-        var col = _step18.value;
+      for (var colIdx = 0; colIdx < columnSizes.index.length; colIdx++) {
+        var start = columnSizes.start[colIdx];
+        var end = columnSizes.end[colIdx];
+        var index = columnSizes.index[colIdx];
 
-        if (Math.abs(xx - x) < resizeColumnRowMouseThreshold) {
+        if (Math.abs(start - x) < resizeColumnRowMouseThreshold || Math.abs(end - x) < resizeColumnRowMouseThreshold) {
           window.document.body.style.cursor = 'col-resize';
           setColumnResize({
-            startX: xx,
-            oldWidth: cellWidth(col - 1),
-            colIdx: col - 1
+            startX: end,
+            oldWidth: cellWidth(index),
+            colIdx: index
           });
           return;
         }
-
-        xx += cellWidth(col);
       }
     }
 
     if (x < rowHeaderWidth) {
-      var yy = columnHeaderHeight;
-
-      for (var _iterator19 = _createForOfIteratorHelperLoose(rowSizes.index), _step19; !(_step19 = _iterator19()).done;) {
-        var row = _step19.value;
+      for (var rowIdx = 0; rowIdx < rowSizes.index.length; rowIdx++) {
+        var _start = rowSizes.start[rowIdx];
+        var _end = rowSizes.end[rowIdx];
+        var _index = rowSizes.index[rowIdx];
 
-        if (Math.abs(yy - y) < resizeColumnRowMouseThreshold) {
+        if (Math.abs(_start - y) < resizeColumnRowMouseThreshold || Math.abs(_end - y) < resizeColumnRowMouseThreshold) {
           window.document.body.style.cursor = 'row-resize';
           setRowResize({
-            startY: yy,
-            oldHeight: cellHeight(row - 1),
-            rowIdx: row - 1
+            startY: _end,
+            oldHeight: cellHeight(_index),
+            rowIdx: _index
           });
           return;
         }
-
-        yy += cellHeight(row);
       }
     }
 
@@ -1336,7 +1415,7 @@ function Sheet(props) {
     var scrollToP2 = true;
 
     if (x < rowHeaderWidth) {
-      sel2.x = 100;
+      sel2.x = dataOffset.x + 100;
       scrollToP2 = false;
       setRowSelectionInProgress(true);
     } else {
@@ -1344,7 +1423,7 @@ function Sheet(props) {
     }
 
     if (y < columnHeaderHeight) {
-      sel2.y = 100;
+      sel2.y = dataOffset.y + 100;
       scrollToP2 = false;
       setColumnSelectionInProgress(true);
     } else {
@@ -1433,12 +1512,12 @@ function Sheet(props) {
 
         var srcX = sx1;
 
-        for (var _x2 = fx1; _x2 <= fx2; _x2++) {
+        for (var _x3 = fx1; _x3 <= fx2; _x3++) {
           for (var _y2 = fy1; _y2 <= fy2; _y2++) {
             var _value = sourceData(srcX, _y2);
 
             changes.push({
-              x: _x2,
+              x: _x3,
               y: _y2,
               value: _value
             });
@@ -1473,14 +1552,14 @@ function Sheet(props) {
 
       var rect = e.target.getBoundingClientRect();
 
-      var _x3 = e.clientX - rect.left;
+      var _x4 = e.clientX - rect.left;
 
       var _y3 = e.clientY - rect.top;
 
       var hitTarget = buttonClickMouseDownCoordinates.hitTarget;
 
-      if (hitTarget.x <= _x3 && _x3 <= hitTarget.x + hitTarget.w && hitTarget.y <= _y3 && _y3 <= hitTarget.y + hitTarget.h) {
-        hitTarget.onClick();
+      if (hitTarget.x <= _x4 && _x4 <= hitTarget.x + hitTarget.w && hitTarget.y <= _y3 && _y3 <= hitTarget.y + hitTarget.h) {
+        hitTarget.onClick(e);
       }
 
       setButtonClickMouseDownCoordinates({
@@ -1602,7 +1681,14 @@ function Sheet(props) {
         y2 = selection.y1;
       }
 
-      if (Math.abs(cell.x - (x1 + x2) * 0.5) < Math.abs(cell.y - (y1 + y2) * 0.5)) {
+      var xCellDiff = 0;
+      if (cell.x < x1) xCellDiff = cell.x - x1;
+      if (cell.x > x2) xCellDiff = x2 - cell.x;
+      var yCellDiff = 0;
+      if (cell.y < y1) yCellDiff = cell.y - y1;
+      if (cell.y > y2) yCellDiff = y2 - cell.y;
+
+      if (xCellDiff > yCellDiff) {
         if (cell.y < y1) {
           y1 = cell.y;
         } else {
@@ -1626,7 +1712,9 @@ function Sheet(props) {
   };
 
   var onDoubleClick = function onDoubleClick(e) {
-    if (!e.target || !(e.target instanceof Element)) {
+    e.preventDefault();
+
+    if (!e.target || !(e.target instanceof Element) || shiftKeyDown) {
       return;
     }
 
@@ -1813,9 +1901,7 @@ function Sheet(props) {
   };
 
   var onContextMenu = function onContextMenu(e) {
-    if (!props.onRightClick) {
-      return;
-    }
+    var _props$onRightClick;
 
     if (!e.target || !(e.target instanceof Element)) {
       return;
@@ -1825,17 +1911,41 @@ function Sheet(props) {
     var x = e.clientX - rect.left;
     var y = e.clientY - rect.top;
     var cell = absCoordianteToCell(x, y, rowSizes, columnSizes);
+    var cellX = cell.x;
+    var cellY = cell.y;
+    var x1 = selection.x1,
+        x2 = selection.x2,
+        y1 = selection.y1,
+        y2 = selection.y2;
+
+    if (x1 > x2) {
+      var _ref = [x2, x1];
+      x1 = _ref[0];
+      x2 = _ref[1];
+    }
 
-    if (y > columnHeaderHeight && x > rowHeaderWidth) {
-      onMouseMove(e);
+    if (y1 > y2) {
+      var _ref2 = [y2, y1];
+      y1 = _ref2[0];
+      y2 = _ref2[1];
+    }
 
-      var ev = _extends({}, e, {
-        cellX: cell.x,
-        cellY: cell.y
-      });
+    if (!(y > columnHeaderHeight && x > rowHeaderWidth)) {
+      return;
+    }
 
-      props.onRightClick(ev);
+    if (!(cellX >= x1 && cellX <= x2) || !(cellY >= y1 && cellY <= y2)) {
+      changeSelection(cellX, cellY, cellX, cellY);
     }
+
+    onMouseMove(e);
+
+    var ev = _extends({}, e, {
+      cellX: cellX,
+      cellY: cellY
+    });
+
+    (_props$onRightClick = props.onRightClick) === null || _props$onRightClick === void 0 ? void 0 : _props$onRightClick.call(props, ev);
   };
 
   var editMode = editCell.x !== -1 && editCell.y !== -1;
@@ -1857,6 +1967,27 @@ function Sheet(props) {
     editTextTextAlign = style.textAlign || defaultCellStyle.textAlign || 'left';
   }
 
+  var inputProps = {
+    value: editValue,
+    autoFocus: true,
+    onKeyDown: onKeyDown,
+    style: {
+      position: 'absolute',
+      top: editTextPosition.y,
+      left: editTextPosition.x,
+      width: editTextWidth,
+      height: editTextHeight,
+      outline: 'none',
+      border: 'none',
+      textAlign: editTextTextAlign,
+      color: 'black',
+      fontSize: defaultCellStyle.fontSize,
+      fontFamily: 'sans-serif'
+    }
+  };
+  var input = (_props$inputComponent = props.inputComponent) === null || _props$inputComponent === void 0 ? void 0 : _props$inputComponent.call(props, editCell.x, editCell.y, _extends({}, inputProps, {
+    onChange: setEditValue
+  }), commitEditingCell);
   return React__default.createElement("div", {
     style: {
       position: 'relative',
@@ -1921,31 +2052,15 @@ function Sheet(props) {
     tabIndex: 0,
     onKeyDown: onGridKeyDown,
     onKeyUp: onGridKeyUp
-  }), editMode && React__default.createElement("input", {
+  }), editMode && (input != null ? input : React__default.createElement("input", Object.assign({}, inputProps, {
     type: "text",
     onFocus: function onFocus(e) {
       return e.target.select();
     },
-    autoFocus: true,
-    onKeyDown: onKeyDown,
-    value: editValue,
     onChange: function onChange(e) {
       return setEditValue(e.target.value);
-    },
-    style: {
-      position: 'absolute',
-      top: editTextPosition.y,
-      left: editTextPosition.x,
-      width: editTextWidth,
-      height: editTextHeight,
-      outline: 'none',
-      border: 'none',
-      textAlign: editTextTextAlign,
-      color: 'black',
-      fontSize: defaultCellStyle.fontSize,
-      fontFamily: 'sans-serif'
     }
-  }));
+  }))));
 }
 
 module.exports = Sheet;