How to use the @material/dialog.MDCDialog function in @material/dialog

componentDidMount() {
    this.dialog = new MDCDialog(this.refs.na)
    this.dialog.listen('MDCDialog:closed', (event) => {
      // NB default action needs to happen in all cases,
      // do not add breaks.
      switch (event.detail.action) {
        case 'add_attribute':
          this.props.add(this.state.attribute)
        case 'add_from_picker':
        case 'cancel':
        default:
          this.setState({attribute: this.defaultValue})
          this.props.hide()
          this.dialog.close()
      }
    })
    this.dialog.listen('MDCDialog:opened', () => {
      this.dialog.layout()

const mdcTextContent = controller.textContent || options.textContent ||
          controller.content || options.content || '';

        if (mdcHtmlContent && !$injector.has('$sanitize')) {
          throw Error('The ngSanitize module must be loaded in order to use htmlContent.');
        }

        if (mdcHtmlContent && mdcTextContent) {
          throw Error('mdc-dialog cannot have both `htmlContent` and `textContent`');
        }

        // Only assign the content if nothing throws, otherwise it'll still be compiled.
        controller.mdcHtmlContent = mdcHtmlContent;
        controller.mdcTextContent = mdcTextContent;
      }
      options.mdcDialog = new MDCDialog(element[0]);
    }

this._snackbar = new MDCSnackbar(document.querySelector('.mm-snackbar'));

    // Add event listener to button to toggle the menu on and off.
    this._elements.more.addEventListener('click', () =>
        this._booted.then(() => (menu.open = !menu.open)));

    // Add event listener to open Settings screen.
    document.querySelector('.mm-menu__settings').addEventListener('click',
        () => this._settingsViewPromise.then((view) => {
          view.show(this._screens.convert);
          history.pushState({page: 'settings'}, 'Settings');
        }));

    const ratesDialog =
        new MDCDialog(document.querySelector('#mm-rates-dialog'));
    document.querySelector('.mm-menu__rates').addEventListener('click', () => {
      this._updateRateInfo();
      ratesDialog.show();
    });
    document.querySelector('.mm-convert__last-updated').addEventListener(
        'click', () => {
          this._updateRateInfo();
          ratesDialog.show();
        });

    const aboutDialog =
        new MDCDialog(document.querySelector('#mm-about-dialog'));
    document.querySelector('.mm-menu__about').addEventListener('click', () => {
      this._updateRateInfo();
      aboutDialog.show();
    });

mounted() {
        let vm = this;
        vm.mdcDialog = new MDCDialog(this.$el)
        vm.mdcDialog.listen('MDCDialog:accept', function() {
            vm.$emit('accept')
        })
        vm.mdcDialog.listen('MDCDialog:cancel', function() {
            vm.$emit('cancel')
        })

        if (vm.$slots.dialogAcceptButton)
            vm.$slots.dialogAcceptButton.map((n) => {
                n.elm.classList.add('mdc-dialog__footer__button')
                n.elm.classList.add('mdc-dialog__footer__button--accept')
            })
        if (vm.$slots.dialogCancelButton)
            vm.$slots.dialogCancelButton.map((n) => {
                n.elm.classList.add('mdc-dialog__footer__button')
                n.elm.classList.add('mdc-dialog__footer__button--cancel')

componentDidMount() {
    this.dialog = new MDCDialog(this.refs.na)
    this.dialog.listen('MDCDialog:closed', (event) => {
      switch (event.detail.action) {
        case 'add':
          this.props.createNewDatatype(this.state.name, this.state.module)
          this.setState({canCreate: false})
          this.props.hide()
          this.dialog.close()
          this.props.navigateTo(`/datatype/${this.state.name}`)
          break
        case 'cancel':
        default:
          this.props.hide()
          this.dialog.close()
      }
    })
    this.dialog.listen('MDCDialog:opened', () => {

componentDidMount() {
    this.dialog = new MDCDialog(this.refs.picker)
    this.dialog.listen('MDCDialog:closed', (event) => {
      switch (event.detail.action) {
        case 'cancel':
          this.props.cancel()
        default:
          this.dialog.close()
      }
    })
  }

mounted: function() {
    this.dialog = new MDCDialog(document.querySelector(`#${this.id}`));
    this.dialog.listen('MDCDialog:accept', this.onAccept);
    this.dialog.listen('MDCDialog:cancel', this.onCancel);
  },

installed() {
    this.dialog = new MDCDialog(this.shadowRoot.querySelector('.mdc-dialog'))

    this.props.show ? this.dialog.open() : this.dialog.close()

    this.dialog.listen('MDCDialog:opening', (e) => { this._fire('opening', e) })
    this.dialog.listen('MDCDialog:opened', (e) => { this._fire('opened', e) })
    this.dialog.listen('MDCDialog:closing', (e) => { this._fire('closing', e) })
    this.dialog.listen('MDCDialog:closed', (e) => { this._fire('closed', e) })
  }

componentDidMount() {
    this.dialog = new MDCDialog(this.refs.na)
    this.dialog.listen('MDCDialog:closed', (event) => {
      switch (event.detail.action) {
        case 'restart':
          this.props.goHome()
        case 'cancel':
        default:
          this.props.hide()
          this.dialog.close()
      }
    })
    this.dialog.listen('MDCDialog:opened', () => {
      this.dialog.layout()
    })
  }