StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Modal cleanup, begin transitioning towards the new dialog

Browse source
This commit is contained in:
DaneEveritt 2022-06-20 11:17:33 -04:00
parent 3834aca3fe
commit 7dd74ecc9d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
10 changed files with 121 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

18
resources/scripts/components/elements/Code.tsx Normal file
View file

@ -0,0 +1,18 @@
import React from 'react';
import classNames from 'classnames';
interface CodeProps {
dark?: boolean | undefined;
children: React.ReactChild | React.ReactFragment | React.ReactPortal;
}
export default ({ dark, children }: CodeProps) => (
<code
className={classNames('font-mono text-sm px-2 py-1 rounded', {
'bg-neutral-700': !dark,
'bg-neutral-900 text-gray-100': dark,
})}
>
{children}
</code>
);

2
resources/scripts/components/elements/activity/ActivityLogEntry.tsx
View file

@ -87,7 +87,7 @@ export default ({ activity, children }: Props) => {
<span className={'text-gray-400'}>&nbsp;|&nbsp;</span>
<Tooltip
placement={'right'}
content={format(activity.timestamp, 'MMM do, yyyy h:mma')}
content={format(activity.timestamp, 'MMM do, yyyy H:mm:ss')}
>
<span>
{formatDistanceToNowStrict(activity.timestamp, { addSuffix: true })}

22
resources/scripts/components/elements/dialog/ConfirmationDialog.tsx Normal file
View file

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

17
resources/scripts/components/elements/dialog/Dialog.tsx
View file

@ -5,13 +5,14 @@ import { XIcon } from '@heroicons/react/solid';
import DialogIcon from '@/components/elements/dialog/DialogIcon';
import { AnimatePresence, motion } from 'framer-motion';
import classNames from 'classnames';
import ConfirmationDialog from '@/components/elements/dialog/ConfirmationDialog';
interface Props {
export interface DialogProps {
open: boolean;
onClose: () => void;
hideCloseIcon?: boolean;
title?: string;
description?: string;
description?: string | undefined;
children?: React.ReactNode;
}
@ -19,7 +20,7 @@ const DialogButtons = ({ children }: { children: React.ReactNode }) => (
<>{children}</>
);
const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }: Props) => {
const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }: DialogProps) => {
const items = React.Children.toArray(children || []);
const [ buttons, icon, content ] = [
// @ts-expect-error
@ -59,9 +60,9 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
>
<div className={'flex p-6'}>
{icon && <div className={'mr-4'}>{icon}</div>}
<div className={'flex-1 max-h-[70vh] overflow-y-scroll overflow-x-hidden'}>
<div className={'flex-1 max-h-[70vh]'}>
{title &&
<HDialog.Title className={'font-header text-xl font-medium mb-2 text-white pr-4'}>
<HDialog.Title className={'font-header text-xl font-medium mb-2 text-gray-50 pr-4'}>
{title}
</HDialog.Title>
}
@ -91,6 +92,10 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
);
};
const _Dialog = Object.assign(Dialog, { Buttons: DialogButtons, Icon: DialogIcon });
const _Dialog = Object.assign(Dialog, {
Confirm: ConfirmationDialog,
Buttons: DialogButtons,
Icon: DialogIcon,
});
export default _Dialog;