pixel-react 1.2.1 → 1.2.2

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

@@ -1,32 +1,30 @@
 import React, { useState, useRef, useEffect } from 'react';
-// import './ExcelFile.scss';
-// import Spreadsheet from 'react-spreadsheet';
-// import ImportExcelStyles from '../ImportExcelStyles';
-// import ChangeExcelStyles from '../ChangeExcelStyles';
-// import { colors } from '../../../colors/colorConstants';
-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 */
+  excelData: {
+    sheets: WorkSheet[];
+  };
 
-let colors={
-  ff_down_arrow_color: '#acacac',
-  ff_up_arrow_color: '#434db8',
-  ff_input_up_down_arrow_color: '#B2AEAE',
-  white: '#ffffff',
-  black: '#000000',
-  grey_dark: '#727171',
-  light_gray_50: '#F2F2F2',
-  button_red_60: '#C50303',
-};
+  /** Optional: Provide context menu options for actions like right-click */
+  contextOption?: {
+    name: string;
+    title: React.ReactNode;
+    action: () => void;
+  }[];
+
+  /** Controls whether the toolbar is shown, disabled, or hidden */
+  toolbar?: 'show' | 'disable' | 'hide';
+
+  /** Callback function to save the Excel data */
+  onSave?: (excelData?: any) => void;
+}
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
-  toolbar = 'show',
-  contextOption = [],
   onSave = () => {},
 }) => {
   const [fileDetails, setFileDetails] = useState<{
@@ -35,24 +33,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   const EmptyRow: CellBase = {
     value: '',
     style: {
-      name: 'Arial',
-      size: 11,
-      bold: false,
-      italic: false,
-      color: colors.black.replace('#', ''),
-      backgroundColor: colors.white.replace('#', ''),
-      borderColor: colors.light_gray_50.replace('#', ''),
-      border: {
-        top: 'NONE',
-        bottom: 'NONE',
-        left: 'NONE',
-        right: 'NONE',
-      },
-      alignment: {
-        horizontal: 'GENERAL',
-        vertical: 'BOTTOM',
-        wrapText: false,
-      },
+      color: 'var(--text-color)',
+      backgroundColor: 'var(--drawer-footer-bg)',
+      borderColor: 'var(--toggle-strip-color)',
     },
   };
   const [selectedSheet, setSelectedSheet] = useState<{
@@ -62,61 +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 [selectedValue, setSelectedValue] = useState<SelectedValue>({
-  //   value: '',
-  //   row: 0,
-  //   column: 0,
-  //   alphaCol: '',
-  //   style: {
-  //     name: 'Arial',
-  //     size: 11,
-  //     bold: false,
-  //     italic: false,
-  //     color: colors.black.replace('#', ''),
-  //     backgroundColor: colors.white.replace('#', ''),
-  //     borderColor: colors.light_gray_50.replace('#', ''),
-  //     border: {
-  //       top: 'NONE',
-  //       bottom: 'NONE',
-  //       left: 'NONE',
-  //       right: 'NONE',
-  //     },
-  //     alignment: {
-  //       horizontal: 'GENERAL',
-  //       vertical: 'BOTTOM',
-  //       wrapText: false,
-  //     },
-  //   },
-  //   sheet: '',
-  // });
-  const [selectedCell, setSelectedCell] = useState<
-    { row: number; column: number }[]
-  >([]);
-  // const [formatePainter, setFormatePainter] = useState<{
-  //   style: CellStyle | null;
-  //   active: boolean;
-  // }>({
-  //   style: null,
-  //   active: false,
-  // });
   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;
     }
@@ -127,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) => {
@@ -149,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,
@@ -201,315 +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] ?? [];  // Fallback to an empty array if undefined
-    // let insertRow: CellBase[] = [];
-  
-    // insertRow = Array.from({ length: updateSheet[0]?.length ?? 0 }, () => EmptyRow); // Fallback to 0 if the length is undefined
-  
-    // updateSheet.splice(selectedValue.row - 1, 0, insertRow); // Add the new row
-  
-    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

@@ -36,29 +36,20 @@ export const Default: Story = {
               {
                 value: "A1",
                 style: {
-                  name: "Arial",
-                  size: 12,
-                  bold: true,
                   fontSize: "12px",
-                  italic: false,
                   fontFamily: "Arial",
-                  color: "red",
-                  backgroundColor: "white",
-                  border: { top: "1px solid black", bottom: "1px solid black", left: "1px solid black", right: "1px solid black" },
+                  color: "var(--text-bg-highlight)",
+                  backgroundColor: "var(--tooltip-bg-color)",
                 },
               },
               {
-                value: "B1",
+                value: "SUM(A1+B1)",
+                // isFormula:true,
                 style: {
-                  name: "Arial",
-                  size: 12,
-                  bold: false,
                   fontSize: "12px",
-                  italic: false,
                   fontFamily: "Arial",
-                  color: "black",
-                  backgroundColor: "white",
-                  border: { top: "1px solid black", bottom: "1px solid black", left: "1px solid black", right: "1px solid black" },
+                  color: "var(--text-bg-highlight)",
+                  backgroundColor: "var(--brand-color)",
                 },
               },
             ],
@@ -66,29 +57,19 @@ export const Default: Story = {
               {
                 value: "A2",
                 style: {
-                  name: "Arial",
-                  size: 12,
-                  bold: true,
                   fontSize: "12px",
-                  italic: false,
                   fontFamily: "Arial",
-                  color: "black",
-                  backgroundColor: "white",
-                  border: { top: "1px solid black", bottom: "1px solid black", left: "1px solid black", right: "1px solid black" },
+                  color: "var(--drawer-footer-bg)",
+                  backgroundColor: "var(--brand-color)",
                 },
               },
               {
                 value: "B2",
                 style: {
-                  name: "Arial",
-                  size: 12,
-                  bold: false,
                   fontSize: "12px",
-                  italic: false,
                   fontFamily: "Arial",
-                  color: "black",
-                  backgroundColor: "white",
-                  border: { top: "1px solid black", bottom: "1px solid black", left: "1px solid black", right: "1px solid black" },
+                  color: "var(--brand-color)",
+                  backgroundColor: "var(--text-bg-highlight)",
                 },
               },
             ],

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

@@ -6,22 +6,16 @@ import { Col, Container, Row } from '../../GridLayout/GridLayout';
 
 interface ExcelSheetBarProps {
   fileDetails: {
-    sheetNames: string[]; // List of sheet names
+    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>

package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.scss

@@ -1,6 +1,3 @@
-@import '../../../assets/styles/colors';
-@import '../../../assets/styles/fonts';
-
 .excel-toolbar {
   display: flex;
   align-items: center;