add row resize state

src/components/table/Table.ts

@@ -51,10 +51,18 @@ export class Table extends ExcelComponent {
   }
 
   initTableSize() {
-    const colSizes = this.store.getState()?.colState;
-    Object.keys(colSizes).forEach(key => {
+    const size = {
+      col: this.store.getState()?.colState,
+      row: this.store.getState()?.rowState,
+    };
+
+    Object.keys(size.col).forEach(key => {
       const cols = this.$root.findAll(`[data-col="${key}"]`);
-      cols.forEach(el => $(el as HTMLElement).css({ width: `${colSizes[key]}px` }));
+      cols.forEach(el => $(el as HTMLElement).css({ width: `${size.col[key]}px` }));
+    });
+    Object.keys(size.row).forEach(key => {
+      const rows = this.$root.findAll(`[data-row="${key}"]`);
+      rows.forEach(el => $(el as HTMLElement).css({ height: `${size.row[key]}px` }));
     });
   }
 
@@ -65,6 +73,7 @@ export class Table extends ExcelComponent {
   async resizeTable(event: MouseEvent) {
     try {
       const resizeData = await resizeHandler(this.$root, event);
+      console.log('Resize data', resizeData);
       this.$dispatch(actions.tableResize({ resizeData }));
     } catch (e) {
       console.warn('Resize error', e.message);

src/components/table/handlers/table.resize.ts

@@ -1,7 +1,7 @@
 import { $, Dom } from '../../../core/dom';
 
 type CustomElementType = Element & { css: any };
-type ResizeReturnDataType = { value: number, id: string };
+type ResizeReturnDataType = { value: number, id: string, type: string };
 
 export function resizeHandler($root: Dom, event: MouseEvent) {
   return new Promise<ResizeReturnDataType>(res => {
@@ -60,10 +60,12 @@ export function resizeHandler($root: Dom, event: MouseEvent) {
       document.body.style.userSelect = null;
 
       let value: number;
+      // let id: string;
 
       switch (type) {
         case 'col': {
           value = coords.width + delta;
+
           $parent.css({ width: `${value}px` });
           allCols.forEach((el: CustomElementType) => el.css({ width: `${coords.width + delta}px` }));
           break;
@@ -71,6 +73,7 @@ export function resizeHandler($root: Dom, event: MouseEvent) {
 
         case 'row': {
           value = coords.height + delta;
+
           $parent.css({ height: `${value}px` });
           break;
         }
@@ -78,10 +81,7 @@ export function resizeHandler($root: Dom, event: MouseEvent) {
         default: break;
       }
 
-      res({
-        value,
-        id: type === 'col' ? $parent.data.col : null,
-      });
+      res({ value, id: $parent.data[type], type });
 
       $resizer.css({ opacity: 0, bottom: 0, right: 0 });
     };

src/components/table/table.template.ts

@@ -9,7 +9,6 @@ function createCell(cellContent = '', colIndex = 1, rowIndex = 1) {
       class="cell" 
       contenteditable 
       data-col="${colIndex}" 
-      data-row=${rowIndex}  
       data-id="${rowIndex}:${colIndex}"
       data-type="cell"
     >
@@ -28,9 +27,9 @@ function createCol(columnContent = '', index = 1) {
   `;
 }
 
-function createRow(dataContent = '', infoContent = '', needResize = true) {
+function createRow(dataContent = '', infoContent = '', needResize = true, rowIndex = -1) {
   return `
-    <div class="row" data-type="resizable">
+    <div class="row" data-type="resizable" data-row="${rowIndex}">
       <div class="row-info">
         ${infoContent}
         ${needResize ? '<div class="row-resize" data-resize="row"></div>' : ''}
@@ -58,7 +57,7 @@ export function createTable(rowsCount = 10, columnCount = 10) {
       .map((el, index) => createCell('', index, row))
       .join('');
 
-    rows.push(createRow(cells, `${row + 1}`));
+    rows.push(createRow(cells, `${row + 1}`, true, row));
   }
 
   return rows.join('');

src/redux/rootReducer.ts

@@ -4,9 +4,12 @@ import { ActionType, StateType } from './types';
 export function rootReducer(state: StateType, action: ActionType) {
   switch (action.type) {
     case TABLE_RESIZE: {
-      const prevState = state.colState || {};
-      prevState[action.resizeData?.id] = action.resizeData?.value;
-      return { ...state, colState: prevState };
+      const newState: StateType = { ...state };
+      const fieldName = `${action.resizeData?.type}State`;
+
+      newState[fieldName][action.resizeData?.id] = action.resizeData?.value;
+
+      return { ...state, ...newState };
     }
 
     default: return state;