@eureca/eureca-ui/src/components/GroupAction/group-action.js

UI component library of Eureca's user and admin apps

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

import { IconContext } from 'react-icons';
import { FaSpinner } from 'react-icons/fa';
import { FiCheckSquare, FiXCircle } from 'react-icons/fi';

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

import { Box } from '@material-ui/core';
import { Flex } from '../Flex';

const icons = {
  success: <FiCheckSquare />,
  loading: <FaSpinner />,
  error: <FiXCircle />,
};

const style = {
  icon: {
    fontSize: '1.25rem',
    color: colors.white,
  },
  container: {
    boxSizing: 'border-box',
    position: 'sticky',
    bottom: 0,
    left: 0,
  },
  error: {
    backgroundColor: colors.error1,
  },
  loading: {
    backgroundColor: colors.gray2,
  },
  success: {
    backgroundColor: colors.green1,
  },
  warning: {
    backgroundColor: colors.color3,
  },
  simple: {
    backgroundColor: colors.white,
    borderTop: `1px solid ${colors.gray5}`,
    height: 71,
  },
};

function GroupAction() {
  const { content, variant, isOpen } = useGroupAction();

  return (
    isOpen && (
      <Flex width={1} height={56} style={{ ...style.container, ...style[variant] }} px={3}>
        <Flex directionRow alignCenter height="100%">
          {variant !== 'simple' && (
            <Box mr={3}>
              {icons[variant] && (
                <IconContext.Provider value={{ style: style.icon }}>
                  {icons[variant]}
                </IconContext.Provider>
              )}
            </Box>
          )}
          <Box width={1}>{content?.current}</Box>
        </Flex>
      </Flex>
    )
  );
}

GroupAction.defaultProps = {
  variant: 'simple',
};

GroupAction.propTypes = {
  variant: PropTypes.string,
};

export { GroupAction };