Add support for deleting a subuser from a server

This commit is contained in:
Dane Everitt 2020-03-27 15:32:33 -07:00
parent a6f46d36ba
commit 1270e51248
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
11 changed files with 158 additions and 107 deletions

View file

@ -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()}>

View file

@ -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>