@eureca/eureca-ui/src/components/Buttons/bottom-fab.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Box, Fab } from '@material-ui/core';

import { FaPlus } from 'react-icons/fa';

import { IconAndLabelMenuList } from '../Menu';

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

const styles = {
  button: {
    position: 'fixed',
    bottom: 0,
    right: 0,
  },
};

function BottomFab({ options = [], onClick, styleProps, ...props }) {
  const [anchor, setAnchor] = useState();

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

  function handleClose() {
    setAnchor(null);
  }

  return (
    <Box m={2} style={{ ...styles.button, ...styleProps }}>
      <Fab color="primary" onClick={e => handleClick(e)} {...props}>
        <FaPlus color={colors.color1} />
      </Fab>
      <IconAndLabelMenuList
        options={options}
        anchor={anchor}
        onClose={handleClose}
        onClick={(_, value) => {
          handleClose();
          onClick(value);
        }}
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
        transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      />
    </Box>
  );
}

BottomFab.propTypes = {
  /** Array de opções do menu interno com objetos no pradrão abaixo*/
  options: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      icon: PropTypes.object,
      label: PropTypes.string.isRequired,
    }).isRequired
  ),
  /** Função de onClick dos items do menu, recebe de volta um value */
  onClick: PropTypes.func,
  /** Objeto com estilos adicionais se necessário override */
  styleProps: PropTypes.object,
};

export { BottomFab };