preact-material-components/Dialog/index.js

preact wrapper for "Material Components for the web"

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _preact = require("preact");

var _MaterialComponent = _interopRequireDefault(require("../MaterialComponent"));

var _dialog = require("@material/dialog/");

var _Button = _interopRequireDefault(require("../Button"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/**
 */
class Dialog extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'dialog';
    this._onAccept = this._onAccept.bind(this);
    this._onCancel = this._onCancel.bind(this);
  }

  componentDidMount() {
    this.MDComponent = new _dialog.MDCDialog(this.control);
    this.MDComponent.listen('MDCDialog:accept', this._onAccept);
    this.MDComponent.listen('MDCDialog:cancel', this._onCancel);
  }

  componentWillUnmount() {
    this.MDComponent.unlisten('MDCDialog:accept', this._onAccept);
    this.MDComponent.unlisten('MDCDialog:cancel', this._onCancel);
    this.MDComponent.destroy && this.MDComponent.destroy();
  }

  _onAccept(e) {
    if (this.props.onAccept) {
      this.props.onAccept(e);
    }
  }

  _onCancel(e) {
    if (this.props.onCancel) {
      this.props.onCancel(e);
    }
  }

  materialDom(props) {
    return (0, _preact.h)("aside", _extends({
      role: "alertdialog",
      ref: this.setControlRef
    }, props), (0, _preact.h)("div", {
      className: "mdc-dialog__surface"
    }, props.children), (0, _preact.h)("div", {
      className: "mdc-dialog__backdrop"
    }));
  }

}

class DialogHeader extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'dialog__header';
  }

  materialDom(props) {
    return (0, _preact.h)("header", props, (0, _preact.h)("h2", {
      className: "mdc-dialog__header__title"
    }, props.children));
  }

}
/**
 * @prop scrollable = false
 */


class DialogBody extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'dialog__body';
    this._mdcProps = ['scrollable'];
  }

  materialDom(props) {
    return (0, _preact.h)("section", props, props.children);
  }

}

class DialogFooter extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'dialog__footer';
  }

  materialDom(props) {
    return (0, _preact.h)("footer", props, props.children);
  }

}
/**
 * @prop cancel = false
 * @prop accept = false
 */


class DialogFooterButton extends _Button.default {
  constructor() {
    super();
    this.componentName = 'dialog__footer__button';
    this._mdcProps = ['cancel', 'accept'];
  }

  materialDom(props) {
    return (0, _preact.h)("button", _extends({}, props, {
      className: "mdc-button",
      ref: this.setControlRef
    }), props.children);
  }

}

Dialog.Header = DialogHeader;
Dialog.Body = DialogBody;
Dialog.Footer = DialogFooter;
Dialog.FooterButton = DialogFooterButton;
var _default = Dialog;
exports.default = _default;