@eureca/eureca-ui/src/components/Tabs/icon-tabs.js

UI component library of Eureca's user and admin apps

import React from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import { Box, Card, Typography } from '@material-ui/core';

import { IconContext } from 'react-icons';

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

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

const FaseTab = styled.div`
  ${({ isActive, disabled }) => css`
    background-color: ${colors.white};
    border: 1px solid ${colors.gray5};
    border-bottom: 0;
    cursor: pointer;
    &:first-child {
      border-top-left-radius: '4px';
    }
    &:nth-child(2) {
      border-left: 0;
      border-right: 0;
    }

    ${isActive &&
      css`
        background-color: ${colors.white};
      `}

    ${disabled &&
      css`
        background-color: ${colors.gray7};
        cursor: default;
      `}
  `}
`;

const styles = {
  childrenCard: {
    width: '100%',
    height: '100%',
    border: `1px solid ${colors.gray5}`,
    borderRadius: `0 0 4px 4px`,
  },
};

function IconTabs({ items, current, onChange, children }) {
  return (
    <div data-testid="iconTabsTestId">
      <Flex directionRow>
        {items.map(item => {
          const isActive = current === item.value;
          return (
            <FaseTab
              isActive={isActive}
              disabled={item.disabled}
              key={item.value}
              data-testid={`iconTabsTab-${item.value}`}
            >
              <Box
                py={2}
                px={3}
                onClick={!item.disabled ? () => onChange(item.value) : null}
                data-testid={`iconTabsClickable-${item.value}`}
              >
                <Flex directionRow>
                  <Box pr={1}>
                    <IconContext.Provider
                      value={{
                        color: isActive ? colors.green1 : colors.gray3,
                        size: '1.25rem',
                        attr: { 'data-testid': `iconTabsIcon-${item.value}` },
                      }}
                    >
                      {item.icon}
                    </IconContext.Provider>
                  </Box>
                  <Typography
                    variant="body1"
                    style={{
                      color: isActive ? colors.gray1 : colors.gray3,
                    }}
                  >
                    {item.label}
                  </Typography>
                </Flex>
              </Box>
            </FaseTab>
          );
        })}
      </Flex>
      <Card data-testid="iconTabsContent" style={styles.childrenCard}>
        {children}
      </Card>
    </div>
  );
}

IconTabs.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])
        .isRequired,
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
      icon: PropTypes.object,
      disabled: PropTypes.bool,
    })
  ).isRequired,
  current: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  onChange: PropTypes.func.isRequired,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
};

IconTabs.defaultProps = {
  items: [
    {
      label: '',
      value: 0,
      icon: null,
      disabled: false,
    },
  ],
  current: 0,
  onChange: () => {},
  children: null,
};

export { IconTabs };