add change table size

src/components/table/Table.ts

@@ -3,9 +3,9 @@ import * as actions from 'redux/action-creators';
 import { $, Dom } from 'core/Dom';
 import { ComponentOptionsType, ExcelComponent } from 'core/ExcelComponent';
 import { TableSelection } from 'components/table/TableSelection';
-import { changeCurrentStyles, changeCurrentText } from 'redux/action-creators';
+import { changeCurrentStyles, changeCurrentText, changeTableSize } from 'redux/action-creators';
 import { createTable, getNewRowHTML } from 'components/table/table.template';
-import { initialStyleState } from 'src/constants';
+import { initialState, initialStyleState } from 'src/constants';
 import { parse } from 'core/utils';
 import { resizeHandler } from 'components/table/handlers/table.resize';
 import { selectHandler } from 'components/table/handlers/table.select.handler';
@@ -16,10 +16,7 @@ export class Table extends ExcelComponent {
   private selection: TableSelection;
   private isMouseDowned: boolean;
   private tableResizing = false;
-  public tableSize = {
+  public tableSize = { row: initialState.tableSize.row, col: initialState.tableSize.col };
-    row: 50,
-    col: 24,
-  };
 
   constructor($root: Dom, options: ComponentOptionsType) {
     super($root, {
@@ -29,9 +26,12 @@ export class Table extends ExcelComponent {
     });
 
     this.isMouseDowned = false;
+    const { col, row } = this.getTableSize();
+    this.tableSize = { col, row };
   }
 
   toHTML(): string {
+    console.log('Table size', this.tableSize);
     return createTable(this.tableSize.row, this.tableSize.col);
   }
 
@@ -39,6 +39,23 @@ export class Table extends ExcelComponent {
     this.selection = new TableSelection(this);
   }
 
+  getTableSize() {
+    const { tableSize: { col, row }, colState, rowState } = this.store.getState();
+    const maxRowFromState = Math.max(...Object.keys(rowState).map(el => +el));
+    const maxColFromState = Math.max(...Object.keys(colState).map(el => +el));
+
+    const normalTableSize = {
+      col: Math.max(maxRowFromState, row),
+      row: Math.max(maxColFromState, col),
+    };
+
+    if ((maxColFromState !== this.tableSize.col) || (maxRowFromState !== this.tableSize.row)) {
+      this.dispatchToStore(changeTableSize(normalTableSize));
+    }
+
+    return normalTableSize;
+  }
+
   init() {
     super.init();
 
@@ -152,6 +169,8 @@ export class Table extends ExcelComponent {
     this.$root.$el.insertAdjacentHTML('beforeend', getNewRowHTML(this.tableSize.row, this.tableSize.col));
     const $newRow = $(`[data-row="${this.tableSize.row - 1}"]`);
     this.initColSizes($newRow);
+
+    this.dispatchToStore(changeTableSize(this.tableSize));
   };
 
   onMousedown(event: MouseEvent) {

src/constants.ts

@@ -38,6 +38,10 @@ export const initialState: StateType = {
   currentStyles: initialStyleState,
   currentText: 'initial text',
   id: '0',
+  tableSize: {
+    col: 10,
+    row: 10,
+  },
 };
 
 export function getNormalizeInitialState(params: string): StateType {
@@ -45,6 +49,7 @@ export function getNormalizeInitialState(params: string): StateType {
   if (!state) return initialState;
 
   return {
+    ...initialState,
     ...state,
     id: params,
     currentStyles: state?.stylesState?.[startCellId] || initialStyleState,

src/redux/action-constants.ts

@@ -6,3 +6,4 @@ export const DELETE_TABLE = 'DELETE_TABLE';
 export const TABLE_RESIZE = 'TABLE_RESIZE';
 export const UPDATE_DATE = 'UPDATE_DATE';
 export const CHANGE_CURRENT_TEXT = 'CHANGE_CURRENT_TEXT';
+export const CHANGE_TABLE_SIZE = 'CHANGE_TABLE_SIZE';

src/redux/action-creators.ts

@@ -7,7 +7,7 @@ import {
   APPLY_STYLES,
   CHANGE_TITLE,
   DELETE_TABLE,
-  UPDATE_DATE, CHANGE_CURRENT_TEXT,
+  UPDATE_DATE, CHANGE_CURRENT_TEXT, CHANGE_TABLE_SIZE,
 } from 'redux/action-constants';
 
 export function tableResize(resizeData: ResizeReturnDataType): ActionType {
@@ -65,3 +65,10 @@ export function changeCurrentText(data: string): ActionType {
     data,
   };
 }
+
+export function changeTableSize(data: { col: number, row: number }): ActionType {
+  return {
+    type: CHANGE_TABLE_SIZE,
+    data,
+  };
+}

src/redux/rootReducer.ts

@@ -8,11 +8,10 @@ import {
   APPLY_STYLES,
   CHANGE_TITLE,
   DELETE_TABLE,
-  UPDATE_DATE, CHANGE_CURRENT_TEXT,
+  UPDATE_DATE, CHANGE_CURRENT_TEXT, CHANGE_TABLE_SIZE,
 } from 'redux/action-constants';
 
-export function rootReducer(state: StateType, action: ActionType) {
+export function rootReducer(state: StateType, action: ActionType): StateType {
-// export const rootReducer: ReducerType = function (state: StateType, action: ActionType) {
   switch (action.type) {
     case TABLE_RESIZE: {
       const newState: StateType = { ...state };
@@ -60,7 +59,7 @@ export function rootReducer(state: StateType, action: ActionType) {
       localStorage.removeItem(name);
       ActiveRoute.navigateTo = '';
 
-      return null;
+      return null as any;
     }
 
     case UPDATE_DATE: {
@@ -71,6 +70,10 @@ export function rootReducer(state: StateType, action: ActionType) {
       return { ...state, currentText: action.data };
     }
 
+    case CHANGE_TABLE_SIZE: {
+      return { ...state, tableSize: action.data };
+    }
+
     default: return state;
   }
 }

src/redux/types.d.ts

@@ -15,6 +15,10 @@ export type StateType = {
   stylesState: { [k: string]: ToolbarStateType };
   title: string;
   currentText: string;
+  tableSize: {
+    col: number;
+    row: number;
+  };
 };
 
 export type ReducerType = (state: StateType, action: ActionType) => StateType | null;