pixel-react 1.2.0 → 1.2.2

package/src/components/ExcelFile/ExcelFile/Excel/use-dispatch.ts

@@ -1,5 +1,5 @@
-import { useContextSelector } from "use-context-selector";
-import context, { Dispatch } from "./context";
+import { useContextSelector } from 'use-context-selector';
+import context, { Dispatch } from './context';
 
 function useDispatch(): Dispatch {
   return useContextSelector(context, ([, dispatch]) => dispatch);

package/src/components/ExcelFile/ExcelFile/Excel/use-selector.ts

@@ -1,6 +1,6 @@
-import { useContextSelector } from "use-context-selector";
-import context from "./context";
-import * as Types from "./types";
+import { useContextSelector } from 'use-context-selector';
+import context from './context';
+import * as Types from './types';
 
 function useSelector<T>(selector: (state: Types.StoreState) => T): T {
   return useContextSelector(context, ([state]) => selector(state));

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.scss

@@ -1,6 +1,3 @@
-@import '../../../assets/styles/colors';
-@import '../../../assets/styles/rsfonts';
-
 .excel-page {
   width: 100%;
   display: flex;

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>
       )}