<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { noop } from 'lodash';
import BaseModal from 'react-overlays/lib/Modal';

import genId from '../../util/generateAlphaName';
import { useTheme } from '../../util/useTheme';
import Fade from '../../util/Fade';
import { ModalContext } from './ModalContext';
import Header from './ModalHeader';
import Body from './ModalBody';
import Footer from './ModalFooter';

const modalSize = {
  small: '300px',
  medium: '600px',
  large: '900px'
};

const DialogWrapper = styled(BaseModal)`
  height: 100%;
  left: 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1040;
`;

const ModalDialogMedium = styled.div`
  cursor: default;
  display: inline-block;
  top: 2em;
  width: 100%;

  @media (min-width: ${props => props.theme.screenSize.tablet}) {
    margin: 30px auto;
    width: ${modalSize.medium};
  }
`;

const ModalDialogSmall = styled(ModalDialogMedium)`
  width: 100%;

  @media (min-width: ${props => props.theme.screenSize.phone}) {
    margin: 30px auto;
    width: ${modalSize.small};
  }
`;

const ModalDialogLarge = styled(ModalDialogMedium)`
  width: 100%;

  @media (min-width: ${props => props.theme.screenSize.desktop}) {
    width: ${modalSize.large};
  }
`;

const ModalContent = styled.div`
  background-clip: padding-box;
  background-color: ${props => props.theme.colors.white};
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  font-size: ${props => props.theme.sizes.baseFontSize};
  outline: 0;
  position: relative;
  text-align: left;
`;

function getModalBySize(size) {
  switch (size) {
    case 'small':
      return ModalDialogSmall;
    case 'large':
      return ModalDialogLarge;
    default:
      return ModalDialogMedium;
  }
}

function Modal(props) {
  const {
    animation,
    backdrop,
    children,
    escapeExits,
    onEnter,
    onExit,
    onHide,
    show,
    size
  } = props;

  const theme = useTheme();
  const backdropStyle = {
    backgroundColor: theme.colors.black,
    bottom: 0,
    cursor: backdrop === 'static' ? 'auto' : 'pointer',
    left: 0,
    opacity: 0.5,
    position: 'fixed',
    right: 0,
    top: 0,
    zIndex: 'auto'
  };

  const ModalDialog = getModalBySize(size);

  const ariaId = genId();

  return (
    <ModalContext.Provider value={{ onHide, ariaId }}>
      <DialogWrapper
        backdrop={backdrop}
        backdropStyle={backdropStyle}
        keyboard={escapeExits}
        onEnter={onEnter}
        onExit={onExit}
        onHide={onHide}
        show={show}
        transition={animation ? Fade : undefined}
        className="es-modal"
      >
        <ModalDialog
          size={size}
          aria-labelledby={ariaId}
          className="es-modal__dialog"
        >
          <ModalContent className="es-modal__content">{children}</ModalContent>
        </ModalDialog>
      </DialogWrapper>
    </ModalContext.Provider>
  );
}

Modal.propTypes = {
  /** Open and close the Modal with a fade animation. */
  animation: PropTypes.bool,
  /**
   * Include a backdrop component. Specify 'static' for a backdrop that doesn't
   * trigger an "onHide" when clicked.
   */
  backdrop: PropTypes.oneOf(['static', true, false]),
  /**
   * Usually contains a Modal.Title, Modal.Body, and Modal.Footer
   * but can contain any content
   */
  children: PropTypes.any,
  /** Set whether the Escape key exits the modal */<commit_msg>Update: allowing passthrough props on Modal<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { noop } from 'lodash';
import BaseModal from 'react-overlays/lib/Modal';

import genId from '../../util/generateAlphaName';
import { useTheme } from '../../util/useTheme';
import Fade from '../../util/Fade';
import { ModalContext } from './ModalContext';
import Header from './ModalHeader';
import Body from './ModalBody';
import Footer from './ModalFooter';

const modalSize = {
  small: '300px',
  medium: '600px',
  large: '900px'
};

const DialogWrapper = styled(BaseModal)`
  height: 100%;
  left: 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1040;
`;

const ModalDialogMedium = styled.div`
  cursor: default;
  display: inline-block;
  top: 2em;
  width: 100%;

  @media (min-width: ${props => props.theme.screenSize.tablet}) {
    margin: 30px auto;
    width: ${modalSize.medium};
  }
`;

const ModalDialogSmall = styled(ModalDialogMedium)`
  width: 100%;

  @media (min-width: ${props => props.theme.screenSize.phone}) {
    margin: 30px auto;
    width: ${modalSize.small};
  }
`;

const ModalDialogLarge = styled(ModalDialogMedium)`
  width: 100%;

  @media (min-width: ${props => props.theme.screenSize.desktop}) {
    width: ${modalSize.large};
  }
`;

const ModalContent = styled.div`
  background-clip: padding-box;
  background-color: ${props => props.theme.colors.white};
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  font-size: ${props => props.theme.sizes.baseFontSize};
  outline: 0;
  position: relative;
  text-align: left;
`;

function getModalBySize(size) {
  switch (size) {
    case 'small':
      return ModalDialogSmall;
    case 'large':
      return ModalDialogLarge;
    default:
      return ModalDialogMedium;
  }
}

function Modal(props) {
  const {
    animation,
    backdrop,
    children,
    escapeExits,
    onEnter,
    onExit,
    onHide,
    show,
    size,
    ...other
  } = props;

  const theme = useTheme();
  const backdropStyle = {
    backgroundColor: theme.colors.black,
    bottom: 0,
    cursor: backdrop === 'static' ? 'auto' : 'pointer',
    left: 0,
    opacity: 0.5,
    position: 'fixed',
    right: 0,
    top: 0,
    zIndex: 'auto'
  };

  const ModalDialog = getModalBySize(size);

  const ariaId = genId();

  return (
    <ModalContext.Provider value={{ onHide, ariaId }}>
      <DialogWrapper
        backdrop={backdrop}
        backdropStyle={backdropStyle}
        keyboard={escapeExits}
        onEnter={onEnter}
        onExit={onExit}
        onHide={onHide}
        show={show}
        transition={animation ? Fade : undefined}
      >
        <ModalDialog size={size} aria-labelledby={ariaId} {...other}>
          <ModalContent>{children}</ModalContent>
        </ModalDialog>
      </DialogWrapper>
    </ModalContext.Provider>
  );
}

Modal.propTypes = {
  /** Open and close the Modal with a fade animation. */
  animation: PropTypes.bool,
  /**
   * Include a backdrop component. Specify 'static' for a backdrop that doesn't
   * trigger an "onHide" when clicked.
   */
  backdrop: PropTypes.oneOf(['static', true, false]),
  /**
   * Usually contains a Modal.Title, Modal.Body, and Modal.Footer
   * but can contain any content
   */
  children: PropTypes.any,
  /** Set whether the Escape key exits the modal */
{'fraction_non_alphanumeric': 0.14110787172011663, 'fraction_numerical': 0.014868804664723033, 'mean_word_length': 3.0621669626998225, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5711381', 'n_tokens_mistral': 2335, 'n_tokens_neox': 2220, 'n_words': 570}