src/components/table/Table.js - master - eb/js-excel

src/components/table/Table.js
127 строк3 KB
Evgeniy Budaev
Finish redux and table logic
16 июн 2020, 10:52
16 июн 2020, 10:52b7d4906
import {ExcelComponent} from "@core/ExcelComponent";
import {createTable} from "@/components/table/table.template";
import {resizeHandler} from "@/components/table/teble.resize";
import {isCell, matrix, nextSelector, shouldResize} from "./table.functions";
import {TableSelection} from "@/components/table/TableSelection";
import {$} from "@core/dom";
import * as actions from '@/redux/actions'
import {defaultStyles} from "@/constants";
import {parse} from "@core/parse";

export class Table extends ExcelComponent {
  static className = 'excel__table'

  constructor($root, options) {
    super($root, {
      name: 'Table',
      listeners: ['mousedown', 'keydown', 'input'],
      ...options
    })
  }

  toHtml() {
    return createTable(20, this.store.getState())
  }

  prepare() {
    this.selection = new TableSelection()
  }

  init() {
    super.init()

    this.selectCell(this.$root.find('[data-id="0:0"]'))
    // console.log('init')
    this.$on('formula:input', value => {
      this.selection.current
          .attr('data-value', value )
          .text(parse(value))
      // console.log('Table from Formula ', value )
      this.updateTextInStore(value )
    })

    this.$on('formula:done', () => {
      this.selection.current.focus()
    })

    // this.$subscribe(state => console.log('TableState', state))
    this.$on('toolbar:applyStyle', value => {
      // console.log('Table style', style)
      this.selection.applyStyle(value)
      this.$dispatch(actions.applyStyle({
        value,
        ids: this.selection.selectedIds
      }))
    })
  }

  selectCell($cell) {
    this.selection.select($cell)
    this.$emit('table:select', $cell)
    const styles = $cell.getStyles(Object.keys(defaultStyles))
    // console.log('Styles to dispatch ', styles)
    this.$dispatch(actions.changeStyles(styles))
  }

  async resizeTable(event) {
    try {
      const data = await resizeHandler(this.$root, event)
      this.$dispatch(actions.tableResize(data))
      // console.log('Resize data ', data)
    } catch (e) {
      console.warn('Resize error ', e.message)
    }
  }

  onMousedown(event) {
    if (shouldResize(event)) {
      this.resizeTable(event)
    } else if (isCell(event)) {
      // console.log(event.target)
      const $target = $(event.target)
      if (event.shiftKey) {
        // group
        // console.log('target cell ', $target.id(true))
        // console.log('current cell ', this.selection.current.id(true))
        const $cells = matrix($target, this.selection.current)
            .map(id => this.$root.find(`[data-id="${id}"]`))
        this.selection.selectGroup($cells)
      } else {
        this.selectCell($target)
      }
    }
  }

  onKeydown(event) {
    const keys = [
      'Enter',
      'Tab',
      'ArrowLeft',
      'ArrowRight',
      'ArrowDown',
      'ArrowUp'
    ]

    const {key} = event

    if (keys.includes(key) && !event.shiftKey) {
      event.preventDefault()
      console.log(event.key)
      const id = this.selection.current.id(true)
      const $next = this.$root.find(nextSelector(key, id))
      this.selectCell($next)
    }
  }

  updateTextInStore(value) {
    this.$dispatch(actions.changeText({
      id: this.selection.current.id(),
      value
    }))
  }

  onInput(event) {
    // this.$emit('table:input', $(event.target))
    this.updateTextInStore($(event.target).text())
  }
}