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

UI component library of Eureca's user and admin apps

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

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

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

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

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

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,
  },
};

function ListItem({ value }) {
  const isArray = Array.isArray(value) && value.length > 1;
  const textToRender = isArray ? `(${value.length}) opções foram selecionadas` : value;
  return (
    <Typography variant="subtitle2" style={styles.text} title={isArray ? value.join(', ') : null}>
      {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>} }]
 * TODO: @tcp: can we do this better?
 */
function UnorderedList({ list, removeItem }) {
  return list && list.length > 0 ? (
    <Box p={2} style={styles.container}>
      {list.map(listItem => {
        let values = listItem.list;
        let listId = listItem.id;
        let threeItemsList = values.length === 3;
        const sm = threeItemsList ? 3 : 6;
        const xs = threeItemsList ? 5 : 3;
        return (
          <Grid container alignItems="center" spacing={6} key={listId}>
            <Grid item sm={sm} xs={xs}>
              <Flex directionRow alignCenter>
                <div style={styles.line} />
                {values[0] && <ListItem value={values[0]} />}
              </Flex>
            </Grid>
            <Grid item sm={5} xs={xs}>
              {values[1] && <ListItem value={values[1]} />}
            </Grid>
            {values[2] && (
              <Grid item xs={3}>
                <ListItem value={values[2]} />
              </Grid>
            )}
            <Grid item xs={1}>
              <FiMinusCircle
                style={{ cursor: 'pointer' }}
                onClick={() => removeItem(listItem.id)}
              />
            </Grid>
          </Grid>
        );
      })}
    </Box>
  ) : null;
}

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

UnorderedList.defaultProps = {
  list: [
    {
      id: 0,
      list: [
        {
          id: 0,
          list: ['Item', 'Values'],
        },
      ],
    },
  ],
  removeItem: () => {},
};

export { UnorderedList };