pixel-react-excel-sheet 1.0.37 → 1.0.39

package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx

@@ -22,7 +22,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   activate,
   setCellDimensions,
   setCellData,
-  setContextMenu,
 }): React.ReactElement => {
   const rootRef = React.useRef<HTMLTableCellElement | null>(null);
   const point = React.useMemo(
@@ -33,23 +32,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [row, column]
   );
 
-  let options = [
-    {
-      label: 'Get data from Header',
-      value: 'Get data from Header',
-      iconName: 'success',
-      disable: false,
-      action: () => {},
-    },
-    {
-      label: 'Get Cell Value',
-      value: 'Get Cell Value',
-      iconName: 'success',
-      disable: false,
-      action: () => {},
-    },
-  ];
-
   const handleMouseDown = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
       if (mode === 'view') {
@@ -75,24 +57,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [setCellDimensions, select, dragging, point]
   );
 
-  const contextClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-      console.log("Asdasd");
-      
-      select(point);
-      setContextMenu({
-        open: true,
-        position: {
-          x: event.pageX - 50,
-          y: event.pageY - 260,
-        },
-        options: options,
-      });
-    },
-    [setContextMenu, select, point]
-  );
-
   React.useEffect(() => {
     const root = rootRef.current;
     if (selected && root) {
@@ -117,12 +81,10 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
       })}
       onMouseEnter={handleMouseOver}
       onMouseDown={handleMouseDown}
-      onContextMenu={contextClick}
       tabIndex={0}
     >
       <DataViewer
         row={row}
-        setContextMenu={setContextMenu}
         column={column}
         cell={data}
         evaluatedCell={evaluatedData}

package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx

@@ -10,54 +10,15 @@ export const FALSE_TEXT = 'FALSE';
 const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
   cell,
   evaluatedCell,
-  setContextMenu,//Todo
 }: Types.DataViewerProps<Cell>): React.ReactElement => {
-
   const value = getValue(cell, evaluatedCell);
 
-  const options = [
-    {
-      label: 'Dynamic Cell One',
-      value: 'Dynamic Cell One',
-      iconName: 'plus_icon',
-      action: () => {
-      },
-      disable: false,
-    },
-    {
-      label: 'Dynamic Cell Two',
-      value: 'Dynamic Cell Two',
-      iconName: 'plus_icon',
-      action: () => {
-      },
-      disable: false,
-    },
-  ];
-  
-  const contextClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-
-      setContextMenu({
-        open: true,
-        position: {
-          x: event.pageX - 50,
-          y: event.pageY - 260,
-        },
-        options: options,
-      });
-    },
-    [ setContextMenu]
-  );
-
   return typeof value === 'boolean' ? (
-    <span
-      className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
+    <span className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
       {convertBooleanToText(value)}
     </span>
   ) : (
     <span
-    onContextMenu={contextClick}
       className={classNames('ff-spreadsheet-data-viewer', {
         'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
       })}

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -51,7 +51,7 @@
 
   .ff-spreadsheet-active-cell {
     position: absolute;
-    border: 1px solid var(--outline-color);
+    border: 2px solid var(--outline-color);
     box-sizing: border-box;
     z-index: 100;
   }
@@ -188,7 +188,7 @@
 
   .ff-spreadsheet-floating-rect--selected {
     background: var(--outline-background-color);
-    border: 1px var(--outline-color) solid;
+    border: 2px var(--outline-color) solid;
   }
 
   .ff-spreadsheet-floating-rect--dragging {
@@ -196,6 +196,6 @@
   }
 
   .ff-spreadsheet-floating-rect--copied {
-    border: 1px var(--outline-color) dashed;
+    border: 2px var(--outline-color) dashed;
   }
 }

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx

@@ -101,6 +101,15 @@ export type Props<CellType extends Types.CellBase> = {
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
   /** Set your dynamic sheet Height*/
   sheetHeight: string;
+  contextOption?: {
+    open: boolean;
+    options: {
+      label: string;
+      value: string;
+      iconName: string;
+      action: () => void;
+    }[];
+  };
 };
 
 /**
@@ -123,6 +132,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onSelect = () => {},
     onActivate = () => {},
     onEvaluatedDataChange = () => {},
+    contextOption,
   } = props;
   type State = Types.StoreState<CellType>;
 
@@ -440,7 +450,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 key={columnNumber}
                 row={rowNumber}
                 column={columnNumber}
-                setContextMenu={props.setContextMenu}
                 // @ts-ignore
                 DataViewer={DataViewer}
               />
@@ -468,6 +477,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const activeCellNode = React.useMemo(
     () => (
       <ActiveCell
+        contextOption={contextOption}
+        setContextMenu={props.setContextMenu}
         // @ts-ignore
         DataEditor={DataEditor}
       />

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -193,8 +193,6 @@ export function applyBorderToCells(
   let updatedData = currentData;
 
   const { start, end } = selectedRange;
-  const startRow = start.row;
-  const startCol = start.column;
 
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
@@ -204,47 +202,17 @@ export function applyBorderToCells(
         continue;
       }
 
-      const adjacentCell = (
-        row: number,
-        col: number,
-        borderType: string,
-        borderColor: string
-      ) => {
-        const adjacentCell = Matrix.get({ row: row, column: col }, updatedData);
-        if (adjacentCell) {
-          let updatedCell = { ...adjacentCell };
-          updatedCell.style = {
-            ...adjacentCell.style,
-            [borderType]: `1px solid ${borderColor}`,
-          };
-          console.log(updatedCell);
-          updatedData = Matrix.set(
-            { row: row, column: col },
-            updatedCell,
-            updatedData
-          );
-        }
-      };
-
       let updatedCell = { ...currentCell };
 
       switch (value) {
         case 'border-all-sides':
           updatedCell.style = {
             ...currentCell.style,
-            borderRight: `1px solid ${color}`,
-            borderLeft: `1px solid ${color}`,
-            borderTop: `1px solid ${color}`,
-            borderBottom: `1px solid ${color}`,
+            borderRight: `2px solid ${color}`,
+            borderLeft: `2px solid ${color}`,
+            borderTop: `2px solid ${color}`,
+            borderBottom: `2px solid ${color}`,
           };
-
-          if (row === startRow) {
-            adjacentCell(row - 1, col, 'borderBottom', color);
-          }
-          if (col === startCol) {
-            adjacentCell(row, col - 1, 'borderRight', color);
-          }
-
           break;
         case 'border-none':
           updatedCell.style = {
@@ -254,64 +222,30 @@ export function applyBorderToCells(
             borderTop: `1px solid var(--excel-sheet-border)`,
             borderBottom: `1px solid var(--excel-sheet-border)`,
           };
-
-          if (row === startRow) {
-            adjacentCell(
-              row - 1,
-              col,
-              'borderBottom',
-              'var(--excel-sheet-border)'
-            );
-          }
-          if (col === startCol) {
-            adjacentCell(
-              row,
-              col - 1,
-              'borderRight',
-              'var(--excel-sheet-border)'
-            );
-          }
           break;
-
         case 'border-right':
           updatedCell.style = {
             ...currentCell.style,
-            borderRight: `1px solid ${color}`,
+            borderRight: `2px solid ${color}`,
           };
           break;
 
         case 'border-left':
           updatedCell.style = {
             ...currentCell.style,
-            borderLeft: `1px solid ${color}`,
+            borderLeft: `2px solid ${color}`,
           };
-          if (col === startCol) {
-            adjacentCell(
-              row,
-              col - 1,
-              'borderRight',
-              'var(--excel-sheet-border)'
-            );
-          }
           break;
         case 'border-top':
           updatedCell.style = {
             ...currentCell.style,
-            borderTop: `1px solid ${color}`,
+            borderTop: `2px solid ${color}`,
           };
-          if (row === startRow) {
-            adjacentCell(
-              row - 1,
-              col,
-              'borderBottom',
-              'var(--excel-sheet-border)'
-            );
-          }
           break;
         case 'border-bottom':
           updatedCell.style = {
             ...currentCell.style,
-            borderBottom: `1px solid ${color}`,
+            borderBottom: `2px solid ${color}`,
           };
           break;
         default:

package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts

@@ -116,8 +116,6 @@ export type CellComponentProps<Cell extends CellBase = CellBase> = {
   setCellDimensions: (point: Point, dimensions: Dimensions) => void;
   /** Set data of the cell */
   setCellData: (cell: Cell) => void;
-
-  setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
 };
 
 /** Type of the Spreadsheet Cell component */
@@ -134,7 +132,6 @@ export type DataViewerProps<Cell extends CellBase = CellBase> =
   DataComponentProps<Cell> & {
     /** Set data of the cell */
     setCellData: (cell: Cell) => void;
-    setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
     evaluatedCell: Cell | undefined;
   };
 

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

@@ -27,143 +27,130 @@ type Story = StoryObj<typeof ExcelFile>;
 
 export const Default: Story = {
   args: {
-    excelData: {
-      sheets: [
-        {
-          sheetName: 'fireflink',
-          data: [
-            [
-              {
-                value: 'Test Sample Data 1',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: true,
-                  italic: false,
-                  color: 'ffffff', // Sample data from backend without #
-                  backgroundColor: '434db8', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+    excelData: [
+      {
+        sheetName: 'fireflink',
+        data: [
+          [
+            {
+              value: 'Test Sample Data 1',
+              style: {
+                name: 'Arial',
+                size: 11,
+                bold: true,
+                italic: false,
+                color: 'ffffff', // Sample data from backend without #
+                backgroundColor: '434db8', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-              {
-                value: 'Test Data 2',
-                style: {
-                  name: 'Arial',
-                  size: 12,
-                  bold: true,
-                  italic: true,
-                  color: 'EB5B00', // Sample data from backend without #
-                  backgroundColor: '88C273', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+            {
+              value: 'Test Data 2',
+              style: {
+                name: 'Arial',
+                size: 12,
+                bold: true,
+                italic: true,
+                color: 'EB5B00', // Sample data from backend without #
+                backgroundColor: '88C273', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-            ],
-            [
-              {
-                value: 'Test Data 3',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '000000', // Sample data from backend without #
-                  backgroundColor: 'EB5B00', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+          ],
+          [
+            {
+              value: 'Test Data 3',
+              style: {
+                name: 'Arial',
+                size: 11,
+                bold: false,
+                italic: false,
+                color: '000000', // Sample data from backend without #
+                backgroundColor: 'EB5B00', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-              {
-                value: 'Test Sample Data 4',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '3D0301', // Sample data from backend without #
-                  backgroundColor: 'C6E7FF', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'THIN',
-                    bottom: 'THIN',
-                    left: 'THIN',
-                    right: 'THIN',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+            {
+              value: 'Test Sample Data 4',
+              style: {
+                name: 'Arial',
+                size: 11,
+                bold: false,
+                italic: false,
+                color: '3D0301', // Sample data from backend without #
+                backgroundColor: 'C6E7FF', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'THIN',
+                  bottom: 'THIN',
+                  left: 'THIN',
+                  right: 'THIN',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-            ],
+            },
           ],
+        ],
+      },
+    ],
+    toolbar: 'show',
+    contextOption: {
+      open: true,
+      options: [
+        {
+          label: 'Get data from Header',
+          value: 'Get data from Header',
+          iconName: 'success',
+          action: () => {},
+        },
+        {
+          label: 'Get Cell Value',
+          value: 'Get Cell Value',
+          iconName: 'success',
+          action: () => {},
         },
       ],
     },
-    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: () => {},
-      },
-    ],
-    heightType:"page",
-    contextHeight:-220,
-    contextWidth:-180,
-    sheetHeight:"300px",
+    contextHeightPositioning: -220,
+    contextWidthPositioning: -180,
+    sheetHeight: '300px',
     onSave: () => {},
   },
 };