pixel-react-excel-sheet 1.0.2 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react-excel-sheet",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

@@ -520,6 +520,23 @@ function applyUnderlineToCells(
   return updatedData;
 }
 
+function isValidHexColor(color: string): boolean {
+  if (color.length !== 6) {
+    return false;
+  }
+
+  const hexChars = '0123456789ABCDEFabcdef';
+  for (let i = 1; i < color.length; i++) {
+    console.log(typeof color[i]);
+
+    if (!hexChars.includes(color[i] as string)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 function applyColorToCells(
   currentData: Matrix.Matrix<Types.CellBase<any>>,
   selectedRange: PointRange | null,
@@ -533,9 +550,9 @@ function applyColorToCells(
 
   let updatedData = currentData;
 
-  const isHexColor = (color: string) => /^#[0-9A-Fa-f]{6}$/i.test(color);
+  const isHex = isValidHexColor(color);
 
-  const applyColor = isHexColor(color) ? `#${color}` : color;
+  const applyColor = isHex ? `#${color}` : color;
 
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
@@ -570,6 +587,10 @@ function applyBackgroundColorToCells(
 
     let updatedData = currentData;
 
+    const isHex = isValidHexColor(backgroundColor);
+
+    const applyColor = isHex ? `#${backgroundColor}` : backgroundColor;
+
     for (let row = start.row; row <= end.row; row++) {
       for (let col = start.column; col <= end.column; col++) {
         const currentCell = Matrix.get({ row, column: col }, updatedData);
@@ -578,13 +599,11 @@ function applyBackgroundColorToCells(
           continue;
         }
 
-        let HexCode = backgroundColor.length === 6;
-
         const updatedCell = {
           ...currentCell,
           style: {
             ...currentCell.style,
-            backgroundColor: HexCode ? `#${backgroundColor}` : backgroundColor,
+            backgroundColor: applyColor,
           },
         };
 

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

@@ -67,7 +67,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   };
 
   const getTextColor = (color: string) => {
-    setColorPicker((prev) => ({ ...prev, color }));
+    setColorPicker((prev) => ({ ...prev, color: color }));
   };
 
   const getBackgroundColor = (color: string) => {
@@ -76,6 +76,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
 
   useEffect(() => {
     let timeGap = setTimeout(() => {
+      console.log(colorContainer.color);
+      
       setColor(data, colorContainer.color);
     }, 0);
     return () => {