15fc3699cf
* feat: action menu for schedule list item * feat: schedule action menu functionality * feat: dialog provider popups for delete * feat: duplicate schedule satiesfies type * refactor: change non-null assertion to early return for rename schedule * refactor: move schedule list item dialog providers to util file * style: run prettier * chore: inline object with satisfies operator * fix: border issues * style: change popups to match figma * fix: update import for schedule list item dialog providers * style: change dropdown text style to match figma * fix: add back dialog context * style: rounded edges when hovering over action + soften border color * chore: cleanup and improve styling * fix: dialog in popupmain --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> Co-authored-by: Razboy20 <razboy20@gmail.com>
73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import type { TransitionRootProps } from '@headlessui/react';
|
|
import {
|
|
Description,
|
|
Dialog as HDialog,
|
|
DialogPanel,
|
|
DialogTitle,
|
|
Transition,
|
|
TransitionChild,
|
|
} from '@headlessui/react';
|
|
import clsx from 'clsx';
|
|
import type { PropsWithChildren } from 'react';
|
|
import React, { Fragment } from 'react';
|
|
|
|
import ExtensionRoot from './ExtensionRoot/ExtensionRoot';
|
|
|
|
export interface _DialogProps {
|
|
className?: string;
|
|
title?: JSX.Element;
|
|
description?: JSX.Element;
|
|
}
|
|
|
|
/**
|
|
* Props for the Dialog component.
|
|
*/
|
|
export type DialogProps = _DialogProps & Omit<TransitionRootProps<typeof HDialog>, 'children'>;
|
|
|
|
/**
|
|
* A reusable popup component that can be used to display content on the page
|
|
*/
|
|
export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Element {
|
|
const { children, className, open, ...rest } = props;
|
|
|
|
return (
|
|
<Transition show={open} as={HDialog} {...rest}>
|
|
<ExtensionRoot>
|
|
<TransitionChild
|
|
as={Fragment}
|
|
enter='transition duration-300 motion-reduce:duration-150 ease-out'
|
|
enterFrom='opacity-0'
|
|
enterTo='opacity-100'
|
|
leave='transition duration-150 ease-in delay-25'
|
|
leaveFrom='opacity-100'
|
|
leaveTo='opacity-0'
|
|
>
|
|
<div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
|
|
</TransitionChild>
|
|
<div className='fixed inset-0 z-50 flex items-center justify-center p-2'>
|
|
<TransitionChild
|
|
as={Fragment}
|
|
enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
|
|
enterFrom='transform-gpu scale-95 opacity-0'
|
|
enterTo='transform-gpu scale-100 opacity-100'
|
|
leave='transition duration-250 motion-reduce:duration-0 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
|
|
leaveFrom='transform-gpu scale-100 opacity-100'
|
|
leaveTo='transform-gpu scale-95 opacity-0'
|
|
>
|
|
<DialogPanel
|
|
className={clsx(
|
|
'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%-1rem)]',
|
|
className
|
|
)}
|
|
>
|
|
{props.title && <DialogTitle as={Fragment}>{props.title}</DialogTitle>}
|
|
{props.description && <Description as={Fragment}>{props.description}</Description>}
|
|
{children}
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</ExtensionRoot>
|
|
</Transition>
|
|
);
|
|
}
|