diff --git a/src/components/table/Table.ts b/src/components/table/Table.ts index af74766..1408496 100644 --- a/src/components/table/Table.ts +++ b/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); diff --git a/src/components/table/handlers/table.resize.ts b/src/components/table/handlers/table.resize.ts index 9b6c8f3..a845c9a 100644 --- a/src/components/table/handlers/table.resize.ts +++ b/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(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 }); }; diff --git a/src/components/table/table.template.ts b/src/components/table/table.template.ts index 6ad5be1..7b3f479 100644 --- a/src/components/table/table.template.ts +++ b/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 ` -
+
${infoContent} ${needResize ? '
' : ''} @@ -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(''); diff --git a/src/redux/rootReducer.ts b/src/redux/rootReducer.ts index 3bd2462..4814c44 100644 --- a/src/redux/rootReducer.ts +++ b/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;