@eureca/eureca-ui/src/components/EvaluationHeader/index.js

UI component library of Eureca's user and admin apps

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';

import { Box, Typography } from '@material-ui/core';

import { IconContext } from 'react-icons';

import { shadows } from '../../theme';
import { colors } from '../../theme/colors';
import { evaluationStatusDecoder } from '../../utils/evaluation-status-decoder';

import { Flex } from '../Flex';

const fontColor = {
  pending: colors.gray2,
  completed: colors.white,
  disqualified: colors.white,
};

const evaluationHeaderStyles = status => {
  const backgroundColor = evaluationStatusDecoder(status).color;
  const color = fontColor[status];
  return {
    type: { fontSize: '.875rem', color, flexShrink: 0 },
    icon: { fontSize: 20, color },
    username: { flexShrink: 0, color },
    title: {
      flexGrow: 1,
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      color,
    },
    divider: {
      borderRight: `1px solid ${colors.gray5}`,
      height: '100%',
    },
    container: {
      borderRadius: '4px 4px 0 0',
      boxShadow: shadows.cardShadow,
      backgroundColor,
      height: 56,
    },
    iconContainer: {
      width: 36,
      height: 36,
      borderRadius: '50%',
      border: `1px solid ${color}`,
    },
  };
};

function EvaluationHeader({ type, status = 'pending', title = '', name = '', icon }) {
  const styles = useMemo(() => evaluationHeaderStyles(status), [status]);
  return (
    <Flex
      directionRow
      alignCenter
      style={styles.container}
      data-testid="evaluation-header-container"
    >
      <Box pl={2}>
        <Flex justifyCenter alignCenter style={styles.iconContainer}>
          <IconContext.Provider
            value={{ style: styles.icon, attr: { 'data-testid': 'evaluation-header-icon' } }}
          >
            {icon}
          </IconContext.Provider>
        </Flex>
      </Box>
      <Box clone pl={1} pr={3}>
        <Typography variant="overline" style={styles.type}>
          {type}
        </Typography>
      </Box>
      <Box style={styles.divider} />
      <Box clone pl={3} pr={2}>
        <Typography variant="subtitle1" style={styles.title}>
          {title}
        </Typography>
      </Box>
      <Box clone pr={2}>
        <Typography variant="body1" style={styles.username}>
          {name}
        </Typography>
      </Box>
    </Flex>
  );
}

EvaluationHeader.defaultProps = {
  type: 'fit',
  status: 'pending',
  title: '',
  name: '',
  icon: null,
};

EvaluationHeader.propTypes = {
  type: PropTypes.oneOf(['fit', 'link', 'formulário', 'pdf', 'video', 'audio']).isRequired,
  status: PropTypes.oneOf(['pending', 'completed', 'disqualified']),
  title: PropTypes.string,
  name: PropTypes.string,
  icon: PropTypes.object,
};

export { EvaluationHeader };