@eureca/eureca-ui/src/components/Evaluation/evaluation-score.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

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

import { colors } from '../../theme/colors';

const scoreStyles = final => ({
  text: {
    textTransform: final && 'uppercase',
    color: final ? colors.white : colors.green2,
  },
  score: {
    color: final ? colors.white : colors.green2,
  },
});

/**
 * Assumimos que o score é sempre maior ou igual a zero
 * @tcp: Clarificar com time eureca se o score pode ser negativo
 */
function EvaluationScore({ final = false, title = '', score }) {
  let scoreAsNumber = parseInt(score, 10);
  /* Por enquanto, o fallback é retornar score para 0, sem nenhum throw */
  if (scoreAsNumber < 0 || isNaN(scoreAsNumber)) {
    console.warn('EvaluationScore: O score deve ser um número maior ou igual a zero');
    scoreAsNumber = 0;
  }
  const result = scoreAsNumber < 10 ? ('0' + scoreAsNumber).slice(-2) : scoreAsNumber;
  const text = final ? 'Pontuação final' : `Pontuação ${title && title}`;
  const styles = scoreStyles(final);
  return (
    <Flex directionRow alignCenter justifyFlexEnd bgcolor={final ? colors.green2 : colors.white}>
      <Typography data-testid="title-testid" variant="h5" style={styles.text}>
        {text}
      </Typography>
      <Box clone p={2} ml={1}>
        <Typography data-testid="result-testid" variant="h4" style={styles.score}>
          {result}
        </Typography>
      </Box>
    </Flex>
  );
}

EvaluationScore.propTypes = {
  final: PropTypes.bool,
  title: PropTypes.string,
  score: PropTypes.number.isRequired,
};

export { EvaluationScore };