react-toolbox/components/dialog/Dialog.js

A set of React components implementing Google's Material Design specification with the power of CSS Modules.

/* eslint-disable jsx-a11y/aria-role */
import React from 'react';
import PropTypes from 'prop-types';
import { themr } from 'react-css-themr';
import classnames from 'classnames';
import { DIALOG } from '../identifiers';
import Portal from '../hoc/Portal';
import ActivableRenderer from '../hoc/ActivableRenderer';
import InjectButton from '../button/Button';
import InjectOverlay from '../overlay/Overlay';

const factory = (Overlay, Button) => {
  const Dialog = (props) => {
    const actions = props.actions.map((action, idx) => {
      const className = classnames(props.theme.button, { [action.className]: action.className });
      return <Button key={idx} {...action} className={className} />; // eslint-disable-line
    });

    const className = classnames([props.theme.dialog, props.theme[props.type]], {
      [props.theme.active]: props.active,
    }, props.className);

    return (
      <Portal className={props.theme.wrapper}>
        <Overlay
          active={props.active}
          className={props.theme.overlay}
          onClick={props.onOverlayClick}
          onEscKeyDown={props.onEscKeyDown}
          onMouseDown={props.onOverlayMouseDown}
          onMouseMove={props.onOverlayMouseMove}
          onMouseUp={props.onOverlayMouseUp}
          theme={props.theme}
          themeNamespace="overlay"
        />
        <div data-react-toolbox="dialog" className={className}>
          <section role="body" className={props.theme.body}>
            {props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
            {props.children}
          </section>
          {actions.length
            ? <nav className={props.theme.navigation}>
              {actions}
            </nav>
            : null
          }
        </div>
      </Portal>
    );
  };

  Dialog.propTypes = {
    actions: PropTypes.arrayOf(PropTypes.shape({
      className: PropTypes.string,
      label: PropTypes.string,
      children: PropTypes.node,
    })),
    active: PropTypes.bool,
    children: PropTypes.node,
    className: PropTypes.string,
    onEscKeyDown: PropTypes.func,
    onOverlayClick: PropTypes.func,
    onOverlayMouseDown: PropTypes.func,
    onOverlayMouseMove: PropTypes.func,
    onOverlayMouseUp: PropTypes.func,
    theme: PropTypes.shape({
      active: PropTypes.string,
      body: PropTypes.string,
      button: PropTypes.string,
      dialog: PropTypes.string,
      navigation: PropTypes.string,
      overflow: PropTypes.string,
      overlay: PropTypes.string,
      title: PropTypes.string,
      wrapper: PropTypes.string,
    }),
    title: PropTypes.string,
    type: PropTypes.string,
  };

  Dialog.defaultProps = {
    actions: [],
    active: false,
    type: 'normal',
  };

  return ActivableRenderer()(Dialog);
};

const Dialog = factory(InjectOverlay, InjectButton);
export default themr(DIALOG)(Dialog);
export { Dialog };
export { factory as dialogFactory };