github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-26 21:13:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Leon
2022-01-20 20:20:03 +02:00
parent 8822dc8008
commit 96913f0829
2 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/components/UI/Modals/ConfirmationModal.tsx
View File

@@ -9,7 +9,6 @@ import {useCommonStyles} from "../../../helpers/commonStyle";
interface ConfirmationModalProps { interface ConfirmationModalProps {
title?: string; title?: string;
isOpen: boolean; isOpen: boolean;
onClose: () => void; onClose: () => void;
onConfirm: () => void; onConfirm: () => void;
@@ -22,16 +21,21 @@ interface ConfirmationModalProps {
titleColor?: string; titleColor?: string;
img?: ReactElement; img?: ReactElement;
isLoading?: boolean; isLoading?: boolean;
className?: any;
} }
const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, isOpen, onClose, onConfirm, confirmButtonText, closeButtonText, subContent, confirmDisabled = false, isWide, confirmButtonColor, titleColor, img, isLoading,children}) => { const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, isOpen, onClose, onConfirm, confirmButtonText,
closeButtonText, subContent, confirmDisabled = false, isWide,
confirmButtonColor, titleColor, img, isLoading,children,
className}) => {
const classes = useCommonStyles(); const classes = useCommonStyles();
const confirmStyle = {width: 100, marginLeft: 20} const confirmStyle = {width: 100, marginLeft: 20}
return ( return (
<CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide}> <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide} className={className}>
<div className="confirmationHeader"> <div className="confirmationHeader">
<div className="confirmationTitle" style={titleColor ? {color: titleColor} : {}}>{title ?? "CONFIRMATION"}</div> <div className="confirmationTitle" style={titleColor ? {color: titleColor} : {}}>{title ?? "CONFIRMATION"}</div>
<img src={iconClose} onClick={onClose} alt="close"/> <img src={iconClose} onClick={onClose} alt="close"/>
</div> </div>
<div className="confirmationText" style={img ? {display: "flex", alignItems: "center"} : {}}> <div className="confirmationText" style={img ? {display: "flex", alignItems: "center"} : {}}>
{img && <div style={{paddingRight: 20}}> {img && <div style={{paddingRight: 20}}>

24
ui/src/components/UI/Modals/CustomModal.tsx
View File

@@ -43,15 +43,21 @@ const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false,
onClose(); onClose();
} }
return <Modal disableEnforceFocus open={open} onClose={(event, reason) => onModalClose(reason)} className={`${classes.modal} ${className ? className : ''}`}> return <Modal disableEnforceFocus open={open} onClose={(event, reason) => onModalClose(reason)}
<div className={`${classes.modalContents} ${globals}`} > className={`${classes.modal}`}
<Fade in={open}> closeAfterTransition
<Box> BackdropComponent={Backdrop}
{children} BackdropProps={{
</Box> timeout: 500,
</Fade> }}>
</div> <div className={`${classes.modalContents} ${globals} ${className ? className : ''}`} >
</Modal> <Fade in={open}>
<Box>
{children}
</Box>
</Fade>
</div>
</Modal>
} }
export default CustomModal; export default CustomModal;