all files / ui/ AnnotationComponent.js

71.43% Statements 10/14
25% Branches 1/4
83.33% Functions 5/6
71.43% Lines 10/14
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                                                    47× 47×               58×     58×     58× 58×       58×                       20×            
import Component from './Component'
 
/**
  Renders an annotation. Used internally by different components (e.g. ui/AnnotatedTextComponent)
 
  @class
  @component
  @extends ui/Component
 
  @prop {Object} doc document
  @prop {Object} node node which describes annotation
 
  @example
 
  ```js
  $$(AnnotationComponent, {
    doc: doc,
    node: node
  })
  ```
*/
 
class AnnotationComponent extends Component {
 
  // TODO: we should avoid to have a didMount hook on an abstract base class
  didMount() {
    let node = this.props.node
    node.on('highlighted', this.onHighlightedChanged, this)
  }
 
  // TODO: we should avoid to have a didMount hook on an abstract base class
  dispose() {
    let node = this.props.node
    node.off(this)
  }
 
  render($$) {
    let el = $$(this.getTagName())
      .attr("data-id", this.props.node.id)
      .addClass(this.getClassNames())
    Iif (this.props.node.highlighted) {
      el.addClass('sm-highlighted')
    }
    el.append(this.props.children)
    return el
  }
 
  getClassNames() {
    return 'sc-'+this.props.node.type
  }
 
  onHighlightedChanged() {
    if (this.props.node.highlighted) {
      this.el.addClass('sm-highlighted')
    } else {
      this.el.removeClass('sm-highlighted')
    }
  }
 
  getTagName() {
    return 'span'
  }
 
}
 
export default AnnotationComponent