pixel-react-excel-sheet 1.2.0

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

@@ -0,0 +1,173 @@
+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 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 {
+  el.selectionStart = el.selectionEnd = el.value.length;
+}
+
+/**
+ * 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
+ */
+export function range(end: number, start = 0, step = 1): number[] {
+  const array = [];
+  if (Math.sign(end - start) === -1) {
+    for (let element = start; element > end; element -= step) {
+      array.push(element);
+    }
+    return array;
+  }
+  for (let element = start; element < end; element += step) {
+    array.push(element);
+  }
+  return array;
+}
+
+/** Return whether given point is active */
+export function isActive(
+  active: Types.StoreState["active"],
+  point: Point.Point
+): boolean {
+  return Boolean(active && Point.isEqual(point, active));
+}
+
+/** Get the offset values of given element */
+export function getOffsetRect(element: HTMLElement): Types.Dimensions {
+  return {
+    width: element.offsetWidth,
+    height: element.offsetHeight,
+    left: element.offsetLeft,
+    top: element.offsetTop,
+  };
+}
+
+/** Write given data to clipboard with given event */
+export function writeTextToClipboard(
+  event: ClipboardEvent,
+  data: string
+): void {
+  event.clipboardData?.setData(PLAIN_TEXT_MIME, data);
+}
+
+/** Read text from given clipboard event */
+export function readTextFromClipboard(event: ClipboardEvent): string {
+  // @ts-ignore
+  if (window.clipboardData && window.clipboardData.getData) {
+    // @ts-ignore
+    return window.clipboardData.getData("Text");
+  }
+  if (event.clipboardData && event.clipboardData.getData) {
+    return event.clipboardData.getData(PLAIN_TEXT_MIME);
+  }
+  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
+): Types.Dimensions | undefined {
+  const cellRowDimensions = rowDimensions && rowDimensions[point.row];
+  const cellColumnDimensions =
+    columnDimensions && columnDimensions[point.column];
+  return (
+    cellRowDimensions &&
+    cellColumnDimensions && {
+      ...cellRowDimensions,
+      ...cellColumnDimensions,
+    }
+  );
+}
+
+/** Get the dimensions of a range of cells */
+export function getRangeDimensions(
+  rowDimensions: Types.StoreState["rowDimensions"],
+  columnDimensions: Types.StoreState["columnDimensions"],
+  range: PointRange
+): Types.Dimensions | undefined {
+  const startDimensions = getCellDimensions(
+    range.start,
+    rowDimensions,
+    columnDimensions
+  );
+  const endDimensions = getCellDimensions(
+    range.end,
+    rowDimensions,
+    columnDimensions
+  );
+  return (
+    startDimensions &&
+    endDimensions && {
+      width: endDimensions.left + endDimensions.width - startDimensions.left,
+      height: endDimensions.top + endDimensions.height - startDimensions.top,
+      top: startDimensions.top,
+      left: startDimensions.left,
+    }
+  );
+}
+
+/** Get the dimensions of selected */
+export function getSelectedDimensions(
+  rowDimensions: Types.StoreState["rowDimensions"],
+  columnDimensions: Types.StoreState["columnDimensions"],
+  data: Matrix.Matrix<unknown>,
+  selected: Selection
+): Types.Dimensions | undefined {
+  const range = selected.toRange(data);
+  return range
+    ? getRangeDimensions(rowDimensions, columnDimensions, range)
+    : undefined;
+}
+
+/** Get given data as CSV */
+export function getCSV(data: Matrix.Matrix<Types.CellBase>): string {
+  const valueMatrix = Matrix.map((cell) => cell?.value || "", data);
+  return Matrix.join(valueMatrix);
+}
+
+/**
+ * Calculate the rows and columns counts of a spreadsheet
+ * @param data - the spreadsheet's data
+ * @param rowLabels - the spreadsheet's row labels (if defined)
+ * @param columnLabels - the spreadsheet's column labels (if defined)
+ * @returns the rows and columns counts of a spreadsheet
+ */
+export function calculateSpreadsheetSize(
+  data: Matrix.Matrix<unknown>,
+  rowLabels?: string[],
+  columnLabels?: string[]
+): Matrix.Size {
+  const { columns, rows } = Matrix.getSize(data);
+  return {
+    rows: rowLabels ? Math.max(rows, rowLabels.length) : rows,
+    columns: columnLabels ? Math.max(columns, columnLabels.length) : columns,
+  };
+}
+
+/** Should spreadsheet handle clipboard event */
+export function shouldHandleClipboardEvent(
+  root: Element | null,
+  mode: Types.Mode
+): boolean {
+  return root !== null && mode === "view" && isFocusedWithin(root);
+}
+
+export function isFocusedWithin(element: Element): boolean {
+  return element.matches(FOCUS_WITHIN_SELECTOR);
+}
+
+export function hasLineBreaker(value: unknown) {
+  return typeof value === "string" && value.includes("\n");
+}

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

@@ -0,0 +1,27 @@
+@import '../../../assets/styles/colors';
+@import '../../../assets/styles/fonts';
+
+.excel-page {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .excel-book {
+    position: relative;
+    width: 100%;
+    .excel-sheet {
+      overflow: scroll;
+      &::-webkit-scrollbar {
+        height: 8px;
+      }
+    }
+  }
+}
+.menu-list {
+  display: flex;
+  align-items: center;
+  .menu-title {
+    padding-left: 5px;
+  }
+}

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

@@ -0,0 +1,501 @@
+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';
+
+
+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',
+};
+
+const ExcelFile: React.FC<ExcelFileProps> = ({
+  excelData,
+  toolbar = 'show',
+  contextOption = [],
+  onSave = () => {},
+}) => {
+  const [fileDetails, setFileDetails] = useState<{
+    sheetNames: string[];
+  }>({ sheetNames: [] });
+  const EmptyRow: CellBase = {
+    value: '',
+    style: {
+      color: colors.black.replace('#', ''),
+      backgroundColor: colors.white.replace('#', ''),
+      borderColor: colors.light_gray_50.replace('#', ''),
+    },
+  };
+  const [selectedSheet, setSelectedSheet] = useState<{
+    name: string;
+    index: number;
+  }>({ name: 'defaultSheet', index: 0 });
+
+  const [worksheetsData, setWorksheetsData] = useState<{
+    [key: string]: Matrix.Matrix<CellBase>;
+  }>({defaultSheet:[[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',
+  });
+
+
+  let checkVal = (val:any) => {
+    if (val === undefined || val === null) {
+      return null;
+    }
+    return val;
+  };
+  useEffect(() => {
+    const payload = excelData;
+    const sheetNames = payload.sheets.map((e) => e.sheetName);
+    setFileDetails({ sheetNames });
+    if (sheetNames.length > 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);
+
+      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from({ length: maxRows }, () =>
+        Array.from({ length: maxCols }, () => EmptyRow)
+      );
+      json.forEach((row, rowIndex) => {
+        row.forEach((cell, colIndex) => {
+          if (rowIndex < maxRows && colIndex < maxCols) {
+            if (!spreadsheetData[rowIndex]) {
+              spreadsheetData[rowIndex] = [];
+            }
+            spreadsheetData[rowIndex][colIndex] = {
+              value: checkVal(cell.value),
+              style: cell.style,
+              type:true
+            };
+          }
+        });
+      });
+      
+      newWorksheetsData[sheetName] = spreadsheetData;
+    });
+    excelDataCopy.current = newWorksheetsData;
+    setWorksheetsData(newWorksheetsData);
+    const firstSheetName = Object.keys(newWorksheetsData)[0];
+    if (firstSheetName && newWorksheetsData[firstSheetName]!==undefined) {
+      setSelectedSheetData(newWorksheetsData[firstSheetName]);
+    }
+  }, [excelData]);
+  
+  
+  const handleSaveData = () => {
+    setWorksheetsData((prevData) => {
+      let updatedData = { ...prevData };
+      updatedData[selectedSheet.name] = selectedSheetData;
+      return updatedData;
+    });
+
+    const dataToSave = {
+      sheets: fileDetails.sheetNames.map((sheetName) => ({
+        sheetName: sheetName,
+        data: (worksheetsData[sheetName] ?? []).map((row) =>
+          row.map((cell) => ({
+            value: cell?.value,
+            style: cell?.style,
+          }))
+        ),
+      })),
+    };
+    onSave(dataToSave);
+  };
+
+  let handleSave = (e: KeyboardEvent) => {
+    if (e.ctrlKey && e.key === 's') {
+      e.preventDefault();
+      handleSaveData();
+    }
+  };
+  useEffect(() => {
+    document.addEventListener('keydown', handleSave);
+    return () => {
+      document.removeEventListener('keydown', handleSave);
+    };
+  }, [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>
+
+          <ExcelSheetBar
+            selectedSheet={selectedSheet}
+            fileDetails={fileDetails}
+            handleSheetChange={handleSheetChange}
+            contextMenu={sheetContext}
+            contextSelect={contextSelect}
+            addSheet={addSheet}
+          />
+
+          <ContextMenu
+            customContext={contextOption}
+            contextAction={contextAction}
+            contextData={contextData}
+            setContextData={setContextData}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ExcelFile;