{"size": 2021, "ext": "js", "max_stars_repo_path": "src/banner/src/components/Banner.js", "max_stars_repo_name": "openlattice/lattice-ui-kit", "max_stars_repo_stars_event_min_datetime": "2018-12-26T10:42:45.000Z", "max_stars_repo_stars_event_max_datetime": "2021-01-28T22:34:14.000Z", "max_issues_repo_path": "src/banner/src/components/Banner.js", "max_issues_repo_name": "openlattice/lattice-ui-kit", "max_issues_repo_issues_event_min_datetime": "2018-05-11T06:51:08.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-25T23:34:10.000Z", "max_forks_repo_path": "src/banner/src/components/Banner.js", "max_forks_repo_name": "openlattice/lattice-ui-kit", "max_forks_repo_forks_event_min_datetime": "2018-09-12T18:02:12.000Z", "max_forks_repo_forks_event_max_datetime": "2018-10-11T22:00:50.000Z"}
{"max_stars_count": 9, "max_issues_count": 1594, "max_forks_count": 2, "avg_line_length": 21.7311827957, "max_line_length": 104, "alphanum_fraction": 0.59673429}
// @flow
import { Component } from 'react';
import type { ComponentType } from 'react';

import { faCheckCircle, faExclamationTriangle, faTimesOctagon } from '@fortawesome/pro-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { IconDefinition } from '@fortawesome/react-fontawesome';

import { Container, Content, IconWrapper } from './styled/StyledBannerComponents';

import { getStyleVariation } from '../../../utils/StyleUtils';

const DEFAULT_BANNER_HEIGHT = '60px';

type Props = {
  className ? :string;
  children ? :Node;
  icon ? :IconDefinition | ComponentType<any>;
  isOpen ? :boolean;
  maxHeight ? :string;
  mode ? :'default' | 'danger' | 'success' | 'warning';
  sticky :boolean;
}

class Banner extends Component<Props> {

  static defaultProps = {
    className: undefined,
    children: undefined,
    icon: undefined,
    isOpen: false,
    maxHeight: DEFAULT_BANNER_HEIGHT,
    mode: undefined,
  };

  renderIcon = () => {
    const { icon } = this.props;

    const modeIcon = getStyleVariation('mode', {
      danger: faTimesOctagon,
      success: faCheckCircle,
      warning: faExclamationTriangle
    })(this.props);

    const finalIcon = icon || modeIcon;

    if (finalIcon) {
      if (typeof finalIcon === 'function') {
        return (
          <IconWrapper>
            { finalIcon() }
          </IconWrapper>
        );
      }

      return (
        <IconWrapper>
          <FontAwesomeIcon icon={finalIcon} fixedWidth />
        </IconWrapper>
      );
    }

    return null;
  }

  render() {
    const {
      className,
      children,
      isOpen,
      maxHeight,
      mode,
      sticky
    } = this.props;

    return (
      <Container
          className={className}
          isOpen={isOpen}
          maxHeight={maxHeight}
          mode={mode}
          sticky={sticky}>
        <Content>
          { this.renderIcon() }
          { children }
        </Content>
      </Container>
    );
  }
}

export default Banner;
