pixel-react 1.2.7 → 1.2.9

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

@@ -0,0 +1,495 @@
+import { PointRange } from './point-range';
+import * as Matrix from './matrix';
+import * as Types from './types';
+import * as Point from './point';
+import {
+  EmptySelection,
+  RangeSelection,
+  EntireColumnsSelection,
+  EntireRowsSelection,
+  EntireWorksheetSelection,
+} from './selection';
+import { isActive } from './util';
+import * as Actions from './actions';
+import { Model, updateCellValue, createFormulaParser } from './engine';
+import {
+  applyBackgroundColorToCells,
+  applyBoldToCells,
+  applyBorderToCells,
+  applyColorToCells,
+  applyFontFamily,
+  applyFontSize,
+  applyItalicToCells,
+  applyTextAlign,
+  applyUnderlineToCells,
+  blur,
+  clear,
+  commit,
+  edit,
+  getKeyDownHandler,
+  isActiveReadOnly,
+  view,
+} from './reducerFunctions';
+
+export const INITIAL_STATE: Types.StoreState = {
+  active: null,
+  mode: 'view',
+  rowDimensions: {},
+  columnDimensions: {},
+  lastChanged: null,
+  hasPasted: false,
+  cut: false,
+  dragging: false,
+  model: new Model(createFormulaParser, []),
+  selected: new EmptySelection(),
+  copied: null,
+  lastCommit: null,
+};
+
+export default function reducer(
+  state: Types.StoreState,
+  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.BORDER_TYPE: {
+      const { value, color } = action.payload;
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyBorderToCells(
+        state.model.data,
+        selectedRange as PointRange,
+        value,
+        color
+      );
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
+    case Actions.UNDERLINE_TYPE: {
+      const { value, active } = action.payload;
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyUnderlineToCells(
+        state.model.data,
+        selectedRange as PointRange,
+        value,
+        active
+      );
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
+    case Actions.FONT_SIZE: {
+      const { value } = action.payload;
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyFontSize(
+        state.model.data,
+        selectedRange as PointRange,
+        value
+      );
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
+    case Actions.FONT_FAMILY: {
+      const { value } = action.payload;
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyFontFamily(
+        state.model.data,
+        selectedRange as PointRange,
+        value
+      );
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
+    }
+
+    case Actions.TEXT_ALIGN: {
+      const { value } = action.payload;
+      const selectedRange = state.selected.toRange(state.model.data);
+      const updatedData = applyTextAlign(
+        state.model.data,
+        selectedRange as PointRange,
+        value
+      );
+      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: {
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, state.model.data),
+      };
+    }
+
+    case Actions.SET_DATA: {
+      const { data } = action.payload;
+      const nextActive =
+        state.active && Matrix.has(state.active, data) ? state.active : null;
+      const nextSelected = state.selected.normalizeTo(data);
+      return {
+        ...state,
+        model: new Model(state.model.createFormulaParser, data),
+        active: nextActive,
+        selected: nextSelected,
+      };
+    }
+    case Actions.SET_CREATE_FORMULA_PARSER: {
+      const { createFormulaParser } = action.payload;
+      return {
+        ...state,
+        model: new Model(createFormulaParser, state.model.data),
+      };
+    }
+
+    case Actions.SELECT_ENTIRE_ROW: {
+      const { row, extend } = action.payload;
+      const { active } = state;
+
+      return {
+        ...state,
+        selected:
+          extend && active
+            ? new EntireRowsSelection(active.row, row)
+            : new EntireRowsSelection(row, row),
+        active: extend && active ? active : { ...Point.ORIGIN, row },
+        mode: 'view',
+      };
+    }
+
+    case Actions.SELECT_ENTIRE_COLUMN: {
+      const { column, extend } = action.payload;
+      const { active } = state;
+
+      return {
+        ...state,
+        selected:
+          extend && active
+            ? new EntireColumnsSelection(active.column, column)
+            : new EntireColumnsSelection(column, column),
+        active: extend && active ? active : { ...Point.ORIGIN, column },
+        mode: 'view',
+      };
+    }
+
+    case Actions.SELECT_ENTIRE_WORKSHEET: {
+      return {
+        ...state,
+        selected: new EntireWorksheetSelection(),
+        active: Point.ORIGIN,
+        mode: 'view',
+      };
+    }
+
+    case Actions.SET_SELECTION: {
+      const { selection } = action.payload;
+      const range = selection.toRange(state.model.data);
+      const active =
+        state.active && selection.has(state.model.data, state.active)
+          ? state.active
+          : range?.start;
+      return {
+        ...state,
+        selected: selection,
+        active: active || null,
+        mode: 'view',
+      };
+    }
+
+    case Actions.SELECT: {
+      const { point } = action.payload;
+      if (state.active && !isActive(state.active, point)) {
+        return {
+          ...state,
+          selected: new RangeSelection(new PointRange(point, state.active)),
+          mode: 'view',
+        };
+      }
+      return state;
+    }
+
+    case Actions.ACTIVATE: {
+      const { point } = action.payload;
+      return {
+        ...state,
+        selected: new RangeSelection(new PointRange(point, point)),
+        active: point,
+        mode: isActive(state.active, point) ? 'edit' : 'view',
+      };
+    }
+
+    case Actions.SET_CELL_DATA: {
+      const { active, data: cellData } = action.payload;
+      if (isActiveReadOnly(state)) {
+        return state;
+      }
+      return {
+        ...state,
+        model: updateCellValue(state.model, active, cellData),
+        lastChanged: active,
+      };
+    }
+
+    case Actions.SET_CELL_DIMENSIONS: {
+      const { point, dimensions } = action.payload;
+      const prevRowDimensions = state.rowDimensions[point.row];
+      const prevColumnDimensions = state.columnDimensions[point.column];
+      if (
+        prevRowDimensions &&
+        prevColumnDimensions &&
+        prevRowDimensions.top === dimensions.top &&
+        prevRowDimensions.height === dimensions.height &&
+        prevColumnDimensions.left === dimensions.left &&
+        prevColumnDimensions.width === dimensions.width
+      ) {
+        return state;
+      }
+      return {
+        ...state,
+        rowDimensions: {
+          ...state.rowDimensions,
+          [point.row]: { top: dimensions.top, height: dimensions.height },
+        },
+        columnDimensions: {
+          ...state.columnDimensions,
+          [point.column]: { left: dimensions.left, width: dimensions.width },
+        },
+      };
+    }
+
+    case Actions.COPY:
+
+    case Actions.CUT: {
+      const selectedRange = state.selected.toRange(state.model.data);
+      return {
+        ...state,
+        copied: selectedRange,
+        cut: action.type === Actions.CUT,
+        hasPasted: false,
+      };
+    }
+
+    case Actions.PASTE: {
+      const { data: text } = action.payload;
+      const { active } = state;
+
+      if (!active) {
+        return state;
+      }
+
+      const copied = Matrix.split(text, (value) => ({ value }));
+      const copiedSize = Matrix.getSize(copied);
+
+      const selectedRange = state.selected.toRange(state.model.data);
+      if (selectedRange && copiedSize.rows === 1 && copiedSize.columns === 1) {
+        const cell = Matrix.get({ row: 0, column: 0 }, copied);
+        let newData =
+          state.cut && state.copied
+            ? Matrix.unset(state.copied.start, state.model.data)
+            : state.model.data;
+        const commit: Types.StoreState['lastCommit'] = [];
+        for (const point of selectedRange || []) {
+          const currentCell = Matrix.get(point, state.model.data);
+          commit.push({
+            prevCell: currentCell || null,
+            nextCell: cell || null,
+          });
+          newData = Matrix.set(point, cell, newData);
+        }
+
+        return {
+          ...state,
+          model: new Model(createFormulaParser, newData),
+          copied: null,
+          cut: false,
+          hasPasted: true,
+          mode: 'view',
+          lastCommit: commit,
+        };
+      }
+
+      const requiredSize: Matrix.Size = {
+        rows: active.row + copiedSize.rows,
+        columns: active.column + copiedSize.columns,
+      };
+      const paddedData = Matrix.pad(state.model.data, requiredSize);
+
+      let acc: {
+        data: Types.StoreState['model']['data'];
+        commit: Types.StoreState['lastCommit'];
+      } = { data: paddedData, commit: [] };
+      for (const [point, cell] of Matrix.entries(copied)) {
+        let commit = acc.commit || [];
+        const nextPoint: Point.Point = {
+          row: point.row + active.row,
+          column: point.column + active.column,
+        };
+
+        let nextData = acc.data;
+
+        if (state.cut) {
+          if (state.copied) {
+            const prevPoint: Point.Point = {
+              row: point.row + state.copied.start.row,
+              column: point.column + state.copied.start.column,
+            };
+            nextData = Matrix.unset(prevPoint, acc.data);
+          }
+
+          commit = [...commit, { prevCell: cell || null, nextCell: null }];
+        }
+
+        if (!Matrix.has(nextPoint, paddedData)) {
+          acc = { data: nextData, commit };
+        }
+
+        const currentCell = Matrix.get(nextPoint, nextData) || null;
+
+        commit = [
+          ...commit,
+          {
+            prevCell: currentCell,
+            nextCell: cell || null,
+          },
+        ];
+
+        acc.data = Matrix.set(
+          nextPoint,
+          { value: undefined, ...currentCell, ...cell },
+          nextData
+        );
+        acc.commit = commit;
+      }
+
+      return {
+        ...state,
+        model: new Model(createFormulaParser, acc.data),
+        selected: new RangeSelection(
+          new PointRange(active, {
+            row: active.row + copiedSize.rows - 1,
+            column: active.column + copiedSize.columns - 1,
+          })
+        ),
+        copied: null,
+        cut: false,
+        hasPasted: true,
+        mode: 'view',
+        lastCommit: acc.commit,
+      };
+    }
+
+    case Actions.EDIT: {
+      return edit(state);
+    }
+
+    case Actions.VIEW: {
+      return view(state);
+    }
+
+    case Actions.CLEAR: {
+      return clear(state);
+    }
+
+    case Actions.BLUR: {
+      return blur(state);
+    }
+
+    case Actions.KEY_DOWN: {
+      const { event } = action.payload;
+      const handler = getKeyDownHandler(state, event);
+      if (handler) {
+        return { ...state, ...handler(state, event) };
+      }
+      return state;
+    }
+
+    case Actions.DRAG_START: {
+      return { ...state, dragging: true };
+    }
+
+    case Actions.DRAG_END: {
+      return { ...state, dragging: false };
+    }
+
+    case Actions.COMMIT: {
+      const { changes } = action.payload;
+      return { ...state, ...commit(changes) };
+    }
+
+    default:
+      throw new Error('Unknown action');
+  }
+}
+
+// const reducer = createReducer(INITIAL_STATE, (builder) => {
+//   builder.addMatcher(
+//     (action) =>
+//       action.type === Actions.copy.type || action.type === Actions.cut.type,
+//     (state, action) => {
+
+//     }
+//   );
+// });
+
+// // Shared reducers