<commit_before>import React from 'react';
import cx from 'classnames';
import { props, t, skinnable } from '../utils';
import omit from 'lodash/omit';
import ModalPortal, { Props as ModalPortalProps } from './ModalPortal';
import FlexView from 'react-flexview';
import BackgroundDimmer from '../background-dimmer';

const ModalProps = {
  children: t.ReactChildren,
  title: t.maybe(t.String),
  footer: t.maybe(t.ReactChildren),
  iconClose: t.maybe(t.ReactChildren),
  overlay: t.interface({
    color: t.maybe(t.String),
    alpha: t.maybe(t.Number)
  }),
  dismissOnClickOutside: t.maybe(t.Boolean),
  onDismiss: t.maybe(t.Function),
  className: t.maybe(t.String),
  style: t.maybe(t.Object),
  id: t.maybe(t.String)
};

export const Props = {
  ...ModalPortalProps,
  ...ModalProps
};

/** Render a modal window over a dimmed layer
 * @param children - modal content
 * @param title - modal title
 * @param footer - modal footer
 * @param iconClose - close icon
 * @param overlay - specify 'color' and 'alpha' for the overlay layer
 * @param dismissOnClickOutside - whether the modal should be dismissed when clicking outside it
 * @param onDismiss - called when modal is dismissed
 * @param transitionEnterTimeout - transition enter timeout
 * @param transitionLeaveTimeout - transition leave timeout
 */
@skinnable()
@props(Props)
export default class Modal extends React.Component {

  static defaultProps = {
    onDismiss: () => {},
    dismissOnClickOutside: true,
    overlay: {
      color: 'black',
      alpha: 0.85
    }
  };

  getLocals() {
    const { className, ...props } = this.props;
    return {
      ...props,
      modalPortalProps: {
        ...omit(props, Object.keys(ModalProps)),
        className: cx('modal', className)
      }
    };
  }

  template({
    children, title, iconClose, footer,
    dismissOnClickOutside, onDismiss, overlay,
    style, id, modalPortalProps
  }) {
    return (
      <ModalPortal {...modalPortalProps}>
        <BackgroundDimmer
          {...{ ...overlay, style, id }}
          onClickOutside={dismissOnClickOutside ? onDismiss : undefined}
          maxWidth={950}
        >
          <FlexView className='modal-content' column grow >
            <FlexView className='modal-header' shrink={false} vAlignContent='center'>
              <FlexView className={cx('modal-title')} grow>
                {title}
              </FlexView>
              {iconClose && (
                <FlexView
                  className='modal-icon-close'
                  shrink={false}
                  marginLeft='auto'
                  onClick={onDismiss}
                >
                  {iconClose}
                </FlexView>
              )}
            </FlexView>
            <FlexView className='modal-body' column grow>
              {children}
            </FlexView>
            <FlexView className='modal-footer' column shrink={false}>
              {footer}
            </FlexView>
          </FlexView>
        </BackgroundDimmer>
      </ModalPortal>
    );
  }
}<commit_msg>Render modal footer and header only when defined.<commit_after>import React from 'react';
import cx from 'classnames';
import { props, t, skinnable } from '../utils';
import omit from 'lodash/omit';
import ModalPortal, { Props as ModalPortalProps } from './ModalPortal';
import FlexView from 'react-flexview';
import BackgroundDimmer from '../background-dimmer';

const ModalProps = {
  children: t.ReactChildren,
  title: t.maybe(t.String),
  footer: t.maybe(t.ReactChildren),
  iconClose: t.maybe(t.ReactChildren),
  overlay: t.interface({
    color: t.maybe(t.String),
    alpha: t.maybe(t.Number)
  }),
  dismissOnClickOutside: t.maybe(t.Boolean),
  onDismiss: t.maybe(t.Function),
  className: t.maybe(t.String),
  style: t.maybe(t.Object),
  id: t.maybe(t.String)
};

export const Props = {
  ...ModalPortalProps,
  ...ModalProps
};

/** Render a modal window over a dimmed layer
 * @param children - modal content
 * @param title - modal title
 * @param footer - modal footer
 * @param iconClose - close icon
 * @param overlay - specify 'color' and 'alpha' for the overlay layer
 * @param dismissOnClickOutside - whether the modal should be dismissed when clicking outside it
 * @param onDismiss - called when modal is dismissed
 * @param transitionEnterTimeout - transition enter timeout
 * @param transitionLeaveTimeout - transition leave timeout
 */
@skinnable()
@props(Props)
export default class Modal extends React.Component {

  static defaultProps = {
    onDismiss: () => {},
    dismissOnClickOutside: true,
    overlay: {
      color: 'black',
      alpha: 0.85
    }
  };

  getLocals() {
    const { className, title, iconClose, footer, ...props } = this.props;
    return {
      ...props,
      shouldRenderHeader: !!title || !!iconClose,
      title, iconClose,
      shouldRenderFooter: !!footer,
      footer,
      modalPortalProps: {
        ...omit(props, Object.keys(ModalProps)),
        className: cx('modal', className)
      }
    };
  }

  template({
    shouldRenderHeader, title, iconClose,
    children,
    shouldRenderFooter, footer,
    dismissOnClickOutside, onDismiss, overlay,
    style, id, modalPortalProps
  }) {
    return (
      <ModalPortal {...modalPortalProps}>
        <BackgroundDimmer
          {...{ ...overlay, style, id }}
          onClickOutside={dismissOnClickOutside ? onDismiss : undefined}
          maxWidth={950}
        >
          <FlexView className='modal-content' column grow >
            {shouldRenderHeader && (
              <FlexView className='modal-header' shrink={false} vAlignContent='center'>
                <FlexView className={cx('modal-title')} grow>
                  {title}
                </FlexView>
                {iconClose && (
                  <FlexView
                    className='modal-icon-close'
                    shrink={false}
                    marginLeft='auto'
                    onClick={onDismiss}
                  >
                    {iconClose}
                  </FlexView>
                )}
              </FlexView>
            )}
            <FlexView className='modal-body' column grow>
              {children}
            </FlexView>
            {shouldRenderFooter && (
              <FlexView className='modal-footer' column shrink={false}>
                {footer}
              </FlexView>
            )}
          </FlexView>
        </BackgroundDimmer>
      </ModalPortal>
    );
  }
}
{'fraction_non_alphanumeric': 0.12144183168316831, 'fraction_numerical': 0.0018564356435643563, 'mean_word_length': 2.2471120040180814, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 37, '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': '1025168', 'n_tokens_mistral': 1899, 'n_tokens_neox': 1795, 'n_words': 456}