all files / packages/list/ ListComponent.js

100% Statements 18/18
87.5% Branches 7/8
100% Functions 3/3
100% Lines 18/18
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                  32×       47× 47×     47× 87× 85× 85× 85×                 47×       30× 30× 13×     17× 17× 22×                    
import { isString } from '../../util'
import { Component } from '../../ui'
import ListItemComponent from './ListItemComponent'
import renderListNode from './renderListNode'
import getListTagName from './getListTagName'
 
class ListComponent extends Component {
 
  didMount() {
    this.context.editorSession.onRender('document', this._onChange, this)
  }
 
  render($$) {
    let node = this.props.node
    let el = $$(getListTagName(node))
      .addClass('sc-list')
      .attr('data-id', node.id)
    renderListNode(node, el, (arg) => {
      if (isString(arg)) {
        return $$(arg)
      } else Eif(arg.type === 'list-item') {
        let item = arg
        return $$(ListItemComponent, {
          path: [item.id, 'content'],
          node: item,
          tagName: 'li'
        })
        // setting ref to preserve items when rerendering
        .ref(item.id)
      }
    })
    return el
  }
 
  _onChange(change) {
    const node = this.props.node
    if (change.isAffected(node.id)) {
      return this.rerender()
    }
    // check if any of the list items are affected
    let itemIds = node.items
    for (let i = 0; i < itemIds.length; i++) {
      if (change.isAffected([itemIds[i], 'level'])) {
        return this.rerender()
      }
    }
  }
 
}
 
// we need this ATM to prevent this being wrapped into an isolated node (see ContainerEditor._renderNode())
ListComponent.prototype._isCustomNodeComponent = true
 
export default ListComponent