Alex/Pterodactyl-Panel
1
1
Fork 1
mirror of https://github.com/pterodactyl/panel.git synced 2024-11-22 17:12:30 +01:00
Code Issues Releases Wiki Activity

Update dialog logic to support defining buttons/icon from anywhere

Browse Source
This commit is contained in:
DaneEveritt 2022-07-02 17:24:12 -04:00
parent 48af9bced1
commit 7c4028f8f1
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
9 changed files with 182 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
View File

@ -12,9 +12,9 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
<pre className={'bg-gray-900 rounded p-2 overflow-x-scroll font-mono text-sm leading-relaxed'}> <pre className={'bg-gray-900 rounded p-2 overflow-x-scroll font-mono text-sm leading-relaxed'}>
{JSON.stringify(meta, null, 2)} {JSON.stringify(meta, null, 2)}
</pre> </pre>
<Dialog.Buttons> <Dialog.Footer>
<Button.Text onClick={() => setOpen(false)}>Close</Button.Text> <Button.Text onClick={() => setOpen(false)}>Close</Button.Text>
</Dialog.Buttons> </Dialog.Footer>
</Dialog> </Dialog>
<button <button
aria-describedby={'View additional event metadata'} aria-describedby={'View additional event metadata'}

8
resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { Dialog } from '@/components/elements/dialog/index'; import { Dialog } from '@/components/elements/dialog/index';
import { DialogProps } from '@/components/elements/dialog/Dialog'; import { FullDialogProps } from '@/components/elements/dialog/Dialog';
import { Button } from '@/components/elements/button/index'; import { Button } from '@/components/elements/button/index';
type ConfirmationProps = Omit<DialogProps, 'description' | 'children'> & { type ConfirmationProps = Omit<FullDialogProps, 'description' | 'children'> & {
children: React.ReactNode; children: React.ReactNode;
confirm?: string | undefined; confirm?: string | undefined;
onConfirmed: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; onConfirmed: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@ -13,10 +13,10 @@ export default ({ confirm = 'Okay', children, onConfirmed, ...props }: Confirmat
return ( return (
<Dialog {...props} description={typeof children === 'string' ? children : undefined}> <Dialog {...props} description={typeof children === 'string' ? children : undefined}>
{typeof children !== 'string' && children} {typeof children !== 'string' && children}
<Dialog.Buttons> <Dialog.Footer>
<Button.Text onClick={props.onClose}>Cancel</Button.Text> <Button.Text onClick={props.onClose}>Cancel</Button.Text>
<Button.Danger onClick={onConfirmed}>{confirm}</Button.Danger> <Button.Danger onClick={onConfirmed}>{confirm}</Button.Danger>
</Dialog.Buttons> </Dialog.Footer>
</Dialog> </Dialog>
); );
}; };

144
resources/scripts/components/elements/dialog/Dialog.tsx
View File

@ -1,101 +1,91 @@
import React from 'react'; import React, { useRef } from 'react';
import { Dialog as HDialog } from '@headlessui/react'; import { Dialog as HDialog } from '@headlessui/react';
import { Button } from '@/components/elements/button/index'; import { Button } from '@/components/elements/button/index';
import { XIcon } from '@heroicons/react/solid'; import { XIcon } from '@heroicons/react/solid';
import DialogIcon from '@/components/elements/dialog/DialogIcon'; import DialogIcon from '@/components/elements/dialog/DialogIcon';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import classNames from 'classnames';
import ConfirmationDialog from '@/components/elements/dialog/ConfirmationDialog'; import ConfirmationDialog from '@/components/elements/dialog/ConfirmationDialog';
import DialogContext from './context';
import DialogFooter from '@/components/elements/dialog/DialogFooter';
import styles from './style.module.css';
export interface DialogProps { export interface DialogProps {
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
}
export interface FullDialogProps extends DialogProps {
hideCloseIcon?: boolean; hideCloseIcon?: boolean;
title?: string; title?: string;
description?: string | undefined; description?: string | undefined;
children?: React.ReactNode; children?: React.ReactNode;
} }
const DialogButtons = ({ children }: { children: React.ReactNode }) => <>{children}</>; const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }: FullDialogProps) => {
const ref = useRef<HTMLDivElement>(null);
const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }: DialogProps) => { const icon = useRef<HTMLDivElement>(null);
const items = React.Children.toArray(children || []); const buttons = useRef<HTMLDivElement>(null);
const [buttons, icon, content] = [
// @ts-expect-error not sure how to get this correct
items.find((child) => child.type === DialogButtons),
// @ts-expect-error not sure how to get this correct
items.find((child) => child.type === DialogIcon),
// @ts-expect-error not sure how to get this correct
items.filter((child) => ![DialogIcon, DialogButtons].includes(child.type)),
];
return ( return (
<AnimatePresence> <AnimatePresence>
{open && ( {open && (
<HDialog <DialogContext.Provider value={{ icon, buttons }}>
static <HDialog
as={motion.div} static
initial={{ opacity: 0 }} as={motion.div}
animate={{ opacity: 1 }} initial={{ opacity: 0 }}
exit={{ opacity: 0 }} animate={{ opacity: 1 }}
transition={{ duration: 0.15 }} exit={{ opacity: 0 }}
open={open} transition={{ duration: 0.15 }}
onClose={onClose} open={open}
> onClose={onClose}
<div className={'fixed inset-0 bg-gray-900/50 z-40'} /> >
<div className={'fixed inset-0 overflow-y-auto z-50'}> <div className={'fixed inset-0 bg-gray-900/50 z-40'} />
<div className={'flex min-h-full items-center justify-center p-4 text-center'}> <div className={'fixed inset-0 overflow-y-auto z-50'}>
<HDialog.Panel <div className={styles.container}>
as={motion.div} <HDialog.Panel
initial={{ opacity: 0, scale: 0.85 }} as={motion.div}
animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.85 }}
exit={{ opacity: 0 }} animate={{ opacity: 1, scale: 1 }}
transition={{ type: 'spring', damping: 15, stiffness: 300, duration: 0.15 }} exit={{ opacity: 0 }}
className={classNames([ transition={{ type: 'spring', damping: 15, stiffness: 300, duration: 0.15 }}
'relative bg-gray-600 rounded max-w-xl w-full mx-auto shadow-lg text-left', className={styles.panel}
'ring-4 ring-gray-800 ring-opacity-80', >
])} <div className={'flex p-6 overflow-y-auto'}>
> <div ref={ref} className={'flex-1 max-h-[70vh]'}>
<div className={'flex p-6 overflow-y-auto'}> <div className={'flex items-center'}>
{icon && <div className={'mr-4'}>{icon}</div>} <div ref={icon} />
<div className={'flex-1 max-h-[70vh]'}> <div>
{title && ( {title && (
<HDialog.Title <HDialog.Title className={styles.title}>{title}</HDialog.Title>
className={'font-header text-xl font-medium mb-2 text-gray-50 pr-4'} )}
{description && (
<HDialog.Description>{description}</HDialog.Description>
)}
</div>
</div>
{children}
</div>
</div>
<div ref={buttons} />
{/* Keep this below the other buttons so that it isn't the default focus if they're present. */}
{!hideCloseIcon && (
<div className={'absolute right-0 top-0 m-4'}>
<Button.Text
size={Button.Sizes.Small}
shape={Button.Shapes.IconSquare}
onClick={onClose}
className={'group'}
> >
{title} <XIcon className={styles.close_icon} />
</HDialog.Title> </Button.Text>
)} </div>
{description && <HDialog.Description>{description}</HDialog.Description>} )}
{content} </HDialog.Panel>
</div> </div>
</div>
{buttons && (
<div
className={
'px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b'
}
>
{buttons}
</div>
)}
{/* Keep this below the other buttons so that it isn't the default focus if they're present. */}
{!hideCloseIcon && (
<div className={'absolute right-0 top-0 m-4'}>
<Button.Text
size={Button.Sizes.Small}
shape={Button.Shapes.IconSquare}
onClick={onClose}
className={'hover:rotate-90'}
>
<XIcon className={'w-5 h-5'} />
</Button.Text>
</div>
)}
</HDialog.Panel>
</div> </div>
</div> </HDialog>
</HDialog> </DialogContext.Provider>
)} )}
</AnimatePresence> </AnimatePresence>
); );
@ -103,7 +93,7 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
const _Dialog = Object.assign(Dialog, { const _Dialog = Object.assign(Dialog, {
Confirm: ConfirmationDialog, Confirm: ConfirmationDialog,
Buttons: DialogButtons, Footer: DialogFooter,
Icon: DialogIcon, Icon: DialogIcon,
}); });

17
resources/scripts/components/elements/dialog/DialogFooter.tsx Normal file
View File

@ -0,0 +1,17 @@
import React, { useContext } from 'react';
import { createPortal } from 'react-dom';
import DialogContext from '@/components/elements/dialog/context';
export default ({ children }: { children: React.ReactNode }) => {
const { buttons } = useContext(DialogContext);
if (!buttons.current) {
return null;
}
const element = (
<div className={'px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b'}>{children}</div>
);
return createPortal(element, buttons.current);
};

39
resources/scripts/components/elements/dialog/DialogIcon.tsx
View File

@ -1,29 +1,34 @@
import React from 'react'; import React, { useContext } from 'react';
import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline'; import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
import classNames from 'classnames'; import classNames from 'classnames';
import DialogContext from '@/components/elements/dialog/context';
import { createPortal } from 'react-dom';
import styles from './style.module.css';
interface Props { interface Props {
type: 'danger' | 'info' | 'success' | 'warning'; type: 'danger' | 'info' | 'success' | 'warning';
className?: string; className?: string;
} }
export default ({ type, className }: Props) => { const icons = {
const [Component, styles] = (function (): [(props: React.ComponentProps<'svg'>) => JSX.Element, string] { danger: ShieldExclamationIcon,
switch (type) { warning: ExclamationIcon,
case 'danger': success: CheckIcon,
return [ShieldExclamationIcon, 'bg-red-500 text-red-50']; info: InformationCircleIcon,
case 'warning': };
return [ExclamationIcon, 'bg-yellow-600 text-yellow-50'];
case 'success':
return [CheckIcon, 'bg-green-600 text-green-50'];
case 'info':
return [InformationCircleIcon, 'bg-primary-500 text-primary-50'];
}
})();
return ( export default ({ type, className }: Props) => {
<div className={classNames('flex items-center justify-center w-10 h-10 rounded-full', styles, className)}> const { icon } = useContext(DialogContext);
<Component className={'w-6 h-6'} />
if (!icon.current) {
return null;
}
const element = (
<div className={classNames(styles.dialog_icon, styles[type], className)}>
{React.createElement(icons[type], { className: 'w-6 h-6' })}
</div> </div>
); );
return createPortal(element, icon.current);
}; };

13
resources/scripts/components/elements/dialog/context.ts Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
interface DialogContextType {
icon: React.RefObject<HTMLDivElement | undefined>;
buttons: React.RefObject<HTMLDivElement | undefined>;
}
const DialogContext = React.createContext<DialogContextType>({
icon: React.createRef(),
buttons: React.createRef(),
});
export default DialogContext;

36
resources/scripts/components/elements/dialog/style.module.css Normal file
View File

@ -0,0 +1,36 @@
.container {
@apply flex min-h-full items-center justify-center p-4 text-center;
}
.panel {
@apply relative bg-gray-600 rounded max-w-xl w-full mx-auto shadow-lg text-left;
@apply ring-4 ring-gray-800 ring-opacity-80;
}
.title {
@apply font-header text-xl font-medium mb-2 text-gray-50 pr-4;
}
.close_icon {
@apply w-5 h-5 group-hover:rotate-90 transition-transform duration-100;
}
.dialog_icon {
@apply flex items-center justify-center w-10 h-10 rounded-full mr-4;
&.danger {
@apply bg-red-500 text-red-50;
}
&.warning {
@apply bg-yellow-600 text-yellow-50;
}
&.success {
@apply bg-green-600 text-green-50;
}
&.info {
@apply bg-primary-500 text-primary-50;
}
}

4
resources/scripts/components/server/files/NewDirectoryButton.tsx
View File

@ -92,7 +92,7 @@ export default ({ className }: WithClassname) => {
</Code> </Code>
</p> </p>
</Form> </Form>
<Dialog.Buttons> <Dialog.Footer>
<Button.Text <Button.Text
className={'w-full sm:w-auto'} className={'w-full sm:w-auto'}
onClick={() => { onClick={() => {
@ -105,7 +105,7 @@ export default ({ className }: WithClassname) => {
<Button className={'w-full sm:w-auto'} onClick={submitForm}> <Button className={'w-full sm:w-auto'} onClick={submitForm}>
Create Create
</Button> </Button>
</Dialog.Buttons> </Dialog.Footer>
</Dialog> </Dialog>
)} )}
</Formik> </Formik>

38
yarn.lock
View File

@ -1093,33 +1093,33 @@
minimatch "^3.1.2" minimatch "^3.1.2"
strip-json-comments "^3.1.1" strip-json-comments "^3.1.1"
"@floating-ui/core@^0.7.2": "@floating-ui/core@^0.7.3":
version "0.7.2" version "0.7.3"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.2.tgz#f7af9613d080dc29360e77c970965b79b524d45a" resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
integrity sha512-FRVAkSNU/vGXLIsgbggcs70GkXKEOXgBBbNpYPNHSaKsCAMMd00NrjbtKTesxkdv9xm9N3+XiDlcFGY6WnatBg== integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
"@floating-ui/dom@^0.5.1": "@floating-ui/dom@^0.5.3":
version "0.5.2" version "0.5.4"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.2.tgz#908f3febbfc0d6696d70921616ec194fe07af183" resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
integrity sha512-z1DnEa7F3d8Fm/eXSbii8UEGpcjZGkQaYYUI0WpEVgD3vBfebDW8j/3ysusxonuMexoigA+A3b/fYH7sEqiwyg== integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
dependencies: dependencies:
"@floating-ui/core" "^0.7.2" "@floating-ui/core" "^0.7.3"
"@floating-ui/react-dom-interactions@^0.6.3": "@floating-ui/react-dom-interactions@^0.6.6":
version "0.6.3" version "0.6.6"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.6.3.tgz#895c52cb06bf5ea73c00f1074c75b0535e0046bc" resolved "https://registry.yarnpkg.com/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.6.6.tgz#8542e8c4bcbee2cd0d512de676c6a493e0a2d168"
integrity sha512-xvbGEtBtA7JaEngnHQjROArv2onRp3oJIpb4+bEN5EGJf0hBYDY0vD8vFGPz/5TQwN++hb6icOB1QwdOnffMzw== integrity sha512-qnao6UPjSZNHnXrF+u4/n92qVroQkx0Umlhy3Avk1oIebm/5ee6yvDm4xbHob0OjY7ya8WmUnV3rQlPwX3Atwg==
dependencies: dependencies:
"@floating-ui/react-dom" "^0.7.1" "@floating-ui/react-dom" "^0.7.2"
aria-hidden "^1.1.3" aria-hidden "^1.1.3"
use-isomorphic-layout-effect "^1.1.1" use-isomorphic-layout-effect "^1.1.1"
"@floating-ui/react-dom@^0.7.1": "@floating-ui/react-dom@^0.7.2":
version "0.7.1" version "0.7.2"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.1.tgz#e0eb57cb05c7762d4c904bfbae73148684578d66" resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
integrity sha512-Dd7e8AupUjzcjeGf1g3EItf/QRtEWKF5GGyEs5WA5n3zlHvEgZ4XrZM6ANhUnzgE3pUQAaXkcXLnibgFp1YBRw== integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
dependencies: dependencies:
"@floating-ui/dom" "^0.5.1" "@floating-ui/dom" "^0.5.3"
use-isomorphic-layout-effect "^1.1.1" use-isomorphic-layout-effect "^1.1.1"
"@fortawesome/fontawesome-common-types@^0.2.32": "@fortawesome/fontawesome-common-types@^0.2.32":