sheet-happens 0.0.8 → 0.0.11

package/README.md

@@ -4,15 +4,22 @@
 
 [![NPM](https://img.shields.io/npm/v/sheet-happens.svg)](https://www.npmjs.com/package/sheet-happens) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+![Sheeeeeit](https://media.giphy.com/media/in6mnJNYjGKpq/source.gif)
+
+## About
+Canvas-based spreadsheet component for React. <br />
+Super fast and responsive regardless of the dataset size because it draws only the data user currently sees.
+
+![sheet-happens](https://raw.githubusercontent.com/farseerdev/sheet-happens/main/example/src/assets/sheethappensimg.png)
+
 ## Install
 
 ```bash
 npm install --save sheet-happens
 ```
 
-![Alt Text](https://media.giphy.com/media/in6mnJNYjGKpq/source.gif)
-
 ## Usage
+To use our Sheet in your project, just import the component and its style and render it:
 
 ```jsx
 import React, { Component } from 'react'
@@ -27,6 +34,27 @@ class Example extends Component {
 }
 ```
 
+Of course, you can also display some data in it:
+```jsx
+const [data, setData] = useState([[1,2,3], [10,20,30]]);
+    
+const displayData = (x, y) => {
+    return data?.[y]?.[x]?.toFixed?.(2);
+};
+
+return (
+    <div className="sheet-box">
+        <Sheet
+            sourceData={data}
+            displayData={displayData}
+        />
+    </div>
+);
+```
+
+Go to our [example page](https://farseerdev.github.io/sheet-happens/) to learn more about [features](https://farseerdev.github.io/sheet-happens#features) it has and checkout [documentation](https://farseerdev.github.io/sheet-happens#documentation) for detailed list of props you can send to this component. <br />
+
+Along with descriptions, page also contains multiple Sheet components you can use to try out is it a good match for your needs. Edit some values, paste some data, drag columns and rows for resize, and so on.
 
 
 ## License

package/dist/index.d.ts

@@ -23,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>;
@@ -44,6 +44,7 @@ export interface SheetProps {
     sourceData?: CellProperty<string | number | null>;
     displayData?: CellProperty<CellContentType>;
     editData?: CellProperty<string>;
+    editKeys?: 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;

package/dist/index.js

@@ -641,45 +641,49 @@ function Sheet(props) {
       editValue = _useState6[0],
       setEditValue = _useState6[1];
 
-  var _useState7 = React.useState(false),
-      arrowKeyCommitMode = _useState7[0],
-      setArrowKeyCommitMode = _useState7[1];
+  var _useState7 = React.useState(''),
+      editKey = _useState7[0],
+      setEditKey = _useState7[1];
 
   var _useState8 = React.useState(false),
-      shiftKeyDown = _useState8[0],
-      setShiftKeyDown = _useState8[1];
+      arrowKeyCommitMode = _useState8[0],
+      setArrowKeyCommitMode = _useState8[1];
 
   var _useState9 = React.useState(false),
-      knobDragInProgress = _useState9[0],
-      setKnobDragInProgress = _useState9[1];
+      shiftKeyDown = _useState9[0],
+      setShiftKeyDown = _useState9[1];
 
   var _useState10 = React.useState(false),
-      selectionInProgress = _useState10[0],
-      setSelectionInProgress = _useState10[1];
+      knobDragInProgress = _useState10[0],
+      setKnobDragInProgress = _useState10[1];
 
-  var _useState11 = React.useState(null),
-      columnResize = _useState11[0],
-      setColumnResize = _useState11[1];
+  var _useState11 = React.useState(false),
+      selectionInProgress = _useState11[0],
+      setSelectionInProgress = _useState11[1];
 
   var _useState12 = React.useState(null),
-      rowResize = _useState12[0],
-      setRowResize = _useState12[1];
+      columnResize = _useState12[0],
+      setColumnResize = _useState12[1];
 
-  var _useState13 = React.useState(false),
-      rowSelectionInProgress = _useState13[0],
-      setRowSelectionInProgress = _useState13[1];
+  var _useState13 = React.useState(null),
+      rowResize = _useState13[0],
+      setRowResize = _useState13[1];
 
   var _useState14 = React.useState(false),
-      columnSelectionInProgress = _useState14[0],
-      setColumnSelectionInProgress = _useState14[1];
+      rowSelectionInProgress = _useState14[0],
+      setRowSelectionInProgress = _useState14[1];
 
-  var _useState15 = React.useState({
+  var _useState15 = React.useState(false),
+      columnSelectionInProgress = _useState15[0],
+      setColumnSelectionInProgress = _useState15[1];
+
+  var _useState16 = React.useState({
     x: -1,
     y: -1,
     hitTarget: null
   }),
-      buttonClickMouseDownCoordinates = _useState15[0],
-      setButtonClickMouseDownCoordinates = _useState15[1];
+      buttonClickMouseDownCoordinates = _useState16[0],
+      setButtonClickMouseDownCoordinates = _useState16[1];
 
   var _useResizeObserver = useResizeObserver({
     ref: canvasRef
@@ -715,9 +719,23 @@ function Sheet(props) {
   var editData = React.useMemo(function () {
     return createCellPropFunction(props.editData, '');
   }, [props.editData]);
+  var editKeys = React.useMemo(function () {
+    return createCellPropFunction(props.editKeys, '');
+  }, [props.editKeys]);
   var cellStyle = React.useMemo(function () {
     return createCellPropFunction(props.cellStyle, defaultCellStyle);
   }, [props.cellStyle]);
+  React.useEffect(function () {
+    var currEditKey = editKeys ? editKeys(editCell.x, editCell.y) : '';
+
+    if (currEditKey !== editKey) {
+      setEditCell({
+        x: -1,
+        y: -1
+      });
+      setEditKey('');
+    }
+  }, [editKeys]);
   var columnSizes = React.useMemo(function () {
     return calculateRowsOrColsSizes(freezeColumns, cellWidth, rowHeaderWidth, dataOffset.x, canvasWidth);
   }, [props.freezeColumns, cellWidth, dataOffset.x, canvasWidth]);
@@ -1114,10 +1132,26 @@ function Sheet(props) {
               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++;
               }
@@ -1249,6 +1283,7 @@ function Sheet(props) {
       x: -1,
       y: -1
     });
+    setEditKey('');
   };
 
   var startEditingCell = function startEditingCell(editCell) {
@@ -1263,7 +1298,9 @@ function Sheet(props) {
       val = editDataValue;
     }
 
+    var editDataKey = editKeys ? editKeys(editCell.x, editCell.y) : '';
     setEditCell(editCell);
+    setEditKey(editDataKey);
     setEditValue(val);
   };
 
@@ -1399,7 +1436,7 @@ function Sheet(props) {
     var scrollToP2 = true;
 
     if (x < rowHeaderWidth) {
-      sel2.x = 100;
+      sel2.x = dataOffset.x + 100;
       scrollToP2 = false;
       setRowSelectionInProgress(true);
     } else {
@@ -1407,7 +1444,7 @@ function Sheet(props) {
     }
 
     if (y < columnHeaderHeight) {
-      sel2.y = 100;
+      sel2.y = dataOffset.y + 100;
       scrollToP2 = false;
       setColumnSelectionInProgress(true);
     } else {
@@ -1420,6 +1457,7 @@ function Sheet(props) {
       x: -1,
       y: -1
     });
+    setEditKey('');
   };
 
   var onMouseUp = function onMouseUp(e) {
@@ -1543,7 +1581,7 @@ function Sheet(props) {
       var hitTarget = buttonClickMouseDownCoordinates.hitTarget;
 
       if (hitTarget.x <= _x4 && _x4 <= hitTarget.x + hitTarget.w && hitTarget.y <= _y3 && _y3 <= hitTarget.y + hitTarget.h) {
-        hitTarget.onClick();
+        hitTarget.onClick(e);
       }
 
       setButtonClickMouseDownCoordinates({
@@ -1665,7 +1703,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 {
@@ -1689,7 +1734,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;
     }
 
@@ -1720,6 +1767,7 @@ function Sheet(props) {
         x: -1,
         y: -1
       });
+      setEditKey('');
       return;
     }
 
@@ -1893,6 +1941,18 @@ function Sheet(props) {
         y1 = selection.y1,
         y2 = selection.y2;
 
+    if (x1 > x2) {
+      var _ref = [x2, x1];
+      x1 = _ref[0];
+      x2 = _ref[1];
+    }
+
+    if (y1 > y2) {
+      var _ref2 = [y2, y1];
+      y1 = _ref2[0];
+      y2 = _ref2[1];
+    }
+
     if (!(y > columnHeaderHeight && x > rowHeaderWidth)) {
       return;
     }