pixel-react 1.1.8 → 1.2.0

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

@@ -0,0 +1,257 @@
+import { PointRange } from "./point-range";
+import * as Point from "./point";
+import * as Matrix from "./matrix";
+
+/** Selection from a spreadsheet */
+export abstract class Selection {
+  /** Get concrete range of the selection in the given data */
+  abstract toRange(data: Matrix.Matrix<unknown>): PointRange | null;
+
+  /** Normalize the selection according to the given data */
+  abstract normalizeTo(data: Matrix.Matrix<unknown>): this;
+
+  /** Determines whether the given row is entirely selected in given selection */
+  abstract hasEntireRow(row: number): boolean;
+
+  /** Determines whether the given column is entirely selected in given selection */
+  abstract hasEntireColumn(column: number): boolean;
+
+  /** Get the number of selected points according to given data */
+  abstract size(data: Matrix.Matrix<unknown>): number;
+
+  /** Determines whether the given point is within the selection */
+  abstract has(data: Matrix.Matrix<unknown>, point: Point.Point): boolean;
+
+  /** Determines whether the given selection is equal to this selection */
+  abstract equals(selection: Selection): boolean;
+}
+
+/** Selection of no cells */
+export class EmptySelection extends Selection {
+  // @ts-ignore
+  toRange(data: Matrix.Matrix<unknown>): PointRange | null {
+    return null;
+  }
+  normalizeTo(_: Matrix.Matrix<unknown>): this {
+    return this;
+  }
+  hasEntireRow(): boolean {
+    return false;
+  }
+  hasEntireColumn(): boolean {
+    return false;
+  }
+  size(): number {
+    return 0;
+  }
+  has(): boolean {
+    return false;
+  }
+  equals(selection: Selection): boolean {
+    return selection instanceof EmptySelection;
+  }
+}
+
+/** Selection of a range of cells */
+export class RangeSelection extends Selection {
+  constructor(public range: PointRange) {
+    super();
+  }
+
+  toRange(_: Matrix.Matrix<unknown>): PointRange | null {
+    return this.range;
+  }
+
+  normalizeTo(data: Matrix.Matrix<unknown>): this {
+    const dataRange = getMatrixRange(data);
+    const nextSelection = new RangeSelection(this.range.mask(dataRange));
+    // @ts-expect-error
+    return nextSelection;
+  }
+
+  hasEntireRow(): boolean {
+    return false;
+  }
+
+  hasEntireColumn(): boolean {
+    return false;
+  }
+
+  size(data: Matrix.Matrix<unknown>): number {
+    const range = this.toRange(data);
+    return range ? range.size() : 0;
+  }
+
+  has(data: Matrix.Matrix<unknown>, point: Point.Point): boolean {
+    const range = this.toRange(data);
+    return range !== null && range.has(point);
+  }
+
+  equals(selection: Selection): boolean {
+    return (
+      selection instanceof RangeSelection && this.range.equals(selection.range)
+    );
+  }
+}
+
+/** Selection of an entire part of the spreadsheet */
+export abstract class EntireSelection extends Selection {}
+
+/** Selection of the entire worksheet */
+export class EntireWorksheetSelection extends EntireSelection {
+  toRange(data: Matrix.Matrix<unknown>): PointRange {
+    return getMatrixRange(data);
+  }
+
+  normalizeTo(): this {
+    return this;
+  }
+
+  hasEntireColumn(): boolean {
+    return true;
+  }
+
+  hasEntireRow(): boolean {
+    return true;
+  }
+
+  size(data: Matrix.Matrix<unknown>): number {
+    return Matrix.getColumnsCount(data) * Matrix.getRowsCount(data);
+  }
+
+  has(): boolean {
+    return true;
+  }
+
+  equals(selection: Selection): boolean {
+    return selection instanceof EntireWorksheetSelection;
+  }
+}
+
+/** Selection of an entire axis in the spreadsheet */
+export abstract class EntireAxisSelection extends EntireSelection {
+  /** Selection start index, integer */
+  readonly start: number;
+  /** Selection end index, integer */
+  readonly end: number;
+
+  /**
+   * @param start - row index where the selection starts, integer
+   * @param end - row index where the selection ends, integer
+   * @throws {@link InvalidIndexError}
+   */
+  constructor(start: number, end: number) {
+    if (!isIndex(start)) {
+      throw new InvalidIndexError("start");
+    }
+    if (!isIndex(end)) {
+      throw new InvalidIndexError("end");
+    }
+    super();
+    this.start = Math.min(start, end);
+    this.end = Math.max(start, end);
+  }
+
+  equals(selection: Selection): boolean {
+    return (
+      selection instanceof EntireAxisSelection &&
+      this.constructor === selection.constructor &&
+      this.start === selection.start &&
+      this.end === selection.end
+    );
+  }
+}
+
+/** Selection of entire rows in the spreadsheet */
+export class EntireRowsSelection extends EntireAxisSelection {
+  toRange(data: Matrix.Matrix<unknown>): PointRange {
+    const max = Matrix.maxPoint(data);
+    return new PointRange(
+      { row: this.start, column: 0 },
+      { row: this.end, column: max.column }
+    );
+  }
+
+  normalizeTo(data: Matrix.Matrix<unknown>): this {
+    const count = Matrix.getRowsCount(data);
+    const nextSelection = new EntireRowsSelection(
+      Math.max(this.start, 0),
+      Math.min(this.end, count - 1)
+    );
+    // @ts-expect-error
+    return nextSelection;
+  }
+
+  hasEntireRow(row: number): boolean {
+    return row >= this.start && row <= this.end;
+  }
+
+  hasEntireColumn(): boolean {
+    return false;
+  }
+
+  size(data: Matrix.Matrix<unknown>): number {
+    const rows = this.end - this.start + 1;
+    return rows * Matrix.getColumnsCount(data);
+  }
+
+  has(_: Matrix.Matrix<unknown>, point: Point.Point): boolean {
+    return point.row >= this.start && point.row <= this.end;
+  }
+}
+
+/** Selection of entire columns in the spreadsheet */
+export class EntireColumnsSelection extends EntireAxisSelection {
+  toRange(data: Matrix.Matrix<unknown>): PointRange {
+    const max = Matrix.maxPoint(data);
+    return new PointRange(
+      { row: 0, column: this.start },
+      { row: max.row, column: this.end }
+    );
+  }
+
+  normalizeTo(data: Matrix.Matrix<unknown>): this {
+    const count = Matrix.getColumnsCount(data);
+    const nextSelection = new EntireColumnsSelection(
+      Math.max(this.start, 0),
+      Math.min(this.end, count - 1)
+    );
+    // @ts-expect-error
+    return nextSelection;
+  }
+
+  hasEntireRow(): boolean {
+    return false;
+  }
+
+  hasEntireColumn(column: number): boolean {
+    return column >= this.start && column <= this.end;
+  }
+
+  size(data: Matrix.Matrix<unknown>): number {
+    const columns = this.end - this.start + 1;
+    return columns * Matrix.getRowsCount(data);
+  }
+
+  has(_: Matrix.Matrix<unknown>, point: Point.Point): boolean {
+    return point.column >= this.start && point.column <= this.end;
+  }
+}
+
+/** Get the point range of given matrix */
+export function getMatrixRange(data: Matrix.Matrix<unknown>): PointRange {
+  const maxPoint = Matrix.maxPoint(data);
+  return new PointRange(Point.ORIGIN, maxPoint);
+}
+
+/** Determines whether the given value is a valid index */
+export function isIndex(value: number): boolean {
+  return Number.isInteger(value) && value >= 0;
+}
+
+/** Error thrown when passing a non-index value where an index value is expected */
+export class InvalidIndexError extends Error {
+  constructor(name: string) {
+    super(`${name} is not a valid index. It must be 0 or a positive integer`);
+  }
+}

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

@@ -0,0 +1,269 @@
+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
+export type CellBase<Value = any> = {
+  /** Whether the cell should not be editable */
+  readOnly?: boolean;
+  /** Class to be given for the cell element */
+  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
+  /** 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.
+ */
+export type CellDescriptor<Cell extends CellBase> = {
+  /** The cell's data */
+  data: Cell | undefined;
+} & Point;
+
+/** The spreadsheet's write mode */
+export type Mode = "view" | "edit";
+
+/** Dimensions of an element */
+export type Dimensions = {
+  /** The element's width in pixels */
+  width: number;
+  /** The element's height in pixels */
+  height: number;
+  /** The distance of the element from it's container top border in pixels */
+  top: number;
+  /** The distance of the element from it's container left border in pixels */
+  left: number;
+};
+
+export type StoreState<Cell extends CellBase = CellBase> = {
+  model: Model<Cell>;
+  selected: Selection;
+  copied: PointRange | null;
+  hasPasted: boolean;
+  cut: boolean;
+  active: Point | null;
+  mode: Mode;
+  rowDimensions: Record<number, Pick<Dimensions, "height" | "top"> | undefined>;
+  columnDimensions: Record<
+    number,
+    Pick<Dimensions, "width" | "left"> | undefined
+  >;
+  dragging: boolean;
+  lastChanged: Point | null;
+  lastCommit: null | CellChange<Cell>[];
+};
+
+export type CellChange<Cell extends CellBase = CellBase> = {
+  prevCell: Cell | null;
+  nextCell: Cell | null;
+};
+
+/** Type of Spreadsheet Cell component props */
+export type CellComponentProps<Cell extends CellBase = CellBase> = {
+  /** The row of the cell */
+  row: number;
+  /** The column of the cell */
+  column: number;
+  /** The DataViewer component to be used by the cell */
+  DataViewer: DataViewerComponent<Cell>;
+  /** Whether the cell is selected */
+  selected: boolean;
+  /** Whether the cell is active */
+  active: boolean;
+  /** Whether the cell is copied */
+  copied: boolean;
+  /** Whether the user is dragging */
+  dragging: boolean;
+  /** The mode of the cell */
+  mode: Mode;
+  /** The data of the cell */
+  data: Cell | undefined;
+  /** The evaluated data of the cell */
+  evaluatedData: Cell | undefined;
+  /** Select the cell at the given point */
+  select: (point: Point) => void;
+  /** Activate the cell at the given point */
+  activate: (point: Point) => void;
+  /** Set the dimensions of the cell at the given point with the given dimensions */
+  setCellDimensions: (point: Point, dimensions: Dimensions) => void;
+  /** Set data of the cell */
+  setCellData: (cell: Cell) => void;
+};
+
+/** Type of the Spreadsheet Cell component */
+export type CellComponent<Cell extends CellBase = CellBase> =
+  React.ComponentType<CellComponentProps<Cell>>;
+
+type DataComponentProps<Cell extends CellBase> = {
+  /** The rendered cell by the component */
+  cell: Cell | undefined;
+} & Point;
+
+/** Type of the Spreadsheet DataViewer component props */
+export type DataViewerProps<Cell extends CellBase = CellBase> =
+  DataComponentProps<Cell> & {
+    /** Set data of the cell */
+    setCellData: (cell: Cell) => void;
+    evaluatedCell: Cell | undefined;
+  };
+
+/** Type of the Spreadsheet DataViewer component */
+export type DataViewerComponent<Cell extends CellBase = CellBase> =
+  React.ComponentType<DataViewerProps<Cell>>;
+
+/** Type of the Spreadsheet DataEditor component props */
+export type DataEditorProps<Cell extends CellBase = CellBase> =
+  DataComponentProps<Cell> & {
+    /** Callback to be called when the cell's value is changed */
+    onChange: (cell: Cell) => void;
+    /** Callback to be called when edit mode should be exited */
+    exitEditMode: () => void;
+  };
+
+/** Type of the Spreadsheet DataEditor component */
+export type DataEditorComponent<Cell extends CellBase = CellBase> =
+  React.ComponentType<DataEditorProps<Cell>>;
+
+/** Type of the Spreadsheet Table component props */
+export type TableProps = React.PropsWithChildren<{
+  /** Number of columns the table should render */
+  columns: number;
+  /** Whether column indicators are hidden */
+  hideColumnIndicators?: boolean | null;
+}>;
+
+/** Type of the Spreadsheet Table component */
+export type TableComponent = React.ComponentType<TableProps>;
+
+/** Type of the Spreadsheet Row component props */
+export type RowProps = React.PropsWithChildren<{
+  /** The row index of the table */
+  row: number;
+}>;
+
+/** Type of the Row component */
+export type RowComponent = React.ComponentType<RowProps>;
+
+/** Type of the Spreadsheet HeaderRow component props */
+export type HeaderRowProps = React.PropsWithChildren<{}>;
+
+/** Type of the HeaderRow component */
+export type HeaderRowComponent = React.ComponentType<HeaderRowProps>;
+
+/** Type of the Spreadsheet RowIndicator component props */
+export type RowIndicatorProps = {
+  /** The row the indicator indicates */
+  row: number;
+  /** A custom label for the indicator as provided in rowLabels */
+  label?: React.ReactNode | null;
+  /** Whether the entire row is selected */
+  selected: boolean;
+  /** Callback to be called when the row is selected */
+  onSelect: (row: number, extend: boolean) => void;
+};
+
+/** Type of the RowIndicator component */
+export type RowIndicatorComponent = React.ComponentType<RowIndicatorProps>;
+
+/** Type of the Spreadsheet ColumnIndicator component props */
+export type ColumnIndicatorProps = {
+  /** The column the indicator indicates */
+  column: number;
+  /** A custom label for the indicator as provided in columnLabels */
+  label?: React.ReactNode | null;
+  /** Whether the entire column in selected */
+  selected: boolean;
+  /** Whether the entire column in Fixed */
+  fixed?: boolean;
+  /** Callback to be called when the column is selected */
+  onSelect: (column: number, extend: boolean) => void;
+};
+
+/** Type of the ColumnIndicator component */
+export type ColumnIndicatorComponent =
+  React.ComponentType<ColumnIndicatorProps>;
+
+/** Type of the Spreadsheet CornerIndicator component props */
+export type CornerIndicatorProps = {
+  /** Whether the entire table is selected */
+  selected: boolean;
+  /** Callback to select the entire table */
+  onSelect: () => void;
+};
+
+/** Type of the CornerIndicator component */
+export type CornerIndicatorComponent =
+  React.ComponentType<CornerIndicatorProps>;
+
+export type CommitChanges<Cell extends CellBase = CellBase> = Array<{
+  prevCell: Cell | null;
+  nextCell: Cell | null;
+}>;
+
+export type CreateFormulaParser = (data: Matrix<CellBase>) => FormulaParser;

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

@@ -0,0 +1,58 @@
+declare module "fast-formula-parser" {
+  export type CellCoord = {
+    row: number;
+    col: number;
+  };
+  export type CellRef = CellCoord & {
+    sheet: string;
+  };
+  export type RangeRef = {
+    from: CellRef;
+    to: CellRef;
+    sheet: string;
+  };
+  export type BaseValue = number | string | boolean;
+  export type Value = BaseValue | BaseValue[];
+  export type FormulaParserConfig = {
+    functions?: object;
+    onCell?: (ref: CellRef) => Value;
+    onRange?: (range: RangeRef) => Value[];
+    onVariable?: (name: string, sheetName: string) => CellRef | RangeRef;
+  };
+
+  export class FormulaError extends Error {
+    /**
+     * @param error - error code, i.e. #NUM!
+     * @param msg - detailed error message
+     * @param details - additional details
+     */
+    constructor(error: string, msg?: string, details?: object | Error);
+
+    /** Return true if two errors are same */
+    equals(error: Error): boolean;
+
+    /** 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!";
+  }
+
+  export default class FormulaParser {
+    constructor(config: FormulaParserConfig);
+    parse(
+      inputText: string,
+      position: CellRef,
+      allowReturnArray: boolean = false
+    ): Value | FormulaError;
+  }
+
+  export class DepParser {
+    parse(formula: string, position: CellRef): Array<CellRef | RangeRef>;
+  }
+}

package/src/components/ExcelFile/ExcelFile/Excel/use-dispatch.ts

@@ -0,0 +1,8 @@
+import { useContextSelector } from "use-context-selector";
+import context, { Dispatch } from "./context";
+
+function useDispatch(): Dispatch {
+  return useContextSelector(context, ([, dispatch]) => dispatch);
+}
+
+export default useDispatch;

package/src/components/ExcelFile/ExcelFile/Excel/use-selector.ts

@@ -0,0 +1,9 @@
+import { useContextSelector } from "use-context-selector";
+import context from "./context";
+import * as Types from "./types";
+
+function useSelector<T>(selector: (state: Types.StoreState) => T): T {
+  return useContextSelector(context, ([state]) => selector(state));
+}
+
+export default useSelector;