pixel-react 1.2.0 → 1.2.2

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

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

@@ -1,6 +1,6 @@
-import { PointRange } from "./point-range";
-import * as Point from "./point";
-import * as Matrix from "./matrix";
+import { PointRange } from './point-range';
+import * as Point from './point';
+import * as Matrix from './matrix';
 
 /** Selection from a spreadsheet */
 export abstract class Selection {
@@ -142,10 +142,10 @@ export abstract class EntireAxisSelection extends EntireSelection {
    */
   constructor(start: number, end: number) {
     if (!isIndex(start)) {
-      throw new InvalidIndexError("start");
+      throw new InvalidIndexError('start');
     }
     if (!isIndex(end)) {
-      throw new InvalidIndexError("end");
+      throw new InvalidIndexError('end');
     }
     super();
     this.start = Math.min(start, end);

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import FormulaParser from "fast-formula-parser";
-import { Point } from "./point";
-import { Selection } from "./selection";
-import { Model } from "./engine";
-import { PointRange } from "./point-range";
-import { Matrix } from "./matrix";
+import * as React from 'react';
+import FormulaParser from 'fast-formula-parser';
+import { Point } from './point';
+import { Selection } from './selection';
+import { Model } from './engine';
+import { PointRange } from './point-range';
+import { Matrix } from './matrix';
 
 /** The base type of cell data in Spreadsheet */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15,68 +15,16 @@ export type CellBase<Value = any> = {
   className?: string;
   /** The value of the cell */
   value: Value;
-  // style?: React.CSSProperties; // or any other relevant type
-  style?: CellStyle;
-  type?: boolean; // or any other relevant type
+  // style?: React.CSSProperties;
+  style?: React.CSSProperties | undefined;
+  //type? to check the style is altered or not
+  type?: boolean;
   /** Custom component to render when the cell is edited, if not defined would default to the component defined for the Spreadsheet */
   DataEditor?: DataEditorComponent<CellBase<Value>>;
   /** Custom component to render when the cell is viewed, if not defined would default to the component defined for the Spreadsheet */
   DataViewer?: DataViewerComponent<CellBase<Value>>;
 };
 
-interface CellStyle {
-  /** Font name for the cell text */
-  name?: string;
-
-  /** Font size of the cell text */
-  size?: number;
-
-  position?:string;
-
-
-  /** Whether the text is bold */
-  bold?: boolean;
-
-  /** Whether the text is italicized */
-  italic?: boolean;
-
-  /** Text color in the cell (hex code) */
-  color?: string;
-
-  /** Background color of the cell (hex code) */
-  backgroundColor?: string;
-
-  /** Border color of the cell (hex code) */
-  borderColor?: string;
-
-  /** Border styles for each side of the cell */
-  border?: {
-    /** Border style for the top side of the cell */
-    top: string;
-
-    /** Border style for the bottom side of the cell */
-    bottom: string;
-
-    /** Border style for the left side of the cell */
-    left: string;
-
-    /** Border style for the right side of the cell */
-    right: string;
-  };
-
-  /** Text alignment and wrapping properties */
-  alignment?: {
-    /** Horizontal text alignment ('left', 'center', or 'right') */
-    horizontal: string;
-
-    /** Vertical text alignment ('top', 'middle', or 'bottom') */
-    vertical: string;
-
-    /** Whether the text is wrapped within the cell */
-    wrapText: boolean;
-  };
-}
-
 /**
  * A cell with it's coordinates
  * @deprecated the component does not use cell descriptors anymore. Instead it passes cell point and cell value explicitly.
@@ -87,7 +35,7 @@ export type CellDescriptor<Cell extends CellBase> = {
 } & Point;
 
 /** The spreadsheet's write mode */
-export type Mode = "view" | "edit";
+export type Mode = 'view' | 'edit';
 
 /** Dimensions of an element */
 export type Dimensions = {
@@ -109,10 +57,10 @@ export type StoreState<Cell extends CellBase = CellBase> = {
   cut: boolean;
   active: Point | null;
   mode: Mode;
-  rowDimensions: Record<number, Pick<Dimensions, "height" | "top"> | undefined>;
+  rowDimensions: Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
   columnDimensions: Record<
     number,
-    Pick<Dimensions, "width" | "left"> | undefined
+    Pick<Dimensions, 'width' | 'left'> | undefined
   >;
   dragging: boolean;
   lastChanged: Point | null;

package/src/components/ExcelFile/ExcelFile/Excel/typings/fast-formula-parser.d.ts

@@ -1,4 +1,4 @@
-declare module "fast-formula-parser" {
+declare module 'fast-formula-parser' {
   export type CellCoord = {
     row: number;
     col: number;
@@ -34,13 +34,13 @@ declare module "fast-formula-parser" {
     /** Return the formula error in string representation. */
     toString(): string;
 
-    static DIV0 = "#DIV/0!";
-    static NA = "#N/A";
-    static NAME = "#NAME?";
-    static NULL = "#NULL!";
-    static NUM = "#NUM!";
-    static REF = "#REF!";
-    static VALUE = "#VALUE!";
+    static DIV0 = '#DIV/0!';
+    static NA = '#N/A';
+    static NAME = '#NAME?';
+    static NULL = '#NULL!';
+    static NUM = '#NUM!';
+    static REF = '#REF!';
+    static VALUE = '#VALUE!';
   }
 
   export default class FormulaParser {