@eureca/eureca-ui/src/components/Board/card.js

UI component library of Eureca's user and admin apps

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

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

import { IconContext } from 'react-icons';
import { FiEdit, FiCopy, FiTrash2 } from 'react-icons/fi';

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

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

function stylesSelector(theme) {
  return {
    cardStyle: {
      padding: theme.spacing(2),
      paddingRight: theme.spacing(3),
      height: theme.spacing(9),
      boxSizing: 'border-box',
      position: 'relative',
    },
    textEllipsisStyle: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    },
    overlay: {
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: 0,
      backgroundColor: 'rgba(36, 160, 138, 0.9)',
      borderRadius: 4,
    },
  };
}

function IconCircle({ title, icon, id, ml, onClickIcon }) {
  const [active, setActive] = useState(false);

  function handleClick(e) {
    e.stopPropagation();
    onClickIcon(id);
  }

  return (
    <Flex
      alignCenter
      justifyCenter
      role="button"
      title={title}
      aria-label={title}
      onMouseEnter={() => setActive(true)}
      onMouseLeave={() => setActive(false)}
      onClick={handleClick}
      style={{
        backgroundColor: active ? colors.white : 'rgba(0, 144, 125, 0.9)',
        borderRadius: '50%',
        width: 32,
        height: 32,
      }}
      ml={ml || 0}
    >
      <IconContext.Provider
        value={{
          color: active ? colors.green1 : colors.gray7,
          attr: { 'data-testid': 'icon-id' },
        }}
      >
        {icon}
      </IconContext.Provider>
    </Flex>
  );
}

IconCircle.propTypes = {
  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.object]),
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  ml: PropTypes.number,
  onClickIcon: PropTypes.func,
};

function Card({
  id,
  columnId,
  title,
  icon,
  titleColor,
  subtitle,
  subtitleColor,
  iconColor,
  style,
  onClick,
  showAction,
  onClickCardAction,
}) {
  const theme = useTheme();
  const styles = stylesSelector(theme);

  const [hover, setHover] = useState(false);

  function onCardAction(action) {
    onClickCardAction(id, columnId, action);
  }

  return (
    <div
      role="button"
      aria-label={`Card ${title} ${subtitle}`}
      style={{ boxSizing: 'border-box' }}
      data-testid="card-test"
      onClick={e => onClick(e, id, title)}
    >
      <Box px={3} py={1.5}>
        <Flex
          directionRow
          alignCenter
          style={{ ...styles.cardStyle, ...styles.textEllipsisStyle, ...style }}
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        >
          <Box m={1.25} mr={3.25}>
            <IconContext.Provider
              value={{
                color: iconColor,
                attr: { 'data-testid': 'icon-id' },
              }}
            >
              {icon}
            </IconContext.Provider>
          </Box>
          <Flex directionColumn style={styles.textEllipsisStyle}>
            <Typography
              variant="body1"
              title={title}
              style={{ ...styles.textEllipsisStyle, color: titleColor }}
            >
              {title}
            </Typography>
            <Typography variant="body2" style={{ color: subtitleColor }}>
              {subtitle}
            </Typography>
          </Flex>
          {hover && showAction && (
            <Flex
              alignCenter
              justifyCenter
              directionRow
              style={styles.overlay}
              data-testid="edit-menu"
            >
              <Typography variant="h3" style={{ color: colors.white }}>
                Editar
              </Typography>
              <Flex directionRow alignCenter>
                <IconCircle
                  title="Editar"
                  icon={<FiEdit />}
                  id="edit"
                  ml={5}
                  onClickIcon={onCardAction}
                />
                <IconCircle
                  title="Copiar"
                  icon={<FiCopy />}
                  id="copy"
                  ml={1}
                  onClickIcon={onCardAction}
                />
                <IconCircle
                  title="Excluir"
                  icon={<FiTrash2 />}
                  id="delete"
                  ml={1}
                  onClickIcon={onCardAction}
                />
              </Flex>
            </Flex>
          )}
        </Flex>
      </Box>
    </div>
  );
}

Card.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  title: PropTypes.string.isRequired,
  icon: PropTypes.object.isRequired,
  subtitle: PropTypes.string,
  titleColor: PropTypes.string,
  subtitleColor: PropTypes.string,
  iconColor: PropTypes.string,
  isEditing: PropTypes.bool,
  style: PropTypes.object,
  onClick: PropTypes.func,
  showAction: PropTypes.bool,
  onClickCardAction: PropTypes.func,
};

Card.defaultProps = {
  title: '',
  icon: null,
  subtitle: '',
  titleColor: colors.gray2,
  subtitleColor: colors['color-757575'],
  iconColor: colors.green1,
  style: null,
  onClick: () => {},
  showAction: false,
  onClickCardAction: () => {},
};

export { Card };