@eureca/eureca-ui/src/components/UnorderedList/unordered-list-accordion.js

UI component library of Eureca's user and admin apps

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

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

import { FiMinusCircle } from 'react-icons/fi';
import { FaRegCheckCircle } from 'react-icons/fa';

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

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

const AccordionGroup = styled.div`
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
  & > div {
    border-bottom: 1px solid ${colors.gray5};
  }
  & > div:last-child {
    border-bottom: 0;
  }
`;

const styles = {
  line: {
    height: 1,
    width: 8,
    backgroundColor: colors.green1,
    marginRight: 8,
  },
  container: {
    backgroundColor: colors['color-f5f7fa'],
    borderRadius: '4px 4px 0 0',
  },
  text: {
    color: colors.gray2,
  },
  deleteIcon: {
    cursor: 'pointer',
    color: colors.gray2,
  },
};

function ListItem({ value }) {
  const textToRender =
    value.length > 1
      ? `(${value.length < 9 ? `0${value.length}` : value.length}) selecionados`
      : `(0${value.length}) selecionado`;
  return (
    <Typography
      variant="body1"
      component="span"
      style={styles.text}
      title={value.length > 1 ? value.join(', ') : value}
    >
      {textToRender}
    </Typography>
  );
}

ListItem.propTypes = {
  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
};

/**
 * List should be array of objects following this: [{ id: <number>, list: [<content>} }]
 */
function UnorderedListAccordion({ list, removeItem }) {
  return list && list.length > 0 ? (
    <AccordionGroup>
      {list.map((listItem, listIndex) => {
        let values = listItem.list;
        let listId = listItem.id;
        return (
          <Accordion
            isList
            icon={<FaRegCheckCircle />}
            iconColor={colors.gray4}
            title={values[0]}
            selected={<ListItem value={values[1]} />}
            type={values[2]}
            key={listId}
          >
            <Box p={3}>
              {values[1].map((item, index) => {
                return (
                  <Grid container spacing={3} key={index}>
                    <Grid item xs={1}>
                      <Flex alignCenter justifyCenter height="100%">
                        <Flex
                          width={24}
                          height={24}
                          alignCenter
                          justifyCenter
                          onClick={() => removeItem(listIndex, index)}
                          style={styles.deleteIcon}
                        >
                          <FiMinusCircle />
                        </Flex>
                      </Flex>
                    </Grid>
                    <Grid item xs={11}>
                      <Typography variant="body1" style={{ color: colors.gray2 }}>
                        {item}
                      </Typography>
                    </Grid>
                  </Grid>
                );
              })}
            </Box>
          </Accordion>
        );
      })}
    </AccordionGroup>
  ) : null;
}

UnorderedListAccordion.propTypes = {
  list: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      list: PropTypes.arrayOf(
        PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number])
      ).isRequired,
    }).isRequired
  ).isRequired,
  removeItem: PropTypes.func.isRequired,
};

export { UnorderedListAccordion };