sheet-happens 0.0.10 → 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

@@ -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]);
@@ -1265,6 +1283,7 @@ function Sheet(props) {
       x: -1,
       y: -1
     });
+    setEditKey('');
   };
 
   var startEditingCell = function startEditingCell(editCell) {
@@ -1279,7 +1298,9 @@ function Sheet(props) {
       val = editDataValue;
     }
 
+    var editDataKey = editKeys ? editKeys(editCell.x, editCell.y) : '';
     setEditCell(editCell);
+    setEditKey(editDataKey);
     setEditValue(val);
   };
 
@@ -1436,6 +1457,7 @@ function Sheet(props) {
       x: -1,
       y: -1
     });
+    setEditKey('');
   };
 
   var onMouseUp = function onMouseUp(e) {
@@ -1745,6 +1767,7 @@ function Sheet(props) {
         x: -1,
         y: -1
       });
+      setEditKey('');
       return;
     }