all files / packages/button/ Button.js

0% Statements 0/20
0% Branches 0/10
0% Functions 0/5
0% Lines 0/20
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                                                                                                                                       
import { Component } from '../../ui'
 
/*
  @example
 
  ```js
  $$(Button, {
    name: 'add-ref' // used to resolve icon and label
    label: 'Add reference' // optional if you want to set the label string explicity
  })
  ```
*/
class Button extends Component {
  render($$) {
    let el = $$('button')
      .addClass('sc-button')
 
    if (this.props.icon) {
      el.append(this.renderIcon($$))
    }
    if (this.props.label) {
      el.append(this.renderLabel($$))
    }
    if (this.props.active) {
      el.addClass('sm-active')
    }
    if (this.props.style) {
      el.addClass('sm-style-'+this.props.style)
    }
    if (this.props.disabled) {
      // make button inaccessible
      el.attr('tabindex', -1)
        .attr('disabled', true)
    } else {
      // make button accessible for tab-navigation
      el.attr('tabindex', 1)
    }
 
    // Ability to inject additional elements (should be avoided!)
    el.append(this.props.children)
    return el
  }
 
  renderIcon($$) {
    let iconEl = this.context.iconProvider.renderIcon($$, this.props.icon)
    return iconEl
  }
 
  renderLabel($$) {
    return $$('div').addClass('se-label').append(
      this.getLabel(this.props.label)
    )
  }
 
  renderHint($$) {
    return $$('div').addClass('se-hint').append(
      this.getLabel(this.props.hint+'-hint')
    )
  }
 
  getLabel(name) {
    let labelProvider = this.context.labelProvider
    return labelProvider.getLabel(name)
  }
}
 
export default Button