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

Apply new eslint rules; default to prettier for styling

Browse source
This commit is contained in:
DaneEveritt 2022-06-26 15:13:52 -04:00
parent f22cce8881
commit dc84af9937
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
218 changed files with 3876 additions and 3564 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
View file

@ -7,7 +7,7 @@ type ConfirmationProps = Omit<DialogProps, 'description' | 'children'> & {
children: React.ReactNode;
confirm?: string | undefined;
onConfirmed: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
};
export default ({ confirm = 'Okay', children, onConfirmed, ...props }: ConfirmationProps) => {
return (

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

@ -16,19 +16,17 @@ export interface DialogProps {
children?: React.ReactNode;
}
const DialogButtons = ({ children }: { children: React.ReactNode }) => (
<>{children}</>
);
const DialogButtons = ({ children }: { children: React.ReactNode }) => <>{children}</>;
const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }: DialogProps) => {
const items = React.Children.toArray(children || []);
const [ buttons, icon, content ] = [
const [buttons, icon, content] = [
// @ts-expect-error
items.find(child => child.type === DialogButtons),
items.find((child) => child.type === DialogButtons),
// @ts-expect-error
items.find(child => child.type === DialogIcon),
items.find((child) => child.type === DialogIcon),
// @ts-expect-error
items.filter(child => ![ DialogIcon, DialogButtons ].includes(child.type)),
items.filter((child) => ![DialogIcon, DialogButtons].includes(child.type)),
];
return (
@ -44,7 +42,7 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
open={open}
onClose={onClose}
>
<div className={'fixed inset-0 bg-gray-900/50 z-40'}/>
<div className={'fixed inset-0 bg-gray-900/50 z-40'} />
<div className={'fixed inset-0 overflow-y-auto z-50'}>
<div className={'flex min-h-full items-center justify-center p-4 text-center'}>
<HDialog.Panel
@ -61,22 +59,28 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
<div className={'flex p-6 overflow-y-auto'}>
{icon && <div className={'mr-4'}>{icon}</div>}
<div className={'flex-1 max-h-[70vh]'}>
{title &&
<HDialog.Title className={'font-header text-xl font-medium mb-2 text-gray-50 pr-4'}>
{title && (
<HDialog.Title
className={'font-header text-xl font-medium mb-2 text-gray-50 pr-4'}
>
{title}
</HDialog.Title>
}
)}
{description && <HDialog.Description>{description}</HDialog.Description>}
{content}
</div>
</div>
{buttons &&
<div className={'px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b'}>
{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 &&
{!hideCloseIcon && (
<div className={'absolute right-0 top-0 m-4'}>
<Button.Text
size={Button.Sizes.Small}
@ -84,10 +88,10 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
onClick={onClose}
className={'hover:rotate-90'}
>
<XIcon className={'w-5 h-5'}/>
<XIcon className={'w-5 h-5'} />
</Button.Text>
</div>
}
)}
</HDialog.Panel>
</div>
</div>

12
resources/scripts/components/elements/dialog/DialogIcon.tsx
View file

@ -8,22 +8,22 @@ interface Props {
}
export default ({ type, className }: Props) => {
const [ Component, styles ] = (function (): [ (props: React.ComponentProps<'svg'>) => JSX.Element, string ] {
const [Component, styles] = (function (): [(props: React.ComponentProps<'svg'>) => JSX.Element, string] {
switch (type) {
case 'danger':
return [ ShieldExclamationIcon, 'bg-red-500 text-red-50' ];
return [ShieldExclamationIcon, 'bg-red-500 text-red-50'];
case 'warning':
return [ ExclamationIcon, 'bg-yellow-600 text-yellow-50' ];
return [ExclamationIcon, 'bg-yellow-600 text-yellow-50'];
case 'success':
return [ CheckIcon, 'bg-green-600 text-green-50' ];
return [CheckIcon, 'bg-green-600 text-green-50'];
case 'info':
return [ InformationCircleIcon, 'bg-primary-500 text-primary-50' ];
return [InformationCircleIcon, 'bg-primary-500 text-primary-50'];
}
})();
return (
<div className={classNames('flex items-center justify-center w-10 h-10 rounded-full', styles, className)}>
<Component className={'w-6 h-6'}/>
<Component className={'w-6 h-6'} />
</div>
);
};