97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import * as actions from '../../redux/actions';
|
|
import { $, DomClass } from '../../core/dom';
|
|
import { ExcelComponent } from '../../core/ExcelComponent';
|
|
import { TableSelection } from './TableSelection';
|
|
import { createTable } from './table.template';
|
|
import { resizeHandler } from './handlers/table.resize';
|
|
import { selectHandler } from './handlers/table.select.handler';
|
|
|
|
export class Table extends ExcelComponent {
|
|
static className = 'excel__table';
|
|
|
|
private selection: TableSelection;
|
|
|
|
constructor($root: DomClass, options: any) {
|
|
super($root, {
|
|
name: 'Table',
|
|
listeners: ['mousedown', 'keydown', 'input'],
|
|
...options,
|
|
});
|
|
}
|
|
|
|
toHTML(): string {
|
|
return createTable(50, 24);
|
|
}
|
|
|
|
prepare() {
|
|
this.selection = new TableSelection();
|
|
}
|
|
|
|
init() {
|
|
super.init();
|
|
|
|
const $cell = this.$root.find('[data-id="0:0"]');
|
|
this.selection.select($cell);
|
|
|
|
this.$emit('table:select-cell', $cell.text);
|
|
|
|
this.$on('formula:input', (data) => {
|
|
this.selection.current.text = data;
|
|
});
|
|
|
|
this.$on('formula:enter-press', () => {
|
|
this.selection.current.focus();
|
|
});
|
|
|
|
// this.$subscribe(state => {
|
|
// console.log('State in Table', state);
|
|
// });
|
|
|
|
this.initTableSize();
|
|
}
|
|
|
|
initTableSize() {
|
|
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: `${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` }));
|
|
});
|
|
}
|
|
|
|
emitSelectCallback() {
|
|
this.$emit('table:select-cell', this.selection.current.text);
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
onMousedown(event: MouseEvent) {
|
|
selectHandler(event, this.selection, this.emitSelectCallback.bind(this));
|
|
this.resizeTable(event);
|
|
}
|
|
|
|
onKeydown(event: KeyboardEvent) {
|
|
selectHandler(event, this.selection, this.emitSelectCallback.bind(this));
|
|
}
|
|
|
|
onInput(event: InputEvent) {
|
|
const inputText = (event.target as HTMLElement).textContent.trim();
|
|
this.$emit('table:input', inputText);
|
|
}
|
|
}
|