lucid-ui/lib/components/Dialog/examples/5.no-modal.js

A UI component library from AppNexus.

import _partial from "lodash/partial";
import React from 'react';
import createClass from 'create-react-class';
import { Button, Dialog } from '../../../index';
export default createClass({
  getInitialState: function getInitialState() {
    return {
      isShown: false
    };
  },
  handleShow: function handleShow(isShown) {
    this.setState({
      isShown: isShown
    });
  },
  render: function render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
      onClick: _partial(this.handleShow, !this.state.isShown)
    }, "Toggle"), /*#__PURE__*/React.createElement(Dialog, {
      isModal: false,
      isShown: this.state.isShown,
      handleClose: _partial(this.handleShow, !this.state.isShown),
      onBackgroundClick: _partial(this.handleShow, false),
      onEscape: _partial(this.handleShow, false),
      Header: "Header",
      size: "small"
    }, "In most cases, you'll probably just use an isModal Dialog, but this example shows that the Dialog doesn't have to be a modal. Try pressing \"escape\" to close this Dialog.", /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
      kind: "invisible",
      onClick: _partial(this.handleShow, false),
      style: {
        marginRight: '9px'
      }
    }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
      kind: "primary"
    }, "Save"))));
  }
});