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

UI component library of Eureca's user and admin apps

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

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

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

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

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',
  height: 56,
  padding: 16,
};

function AddColumn({ add, phaseOptions }) {
  const [anchorEl, setAnchorEl] = React.useState(null);

  function handleClick(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  function handleSelect(event, value) {
    add(value);
    handleClose();
  }

  return (
    <div style={containerStyle}>
      <Flex directionRow alignCenter onClick={handleClick}>
        <Flex mr={1} alignCenter justifyCenter>
          <BsPlusCircle color={colors.gray3} size={15} />
        </Flex>
        <Typography style={{ cursor: 'pointer', color: colors.gray3 }}>
          Adicionar nova fase
        </Typography>
      </Flex>
      <Menu
        id="add-column-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
        onChange={handleSelect}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        style={{ transform: 'translate(-16px, 20px)' }}
        getContentAnchorEl={null}
      >
        {phaseOptions.map(option => {
          return (
            <MenuItem
              key={option.id}
              value={option.value}
              onClick={event => handleSelect(event, option.label)}
            >
              <Flex directionRow alignCenter justifyCenter>
                <Box mr={1}>
                  <IconContext.Provider value={{ color: colors.green1 }}>
                    {option.icon}
                  </IconContext.Provider>
                </Box>
                {option.label}
              </Flex>
            </MenuItem>
          );
        })}
      </Menu>
    </div>
  );
}

AddColumn.propTypes = {
  add: PropTypes.func.isRequired,
  phaseOptions: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      label: PropTypes.string,
      icon: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
    })
  ),
};

AddColumn.defaultProps = {
  add: () => {},
  phaseOptions: [
    {
      id: 0,
      value: '',
      label: '',
      icon: null,
    },
  ],
};

export { AddColumn };