Jeff Sieu
3 years ago
commit
a9084a4d2a
|
Before Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 179 KiB |
|
Before Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 174 KiB |
|
Before Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 652 KiB |
|
After Width: | Height: | Size: 1006 KiB |
|
After Width: | Height: | Size: 437 KiB |
|
Before Width: | Height: | Size: 149 KiB |
@ -0,0 +1,51 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import type { TypeaheadOption } from '@tih/ui';
|
||||||
|
import { Button } from '@tih/ui';
|
||||||
|
import { useToast } from '@tih/ui';
|
||||||
|
import { HorizontalDivider } from '@tih/ui';
|
||||||
|
|
||||||
|
import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
|
||||||
|
import type { Month, MonthYear } from '~/components/shared/MonthYearPicker';
|
||||||
|
import MonthYearPicker from '~/components/shared/MonthYearPicker';
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const [selectedCompany, setSelectedCompany] =
|
||||||
|
useState<TypeaheadOption | null>(null);
|
||||||
|
const [monthYear, setMonthYear] = useState<MonthYear>({
|
||||||
|
month: (new Date().getMonth() + 1) as Month,
|
||||||
|
year: new Date().getFullYear(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { showToast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="flex-1 overflow-y-auto">
|
||||||
|
<div className="flex h-full items-center justify-center">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h1 className="text-primary-600 text-center text-4xl font-bold">
|
||||||
|
Test Page
|
||||||
|
</h1>
|
||||||
|
<CompaniesTypeahead
|
||||||
|
onSelect={(option) => setSelectedCompany(option)}
|
||||||
|
/>
|
||||||
|
<pre>{JSON.stringify(selectedCompany, null, 2)}</pre>
|
||||||
|
<HorizontalDivider />
|
||||||
|
<MonthYearPicker value={monthYear} onChange={setMonthYear} />
|
||||||
|
<HorizontalDivider />
|
||||||
|
<Button
|
||||||
|
label="Add toast"
|
||||||
|
variant="primary"
|
||||||
|
onClick={() => {
|
||||||
|
showToast({
|
||||||
|
// Duration: 10000 (optional)
|
||||||
|
subtitle: `Some optional subtitle ${Date.now()}`,
|
||||||
|
title: `Hello World ${Date.now()}`,
|
||||||
|
variant: 'success',
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
import { Fragment, useEffect, useRef } from 'react';
|
||||||
|
import { Transition } from '@headlessui/react';
|
||||||
|
import { CheckIcon } from '@heroicons/react/24/outline';
|
||||||
|
import { XMarkIcon } from '@heroicons/react/24/solid';
|
||||||
|
|
||||||
|
type ToastVariant = 'failure' | 'success';
|
||||||
|
|
||||||
|
export type ToastMessage = {
|
||||||
|
duration?: number;
|
||||||
|
subtitle?: string;
|
||||||
|
title: string;
|
||||||
|
variant: ToastVariant;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Props = Readonly<{
|
||||||
|
duration?: number;
|
||||||
|
onClose: () => void;
|
||||||
|
subtitle?: string;
|
||||||
|
title: string;
|
||||||
|
variant: ToastVariant;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
const DEFAULT_DURATION = 5000;
|
||||||
|
|
||||||
|
function ToastIcon({ variant }: Readonly<{ variant: ToastVariant }>) {
|
||||||
|
switch (variant) {
|
||||||
|
case 'success':
|
||||||
|
return (
|
||||||
|
<CheckIcon aria-hidden="true" className="text-success-500 h-6 w-6" />
|
||||||
|
);
|
||||||
|
case 'failure':
|
||||||
|
return (
|
||||||
|
<XMarkIcon aria-hidden="true" className="text-error-500 h-6 w-6" />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Toast({
|
||||||
|
duration = DEFAULT_DURATION,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
variant,
|
||||||
|
onClose,
|
||||||
|
}: Props) {
|
||||||
|
const timer = useRef<number | null>(null);
|
||||||
|
|
||||||
|
function clearTimer() {
|
||||||
|
if (timer.current == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.clearTimeout(timer.current);
|
||||||
|
timer.current = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
onClose();
|
||||||
|
clearTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
timer.current = window.setTimeout(() => {
|
||||||
|
close();
|
||||||
|
}, duration);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimer();
|
||||||
|
};
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Transition
|
||||||
|
as={Fragment}
|
||||||
|
enter="transform ease-out duration-300 transition"
|
||||||
|
enterFrom="translate-y-2 opacity-0 sm:translate-y-2 sm:translate-x-2"
|
||||||
|
enterTo="translate-y-0 opacity-100 sm:translate-x-0"
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
show={true}>
|
||||||
|
<div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<ToastIcon variant={variant} />
|
||||||
|
</div>
|
||||||
|
<div className="ml-3 w-0 flex-1 space-y-1 pt-0.5">
|
||||||
|
<p className="text-sm font-medium text-slate-900">{title}</p>
|
||||||
|
{subtitle && (
|
||||||
|
<p className="mt-1 text-sm text-slate-500">{subtitle}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="ml-4 flex flex-shrink-0">
|
||||||
|
<button
|
||||||
|
className="focus:ring-brand-500 inline-flex rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||||
|
type="button"
|
||||||
|
onClick={close}>
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
<XMarkIcon aria-hidden="true" className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import React, { createContext, useContext, useState } from 'react';
|
||||||
|
|
||||||
|
import type { ToastMessage } from './Toast';
|
||||||
|
import Toast from './Toast';
|
||||||
|
|
||||||
|
type Context = Readonly<{
|
||||||
|
showToast: (message: ToastMessage) => void;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
export const ToastContext = createContext<Context>({
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||||
|
showToast: (_: ToastMessage) => {},
|
||||||
|
});
|
||||||
|
|
||||||
|
const getID = (() => {
|
||||||
|
let id = 0;
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
return id++;
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
type ToastData = ToastMessage & {
|
||||||
|
id: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Props = Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
export function useToast() {
|
||||||
|
return useContext(ToastContext);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ToastsProvider({ children }: Props) {
|
||||||
|
const [toasts, setToasts] = useState<Array<ToastData>>([]);
|
||||||
|
|
||||||
|
function showToast({ title, subtitle, variant }: ToastMessage) {
|
||||||
|
setToasts([{ id: getID(), subtitle, title, variant }, ...toasts]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeToast(id: number) {
|
||||||
|
setToasts((oldToasts) => {
|
||||||
|
const newToasts = oldToasts.filter((toast) => toast.id !== id);
|
||||||
|
return newToasts;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ToastContext.Provider value={{ showToast }}>
|
||||||
|
{children}
|
||||||
|
<div
|
||||||
|
aria-live="assertive"
|
||||||
|
className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:p-6">
|
||||||
|
<div className="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||||
|
{/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
|
||||||
|
{toasts.map(({ id, title, subtitle, variant }) => (
|
||||||
|
<Toast
|
||||||
|
key={id}
|
||||||
|
subtitle={subtitle}
|
||||||
|
title={title}
|
||||||
|
variant={variant}
|
||||||
|
onClose={() => {
|
||||||
|
closeToast(id);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ToastContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue