From b282490279b32cc28d7aa9620f1d5a14dcf36dfb Mon Sep 17 00:00:00 2001 From: Sergey Krylov Date: Wed, 13 Jul 2022 16:27:41 +0500 Subject: [PATCH] add change table size --- src/components/table/Table.ts | 31 +++++++++++++++++++++++++------ src/constants.ts | 5 +++++ src/redux/action-constants.ts | 1 + src/redux/action-creators.ts | 9 ++++++++- src/redux/rootReducer.ts | 11 +++++++---- src/redux/types.d.ts | 4 ++++ 6 files changed, 50 insertions(+), 11 deletions(-) diff --git a/src/components/table/Table.ts b/src/components/table/Table.ts index 88b1ddb..575109a 100644 --- a/src/components/table/Table.ts +++ b/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 = { - row: 50, - col: 24, - }; + public tableSize = { row: initialState.tableSize.row, col: initialState.tableSize.col }; 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) { diff --git a/src/constants.ts b/src/constants.ts index e6dbb8b..f4ddbe3 100644 --- a/src/constants.ts +++ b/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, diff --git a/src/redux/action-constants.ts b/src/redux/action-constants.ts index a201e07..5dc5bf4 100644 --- a/src/redux/action-constants.ts +++ b/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'; diff --git a/src/redux/action-creators.ts b/src/redux/action-creators.ts index 0d5d16e..ce73679 100644 --- a/src/redux/action-creators.ts +++ b/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, + }; +} diff --git a/src/redux/rootReducer.ts b/src/redux/rootReducer.ts index 87ee050..437f739 100644 --- a/src/redux/rootReducer.ts +++ b/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 const rootReducer: ReducerType = function (state: StateType, action: ActionType) { +export function rootReducer(state: StateType, action: ActionType): StateType { 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; } } diff --git a/src/redux/types.d.ts b/src/redux/types.d.ts index f9c1d34..750f76a 100644 --- a/src/redux/types.d.ts +++ b/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;