Skip to content

Commit

Permalink
UConfirmationButton enhancment and example updated
Browse files Browse the repository at this point in the history
  • Loading branch information
vinu.ganesan committed Dec 21, 2023
1 parent 976e833 commit 69925e4
Show file tree
Hide file tree
Showing 3 changed files with 333 additions and 151 deletions.
232 changes: 155 additions & 77 deletions example/src/components/UConfirmationButtonExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,24 @@ import LinkOffIcon from '@material-ui/icons/LinkOff'
import MoreVertIcon from '@material-ui/icons/MoreVert'

export default function UConfirmationButtonExample() {
const [anchorEl, setAnchorEl] = useState(null)
const open = Boolean(anchorEl)
const itemId = 1
const [anchorEl, setAnchorEl] = useState({ menu: null, popup: null })
const openMenuVariant = Boolean(anchorEl.menu)
const openPopupVariant = Boolean(anchorEl.popup)

function handleDelete(event, id) {
console.log(id)
}
function handleClick(event) {
setAnchorEl(event.currentTarget)
function handleClick(event, type) {
setAnchorEl({
...anchorEl,
[type]: event.currentTarget,
})
}
function handleClose() {
setAnchorEl(null)
function handleClose(type) {
setAnchorEl({
...anchorEl,
[type]: null,
})
}

return (
Expand All @@ -32,83 +39,154 @@ export default function UConfirmationButtonExample() {
Confirmation button
</Typography>
</Grid>
<Grid item xs={12} sm={4} md={3}>
<Typography variant="subtitle1">Popup variant</Typography>
<UConfirmationButton
confirmText="Are you sure you want to delete the item?"
onConfirm={handleDelete}
id={itemId}
buttonText="Delete"
variant="popup"
/>
</Grid>
<Grid item xs={12} sm={4} md={3}>
<Typography variant="subtitle1">Icon variant</Typography>
<UConfirmationButton
onConfirm={handleDelete}
id={itemId}
buttonText="Delete"
/>
<Grid item xs={12}>
<Typography variant="subtitle1">Confirmation popup variant</Typography>
</Grid>
<Grid item xs={12} sm={4} md={3}>
<Typography variant="subtitle1">Menu item variant</Typography>
<IconButton
aria-label="more"
aria-controls="menu-item-variant"
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
id="menu-item-variant"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={handleClose}
disableEnforceFocus={true}
>
<MenuItem onClick={handleClose}>
<Link href="#" underline="none">
Edit
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link href="#" underline="none">
View
</Link>
</MenuItem>
<Grid container item xs={12}>
<Grid item xs={12} sm={6} md={3}>
<Typography variant="subtitle1">Icon</Typography>
<UConfirmationButton
confirmText="Are you sure you want to delete the item?"
onConfirm={handleDelete}
id={1}
buttonText="Delete"
confirmationVariant="popup"
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Typography variant="subtitle1">Menu item</Typography>
<IconButton
aria-label="more"
aria-controls="menu-item-variant-confirm-popup"
aria-haspopup="true"
onClick={e => handleClick(e, 'popup')}
>
<MoreVertIcon />
</IconButton>
<Menu
id="menu-item-variant-confirm-popup"
anchorEl={anchorEl.popup}
keepMounted
open={openPopupVariant}
onClose={() => handleClose('popup')}
disableEnforceFocus={true}
>
<MenuItem onClick={() => handleClose('popup')}>
<Link href="#" underline="none">
Edit
</Link>
</MenuItem>
<MenuItem onClick={() => handleClose('popup')}>
<Link href="#" underline="none">
View
</Link>
</MenuItem>
<UConfirmationButton
onConfirm={handleDelete}
id={2}
confirmText="Are you sure you want to delete the item?"
buttonText="Delete"
variant="menuItem"
icon={null}
confirmationVariant="popup"
/>
</Menu>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Typography variant="subtitle1">Button</Typography>
<UConfirmationButton
onConfirm={handleDelete}
id={itemId}
id={3}
confirmText="Are you sure you want to delete the item?"
buttonText="Delete"
variant="menuItem"
icon={null}
variant="button"
confirmationVariant="popup"
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Typography variant="subtitle1">Custom icon</Typography>
<UConfirmationButton
onConfirm={handleDelete}
id={4}
buttonText="Unlink"
variant="button"
confirmText="Are you sure you want to unlink the item?"
confirmActionText="Yes, unlink"
confirmationVariant="popup"
icon={<LinkOffIcon />}
/>
</Menu>
</Grid>
</Grid>
<Grid item xs={12} sm={4} md={3}>
<Typography variant="subtitle1">Button variant</Typography>
<UConfirmationButton
onConfirm={handleDelete}
id={itemId}
buttonText="Delete"
variant="button"
/>
<Grid item xs={12}>
<Typography variant="subtitle1">Confirmation menu variant</Typography>
</Grid>
<Grid item xs={12} sm={4} md={3}>
<Typography variant="subtitle1">
Custom icon and confirm text
</Typography>
<UConfirmationButton
onConfirm={handleDelete}
id={itemId}
buttonText="Unlink"
variant="button"
confirmText="Confirm unlink?"
confirmActionText="Yes, unlink"
icon={<LinkOffIcon />}
/>
<Grid container item xs={12}>
<Grid item xs={12} sm={6} md={3}>
<Typography variant="subtitle1">Icon</Typography>
<UConfirmationButton
onConfirm={handleDelete}
id={5}
buttonText="Delete"
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Typography variant="subtitle1">Menu item</Typography>
<IconButton
aria-label="more"
aria-controls="menu-item-variant-confirm-menu"
aria-haspopup="true"
onClick={e => handleClick(e, 'menu')}
>
<MoreVertIcon />
</IconButton>
<Menu
id="menu-item-variant-confirm-menu"
anchorEl={anchorEl.menu}
keepMounted
open={openMenuVariant}
onClose={() => handleClose('menu')}
disableEnforceFocus={true}
>
<MenuItem onClick={() => handleClose('menu')}>
<Link href="#" underline="none">
Edit
</Link>
</MenuItem>
<MenuItem onClick={() => handleClose('menu')}>
<Link href="#" underline="none">
View
</Link>
</MenuItem>
<UConfirmationButton
onConfirm={handleDelete}
id={6}
buttonText="Delete"
variant="menuItem"
icon={null}
/>
</Menu>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Typography variant="subtitle1">Button</Typography>
<UConfirmationButton
onConfirm={handleDelete}
id={7}
buttonText="Delete"
variant="button"
/>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Typography variant="subtitle1">Custom icon</Typography>
<UConfirmationButton
onConfirm={handleDelete}
id={8}
buttonText="Unlink"
variant="button"
confirmText="Confirm unlink?"
confirmActionText="Yes, unlink"
icon={<LinkOffIcon />}
/>
</Grid>
</Grid>
</Grid>
)
Expand Down
31 changes: 24 additions & 7 deletions src/components/UConfirmationButton/UConfirmationButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,16 @@ const useStyles = makeStyles(theme => ({
}))

const CONTROL_VARIANTS = {
popup: 'popup',
menuItem: 'menuItem',
icon: 'icon',
button: 'button',
}

const CONFIRMATION_VARIANTS = {
menu: 'menu',
popup: 'popup',
}

/**
* UConfirmationButton is a component to get confirmation from the user before processing it.
* This button displays the confirmation where user has clicked the button
Expand All @@ -52,22 +56,30 @@ export default function UConfirmationButton(props) {
confirmActionText,
cancelText,
buttonVariant,
confirmationVariant,
} = props
const [deleteAnchorEl, setDeleteAnchorEl] = useState(null)
const [openDialog, setOpenDialog] = useState(false)

const handleConfirm = e => {
onConfirm && onConfirm(e, id)
if (variant !== CONTROL_VARIANTS.popup) handleDeleteOptionClicked(e)
if (confirmationVariant === CONFIRMATION_VARIANTS.popup) {
setOpenDialog(false)
} else {
handleDeleteOptionClicked(e)
}
}

const handleDeleteOptionClicked = e => {
setDeleteAnchorEl(null)
}

const handleClick = e => {
if (variant !== CONTROL_VARIANTS.popup) setDeleteAnchorEl(e.currentTarget)
else setOpenDialog(true)
if (confirmationVariant === CONFIRMATION_VARIANTS.popup) {
setOpenDialog(true)
} else {
setDeleteAnchorEl(e.currentTarget)
}
}

const handleCancelPopup = e => {
Expand Down Expand Up @@ -106,7 +118,7 @@ export default function UConfirmationButton(props) {
</IconButton>
</Tooltip>
)}
{variant === CONTROL_VARIANTS.popup ? (
{confirmationVariant === CONFIRMATION_VARIANTS.popup ? (
<Dialog id={`delete-confirmation-menu-${id}`} open={openDialog}>
<DialogContent>
<Typography variant="body1">{confirmText || ''}</Typography>
Expand Down Expand Up @@ -146,13 +158,17 @@ UConfirmationButton.propTypes = {
buttonText: PropTypes.string,
/** trigger confirmation function */
onConfirm: PropTypes.func.isRequired,
/** variant: popup or menuItem or icon or button */
/** variant: menuItem or icon or button */
variant: PropTypes.oneOf([
CONTROL_VARIANTS.popup,
CONTROL_VARIANTS.menuItem,
CONTROL_VARIANTS.icon,
CONTROL_VARIANTS.button,
]),
/** Confirmation variant: popup or menu */
confirmationVariant: PropTypes.oneOf([
CONFIRMATION_VARIANTS.popup,
CONFIRMATION_VARIANTS.menu,
]),
/** if the variant is menuitem, this prop make sure the item enable or not */
enabled: PropTypes.bool,
/** button cancel text for popup variant */
Expand All @@ -176,4 +192,5 @@ UConfirmationButton.defaultProps = {
cancelText: 'No',
icon: <DeleteOutlinedIcon />,
buttonVariant: 'text',
confirmationVariant: 'menu',
}
Loading

0 comments on commit 69925e4

Please sign in to comment.