all files / packages/table/ TableComponent.js

51.35% Statements 19/37
14.29% Branches 2/14
25% Functions 1/4
51.35% Lines 19/37
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                                                                                                                   
import { Component } from '../../ui'
import TableCellComponent from './TableCellComponent'
 
class TableComponent extends Component {
 
  render($$) {
    let el = $$('table').addClass('sc-table')
    let node = this.props.node
    let doc = this.props.node.getDocument()
    let cells = this.props.node.cells
    let rowCount = node.getRowCount()
    let colCount = node.getColCount()
    for (let i = 0; i < rowCount; i++) {
      let rowEl = $$('tr')
      for (let j = 0; j < colCount; j++) {
        let cellId = cells[i][j]
        // Merged cells (cellId is null) are skipped
        if (cellId) {
          let cellNode = doc.get(cellId)
          let cellEl = $$(TableCellComponent, {
            node: cellNode,
            disabled: this.props.disabled
          }).ref(cellNode.id)
          rowEl.append(cellEl)
        }
      }
      el.append(rowEl)
    }
    el.on('click', this.onClick)
    el.on('dblclick', this.onDblClick)
    return el
  }
 
  onClick(event) {
    event.stopPropagation()
    // console.log('Clicked on Table', this.props.node.id, event.target)
  }
 
  // TODO: this should only be used for the initial table state
  onDblClick(event) {
    event.stopPropagation()
    // console.log('DblClicked on Table', this.props.node.id, event.target)
 
    // HACK: assuming that if the event.target has a surface
    // it is a TextPropertyEditor of a cell
    let comp = Component.unwrap(event.target)
    if (comp) {
      let cellComp
      if (comp._isTableCellComponent) {
        cellComp = comp
      } else if (comp._isTextPropertyEditor) {
        cellComp = comp.getParent()
      } else if (comp._isTextPropertyComponent) {
        cellComp = comp.getParent().getParent()
      } else {
        console.warn('TODO: find the right cell')
      }
      if (cellComp) {
        cellComp.grabFocus()
      }
    }
  }
 
  grabFocus() {
    let cellId = this.props.node.cells[0][0]
    if (cellId) {
      let comp = this.refs[cellId]
      comp.grabFocus()
    }
  }
 
}
 
TableComponent.hasDropzones = true
 
export default TableComponent