pixel-react-excel-sheet 1.0.38 → 1.0.39

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,10 +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>>;
-  contextClick:(event: React.MouseEvent) => void
-  
 };
 
 /** Type of the Spreadsheet Cell component */
@@ -136,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: () => {},
   },
 };

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -123,7 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       value: 'double_border',
       label: 'Double Underline',
       icon: 'double_underline',
-    }
+    },
   ];
 
   const fontFamily = [
@@ -259,7 +259,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Text Left'}>
           <Icon
             variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={cellStyle.textAlign === 'left' ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'left')}
             name="text_align_left"
@@ -268,7 +268,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Text Center'}>
           <Icon
             variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={cellStyle.textAlign === 'center' ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'center')}
             name="text_align_center"
@@ -278,7 +278,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Text Right'}>
           <Icon
             variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={cellStyle.textAlign === 'right' ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'right')}
             name="text_align_right"
@@ -290,7 +290,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Bold'}>
           <Icon
             variant={styleBackend.bold ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={styleBackend.bold ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => onBold(data)}
             name="bold"
@@ -298,8 +298,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         </Tooltip>
         <Tooltip placement="top" title={'Italic'}>
           <Icon
-            hoverEffect
             variant={styleBackend.italic ? 'dark' : 'light'}
+            hoverEffect={styleBackend.italic ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => onItalic(data)}
             name="italic"
@@ -311,7 +311,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               variant={
                 cellStyle.textDecoration === underLine ? 'dark' : 'light'
               }
-              hoverEffect
+              hoverEffect={
+                cellStyle.textDecoration === underLine ? false : true
+              }
               disabled={toolbar === 'disable'}
               onClick={() => setUnderlineType(data, underLine, true)}
               name={getUnderlineIcon()}
@@ -324,7 +326,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
                 iconSize={12}
                 options={underlineTypeIcon}
                 tooltipPlacement="top"
-                variant="light"
                 onOptionClick={(e) => {
                   let selectedValue = e.value as string;
                   setUnderlineType(data, selectedValue, true);
@@ -340,7 +341,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Format Painter'}>
           <Icon
             variant={formattedStyle ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={formattedStyle ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => {
               setFormatePainter(data);
@@ -403,7 +404,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
                 zIndex={1000}
                 options={borderTypeIcon}
                 tooltipPlacement="top"
-                variant="light"
                 onOptionClick={(e) => {
                   let selectedValue = e.value as string;
                   setBorderType(data, selectedValue, 'black');
@@ -415,7 +415,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         </Tooltip>
       </div>
 
-  
       {/* <div className="ff-excel-toolbar-divider"></div>  TODO */}
       {/* <div className="ff-excel-toolbar-menu"> 
         <Tooltip placement="top" title={'Formula'}>

package/src/components/Excel/Types.ts

@@ -43,7 +43,7 @@ type BackendStyle = {
   color: string;
   backgroundColor: string;
   borderColor: string;
-  underline:string;
+  underline: string;
   border: {
     top: string;
     bottom: string;
@@ -79,20 +79,6 @@ interface ContextOption {
   value: ContextAction[];
 }
 
-interface ContextMenuState {
-  /** Whether the context menu is visible */
-  visible: boolean;
-
-  /** X-coordinate position for the context menu */
-  x: number;
-
-  /** Y-coordinate position for the context menu */
-  y: number;
-
-  /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
-  type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
-}
-
 interface SelectedCell {
   /** The row index of the selected cell */
   row: number;
@@ -112,6 +98,22 @@ interface ColorContainer {
   borderColor: string;
 }
 
+interface ContextMenuState {
+  open: boolean;
+  position: {
+    x: number;
+    y: number;
+  };
+  options: optionsType[];
+}
+
+interface optionsType {
+  label: string;
+  value: string;
+  iconName: string;
+  action: () => void;
+}
+
 interface SelectedValue {
   /** The value inside the selected cell */
   value: string;