fix readonly issues #8 (tests pending) (#37)

* fix readonly issues #8

* format

* merge cell fix

* version

* test fixes

* test fixes and merge

* version

* format

Author: sojinantony01

README.md

@@ -1,7 +1,7 @@
 # React-spread-sheet-excel
 React spread sheet excel is a high-performance React component for building Excel-like spreadsheets with advanced features.
 
-A **simple very light weight(<200KB)** component to Render large lists of input boxes in the table using React JS, Render a table with a large number of rows and columns.
+A **simple very light weight(<300KB)** component to Render large lists of input boxes in the table using React JS, Render a table with a large number of rows and columns.
 Able to render 100000+ input boxes in react, A quick solution for web based spreadsheet or excel.
 
 [![npm version](https://badge.fury.io/js/react-spread-sheet-excel.svg)](https://badge.fury.io/js/react-spread-sheet-excel) ![Downloads](https://img.shields.io/npm/dm/react-spread-sheet-excel.svg)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spread-sheet-excel",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "A quick example of rendering large number of input boxes in table using React JS, React Spread-sheet (Excel sheet)",
   "keywords": [
     "React spreadsheet",

src/lib/list/__tests__/index.test.tsx

@@ -6,6 +6,7 @@ import { store } from "../../store";
 import { generateDummyContent } from "../utils";
 import { changeData, selectCellsDrag, selectOneCell } from "../../reducer";
 import { mockAllIsIntersecting } from "react-intersection-observer/test-utils";
+import { wait } from "@testing-library/user-event/dist/cjs/utils/index.js";
 
 describe("index tests", () => {
   afterEach(() => {
@@ -368,7 +369,9 @@ describe("index tests", () => {
   });
   test("merge cells", async () => {
     const user = userEvent.setup();
-    render(<List data={generateDummyContent(10, 2)} autoAddAdditionalRows={false} />);
+    const { container } = render(
+      <List data={generateDummyContent(10, 2)} autoAddAdditionalRows={false} />,
+    );
     mockAllIsIntersecting(true);
     expect(screen.getAllByRole("textbox").length).toBe(21); //one common input from tools
     await user.click(screen.getByTestId(`${0}-${0}`));
@@ -386,6 +389,6 @@ describe("index tests", () => {
     expect(screen.getAllByRole("textbox").length).toBe(18); //one common input from tools
     fireEvent.contextMenu(screen.getByTestId(`0-0`));
     fireEvent.click(screen.getByText("Merge cells"));
-    expect(screen.getAllByRole("textbox").length).toBe(18); //one common input from tools
+    expect(screen.getAllByRole("textbox").length).toBe(18); //why this is 21 !!!!
   });
 });

src/lib/list/cell.tsx

@@ -17,15 +17,15 @@ const Cell = (props: Prop) => {
 
   const colSpan = useAppSelector(store, (state) => {
     let val = state.data[props.i][props.j];
-    if (inView && val.colSpan && val.rowSpan) {
+    if (val.colSpan && val.rowSpan) {
       return val.colSpan;
     }
     return 1;
   });
 
   const rowSpan = useAppSelector(store, (state) => {
     let val = state.data[props.i][props.j];
-    if (inView && val.colSpan && val.rowSpan) {
+    if (val.colSpan && val.rowSpan) {
       return val.rowSpan;
     }
     return 1;

src/lib/list/index.tsx

@@ -141,6 +141,8 @@ const List = (props: Props) => {
     ctrlKey: any;
     metaKey: any;
   }) => {
+    if (readonly) return;
+
     if (e.code === "KeyA" && (e.ctrlKey || e.metaKey)) {
       dispatch(selectAllCells);
     }
@@ -207,8 +209,10 @@ const List = (props: Props) => {
   };
 
   const handleContextMenu = (e: React.MouseEvent) => {
-    e.preventDefault();
-    setContextMenu({ x: e.clientX, y: e.clientY });
+    if (!readonly) {
+      e.preventDefault();
+      setContextMenu({ x: e.clientX, y: e.clientY });
+    }
   };
 
   return (
@@ -226,7 +230,7 @@ const List = (props: Props) => {
               <table onContextMenu={handleContextMenu}>
                 {!hideXAxisHeader ? (
                   <thead>
-                    <SheetXAxis resize={resize} headerValues={headerValues} />
+                    <SheetXAxis resize={resize} headerValues={headerValues} readOnly={readonly} />
                   </thead>
                 ) : (
                   ""

src/lib/list/readonlycell.tsx

@@ -1,18 +1,56 @@
 import React from "react";
 import { store, useAppSelector } from "../store";
+import { getCalculatedVal } from "./utils";
 
 interface Prop {
   i: number;
   j: number;
+  headerValues?: string[];
 }
 const ReadOnlyCell = (props: Prop) => {
-  const value = useAppSelector(store, (state) => state.data[props.i][props.j].value);
-  return (
-    <td>
-      <div className="input input-dummy" data-testid={`read-only-${props.i}-${props.j}`}>
+  const value = useAppSelector(store, (state) => {
+    let val = state.data[props.i][props.j].value;
+    if (val && val.toString().trim().startsWith("=")) {
+      return getCalculatedVal(val, state.data, props.headerValues);
+    }
+    return val;
+  });
+  const colSpan = useAppSelector(store, (state) => {
+    let val = state.data[props.i][props.j];
+    if (val.colSpan && val.rowSpan) {
+      return val.colSpan;
+    }
+    return 1;
+  });
+
+  const rowSpan = useAppSelector(store, (state) => {
+    let val = state.data[props.i][props.j];
+    if (val.colSpan && val.rowSpan) {
+      return val.rowSpan;
+    }
+    return 1;
+  });
+
+  const skip = useAppSelector(store, (state) => {
+    return state.data[props.i][props.j].skip;
+  });
+
+  const styles = useAppSelector(store, (state) => {
+    return state.data[props.i][props.j].styles;
+  });
+
+  return !skip ? (
+    <td colSpan={colSpan} rowSpan={rowSpan}>
+      <div
+        className="input input-dummy"
+        data-testid={`read-only-${props.i}-${props.j}`}
+        style={styles}
+      >
         {value}
       </div>
     </td>
+  ) : (
+    <></>
   );
 };
 

src/lib/list/row.tsx

@@ -17,7 +17,7 @@ const Row = (props: Prop) => {
   for (let j = 0; j < itemLength; j++) {
     items.push(
       props.readonly ? (
-        <ReadOnlyCell key={`${i}-${j}-ReadOnly`} i={i} j={j} />
+        <ReadOnlyCell key={`${i}-${j}-ReadOnly`} i={i} j={j} headerValues={props.headerValues} />
       ) : (
         <Cell
           key={`${i}-${j}`}
@@ -37,9 +37,10 @@ const Row = (props: Prop) => {
           data-testid={`${i}-sheet-y-axis`}
           tabIndex={1}
           onMouseDown={(e) => {
-            store.dispatch(selectHorizontalCells, {
-              payload: { i: i, ctrlPressed: e.metaKey || e.ctrlKey },
-            });
+            !props.readonly &&
+              store.dispatch(selectHorizontalCells, {
+                payload: { i: i, ctrlPressed: e.metaKey || e.ctrlKey },
+              });
           }}
         >
           {i + 1}

src/lib/list/sheet-x-axis.tsx

@@ -6,9 +6,10 @@ import { selectAllCells, selectVerticalCells } from "../reducer";
 interface Props {
   resize?: boolean;
   headerValues?: string[];
+  readOnly: boolean | undefined;
 }
 
-const SheetXAxis = ({ resize, headerValues }: Props) => {
+const SheetXAxis = ({ resize, headerValues, readOnly }: Props) => {
   const { dispatch } = store;
   const itemLength = useAppSelector(store, (state) => state.data[0].length);
   const items: any = [];
@@ -25,12 +26,14 @@ const SheetXAxis = ({ resize, headerValues }: Props) => {
         data-testid={`${i}-x-axis`}
         tabIndex={0}
         onMouseDown={(e) => {
-          if (i === 0) {
-            dispatch(selectAllCells);
-          } else
-            dispatch(selectVerticalCells, {
-              payload: { j: i - 1, ctrlPressed: e.metaKey || e.ctrlKey },
-            });
+          if (!readOnly) {
+            if (i === 0) {
+              dispatch(selectAllCells);
+            } else
+              dispatch(selectVerticalCells, {
+                payload: { j: i - 1, ctrlPressed: e.metaKey || e.ctrlKey },
+              });
+          }
         }}
       >
         {resize && i > 0 ? (

src/lib/reducer.ts

@@ -351,11 +351,11 @@ const actions: DispatcherActions = {
             j++
           ) {
             undo.push({ i: i, j: j, data: { ...state.data[i][j] } });
-            data[i][j].skip = undefined;
+            delete data[i][j].skip;
           }
         }
-        data[cellForMerge[0]][cellForMerge[1]].rowSpan = undefined;
-        data[cellForMerge[0]][cellForMerge[1]].colSpan = undefined;
+        delete data[cellForMerge[0]][cellForMerge[1]].rowSpan;
+        delete data[cellForMerge[0]][cellForMerge[1]].colSpan;
       } else if (state.selected.length > 1) {
         state.selected.forEach((p, i) => {
           undo.push({ i: p[0], j: p[1], data: { ...state.data[p[0]][p[1]] } });

todo.txt

@@ -25,3 +25,8 @@ Multiple selection with cntrl key
 Readonly should disable all updates and support merged cells
 
 Tool tip for tools
+
+
+merge cells - skip 
+
+event delegation in javascript table