ac-patterns/dist/dialog.js

var _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; };

import { h } from 'preact';
import cn from 'classnames';
import { Icon } from './icon';
import omit from './utils/omit';
import { Portal } from './portal';
import { Shield } from './shield';

export const Dialog = incomingProps => {
  const {
    className,
    title,
    doClose,
    forceChoice,
    style,
    bottom,
    children
  } = incomingProps;
  const props = omit(incomingProps, ['className', 'title', 'doClose', 'forceChoice', 'style', 'children', 'bottom']);
  return h(
    Portal,
    { into: 'body' },
    h(
      'div',
      { className: 'fixed z-999 vh-100 w-100 top-0 left-0 flex items-center justify-center' },
      h(Shield, { onClick: forceChoice ? null : doClose }),
      h(
        'dialog',
        _extends({
          open: true,
          style: Object.assign({
            minHeight: '150px',
            minWidth: '300px',
            width: '600px',
            // this is important for iOS
            maxHeight: 'calc(100vh - 120px)'
          }, style),
          className: cn('ph2 pt2 pb1 bg-white bn br3 shadow-2 z-999 relative flex flex-column', className)
        }, props),
        h(
          'div',
          { className: 'w-100 pt1 ph1' },
          !forceChoice &&
          // this is just a spacer
          h(
            'div',
            { className: 'fr', style: { width: '44px', height: '10px' } },
            h(
              'button',
              {
                onClick: doClose,
                style: { top: '-16px', right: '-4px' },
                className: 'button-reset bn bg-transparent relative pa3'
              },
              h(Icon, { icon: 'close' })
            )
          ),
          title && h(
            'h3',
            { className: 'mt0 mb2' },
            title
          )
        ),
        h(
          'div',
          { className: 'pa1 prevent-overscroll overflow-y-scroll w-100 overflow-x-hidden' },
          children
        ),
        h(
          'div',
          { className: 'ph1 pv2' },
          bottom
        )
      )
    )
  );
};