pixel-react 1.1.8 → 1.2.0

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

@@ -0,0 +1,520 @@
+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';
+
+
+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: {
+      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,
+      },
+    },
+  };
+  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;

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

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExcelFile from './ExcelFile/ExcelFile';
+
+const meta: Meta<typeof ExcelFile> = {
+  title: 'Components/ExcelFile',
+  component: ExcelFile,
+  tags: ['autodocs'],
+  argTypes: {
+    toolbar: {
+      control: { type: 'radio' },
+      options: ['show', 'disable', 'hide'],
+      description: 'Controls whether the toolbar is shown, disabled, or hidden',
+    },
+    excelData: {
+      description: 'The Excel data containing sheets and their content',
+    },
+    contextOption: {
+      description: 'Provide context menu options for actions like right-click',
+    },
+    onSave: {
+      description: 'Callback function to save the Excel data',
+    },
+  },
+};
+
+type Story = StoryObj<typeof ExcelFile>;
+
+export const Default: Story = {
+  args: {
+    excelData: {
+      sheets: [
+        {
+          sheetName: "Sheet1",
+          data: [
+            [
+              {
+                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" },
+                },
+              },
+              {
+                value: "B1",
+                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" },
+                },
+              },
+            ],
+            [
+              {
+                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" },
+                },
+              },
+              {
+                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" },
+                },
+              },
+            ],
+          ],
+        },
+      ],
+    },
+    toolbar: 'show',
+    contextOption: [
+      {
+        name: 'first option',
+        title: 'Custom Option 1: Get Data',
+        action: () => {},
+      },
+      {
+        name: 'second option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'third option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'fourth option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'fifth option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+    ],
+    onSave: () => {},
+  },
+};
+
+
+export default meta;

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

@@ -0,0 +1,16 @@
+@import '../../../assets/styles/colors';
+@import '../../../assets/styles/fonts';
+
+.sheet-bar {
+  background: $white_1;
+  // display: flex;
+  padding: 4px;
+  height: 40px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  align-items: center;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+}