@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
77 lines • 2.5 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import CircularProgress from '@mui/material/CircularProgress';
import MuiIconButton from './IconButtonStyles';
import { iconType } from './types';
/**
* IconButtons allow users to take actions, and make choices using icons to describe best the action
* It triggers an action or event when activated.
*
* Props of the [Material-UI Button](https://mui.com/material-ui/api/button/#props) component are also available.
*/
const IconButton = ({ children, type, fontSize = 'small', loading, size = 'medium', color = 'secondary', ...rest }) => {
const CustomIcon = useMemo(() => iconType[type], [type]);
const iconButtonProps = {
['aria-label']: type || 'iconButton'
};
return (React.createElement(MuiIconButton, { ...iconButtonProps, size: size, color: color, ...rest }, loading ? (React.createElement(CircularProgress, { color: "inherit", size: 24 })) : type ? (React.createElement(CustomIcon, { fontSize: fontSize })) : (children)));
};
IconButton.propTypes = {
/**
* @default 'secondary'
* Color of the button
*/
color: PropTypes.oneOf([
'primary',
'secondary',
'info',
'success',
'warning',
'error',
'rose',
'white',
'dark',
'transparent',
'default',
]),
/**
* @default 'medium'
* Size of the button
*/
size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
/**
* Override or extend the styles applied to the component
*/
className: PropTypes.string,
/**
* If true, button will be disabled. Default is set to false
*/
disabled: PropTypes.bool,
/**
* If true, button is in loading state.
*/
loading: PropTypes.bool,
/**
* Text to be displayed when the user hover over the button
*/
tooltip: PropTypes.string,
/**
* Content of the button
*/
children: PropTypes.node,
/**
* Callback fired when a "click" event is detected.
*/
onClick: PropTypes.func,
/**
* Custom icon to be displayed
*/
type: PropTypes.oneOf(['add', 'cancel', 'delete', 'download', 'downward', 'edit', 'view', 'save', 'upward', 'expandLess', 'expandMore']),
/**
* @default 'small'
* Size of the icon.
*/
fontSize: PropTypes.oneOf(['inherit', 'small', 'medium', 'large'])
};
export default IconButton;
//# sourceMappingURL=IconButton.js.map