pixel-react 1.2.7 → 1.2.8

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

@@ -0,0 +1,758 @@
+import { PointRange } from './point-range';
+import * as Matrix from './matrix';
+import * as Types from './types';
+import * as Point from './point';
+import {
+  Selection,
+  EmptySelection,
+  RangeSelection,
+  EntireColumnsSelection,
+  EntireRowsSelection,
+} from './selection';
+import { Model, createFormulaParser } from './engine';
+
+export function applyBoldToCells(
+    currentData: Matrix.Matrix<Types.CellBase<any>>,
+    selectedRange: PointRange
+  ): Matrix.Matrix<Types.CellBase<any>> {
+    if (!selectedRange) {
+      return currentData;
+    }
+  
+    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;
+  }
+  
+  export function applyItalicToCells(
+    currentData: Matrix.Matrix<Types.CellBase<any>>,
+    selectedRange: PointRange
+  ): Matrix.Matrix<Types.CellBase<any>> {
+    if (!selectedRange) {
+      return currentData;
+    }
+  
+    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;
+  }
+  
+  export function applyFontFamily(
+    currentData: Matrix.Matrix<Types.CellBase<any>>,
+    selectedRange: PointRange,
+    value: string
+  ): Matrix.Matrix<Types.CellBase<any>> {
+    if (!selectedRange) {
+      return currentData;
+    }
+  
+    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;
+        }
+  
+        let updatedCell = {
+          ...currentCell,
+          style: {
+            ...currentCell.style,
+            fontFamily: value,
+          },
+        };
+  
+        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+      }
+    }
+  
+    return updatedData;
+  }
+  
+  export function applyFontSize(
+    currentData: Matrix.Matrix<Types.CellBase<any>>,
+    selectedRange: PointRange,
+    value: string
+  ): Matrix.Matrix<Types.CellBase<any>> {
+    const conversion = Number(value);
+  
+    if (isNaN(conversion)) {
+      return currentData;
+    }
+  
+    const fontSizeInPx = convertPtToPx(conversion);
+  
+    if (!selectedRange) {
+      return currentData;
+    }
+  
+    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;
+        }
+  
+        let updatedCell = {
+          ...currentCell,
+          style: {
+            ...currentCell.style,
+            fontSize: fontSizeInPx,
+          },
+        };
+  
+        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+      }
+    }
+  
+    return updatedData;
+  }
+  
+  export function applyBorderToCells(
+    currentData: Matrix.Matrix<Types.CellBase<any>>,
+    selectedRange: PointRange,
+    value: string,
+    color: string
+  ): Matrix.Matrix<Types.CellBase<any>> {
+    if (!selectedRange) {
+      return currentData;
+    }
+  
+    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;
+        }
+  
+        let updatedCell = { ...currentCell };
+  
+        switch (value) {
+          case 'border-all-sides':
+            updatedCell.style = {
+              ...currentCell.style,
+              border: `2px solid ${color}`,
+            };
+            break;
+          case 'border-none':
+            updatedCell.style = {
+              ...currentCell.style,
+              border: `1px solid var(--toggle-strip-color)`,
+            };
+            break;
+          case 'border-right':
+            updatedCell.style = {
+              ...currentCell.style,
+              borderRight: `2px solid ${color}`,
+            };
+            break;
+          case 'border-left':
+            updatedCell.style = {
+              ...currentCell.style,
+              borderLeft: `2px solid ${color}`,
+            };
+            break;
+          case 'border-top':
+            updatedCell.style = {
+              ...currentCell.style,
+              borderTop: `2px solid ${color}`,
+            };
+            break;
+          case 'border-bottom':
+            updatedCell.style = {
+              ...currentCell.style,
+              borderBottom: `2px solid ${color}`,
+            };
+            break;
+          default:
+            break;
+        }
+  
+        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+      }
+    }
+  
+    return updatedData;
+  }
+  
+  export function applyTextAlign(
+    currentData: Matrix.Matrix<Types.CellBase<any>>,
+    selectedRange: PointRange,
+    value: string
+  ): Matrix.Matrix<Types.CellBase<any>> {
+    if (!selectedRange) {
+      return currentData;
+    }
+  
+    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;
+        }
+  
+        let updatedCell = {
+          ...currentCell,
+          style: {
+            ...currentCell.style,
+            textAlign: value as TextAlign,
+          },
+        };
+  
+        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+      }
+    }
+  
+    return updatedData;
+  }
+  
+  export function applyUnderlineToCells(
+    currentData: Matrix.Matrix<Types.CellBase<any>>,
+    selectedRange: PointRange,
+    value: string,
+    active: boolean
+  ): 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;
+        }
+  
+        let updatedCell;
+        if (!active) {
+          updatedCell = {
+            ...currentCell,
+            style: {
+              ...currentCell.style,
+              textDecoration: 'none',
+              textDecorationStyle: 'none' as TextDecorationStyle,
+            },
+          };
+        } else {
+          updatedCell = {
+            ...currentCell,
+            style: {
+              ...currentCell.style,
+              textDecoration: value === 'double_border' ? 'underline' : value,
+              textDecorationStyle:
+                value === 'double_border'
+                  ? 'double'
+                  : ('none' as TextDecorationStyle),
+            },
+          };
+        }
+  
+        updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+      }
+    }
+  
+    return updatedData;
+  }
+  
+  export function isValidHexColor(color: string): boolean {
+    if (color.length !== 6) {
+      return false;
+    }
+  
+    const hexChars = '0123456789ABCDEFabcdef';
+    for (let i = 1; i < color.length; i++) {
+      if (!hexChars.includes(color[i] as string)) {
+        return false;
+      }
+    }
+  
+    return true;
+  }
+  
+  export 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;
+  }
+  
+  export 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;
+  }
+  
+  export function edit(state: Types.StoreState): Types.StoreState {
+    if (isActiveReadOnly(state)) {
+      return state;
+    }
+    return { ...state, mode: 'edit' };
+  }
+  
+  export function clear(state: Types.StoreState): Types.StoreState {
+    if (!state.active) {
+      return state;
+    }
+  
+    const canClearCell = (cell: Types.CellBase | undefined) =>
+      cell && !cell.readOnly;
+    const clearCell = (cell: Types.CellBase | undefined) => {
+      if (!canClearCell(cell)) {
+        return cell;
+      }
+      return Object.assign({}, cell, { value: undefined });
+    };
+  
+    const selectedRange = state.selected.toRange(state.model.data);
+  
+    const changes: Types.CommitChanges = [];
+    let newData = state.model.data;
+  
+    for (const point of selectedRange || []) {
+      const cell = Matrix.get(point, state.model.data);
+      const clearedCell = clearCell(cell);
+      changes.push({
+        prevCell: cell || null,
+        nextCell: clearedCell || null,
+      });
+      newData = Matrix.set(point, clearedCell, newData);
+    }
+  
+    return {
+      ...state,
+      model: new Model(createFormulaParser, newData),
+      ...commit(changes),
+    };
+  }
+  
+  export function blur(state: Types.StoreState): Types.StoreState {
+    return { ...state, active: null, selected: new EmptySelection() };
+  }
+  
+  export function view(state: Types.StoreState): Types.StoreState {
+    return { ...state, mode: 'view' };
+  }
+  
+  export function commit(changes: Types.CommitChanges): Partial<Types.StoreState> {
+    return { lastCommit: changes };
+  }
+  
+  // Utility
+  
+  export const go =
+    (rowDelta: number, columnDelta: number): KeyDownHandler =>
+    (state) => {
+      if (!state.active) {
+        return;
+      }
+      const size = Matrix.getSize(state.model.data);
+      const newColumn = state.active.column + columnDelta;
+      const shouldWrap = newColumn >= size.columns;
+      const nextActive = {
+        row: state.active.row + rowDelta + (shouldWrap ? 1 : 0),
+        column: (state.active.column + columnDelta) % size.columns,
+      };
+      if (!Matrix.has(nextActive, state.model.data)) {
+        return { ...state, mode: 'view' };
+      }
+      return {
+        ...state,
+        active: nextActive,
+        selected: new RangeSelection(new PointRange(nextActive, nextActive)),
+        mode: 'view',
+      };
+    };
+  
+  function convertPtToPx(pt: number): string {
+    const px = pt * 1.33;
+    return `${Math.round(px)}px`;
+  }
+  
+  // Key Bindings
+  
+  type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
+  
+  type TextAlign = 'left' | 'center' | 'right';
+  
+  export type KeyDownHandler = (
+    state: Types.StoreState,
+    event: React.KeyboardEvent
+  ) => Types.StoreState | void;
+  
+  type KeyDownHandlers = {
+    [K in string]: KeyDownHandler | undefined;
+  };
+  
+  const keyDownHandlers: KeyDownHandlers = {
+    ArrowUp: go(-1, 0),
+    ArrowDown: go(+1, 0),
+    ArrowLeft: go(0, -1),
+    ArrowRight: go(0, +1),
+    Tab: go(0, +1),
+    Enter: edit,
+    Backspace: clear,
+    Delete: clear,
+    Escape: blur,
+  };
+  
+  const editKeyDownHandlers: KeyDownHandlers = {
+    Escape: view,
+    Tab: keyDownHandlers.Tab,
+    Enter: keyDownHandlers.ArrowDown,
+  };
+  
+  const editShiftKeyDownHandlers: KeyDownHandlers = {
+    Tab: go(0, -1),
+  };
+  
+  export enum Direction {
+    Left = 'Left',
+    Right = 'Right',
+    Top = 'Top',
+    Bottom = 'Bottom',
+  }
+  
+  const shiftKeyDownHandlers: KeyDownHandlers = {
+    ArrowUp: (state) => ({
+      ...state,
+      selected: modifyEdge(
+        state.selected,
+        state.active,
+        state.model.data,
+        Direction.Top
+      ),
+    }),
+    ArrowDown: (state) => ({
+      ...state,
+      selected: modifyEdge(
+        state.selected,
+        state.active,
+        state.model.data,
+        Direction.Bottom
+      ),
+    }),
+    ArrowLeft: (state) => ({
+      ...state,
+      selected: modifyEdge(
+        state.selected,
+        state.active,
+        state.model.data,
+        Direction.Left
+      ),
+    }),
+    ArrowRight: (state) => ({
+      ...state,
+      selected: modifyEdge(
+        state.selected,
+        state.active,
+        state.model.data,
+        Direction.Right
+      ),
+    }),
+    Tab: go(0, -1),
+  };
+  
+  const shiftMetaKeyDownHandlers: KeyDownHandlers = {};
+  const metaKeyDownHandlers: KeyDownHandlers = {};
+  
+  export function getKeyDownHandler(
+    state: Types.StoreState,
+    event: React.KeyboardEvent
+  ): KeyDownHandler | undefined {
+    const { key } = event;
+    let handlers;
+    // Order matters
+    if (state.mode === 'edit') {
+      if (event.shiftKey) {
+        handlers = editShiftKeyDownHandlers;
+      } else {
+        handlers = editKeyDownHandlers;
+      }
+    } else if (event.shiftKey && event.metaKey) {
+      handlers = shiftMetaKeyDownHandlers;
+    } else if (event.shiftKey) {
+      handlers = shiftKeyDownHandlers;
+    } else if (event.metaKey) {
+      handlers = metaKeyDownHandlers;
+    } else {
+      handlers = keyDownHandlers;
+    }
+  
+    return handlers[key];
+  }
+  
+  /** Returns whether the reducer has a handler for the given keydown event */
+  export function hasKeyDownHandler(
+    state: Types.StoreState,
+    event: React.KeyboardEvent
+  ): boolean {
+    return getKeyDownHandler(state, event) !== undefined;
+  }
+  
+  /** Returns whether the active cell is read only */
+  export function isActiveReadOnly(state: Types.StoreState): boolean {
+    const activeCell = getActive(state);
+    return Boolean(activeCell?.readOnly);
+  }
+  
+  /** Gets active cell from given state */
+  export function getActive(state: Types.StoreState): Types.CellBase | null {
+    const activeCell = state.active && Matrix.get(state.active, state.model.data);
+    return activeCell || null;
+  }
+  
+  /** Modify given edge according to given active point and data */
+  export function modifyEdge<T extends Selection>(
+    selection: T,
+    active: Point.Point | null,
+    data: Matrix.Matrix<unknown>,
+    direction: Direction
+  ): T {
+    if (!active) {
+      return selection;
+    }
+    if (selection instanceof RangeSelection) {
+      const nextSelection = modifyRangeSelectionEdge(
+        selection,
+        active,
+        data,
+        direction
+      );
+      // @ts-expect-error
+      return nextSelection;
+    }
+    if (selection instanceof EntireColumnsSelection) {
+      // @ts-expect-error
+      return modifyEntireColumnsSelection(selection, active, data, direction);
+    }
+    if (selection instanceof EntireRowsSelection) {
+      // @ts-expect-error
+      return modifyEntireRowsSelection(selection, active, data, direction);
+    }
+    return selection;
+  }
+  
+  export function modifyRangeSelectionEdge(
+    rangeSelection: RangeSelection,
+    active: Point.Point,
+    data: Matrix.Matrix<unknown>,
+    edge: Direction
+  ): RangeSelection {
+    const field =
+      edge === Direction.Left || edge === Direction.Right ? 'column' : 'row';
+  
+    const key =
+      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 nextRange = new PointRange(
+      rangeSelection.range.start,
+      rangeSelection.range.end
+    );
+  
+    nextRange[keyToModify][field] += delta;
+  
+    const nextSelection = new RangeSelection(nextRange).normalizeTo(data);
+  
+    return nextSelection;
+  }
+  
+  export function modifyEntireRowsSelection(
+    selection: EntireRowsSelection,
+    active: Point.Point,
+    data: Matrix.Matrix<unknown>,
+    edge: Direction
+  ): EntireRowsSelection {
+    if (edge === Direction.Left || edge === Direction.Right) {
+      return selection;
+    }
+    const delta = edge === Direction.Top ? -1 : 1;
+    const property = edge === Direction.Top ? 'start' : 'end';
+    const oppositeProperty = property === 'start' ? 'end' : 'start';
+    const newSelectionData = { ...selection };
+    if (
+      edge === Direction.Top
+        ? selection.end > active.row
+        : selection.start < active.row
+    ) {
+      newSelectionData[oppositeProperty] = selection[oppositeProperty] + delta;
+    } else {
+      newSelectionData[property] = selection[property] + delta;
+    }
+    const nextSelection = new EntireRowsSelection(
+      Math.max(newSelectionData.start, 0),
+      Math.max(newSelectionData.end, 0)
+    );
+    return nextSelection.normalizeTo(data);
+  }
+  
+  export function modifyEntireColumnsSelection(
+    selection: EntireColumnsSelection,
+    active: Point.Point,
+    data: Matrix.Matrix<unknown>,
+    edge: Direction
+  ): EntireColumnsSelection {
+    if (edge === Direction.Top || edge === Direction.Bottom) {
+      return selection;
+    }
+    const delta = edge === Direction.Left ? -1 : 1;
+    const property = edge === Direction.Left ? 'start' : 'end';
+    const oppositeProperty = property === 'start' ? 'end' : 'start';
+    const newSelectionData = { ...selection };
+    if (
+      edge === Direction.Left
+        ? selection.end > active.row
+        : selection.start < active.row
+    ) {
+      newSelectionData[oppositeProperty] = selection[oppositeProperty] + delta;
+    } else {
+      newSelectionData[property] = selection[property] + delta;
+    }
+    const nextSelection = new EntireColumnsSelection(
+      Math.max(newSelectionData.start, 0),
+      Math.max(newSelectionData.end, 0)
+    );
+    return nextSelection.normalizeTo(data);
+  }
+