Dialog

const Dialog = inkdrop.components.getComponentClass('Dialog')

type Props = {
  className?: string,
  children?: React.Node,
  visible: boolean,
  hiding: boolean,
  onBackdropClick?: () => any,
  autofocus?: boolean
}

'use babel'

import React, { useEffect, useCallback } from 'react'
import { logger, useModal } from 'inkdrop'

const HelloMessageDialog = props => {
  const modal = useModal()
  const { Dialog } = inkdrop.components.classes

  const toggle = useCallback(() => {
    modal.show()
    logger.debug('Dialog was toggled!')
  }, [])

  useEffect(() => {
    const sub = inkdrop.commands.add(document.body, {
      'yourplugin:toggle': toggle
    })
    return () => sub.dispose()
  }, [toggle])

  return (
    <Dialog {...modal.state} onBackdropClick={modal.close}>
      <Dialog.Title>Example</Dialog.Title>
      <Dialog.Content>Hello, world!</Dialog.Content>
      <Dialog.Actions>
        <button className="ui button" onClick={modal.close}>
          Close
        </button>
      </Dialog.Actions>
    </Dialog>
  )
}

export default HelloMessageDialog