zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

update modals to use pushmodal

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-04-04 23:18:57 +02:00
parent 30ffcb51c2
commit eb12f728d1
16 changed files with 19 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/dashboard/src/components/ui/dialog.tsx
View File

@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'fixed inset-0 z-50 bg-black/20 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
className
)}
{...props}
@@ -39,19 +39,12 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
className
)}
{...props}
>
{children}
<DialogPrimitive.Close
onClick={onClose}
className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));

3
apps/dashboard/src/modals/AddClient.tsx
View File

@@ -11,8 +11,7 @@ import { useAppParams } from '@/hooks/useAppParams';
import { api, handleError } from '@/trpc/client';
import { cn } from '@/utils/cn';
import { zodResolver } from '@hookform/resolvers/zod';
import { SaveIcon, WallpaperIcon } from 'lucide-react';
import Link from 'next/link';
import { SaveIcon } from 'lucide-react';
import { useRouter } from 'next/navigation';
import type { SubmitHandler } from 'react-hook-form';
import { Controller, useForm } from 'react-hook-form';

2
apps/dashboard/src/modals/AddDashboard.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';

2
apps/dashboard/src/modals/AddProject.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';

2
apps/dashboard/src/modals/AddReference.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';

6
apps/dashboard/src/modals/Confirm.tsx
View File

@@ -1,17 +1,15 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { Button } from '@/components/ui/button';
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
export interface ConfirmProps {
export type ConfirmProps = {
title: string;
text: string;
onConfirm: () => void;
onCancel?: () => void;
}
};
export default function Confirm({
title,

2
apps/dashboard/src/modals/EditClient.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';

2
apps/dashboard/src/modals/EditDashboard.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';

2
apps/dashboard/src/modals/EditProject.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';

6
apps/dashboard/src/modals/EditReport.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';
@@ -17,10 +15,10 @@ const validator = z.object({
type IForm = z.infer<typeof validator>;
interface EditReportProps {
type EditReportProps = {
form: IForm;
onSubmit: SubmitHandler<IForm>;
}
};
export default function EditReport({ form, onSubmit }: EditReportProps) {
const { register, handleSubmit, reset, formState } = useForm<IForm>({

7
apps/dashboard/src/modals/Modal/Container.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { Button } from '@/components/ui/button';
import { DialogContent } from '@/components/ui/dialog';
import { X } from 'lucide-react';
import { popModal } from '..';
@@ -10,11 +11,7 @@ interface ModalContentProps {
}
export function ModalContent({ children }: ModalContentProps) {
return (
<div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full">
{children}
</div>
);
return <DialogContent>{children}</DialogContent>;
}
interface ModalHeaderProps {

7
apps/dashboard/src/modals/SaveReport.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';
@@ -18,10 +16,10 @@ import type { IChartInput } from '@openpanel/validation';
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
interface SaveReportProps {
type SaveReportProps = {
report: IChartInput;
reportId?: string;
}
};
const validator = z.object({
name: z.string().min(1, 'Required'),
@@ -74,7 +72,6 @@ export default function SaveReport({ report }: SaveReportProps) {
const dashboardQuery = api.dashboard.list.useQuery({
projectId,
});
const dashboards = (dashboardQuery.data ?? []).map((item) => ({
value: item.id,
label: item.name,

2
apps/dashboard/src/modals/ShareOverviewModal.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import { ButtonContainer } from '@/components/button-container';
import { InputWithLabel } from '@/components/forms/input-with-label';
import { Button } from '@/components/ui/button';

182
apps/dashboard/src/modals/index.tsx
View File

@@ -1,18 +1,12 @@
'use client';
import { Suspense, useEffect, useRef, useState } from 'react';
import { Loader } from 'lucide-react';
import mitt from 'mitt';
import dynamic from 'next/dynamic';
import { useOnClickOutside } from 'usehooks-ts';
import { createPushModal } from 'pushmodal';
import type { ConfirmProps } from './Confirm';
const Loading = () => (
<div className="bg-backdrop fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto">
<Loader className="mb-8 animate-spin" size={40} />
</div>
);
const Loading = () => <Loader className="mb-8 animate-spin" size={40} />;
const modals = {
EditProject: dynamic(() => import('./EditProject'), {
@@ -50,175 +44,9 @@ const modals = {
}),
};
const emitter = mitt<{
push: {
name: ModalRoutes;
props: Record<string, unknown>;
};
replace: {
name: ModalRoutes;
props: Record<string, unknown>;
};
pop: { name?: ModalRoutes };
unshift: { name: ModalRoutes };
}>();
type ModalRoutes = keyof typeof modals;
interface StateItem {
key: string;
name: ModalRoutes;
props: Record<string, unknown>;
}
interface ModalWrapperProps {
children: React.ReactNode;
name?: ModalRoutes;
isOnTop?: boolean;
}
export function ModalWrapper({ children, name, isOnTop }: ModalWrapperProps) {
const ref = useRef<HTMLDivElement>(null);
useOnClickOutside(ref, (event) => {
const target = event.target as HTMLElement;
const isPortal =
typeof target.closest === 'function'
? !!target.closest('[data-radix-popper-content-wrapper]')
: false;
if (isOnTop && !isPortal && name) {
emitter.emit('pop', {
name,
});
}
});
return (
<div className="fixed top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto">
<div ref={ref} className="w-inherit m-auto py-4">
<Suspense>{children}</Suspense>
</div>
</div>
);
}
export function ModalProvider() {
const [state, setState] = useState<StateItem[]>([]);
useEffect(() => {
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && state.length > 0) {
setState((p) => {
p.pop();
return [...p];
});
}
});
}, [state]);
useEffect(() => {
emitter.on('push', ({ name, props }) => {
setState((p) => [
...p,
{
key: Math.random().toString(),
name,
props,
},
]);
});
emitter.on('replace', ({ name, props }) => {
setState([
{
key: Math.random().toString(),
name,
props,
},
]);
});
emitter.on('pop', ({ name }) => {
setState((items) => {
const match =
name === undefined
? // Pick last item if no name is provided
items.length - 1
: items.findLastIndex((item) => item.name === name);
return items.filter((_, index) => index !== match);
});
});
emitter.on('unshift', ({ name }) => {
setState((items) => {
const match = items.findIndex((item) => item.name === name);
return items.filter((_, index) => index !== match);
});
});
return () => emitter.all.clear();
});
return (
<>
{!!state.length && (
<div className="fixed bottom-0 left-0 right-0 top-0 z-50 bg-[rgba(0,0,0,0.2)]"></div>
)}
{state.map((item, index) => {
const Modal = modals[item.name];
return (
<ModalWrapper
key={item.key}
name={item.name}
isOnTop={state.length - 1 === index}
>
{/* @ts-expect-error */}
<Modal {...item.props} />
</ModalWrapper>
);
})}
</>
);
}
type GetComponentProps<T> = T extends
| React.ComponentType<infer P>
| React.Component<infer P>
? P
: never;
type OrUndefined<T> = T extends Record<string, never> ? undefined : T;
export const pushModal = <
T extends StateItem['name'],
B extends OrUndefined<GetComponentProps<(typeof modals)[T]>>,
>(
name: T,
...rest: B extends undefined ? [] : [B]
) =>
emitter.emit('push', {
name,
// @ts-expect-error
props: Array.isArray(rest) && rest[0] ? rest[0] : {},
});
export const replaceModal = <
T extends StateItem['name'],
B extends OrUndefined<GetComponentProps<(typeof modals)[T]>>,
>(
name: T,
...rest: B extends undefined ? [] : [B]
) =>
emitter.emit('replace', {
name,
// @ts-expect-error
props: Array.isArray(rest) && rest[0] ? rest[0] : {},
});
export const popModal = (name?: StateItem['name']) =>
emitter.emit('pop', {
name,
});
export const unshiftModal = (name: StateItem['name']) =>
emitter.emit('unshift', {
name,
export const { pushModal, popModal, popAllModals, ModalProvider } =
createPushModal({
modals,
});
export const showConfirm = (props: ConfirmProps) => pushModal('Confirm', props);