pixel-react-excel-sheet 1.0.1 → 1.1.9

package/src/components/ExcelFile/ExcelFile/Excel/util.ts

@@ -1,13 +1,13 @@
-import * as Types from "./types";
-import * as Matrix from "./matrix";
-import * as Point from "./point";
-import { PointRange } from "./point-range";
-import { Selection } from "./selection";
+import * as Types from './types';
+import * as Matrix from './matrix';
+import * as Point from './point';
+import { PointRange } from './point-range';
+import { Selection } from './selection';
 
-export { createEmpty as createEmptyMatrix } from "./matrix";
+export { createEmpty as createEmptyMatrix } from './matrix';
 
-export const PLAIN_TEXT_MIME = "text/plain";
-export const FOCUS_WITHIN_SELECTOR = ":focus-within";
+export const PLAIN_TEXT_MIME = 'text/plain';
+export const FOCUS_WITHIN_SELECTOR = ':focus-within';
 
 /** Move the cursor of given input element to the input's end */
 export function moveCursorToEnd(el: HTMLInputElement): void {
@@ -18,8 +18,7 @@ export function moveCursorToEnd(el: HTMLInputElement): void {
  * Creates an array of numbers (positive and/or negative) progressing from start up to, but not including, end. A step of -1 is used if a negative start is specified without an end or step. If end is not specified, it's set to start with start then set to 0.
  * @param end - an integer number specifying at which position to stop (not included).
  * @param start - An integer number specifying at which position to start.
- * @param step - An integer number specifying the incrementation
- */
+ * @param step - An integer number specifying the Increment */
 export function range(end: number, start = 0, step = 1): number[] {
   const array = [];
   if (Math.sign(end - start) === -1) {
@@ -36,7 +35,7 @@ export function range(end: number, start = 0, step = 1): number[] {
 
 /** Return whether given point is active */
 export function isActive(
-  active: Types.StoreState["active"],
+  active: Types.StoreState['active'],
   point: Point.Point
 ): boolean {
   return Boolean(active && Point.isEqual(point, active));
@@ -65,19 +64,19 @@ export function readTextFromClipboard(event: ClipboardEvent): string {
   // @ts-ignore
   if (window.clipboardData && window.clipboardData.getData) {
     // @ts-ignore
-    return window.clipboardData.getData("Text");
+    return window.clipboardData.getData('Text');
   }
   if (event.clipboardData && event.clipboardData.getData) {
     return event.clipboardData.getData(PLAIN_TEXT_MIME);
   }
-  return "";
+  return '';
 }
 
 /** Get the dimensions of cell at point from state */
 export function getCellDimensions(
   point: Point.Point,
-  rowDimensions: Types.StoreState["rowDimensions"] | undefined,
-  columnDimensions: Types.StoreState["columnDimensions"] | undefined
+  rowDimensions: Types.StoreState['rowDimensions'] | undefined,
+  columnDimensions: Types.StoreState['columnDimensions'] | undefined
 ): Types.Dimensions | undefined {
   const cellRowDimensions = rowDimensions && rowDimensions[point.row];
   const cellColumnDimensions =
@@ -93,8 +92,8 @@ export function getCellDimensions(
 
 /** Get the dimensions of a range of cells */
 export function getRangeDimensions(
-  rowDimensions: Types.StoreState["rowDimensions"],
-  columnDimensions: Types.StoreState["columnDimensions"],
+  rowDimensions: Types.StoreState['rowDimensions'],
+  columnDimensions: Types.StoreState['columnDimensions'],
   range: PointRange
 ): Types.Dimensions | undefined {
   const startDimensions = getCellDimensions(
@@ -120,8 +119,8 @@ export function getRangeDimensions(
 
 /** Get the dimensions of selected */
 export function getSelectedDimensions(
-  rowDimensions: Types.StoreState["rowDimensions"],
-  columnDimensions: Types.StoreState["columnDimensions"],
+  rowDimensions: Types.StoreState['rowDimensions'],
+  columnDimensions: Types.StoreState['columnDimensions'],
   data: Matrix.Matrix<unknown>,
   selected: Selection
 ): Types.Dimensions | undefined {
@@ -133,7 +132,7 @@ export function getSelectedDimensions(
 
 /** Get given data as CSV */
 export function getCSV(data: Matrix.Matrix<Types.CellBase>): string {
-  const valueMatrix = Matrix.map((cell) => cell?.value || "", data);
+  const valueMatrix = Matrix.map((cell) => cell?.value || '', data);
   return Matrix.join(valueMatrix);
 }
 
@@ -161,7 +160,7 @@ export function shouldHandleClipboardEvent(
   root: Element | null,
   mode: Types.Mode
 ): boolean {
-  return root !== null && mode === "view" && isFocusedWithin(root);
+  return root !== null && mode === 'view' && isFocusedWithin(root);
 }
 
 export function isFocusedWithin(element: Element): boolean {
@@ -169,5 +168,5 @@ export function isFocusedWithin(element: Element): boolean {
 }
 
 export function hasLineBreaker(value: unknown) {
-  return typeof value === "string" && value.includes("\n");
+  return typeof value === 'string' && value.includes('\n');
 }

package/src/components/ExcelFile/ExcelFile/ExcelFile.tsx

@@ -1,11 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
-// import './ExcelFile.scss';
-import ExcelToolBar from '../ExcelToolBar/ExcelToolBar';
 import ExcelSheetBar from '../ExcelSheetBar/ExcelSheetBar';
-import ContextMenu from '../ContextMenu/ContextMenu';
 import Spreadsheet, { CellBase } from './Excel/index';
-import * as Matrix from "./Excel/matrix";
-import ChangeExcelStyles from './../ChangeExcelStyles';
+import * as Matrix from './Excel/matrix';
 
 interface ExcelFileProps {
   /** The Excel data containing sheets and their content */
@@ -29,8 +25,6 @@ interface ExcelFileProps {
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
-  toolbar = 'show',
-  contextOption = [],
   onSave = () => {},
 }) => {
   const [fileDetails, setFileDetails] = useState<{
@@ -39,9 +33,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   const EmptyRow: CellBase = {
     value: '',
     style: {
-      color: "var(--brand-color)",
-      backgroundColor: "var(--drawer-footer-bg)",
-      borderColor: "var(--toggle-strip-color)",
+      color: 'var(--brand-color)',
+      backgroundColor: 'var(--drawer-footer-bg)',
+      borderColor: 'var(--toggle-strip-color)',
     },
   };
   const [selectedSheet, setSelectedSheet] = useState<{
@@ -51,28 +45,18 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   const [worksheetsData, setWorksheetsData] = useState<{
     [key: string]: Matrix.Matrix<CellBase>;
-  }>({defaultSheet:[[EmptyRow]]});
+  }>({ defaultSheet: [[EmptyRow]] });
 
+  const [selectedSheetData, setSelectedSheetData] = useState<
+    Matrix.Matrix<CellBase>
+  >([[EmptyRow]]);
 
-  const [selectedSheetData, setSelectedSheetData] = useState<Matrix.Matrix<CellBase>>([
-    [EmptyRow]
-  ]);
-
-
-  const [selectedCell, setSelectedCell] = useState<
-    { row: number; column: number }[]
-  >([]);
   const sheetRef = useRef<HTMLDivElement | null>(null);
-  const excelDataCopy = useRef<{ [key: string]: Matrix.Matrix<CellBase> }>({defaultSheet:[[]]});
-  const [contextData, setContextData] = useState<ContextMenuState>({
-    visible: false,
-    x: 0,
-    y: 0,
-    type: 'cell',
+  const excelDataCopy = useRef<{ [key: string]: Matrix.Matrix<CellBase> }>({
+    defaultSheet: [[]],
   });
 
-
-  let checkVal = (val:any) => {
+  let checkVal = (val: any) => {
     if (val === undefined || val === null) {
       return null;
     }
@@ -83,18 +67,21 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     const sheetNames = payload.sheets.map((e) => e.sheetName);
     setFileDetails({ sheetNames });
     if (sheetNames.length > 0) {
-      setSelectedSheet({ name: sheetNames[0]?sheetNames[0]:"", index: 0 });
+      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
     }
-
     const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
     payload.sheets.forEach((sheet) => {
       const sheetName = sheet.sheetName;
       const json = sheet.data;
       const maxRows = Math.max(26, json.length + 2);
-      const maxCols = Math.max(26, Math.max(...json.map((row) => row.length)) + 2);
+      const maxCols = Math.max(
+        26,
+        Math.max(...json.map((row) => row.length)) + 2
+      );
 
-      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from({ length: maxRows }, () =>
-        Array.from({ length: maxCols }, () => EmptyRow)
+      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
+        { length: maxRows },
+        () => Array.from({ length: maxCols }, () => EmptyRow)
       );
       json.forEach((row, rowIndex) => {
         row.forEach((cell, colIndex) => {
@@ -105,30 +92,23 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             spreadsheetData[rowIndex][colIndex] = {
               value: checkVal(cell.value),
               style: cell.style,
-              type:true
+              type: true,
             };
           }
         });
       });
-      
+
       newWorksheetsData[sheetName] = spreadsheetData;
     });
     excelDataCopy.current = newWorksheetsData;
     setWorksheetsData(newWorksheetsData);
     const firstSheetName = Object.keys(newWorksheetsData)[0];
-    if (firstSheetName && newWorksheetsData[firstSheetName]!==undefined) {
+    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
       setSelectedSheetData(newWorksheetsData[firstSheetName]);
     }
-  }, [excelData]);
-  
-  
-  const handleSaveData = () => {
-    setWorksheetsData((prevData) => {
-      let updatedData = { ...prevData };
-      updatedData[selectedSheet.name] = selectedSheetData;
-      return updatedData;
-    });
+  }, []);
 
+  const handleSaveData = () => {
     const dataToSave = {
       sheets: fileDetails.sheetNames.map((sheetName) => ({
         sheetName: sheetName,
@@ -157,309 +137,21 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   }, [worksheetsData]);
 
   const handleSheetChange = (name: string, index: number) => {
-    setWorksheetsData((prevData) => {
-      let updatedData = prevData;
-      updatedData[selectedSheet.name] = selectedSheetData;
-      return updatedData;
-    });
-    setSelectedSheet({ index, name });
-  };
-
-  let addRow = () => {
-    let updateSheet: Matrix.Matrix<CellBase> = worksheetsData[selectedSheet.name] ?? [];
-    setWorksheetsData((prev) => ({
-      ...prev,
-      [selectedSheet.name]: updateSheet,
-    }));
-  };
-  
-  
-  let deleteRow = () => {
-  
-  };
-  
-  let addColumn = () => {
-    let updateSheet: Matrix.Matrix<CellBase> = worksheetsData[selectedSheet.name] ?? []; // Fallback to empty array if undefined
-    if (updateSheet.length > 0) {
-      // updateSheet.forEach((row) => {
-      //   row.splice(selectedValue.column, 0, EmptyRow); // Insert EmptyRow at the specified column index
-      // });
-      setWorksheetsData((prev) => ({
-        ...prev,
-        [selectedSheet.name]: updateSheet,
-      }));
-    }
-  };
-  
-  let deleteColumn = () => {
-    let updateSheet: Matrix.Matrix<CellBase> = worksheetsData[selectedSheet.name] ?? [];
-    
-    // Ensure there is at least one row in the sheet and that the first row exists
-    if (updateSheet.length > 0 && updateSheet[0]) {
-      // const firstRow = updateSheet[0]; // Safely access the first row
-      // const length = firstRow.length; // Get the length of the first row
-      
-      // Proceed only if the column index is within bounds
-      // if (selectedValue.column >= 0 && selectedValue.column < length) {
-      //   // Delete the specified column from each row
-      //   updateSheet.forEach((row) => row.splice(selectedValue.column, 1));
-        
-      //   // Update the worksheets data with the modified sheet
-      //   setWorksheetsData((prev) => ({
-      //     ...prev,
-      //     [selectedSheet.name]: updateSheet,
-      //   }));
-      // }
-    }
-  };
-  
-  let addSheet = () => {
-    const generateUniqueSheetName = (
-      baseName: string,
-      existingNames: string[]
-    ): string => {
-      let newName = baseName;
-      let counter = 1;
-      while (existingNames.includes(newName)) {
-        newName = `${baseName}${counter}`;
-        counter++;
-      }
-      return newName;
-    };
-    const baseName = 'NewSheet';
-    const existingSheetNames = fileDetails.sheetNames;
-    const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
-    const newSheetData = Array.from({ length: 25 }, () =>
-      Array.from({ length: 26 }, () => EmptyRow)
-    );
-
-    setFileDetails((prev) => ({
-      sheetNames: prev.sheetNames.concat(newSheetName),
-    }));
-
-    setWorksheetsData({ ...worksheetsData, [newSheetName]: newSheetData });
-    setSelectedSheet({
-      index: fileDetails.sheetNames.length,
-      name: newSheetName,
-    });
-  };
-
-let deleteSheet = () => {
-  const { sheetNames } = fileDetails;
-  const { index, name } = selectedSheet;
-
-  if (sheetNames.length > 1) {
-    const updatedSheetNames = sheetNames.slice();
-    updatedSheetNames.splice(index, 1);
-
-    const { [name]: _, ...updatedWorksheetsData } = worksheetsData;
-
-    setFileDetails((prev) => ({
-      ...prev,
-      sheetNames: updatedSheetNames,
-    }));
-    setWorksheetsData(updatedWorksheetsData);
-
-    const newIndex = Math.min(index, updatedSheetNames.length - 1);
-    
-    const newSheetName = updatedSheetNames[newIndex] ?? "";
-
-    setSelectedSheet({
-      index: newIndex,
-      name: newSheetName,
-    });
-  } else {
-    alert('Cannot delete the last sheet.');
-  }
-};
-
-  const contextAction: {
-    addRow: () => void;
-    deleteRow: () => void;
-    addColumn: () => void;
-    deleteColumn: () => void;
-    addSheet: () => void;
-    deleteSheet: () => void;
-  } = {
-    addRow,
-    deleteRow,
-    addColumn,
-    deleteColumn,
-    addSheet,
-    deleteSheet,
-  };
-
-  const formatePaint = () => {
-
-  };
-  
-
-  const handleSelect = (e: any) => {
-    if (e.hasOwnProperty('range')) {
-      let rowStart = e.range.start.row;
-      let rowEnd = e.range.end.row;
-      let columnStart = e.range.start.column;
-      let columnEnd = e.range.end.column;
-      let cell: { row: number; column: number }[] = [];
-      for (let i = rowStart; i <= rowEnd; i++) {
-        for (let j = columnStart; j <= columnEnd; j++) {
-          cell.push({ row: i, column: j });
-        }
-      }
-      setContextData((prev) => ({ ...prev, type: 'cell' }));
-      setSelectedCell(cell);
-    } else {
-      if (e.hasOwnProperty('start') && e.hasOwnProperty('end')) {
-        const columnName = e.constructor.name;
-        if (columnName.includes('EntireColumnsSelection')) {
-          setContextData((prev) => ({ ...prev, type: 'column' }));
-        } else if (columnName.includes('EntireRowsSelection')) {
-          setContextData((prev) => ({ ...prev, type: 'row' }));
-        }
-      }
-    }
-  };
-
-  const contextSelect = (event: React.MouseEvent) => {
-    event.preventDefault();
-    const sheetTop = sheetRef.current?.getBoundingClientRect().top;
-    const sheetLeft = sheetRef.current?.getBoundingClientRect().left;
-
-    if (sheetLeft !== undefined && sheetTop !== undefined) {
-      const contextMenuHeight =
-        contextData.type === 'cell' ? contextOption.length * 35 + 40 : 110;
-      const adjustedY = event.pageY - sheetTop - window.scrollY;
-      const availableSpace = window.innerHeight - adjustedY;
-      const contextMenuWidth = 250;
-      const adjustedX = event.pageX - sheetLeft - window.scrollX;
-      const availableXSpace = window.innerWidth - adjustedX;
-
-      const finalY =
-        availableSpace < contextMenuHeight
-          ? adjustedY - contextMenuHeight
-          : adjustedY;
-
-      const finalX =
-        availableXSpace < contextMenuWidth
-          ? adjustedX - contextMenuWidth
-          : adjustedX;
-
-      const target = event.target as HTMLElement;
-      const isCell =
-        target.classList.contains('Spreadsheet__active-cell') &&
-        contextData.type === 'cell';
-      const isHeader =
-        target.classList.contains('Spreadsheet__header--selected') &&
-        (contextData.type === 'row' || contextData.type === 'column');
-      const isSheetTab =
-        target.classList.contains('tab-request') &&
-        contextData.type === 'sheet_options';
-
-      if (isCell || isHeader || isSheetTab) {
-        setContextData((prev) => ({
-          ...prev,
-          visible: true,
-          x: finalX,
-          y: finalY,
-        }));
-      } else {
-        setContextData((prev) => ({
-          ...prev,
-          visible: false,
-          x: finalX,
-          y: finalY,
-        }));
-      }
-    }
-  };
-
-  const sheetContext = (
-    _: React.MouseEvent<Element, MouseEvent>,
-    name: string,
-    index: number
-  ) => {
-    
     setSelectedSheet({ index, name });
-    setContextData((prev) => ({
-      ...prev,
-      type: 'sheet_options',
-    }));
   };
 
-const createStyler =
-(selectedCell: { row: number; column: number }[]) =>
-async (styleType: any, value: any) => {
-  ChangeExcelStyles(setWorksheetsData, {
-    sheetName: selectedSheet.name,
-    styleType,
-    value,
-    selectedCell,
-  });
-};
-
-const applyStyle = createStyler(selectedCell);
-
-useEffect(() => {
-  const currentSheet = worksheetsData[selectedSheet.name] ?? [];
-  const validSheetData: CellBase[][] = currentSheet.map(row =>
-    row.map(cell => cell ? { value: cell.value, style: cell.style } : { value: "", style: EmptyRow.style })
-  );  
-
-  setSelectedSheetData(validSheetData); 
-}, [worksheetsData, selectedSheet.name]);
-
-
-  useEffect(() => {
-    let timeGap = setTimeout(() => {
-      setWorksheetsData((prevData) => {
-            let updatedData = prevData;
-            updatedData[selectedSheet.name] = selectedSheetData;
-            return updatedData;
-          });    }, 1000);
-    return () => {
-      clearTimeout(timeGap);
-    };
-  }, [selectedSheetData]);
-
   return (
     <div className="excel-page">
-      <ExcelToolBar
-        toolbar={toolbar}
-        applyStyle={applyStyle}
-        formatePaint={formatePaint}
-      />
-
       {fileDetails.sheetNames.length > 0 && (
-        <div className="excel-book" >
-          <div
-            ref={sheetRef}
-            onContextMenu={contextSelect}
-            className="excel-sheet"
-          >
-            <Spreadsheet
-              data={selectedSheetData}
-              onActivate={() => {
-                setContextData((prev) => ({ ...prev, visible: false }));
-              }}
-              onSelect={handleSelect}
-            />
-
+        <div className="excel-book">
+          <div ref={sheetRef} className="excel-sheet">
+            <Spreadsheet data={selectedSheetData} />
           </div>
 
           <ExcelSheetBar
             selectedSheet={selectedSheet}
             fileDetails={fileDetails}
             handleSheetChange={handleSheetChange}
-            contextMenu={sheetContext}
-            contextSelect={contextSelect}
-            addSheet={addSheet}
-          />
-
-          <ContextMenu
-            customContext={contextOption}
-            contextAction={contextAction}
-            contextData={contextData}
-            setContextData={setContextData}
           />
         </div>
       )}

package/src/components/ExcelFile/ExcelFile.stories.tsx

@@ -38,17 +38,18 @@ export const Default: Story = {
                 style: {
                   fontSize: "12px",
                   fontFamily: "Arial",
-                  color: "red",
-                  backgroundColor: "white",
+                  color: "var(--text-bg-highlight)",
+                  backgroundColor: "var(--tooltip-bg-color)",
                 },
               },
               {
-                value: "B1",
+                value: "SUM(A1+B1)",
+                // isFormula:true,
                 style: {
                   fontSize: "12px",
                   fontFamily: "Arial",
-                  color: "Green",
-                  backgroundColor: "white",
+                  color: "var(--text-bg-highlight)",
+                  backgroundColor: "var(--brand-color)",
                 },
               },
             ],
@@ -58,8 +59,8 @@ export const Default: Story = {
                 style: {
                   fontSize: "12px",
                   fontFamily: "Arial",
-                  color: "White",
-                  backgroundColor: "Green",
+                  color: "var(--drawer-footer-bg)",
+                  backgroundColor: "var(--brand-color)",
                 },
               },
               {
@@ -67,8 +68,8 @@ export const Default: Story = {
                 style: {
                   fontSize: "12px",
                   fontFamily: "Arial",
-                  color: "white",
-                  backgroundColor: "red",
+                  color: "var(--brand-color)",
+                  backgroundColor: "var(--text-bg-highlight)",
                 },
               },
             ],

package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.tsx

@@ -9,19 +9,13 @@ interface ExcelSheetBarProps {
     sheetNames: string[];
   };
   handleSheetChange: (name: string, index: number) => void;
-  contextMenu: (e: React.MouseEvent, name: string, index: number) => void;
-  addSheet: () => void;
   selectedSheet: { name: string };
-  contextSelect: (e: React.MouseEvent) => void;
 }
 
 const ExcelSheetBar: React.FC<ExcelSheetBarProps> = ({
   fileDetails,
   handleSheetChange,
-  contextMenu,
-  addSheet,
   selectedSheet,
-  contextSelect,
 }) => {
   const [activeTabId, setActiveTabId] = useState<string>('0');
 
@@ -34,10 +28,6 @@ const ExcelSheetBar: React.FC<ExcelSheetBarProps> = ({
           name === selectedSheet.name ? 'active font-bold' : ''
         }`}
         onClick={() => handleSheetChange(name, index)}
-        onContextMenu={(e) => {
-          contextMenu(e, name, index);
-          contextSelect(e);
-        }}
       >
         {name}
       </div>
@@ -57,7 +47,6 @@ const ExcelSheetBar: React.FC<ExcelSheetBarProps> = ({
                 name="plus_icon"
                 height={20}
                 width={20}
-                onClick={addSheet}
               />
             </Tooltip>
           </Col>