Add support for deleting a subuser from a server
This commit is contained in:
parent
a6f46d36ba
commit
1270e51248
11 changed files with 158 additions and 107 deletions
|
@ -1,25 +1,25 @@
|
|||
import React from 'react';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
|
||||
|
||||
interface Props {
|
||||
type Props = {
|
||||
title: string;
|
||||
buttonText: string;
|
||||
children: string;
|
||||
visible: boolean;
|
||||
onConfirmed: () => void;
|
||||
onCanceled: () => void;
|
||||
}
|
||||
showSpinnerOverlay?: boolean;
|
||||
} & RequiredModalProps;
|
||||
|
||||
const ConfirmationModal = ({ title, children, visible, buttonText, onConfirmed, onCanceled }: Props) => (
|
||||
const ConfirmationModal = ({ title, appear, children, visible, buttonText, onConfirmed, showSpinnerOverlay, onDismissed }: Props) => (
|
||||
<Modal
|
||||
appear={true}
|
||||
appear={appear || true}
|
||||
visible={visible}
|
||||
onDismissed={() => onCanceled()}
|
||||
showSpinnerOverlay={showSpinnerOverlay}
|
||||
onDismissed={() => onDismissed()}
|
||||
>
|
||||
<h3 className={'mb-6'}>{title}</h3>
|
||||
<p className={'text-sm'}>{children}</p>
|
||||
<div className={'flex items-center justify-end mt-8'}>
|
||||
<button className={'btn btn-secondary btn-sm'} onClick={() => onCanceled()}>
|
||||
<button className={'btn btn-secondary btn-sm'} onClick={() => onDismissed()}>
|
||||
Cancel
|
||||
</button>
|
||||
<button className={'btn btn-red btn-sm ml-4'} onClick={() => onConfirmed()}>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
|
@ -18,16 +18,22 @@ type Props = RequiredModalProps & {
|
|||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const [render, setRender] = useState(props.visible);
|
||||
export default ({ visible, appear, dismissable, showSpinnerOverlay, closeOnBackground = true, closeOnEscape = true, onDismissed, children }: Props) => {
|
||||
const [render, setRender] = useState(visible);
|
||||
|
||||
const isDismissable = useMemo(() => {
|
||||
return (dismissable || true) && !(showSpinnerOverlay || false);
|
||||
}, [dismissable, showSpinnerOverlay]);
|
||||
|
||||
const handleEscapeEvent = (e: KeyboardEvent) => {
|
||||
if (props.dismissable !== false && props.closeOnEscape !== false && e.key === 'Escape') {
|
||||
if (isDismissable && closeOnEscape && e.key === 'Escape') {
|
||||
setRender(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => setRender(props.visible), [props.visible]);
|
||||
useEffect(() => {
|
||||
setRender(visible);
|
||||
}, [visible]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', handleEscapeEvent);
|
||||
|
@ -39,13 +45,13 @@ export default (props: Props) => {
|
|||
<CSSTransition
|
||||
timeout={250}
|
||||
classNames={'fade'}
|
||||
appear={props.appear}
|
||||
appear={appear}
|
||||
in={render}
|
||||
unmountOnExit={true}
|
||||
onExited={() => props.onDismissed()}
|
||||
onExited={() => onDismissed()}
|
||||
>
|
||||
<div className={'modal-mask'} onClick={e => {
|
||||
if (props.dismissable !== false && props.closeOnBackground !== false) {
|
||||
if (isDismissable && closeOnBackground) {
|
||||
e.stopPropagation();
|
||||
if (e.target === e.currentTarget) {
|
||||
setRender(false);
|
||||
|
@ -53,12 +59,12 @@ export default (props: Props) => {
|
|||
}
|
||||
}}>
|
||||
<div className={'modal-container top'}>
|
||||
{props.dismissable !== false &&
|
||||
{isDismissable &&
|
||||
<div className={'modal-close-icon'} onClick={() => setRender(false)}>
|
||||
<FontAwesomeIcon icon={faTimes}/>
|
||||
</div>
|
||||
}
|
||||
{props.showSpinnerOverlay &&
|
||||
{showSpinnerOverlay &&
|
||||
<div
|
||||
className={'absolute w-full h-full rounded flex items-center justify-center'}
|
||||
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
|
||||
|
@ -67,7 +73,7 @@ export default (props: Props) => {
|
|||
</div>
|
||||
}
|
||||
<div className={'modal-content p-6'}>
|
||||
{props.children}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Reference in a new issue