Dashboard.Modal

It is super easy to create your own Dashboard modals for your plugin. Just extend the Modal class exposed on the Dashboard object.

Simple Modal without state

class MyModal extends Dashboard.Modal {
    componentWillMount() {
        this.props.setTitle('My awesome title')

        this.props.setModalSize(Dashboard.MODALSIZE.WIDE)
    }

    render() {
        return <Dashboard.GUI.Title text="Look at my Modal, my Modal is amazing" />
    }
}

MODALSIZE is an object from Dashboard contain a multiple sizes for your modal you can use: AUTO, NORMAL, WIDE and FULL

Advanced event Modal with state

// Your Modal Class
class MyModal extends Dashboard.Modal {
    constructor() {
        super()

        this.state = {
           title: null
        }
    }
    render() {
        return <Dashboard.GUI.Title text={this.state.title} />
    }

    componentWillMount() {
        this.on('myPlugin:setModalTitle', title => this.setState({title}))
    }
}

// Your Application Class
class MyApplication extends Dashboard.Application {
    render() {
        return <Dashboard.GUI.Button text="Open modal" onClick={() => {
            this.openModal(MyModal, () => {
                // This callback is called when the modal has rendered.
                // Therefore we know that the modal is listening to "myPlugin:setModalTitle".
                this.send("myPlugin:setModalTitle", "Look at my Modal, my Modal is amazing")
            })
        }} />
    }
}

Use events to communicate and pass data between your plugin and the modal. Why you don't get a reference to the initialised class is because the modal is rendered out of your plugin context. But it is possible to inject props (object) into an modal when you open it. This props will be added to the component native props.

---

💁🏻 Use injected props if you have data when you initialise your modal. Otherwise use events. You can of course combine the two.

---

Injected props

this.openModal(MyModal, injectedProps)

Pass the injected props as the second or third parameter. The Dashboard will figure out by itself which of the parameters is injected props or the callback.

this.openModal(MyModal, injectedProps, () => {})

Good to know: Your should not initialize the modal class by yourself. Instead pass it as the parameter to the openModal function in your application.