pixel-react 1.2.1 → 1.2.2

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

@@ -1,4 +1,4 @@
-import * as Point from "./point";
+import * as Point from './point';
 
 /** A two-dimensional array of given type T in rows and columns */
 export type Matrix<T> = Array<Array<T | undefined>>;
@@ -65,7 +65,7 @@ export function set<T>(
   if (nextFirstRow.length <= point.column) {
     nextFirstRow.length = point.column + 1; // Extend the first row if needed
   }
-  
+
   // Set the modified first row back into the matrix
   nextMatrix[0] = nextFirstRow;
 
@@ -82,10 +82,8 @@ export function set<T>(
   return nextMatrix;
 }
 
-
 /** Like Matrix.set() but mutates the matrix */
 
-
 export function mutableSet<T>(
   point: Point.Point,
   value: T,
@@ -114,8 +112,6 @@ export function mutableSet<T>(
   row[point.column] = value;
 }
 
-
-
 /** Removes the coordinate of matrix */
 // export function unset<T>(point: Point.Point, matrix: Matrix<T>): Matrix<T> {
 //   if (!has(point, matrix)) {
@@ -155,7 +151,6 @@ export function unset<T>(point: Point.Point, matrix: Matrix<T>): Matrix<T> {
   return nextMatrix;
 }
 
-
 /** Creates an array of values by running each element in collection thru iteratee. */
 export function map<T, T2>(
   func: (value: T | undefined, point: Point.Point) => T2,
@@ -187,34 +182,33 @@ export function* entries<T>(
 
 export function join(
   matrix: Matrix<unknown>,
-  horizontalSeparator = "\t",
-  verticalSeparator = "\n"
+  horizontalSeparator = '\t',
+  verticalSeparator = '\n'
 ): string {
-  let joined = "";
+  let joined = '';
   const { rows, columns } = getSize(matrix);
-  
+
   for (let row = 0; row < rows; row++) {
     if (row) {
       joined += verticalSeparator;
     }
-    
+
     for (let column = 0; column < columns; column++) {
       if (column) {
         joined += horizontalSeparator;
       }
-      
+
       // Ensure matrix[row] exists and matrix[row][column] is not undefined
       const cellValue = matrix[row]?.[column];
-      
+
       // If cellValue is undefined, you can use a fallback value like an empty string
-      joined += cellValue !== undefined ? String(cellValue) : "";
+      joined += cellValue !== undefined ? String(cellValue) : '';
     }
   }
-  
+
   return joined;
 }
 
-
 /**
  * Parses a CSV separated by a horizontalSeparator and verticalSeparator into a
  * Matrix using a transform function
@@ -222,19 +216,19 @@ export function join(
 export function split<T>(
   csv: string,
   transform: (value: string) => T,
-  horizontalSeparator = "\t",
+  horizontalSeparator = '\t',
   verticalSeparator: string | RegExp = /\r\n|\n|\r/
 ): Matrix<T> {
   // Temporarily replace line breaks inside quotes
   const replaced = csv.replace(/"([^"]*?)"/g, (_, p1) => {
-    return p1.replace(/\n/g, "\\n");
+    return p1.replace(/\n/g, '\\n');
   });
   return replaced.split(verticalSeparator).map((row) =>
     row
       .split(horizontalSeparator)
       .map((line) => {
         // Restore original line breaks in each line
-        return line.replace(/\\n/g, "\n");
+        return line.replace(/\\n/g, '\n');
       })
       .map(transform)
   );
@@ -246,7 +240,7 @@ export function has(point: Point.Point, matrix: Matrix<unknown>): boolean {
   if (!firstRow) {
     return false; // If first row is undefined, return false
   }
-  
+
   // Perform validation checks
   return (
     point.row >= 0 &&
@@ -258,7 +252,6 @@ export function has(point: Point.Point, matrix: Matrix<unknown>): boolean {
   );
 }
 
-
 /** Counts of the rows and column in a matrix */
 export type Size = {
   /** Count of the rows in the matrix */
@@ -372,7 +365,9 @@ export function toArray<T1, T2>(
       for (let column = 0; column < currentRow.length; column++) {
         const value = currentRow[column];
         // If transform is provided, apply it; otherwise, use the value as is
-        array.push(transform ? transform(value, { row, column }) : value as T2);
+        array.push(
+          transform ? transform(value, { row, column }) : (value as T2)
+        );
       }
     }
   }
@@ -380,7 +375,6 @@ export function toArray<T1, T2>(
   return array;
 }
 
-
 /** Returns the maximum point in the matrix */
 export function maxPoint(matrix: Matrix<unknown>): Point.Point {
   const size = getSize(matrix);

package/src/components/ExcelFile/ExcelFile/Excel/point-range.ts

@@ -2,7 +2,7 @@
  * Interface for ranges between two points
  */
 
-import * as Point from "./point";
+import * as Point from './point';
 
 /** Range between two points. Creates a normalized range between two given points */
 export class PointRange {

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

@@ -1,7 +1,7 @@
-import { PointRange } from "./point-range";
-import * as Matrix from "./matrix";
-import * as Types from "./types";
-import * as Point from "./point";
+import { PointRange } from './point-range';
+import * as Matrix from './matrix';
+import * as Types from './types';
+import * as Point from './point';
 import {
   Selection,
   EmptySelection,
@@ -9,14 +9,14 @@ import {
   EntireColumnsSelection,
   EntireRowsSelection,
   EntireWorksheetSelection,
-} from "./selection";
-import { isActive } from "./util";
-import * as Actions from "./actions";
-import { Model, updateCellValue, createFormulaParser } from "./engine";
+} from './selection';
+import { isActive } from './util';
+import * as Actions from './actions';
+import { Model, updateCellValue, createFormulaParser } from './engine';
 
 export const INITIAL_STATE: Types.StoreState = {
   active: null,
-  mode: "view",
+  mode: 'view',
   rowDimensions: {},
   columnDimensions: {},
   lastChanged: null,
@@ -34,6 +34,83 @@ export default function reducer(
   action: Actions.Action
 ): Types.StoreState {
   switch (action.type) {
+    case Actions.BOLD: {
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyBoldToCells(
+        state.model.data,
+        selectedRange as PointRange
+      );
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
+    case Actions.ITALIC: {
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyItalicToCells(
+        state.model.data,
+        selectedRange as PointRange
+      );
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
+    case Actions.UNDERLINE: {
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyUnderlineToCells(
+        state.model.data,
+        selectedRange as PointRange
+      );
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+    case Actions.COLOR: {
+      const { value } = action.payload;
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyColorToCells(
+        state.model.data,
+        selectedRange as PointRange,
+        value
+      );
+
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
+    case Actions.BACKGROUND_COLOR: {
+      const { value } = action.payload;
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyBackgroundColorToCells(
+        state.model.data,
+        selectedRange as PointRange,
+        value
+      );
+
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
+    case Actions.FORMATE_PAINTER: {
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyUnderlineToCells(
+        state.model.data,
+        selectedRange as PointRange
+      );
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
     case Actions.SET_DATA: {
       const { data } = action.payload;
       const nextActive =
@@ -64,7 +141,7 @@ export default function reducer(
             ? new EntireRowsSelection(active.row, row)
             : new EntireRowsSelection(row, row),
         active: extend && active ? active : { ...Point.ORIGIN, row },
-        mode: "view",
+        mode: 'view',
       };
     }
     case Actions.SELECT_ENTIRE_COLUMN: {
@@ -78,7 +155,7 @@ export default function reducer(
             ? new EntireColumnsSelection(active.column, column)
             : new EntireColumnsSelection(column, column),
         active: extend && active ? active : { ...Point.ORIGIN, column },
-        mode: "view",
+        mode: 'view',
       };
     }
     case Actions.SELECT_ENTIRE_WORKSHEET: {
@@ -86,7 +163,7 @@ export default function reducer(
         ...state,
         selected: new EntireWorksheetSelection(),
         active: Point.ORIGIN,
-        mode: "view",
+        mode: 'view',
       };
     }
     case Actions.SET_SELECTION: {
@@ -100,7 +177,7 @@ export default function reducer(
         ...state,
         selected: selection,
         active: active || null,
-        mode: "view",
+        mode: 'view',
       };
     }
     case Actions.SELECT: {
@@ -109,7 +186,7 @@ export default function reducer(
         return {
           ...state,
           selected: new RangeSelection(new PointRange(point, state.active)),
-          mode: "view",
+          mode: 'view',
         };
       }
       return state;
@@ -120,7 +197,7 @@ export default function reducer(
         ...state,
         selected: new RangeSelection(new PointRange(point, point)),
         active: point,
-        mode: isActive(state.active, point) ? "edit" : "view",
+        mode: isActive(state.active, point) ? 'edit' : 'view',
       };
     }
     case Actions.SET_CELL_DATA: {
@@ -174,7 +251,7 @@ export default function reducer(
     case Actions.PASTE: {
       const { data: text } = action.payload;
       const { active } = state;
-      
+
       if (!active) {
         return state;
       }
@@ -189,7 +266,7 @@ export default function reducer(
           state.cut && state.copied
             ? Matrix.unset(state.copied.start, state.model.data)
             : state.model.data;
-        const commit: Types.StoreState["lastCommit"] = [];
+        const commit: Types.StoreState['lastCommit'] = [];
         for (const point of selectedRange || []) {
           const currentCell = Matrix.get(point, state.model.data);
           commit.push({
@@ -205,7 +282,7 @@ export default function reducer(
           copied: null,
           cut: false,
           hasPasted: true,
-          mode: "view",
+          mode: 'view',
           lastCommit: commit,
         };
       }
@@ -217,8 +294,8 @@ export default function reducer(
       const paddedData = Matrix.pad(state.model.data, requiredSize);
 
       let acc: {
-        data: Types.StoreState["model"]["data"];
-        commit: Types.StoreState["lastCommit"];
+        data: Types.StoreState['model']['data'];
+        commit: Types.StoreState['lastCommit'];
       } = { data: paddedData, commit: [] };
       for (const [point, cell] of Matrix.entries(copied)) {
         let commit = acc.commit || [];
@@ -275,7 +352,7 @@ export default function reducer(
         copied: null,
         cut: false,
         hasPasted: true,
-        mode: "view",
+        mode: 'view',
         lastCommit: acc.commit,
       };
     }
@@ -301,7 +378,7 @@ export default function reducer(
       if (isActiveReadOnly(state) || event.metaKey) {
         return state;
       }
-      if (state.mode === "view" && state.active) {
+      if (state.mode === 'view' && state.active) {
         const selectedRange = state.selected.toRange(state.model.data);
         if (selectedRange?.size() === 1) {
           return edit(clear(state));
@@ -334,7 +411,7 @@ export default function reducer(
     }
 
     default:
-      throw new Error("Unknown action");
+      throw new Error('Unknown action');
   }
 }
 
@@ -350,11 +427,204 @@ export default function reducer(
 
 // // Shared reducers
 
+function applyBoldToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange
+): Matrix.Matrix<Types.CellBase<any>> {
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  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);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      const updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          fontWeight: 'bold',
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+    }
+  }
+
+  return updatedData;
+}
+
+function applyItalicToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange
+): Matrix.Matrix<Types.CellBase<any>> {
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  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);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      const updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          fontStyle: 'italic',
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+    }
+  }
+
+  return updatedData;
+}
+
+function applyUnderlineToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange
+): Matrix.Matrix<Types.CellBase<any>> {
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  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);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      const updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          textDecoration: 'underline',
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+    }
+  }
+
+  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,
+  color: string
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
+  const { start, end } = selectedRange;
+
+  let updatedData = currentData;
+
+  const isHex = isValidHexColor(color);
+
+  const applyColor = isHex ? `#${color}` : color;
+
+  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);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      const updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style,
+          color: applyColor,
+        },
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+    }
+  }
+
+  return updatedData;
+}
+
+function applyBackgroundColorToCells(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange | null,
+  backgroundColor: string
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (selectedRange) {
+    const { start, end } = selectedRange;
+
+    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);
+
+        if (!currentCell) {
+          continue;
+        }
+
+        const updatedCell = {
+          ...currentCell,
+          style: {
+            ...currentCell.style,
+            backgroundColor: applyColor,
+          },
+        };
+
+        updatedData = Matrix.set(
+          { row, column: col },
+          updatedCell,
+          updatedData
+        );
+      }
+    }
+
+    return updatedData;
+  }
+  return currentData;
+}
+
 function edit(state: Types.StoreState): Types.StoreState {
   if (isActiveReadOnly(state)) {
     return state;
   }
-  return { ...state, mode: "edit" };
+  return { ...state, mode: 'edit' };
 }
 
 function clear(state: Types.StoreState): Types.StoreState {
@@ -398,7 +668,7 @@ function blur(state: Types.StoreState): Types.StoreState {
 }
 
 function view(state: Types.StoreState): Types.StoreState {
-  return { ...state, mode: "view" };
+  return { ...state, mode: 'view' };
 }
 
 function commit(changes: Types.CommitChanges): Partial<Types.StoreState> {
@@ -421,13 +691,13 @@ export const go =
       column: (state.active.column + columnDelta) % size.columns,
     };
     if (!Matrix.has(nextActive, state.model.data)) {
-      return { ...state, mode: "view" };
+      return { ...state, mode: 'view' };
     }
     return {
       ...state,
       active: nextActive,
       selected: new RangeSelection(new PointRange(nextActive, nextActive)),
-      mode: "view",
+      mode: 'view',
     };
   };
 
@@ -439,7 +709,7 @@ export type KeyDownHandler = (
 ) => Types.StoreState | void;
 
 type KeyDownHandlers = {
-  [K in string]: KeyDownHandler|undefined;
+  [K in string]: KeyDownHandler | undefined;
 };
 
 const keyDownHandlers: KeyDownHandlers = {
@@ -465,10 +735,10 @@ const editShiftKeyDownHandlers: KeyDownHandlers = {
 };
 
 export enum Direction {
-  Left = "Left",
-  Right = "Right",
-  Top = "Top",
-  Bottom = "Bottom",
+  Left = 'Left',
+  Right = 'Right',
+  Top = 'Top',
+  Bottom = 'Bottom',
 }
 
 const shiftKeyDownHandlers: KeyDownHandlers = {
@@ -521,7 +791,7 @@ export function getKeyDownHandler(
   const { key } = event;
   let handlers;
   // Order matters
-  if (state.mode === "edit") {
+  if (state.mode === 'edit') {
     if (event.shiftKey) {
       handlers = editShiftKeyDownHandlers;
     } else {
@@ -598,18 +868,18 @@ export function modifyRangeSelectionEdge(
   edge: Direction
 ): RangeSelection {
   const field =
-    edge === Direction.Left || edge === Direction.Right ? "column" : "row";
+    edge === Direction.Left || edge === Direction.Right ? 'column' : 'row';
 
   const key =
-    edge === Direction.Left || edge === Direction.Top ? "start" : "end";
-  const delta = key === "start" ? -1 : 1;
+    edge === Direction.Left || edge === Direction.Top ? 'start' : 'end';
+  const delta = key === 'start' ? -1 : 1;
 
   const edgeOffsets = rangeSelection.range.has({
     ...active,
     [field]: active[field] + delta * -1,
   });
 
-  const keyToModify = edgeOffsets ? (key === "start" ? "end" : "start") : key;
+  const keyToModify = edgeOffsets ? (key === 'start' ? 'end' : 'start') : key;
 
   const nextRange = new PointRange(
     rangeSelection.range.start,
@@ -633,8 +903,8 @@ export function modifyEntireRowsSelection(
     return selection;
   }
   const delta = edge === Direction.Top ? -1 : 1;
-  const property = edge === Direction.Top ? "start" : "end";
-  const oppositeProperty = property === "start" ? "end" : "start";
+  const property = edge === Direction.Top ? 'start' : 'end';
+  const oppositeProperty = property === 'start' ? 'end' : 'start';
   const newSelectionData = { ...selection };
   if (
     edge === Direction.Top
@@ -662,8 +932,8 @@ export function modifyEntireColumnsSelection(
     return selection;
   }
   const delta = edge === Direction.Left ? -1 : 1;
-  const property = edge === Direction.Left ? "start" : "end";
-  const oppositeProperty = property === "start" ? "end" : "start";
+  const property = edge === Direction.Left ? 'start' : 'end';
+  const oppositeProperty = property === 'start' ? 'end' : 'start';
   const newSelectionData = { ...selection };
   if (
     edge === Direction.Left