import { Component, $$, domHelpers } from '../dom'

export default class ModalCanvas extends Component {
  getActionHandlers () {
    return {
      cancel: this._cancel,
      confirm: this._confirm
    }
  }

  render () {
    const { renderModal } = this.state
    const el = $$('div', { class: 'sc-modal-canvas' })
    if (renderModal) {
      el.append(
        renderModal().ref('renderedModal')
      )
    }
    // do not let the global context menu handler handle this
    el.on('contextmenu', domHelpers.stopAndPrevent)
    return el
  }

  openModal (renderModal) {
    // if (this._resolve) throw new Error('Previous modal has not been closed.')
    this.setState({ renderModal })
    return new Promise((resolve, reject) => {
      this._resolve = resolve
    })
  }

  close () {
    this._cancel()
  }

  _cancel () {
    this._resolve(null)
    this._resolve = null
    this.setState({})
    this.send('closePopover')
  }

  _confirm () {
    this._resolve(this.refs.renderedModal)
    this._resolve = null
    this.setState({})
    this.send('closePopover')
  }
}

@@ -257,16 +257,52 @@
 s.state%0A
+    const %7B isMobile %7D = this.props%0A
     cons
@@ -344,24 +344,73 @@
 -canvas' %7D)%0A
+    if (isMobile) el.addClass('sm-modal-mobile')%0A
     if (rend

Add css class for mobile modal canvas.