pixel-react 1.5.5 → 1.5.6

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

@@ -34,7 +34,8 @@ export function applyBoldToCells(
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontWeight: 'bold',
+          fontWeight:
+            currentCell.style?.fontWeight !== 'bold' ? 'bold' : 'normal',
         },
       };
 
@@ -69,7 +70,8 @@ export function applyItalicToCells(
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontStyle: 'italic',
+          fontStyle:
+            currentCell.style?.fontStyle !== 'italic' ? 'italic' : 'normal',
         },
       };
 
@@ -188,13 +190,19 @@ export function applyBorderToCells(
         case 'border-all-sides':
           updatedCell.style = {
             ...currentCell.style,
-            border: `2px solid ${color}`,
+            borderRight: `2px solid ${color}`,
+            borderLeft: `2px solid ${color}`,
+            borderTop: `2px solid ${color}`,
+            borderBottom: `2px solid ${color}`,
           };
           break;
         case 'border-none':
           updatedCell.style = {
             ...currentCell.style,
-            border: `1px solid var(--toggle-strip-color)`,
+            borderRight: `1px solid var(--toggle-strip-color)`,
+            borderLeft: `1px solid var(--toggle-strip-color)`,
+            borderTop: `1px solid var(--toggle-strip-color)`,
+            borderBottom: `1px solid var(--toggle-strip-color)`,
           };
           break;
         case 'border-right':
@@ -274,6 +282,10 @@ export function applyUnderlineToCells(
   value: string,
   active: boolean
 ): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
   const { start, end } = selectedRange;
 
   let updatedData = currentData;
@@ -377,6 +389,10 @@ export function applyBackgroundColorToCells(
   selectedRange: PointRange | null,
   backgroundColor: string
 ): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
   if (selectedRange) {
     const { start, end } = selectedRange;
 
@@ -415,6 +431,26 @@ export function applyBackgroundColorToCells(
   return currentData;
 }
 
+export function applyFormatePainter(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  activePoint: Point.Point | null
+): React.CSSProperties | undefined {
+  if (!activePoint) {
+    return undefined;
+  }
+
+  const { row, column } = activePoint;
+  let updatedData = { ...currentData };
+
+  const currentCell = Matrix.get({ row, column }, updatedData);
+
+  if (currentCell && currentCell.style) {
+    return currentCell.style;
+  }
+
+  return undefined;
+}
+
 export function edit(state: Types.StoreState): Types.StoreState {
   if (isActiveReadOnly(state)) {
     return state;
@@ -593,7 +629,6 @@ export function getKeyDownHandler(
 ): KeyDownHandler | undefined {
   const { key } = event;
   let handlers;
-  // Order matters
   if (state.mode === 'edit') {
     if (event.shiftKey) {
       handlers = editShiftKeyDownHandlers;

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

@@ -67,6 +67,7 @@ export type StoreState<Cell extends CellBase = CellBase> = {
   lastCommit: null | CellChange<Cell>[];
   selectedRow: null | number;
   selectedColumn: null | number;
+  formattedStyle: { open: boolean; style: undefined | React.CSSProperties };
 };
 
 export type CellChange<Cell extends CellBase = CellBase> = {
@@ -122,6 +123,7 @@ 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;
   };
 
@@ -250,4 +252,4 @@ export type CommitChanges<Cell extends CellBase = CellBase> = Array<{
   nextCell: Cell | null;
 }>;
 
-export type CreateFormulaParser = (data: Matrix<CellBase>) =>void;
+export type CreateFormulaParser = (data: Matrix<CellBase>) => void;

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

@@ -30,91 +30,91 @@ export const Default: Story = {
     excelData: {
       sheets: [
         {
-          sheetName: "Sheet1",
+          sheetName: 'Sheet1',
           data: [
             [
               {
-                value: "A1",
+                value: 'A1',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--text-bg-highlight)",
-                  backgroundColor: "var(--tooltip-bg-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--drawer-footer-bg)',
+                  backgroundColor: 'var(--text-bg-highlight)',
                 },
               },
               {
-                value: "SUM(A1+B1)",
+                value: 'SUM(A1+B1)',
                 // isFormula:true,
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--text-bg-highlight)",
-                  backgroundColor: "var(--brand-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--text-bg-highlight)',
+                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
                 },
               },
             ],
             [
               {
-                value: "A2",
+                value: 'A2',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--drawer-footer-bg)",
-                  backgroundColor: "var(--brand-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--drawer-footer-bg)',
+                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
                 },
               },
               {
-                value: "B2",
+                value: 'B2',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--brand-color)",
-                  backgroundColor: "var(--text-bg-highlight)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--ff-card-passed-status-bg-color)',
+                  backgroundColor: 'var(--text-bg-highlight)',
                 },
               },
             ],
           ],
         },
         {
-          sheetName: "Sheet2",
+          sheetName: 'Sheet2',
           data: [
             [
               {
-                value: "Thanesh",
+                value: 'Thaneshwaran',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--text-bg-highlight)",
-                  backgroundColor: "var(--tooltip-bg-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--text-bg-highlight)',
+                  backgroundColor: 'var(--tooltip-bg-color)',
                 },
               },
               {
-                value: "waran",
+                value: 'waran',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--text-bg-highlight)",
-                  backgroundColor: "var(--brand-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--text-bg-highlight)',
+                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
                 },
               },
             ],
             [
               {
-                value: "Sheet",
+                value: 'Sheet',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--drawer-footer-bg)",
-                  backgroundColor: "var(--brand-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--drawer-footer-bg)',
+                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
                 },
               },
               {
-                value: "Two",
+                value: 'Two',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--brand-color)",
-                  backgroundColor: "var(--text-bg-highlight)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--ff-card-passed-status-bg-color)',
+                  backgroundColor: 'var(--text-bg-highlight)',
                 },
               },
             ],
@@ -154,5 +154,4 @@ export const Default: Story = {
   },
 };
 
-
 export default meta;

package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss

@@ -1,36 +1,96 @@
-.excel-row {
-  height: 42px;
+.ff-excel-toolbar {
+  display: flex;
+  height: 32px;
   align-items: center;
 
-  .excel-toolbar {
+  .ff-excel-toolbar-divider {
+    width: 1px;
+    height: 24px;
+    background-color: var(--excel-toolbar-divider);
+    margin: 0 24px;
+    border-radius: 1px;
+    z-index: 1000;
+  }
+
+  .ff-excel-toolbar-font {
     display: flex;
-    align-items: center;
-    justify-content: start;
-    width: 100%;
-    gap: 10px;
+    gap: 8px;
+    justify-content: space-between;
+    .ff-excel-toolbar-font-family {
+      width: 120px;
+    }
+    .ff-excel-toolbar-font-size {
+      width: 56px;
+    }
   }
 
-  .excel-toolbar-center {
+  .ff-excel-toolbar-text {
+    width: 100px;
+    height: 24px;
     display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    width: 100%;
-    gap: 10px;
-    .menu-option {
+    gap: 8px;
+    justify-content: space-between;
+
+    .ff-excel-toolbar-icon-underline {
       display: flex;
-      flex-direction: column;
       align-items: center;
-      justify-content: center;
-      cursor: pointer;
     }
   }
 
-  .excel-toolbar-menu {
+  .ff-excel-toolbar-icon {
+    width: 88px;
+    height: 24px;
     display: flex;
-    align-items: center;
+    gap: 8px;
+    justify-content: space-between;
+
+    .ff-excel-toolbar-icon-color {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &:hover {
+        border-radius: 4px;
+        background-color: var(--icon-hover-color);
+      }
+      .ff-icon-dark & {
+        background-color: var(--brand-color);
+
+        &.ff-icon-click:hover {
+          background-color: var(--primary-button-text-color);
+          svg path {
+            fill: var(--brand-color);
+          }
+        }
+      }
+      &:hover {
+        border-radius: 4px;
+        background-color: var(--icon-hover-color);
+      }
+      .ff-icon-dark & {
+        background-color: var(--brand-color);
+
+        &.ff-icon-click:hover {
+          background-color: var(--primary-button-text-color);
+          svg path {
+            fill: var(--brand-color);
+          }
+        }
+      }
+    }
   }
 
-  .excel-toolbar-hide {
-    display: none;
+  .ff-excel-toolbar-menu {
+    display: flex;
+    align-items: center;
+    width: 36px;
+    height: 24px;
+    .ff-excel-toolbar-menu-option {
+      display: flex;
+      align-items: center;
+    }
   }
 }