/**
* @author Roushan Sourav
* @description Generic button with default proceessing and success state management
* Still is in Beta, need to test with other environment and usecases.
* Use it and modify it according to need, but with care.
* Thanks and Regards.
*/
import React, {useState} from 'react';
import {Button} from '@settlin/formik-mui';
import PropTypes from 'prop-types';
/**
*This component renders a Button which shows a CircularProgress animation till client receive response from server.
*If client receives error, then error callback is called, otherwise success callback is called.
* @param {Object} props -props for Button.
* @returns {JSX} -Mui Button with default error callback and success callback.
* *******************************************************************************************************************************
* props are:
* 1. onClick {Function} : click handler for click event on Button. It exposes setSubmitting and setSuccess.
* 2. children {Object} : Content Inside Button.
* 3. CircularProgressProps {Object} : prop for CircularProgress.
* 4. style {Object} : prop for inline-styling, if not preferring className.
* 5. rest {Object} : all the props available for Mui Button(For reference check this link: https://material-ui.com/api/button/)
* *******************************************************************************************************************************
* States are:
* 1. isSuccess {Boolean} : state for setting success prop.
* 2. isSubmitting {Boolean} : state for setting processing and disabled prop.
*/
function GenericButton({onClick, children, CircularProgressProps, style, ...rest}) {
const [isSuccess, setSuccess] = useState(false);
const [isSubmitting, setSubmitting] = useState(false);
function clickHandler() {
setSubmitting(true);
onClick({setSubmitting, setSuccess});
}
return (
<Button
CircularProgressProps={{size: 18, ...CircularProgressProps}}
disabled={isSubmitting}
onClick={clickHandler}
processing={isSubmitting}
style={{width: 'max-content', ...style}}
success={isSuccess}
{...rest}
>
{children}
</Button>
);
}
GenericButton.propTypes = {
onClick: PropTypes.func,
children: PropTypes.node,
CircularProgressProps: PropTypes.object,
style: PropTypes.object,
};
export default GenericButton;