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

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Typography, Box, useTheme, Menu, MenuItem } from '@material-ui/core';

import { IconContext } from 'react-icons';
import { FiMoreVertical } from 'react-icons/fi';
import { BsPlusCircle } from 'react-icons/bs';

import { Droppable } from 'react-beautiful-dnd';

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

import { Task } from './task';
import { Card } from './card';

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

const DisabledContainer = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: ${colors.white};
  mix-blend-mode: saturation;
`;

const containerStyle = {
  position: 'relative',
  minWidth: 300,
  margin: 8,
  background: 'rgba(249, 248, 253, 0.3)',
  border: `${`1px solid ${colors.gray4}`}`,
  borderRadius: 4,
  boxSizing: 'border-box',
};

const columnHeaderStyle = {
  height: 56,
  padding: 16,
  borderBottom: `1px solid ${colors.e0e0e0}`,
};

const matchIcon = (taskType, cardsOptions) => {
  const option = cardsOptions.find(option => option.id === taskType);
  return option?.icon;
};

function Column({
  column,
  tasks,
  disabled,
  cardsOptions,
  onAddCard,
  onClickCard,
  columnMenu,
  onClickColumnMenu,
  onClickCardAction,
}) {
  const theme = useTheme();

  const [anchorElCard, setAnchorElCard] = useState(null);
  const [anchorElColumn, setAnchorElColumn] = useState(null);

  function handleOpenAdd(event) {
    setAnchorElCard(event.currentTarget);
  }

  function handleCloseAdd() {
    setAnchorElCard(null);
  }

  function handleSelectAdd(value) {
    onAddCard(value, column.id);
    handleCloseAdd();
  }

  function handleOpenColumn(event) {
    setAnchorElColumn(event.currentTarget);
  }

  function handleCloseColumn() {
    setAnchorElColumn(null);
  }

  function handleSelectColumn(value) {
    onClickColumnMenu(column.id, value);
    handleCloseColumn();
  }

  return (
    <Flex directionColumn style={containerStyle}>
      <Flex directionRow justifySpaceBetween alignCenter style={columnHeaderStyle}>
        <Flex directionRow alignCenter>
          <Box mr={1}>
            <IconContext.Provider value={{ color: colors.green1, size: '.9375rem' }}>
              {column.icon}
            </IconContext.Provider>
          </Box>
          <Typography variant="body1" style={{ color: colors.gray2 }}>
            {column.title}
          </Typography>
        </Flex>
        <Flex directionRow alignCenter justifyCenter>
          {column.points && (
            <Box mr={2}>
              <Typography variant="body1" style={{ color: colors.gray3 }}>
                {`${column.points} pts`}
              </Typography>
            </Box>
          )}
          <Flex
            width={theme.spacing(3)}
            height={theme.spacing(3)}
            style={{ cursor: 'pointer' }}
            alignCenter
            justifyCenter
            onClick={handleOpenColumn}
          >
            <FiMoreVertical color={colors.gray3} size={24} />
          </Flex>
        </Flex>
      </Flex>
      <Droppable droppableId={column.id}>
        {provided => (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            style={{ flexGrow: 1, padding: '16px 0px' }}
          >
            {tasks.map((task, index) => (
              <Task
                key={task.id}
                task={task}
                icon={matchIcon(task.type, cardsOptions)}
                index={index}
                onClickCard={onClickCard}
                onClickCardAction={onClickCardAction}
                columnId={column.id}
              />
            ))}
            {provided.placeholder}
            <Card
              id="add-new-module"
              title="Adicionar novo módulo"
              titleColor={colors.gray3}
              icon={<BsPlusCircle />}
              iconColor={colors.gray3}
              style={{ cursor: 'pointer' }}
              onClick={handleOpenAdd}
            />
            <Menu
              id="card-options-menu"
              anchorEl={anchorElCard}
              keepMounted
              open={Boolean(anchorElCard)}
              onClose={handleCloseAdd}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'center',
              }}
              anchorOrigin={{
                vertical: 60,
                horizontal: 'center',
              }}
              getContentAnchorEl={null}
            >
              {cardsOptions.map(option => (
                <MenuItem
                  key={option.id}
                  value={option.id}
                  onClick={() => handleSelectAdd(option.id)}
                  style={{ width: 224 }}
                >
                  <Flex directionRow alignCenter justifyCenter>
                    <Box mr={1}>
                      <IconContext.Provider value={{ color: colors.green1 }}>
                        {option.icon}
                      </IconContext.Provider>
                    </Box>
                    {option.name}
                  </Flex>
                </MenuItem>
              ))}
            </Menu>
            <Menu
              id="column-options-menu"
              anchorEl={anchorElColumn}
              keepMounted
              open={Boolean(anchorElColumn)}
              onClose={handleCloseColumn}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              anchorOrigin={{
                vertical: 32,
                horizontal: 'center',
              }}
              getContentAnchorEl={null}
            >
              {columnMenu.map(option => (
                <MenuItem
                  key={option.id}
                  value={option.id}
                  onClick={() => handleSelectColumn(option.id)}
                >
                  <Flex directionRow alignCenter justifyCenter>
                    <Box mr={1}>
                      <IconContext.Provider value={{ color: colors.gray2 }}>
                        {option.icon}
                      </IconContext.Provider>
                    </Box>
                    {option.name}
                  </Flex>
                </MenuItem>
              ))}
            </Menu>
          </div>
        )}
      </Droppable>
      {disabled && <DisabledContainer />}
    </Flex>
  );
}

Column.propTypes = {
  column: PropTypes.shape({
    id: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    points: PropTypes.string,
  }).isRequired,
  tasks: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
    }).isRequired
  ).isRequired,
  disabled: PropTypes.bool,
  onClickCardAction: PropTypes.func,
};

export { Column };