mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
df52ea7ee0
* Update the design of the sonner toasts. Add the close button by default. * Migrate studio and www apps to use the SonnerToaster. * Migrate all toasts from studio. * Migrate all leftover toasts in studio. * Add a new toast component with progress. Use it in studio. * Migrate the design-system app. * Refactor the consent toast to use sonner. * Switch docs to use the new sonner toasts. * Remove toast examples from the design-system app. * Remove all toast-related components and old code. * Fix the progress bar in the toast progress component. Also make the bottom components vertically centered. * Fix the width of the toast progress. * Use text-foreground-lighter instead of muted for ToastProgress text * Rename ToastProgress to SonnerProgress. * Shorten the text in sonner progress. * Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner. * Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity). * Fix the playwright tests. * Refactor imports to use ui instead of @ui. * Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch. * Remove react-hot-toast lib. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { Check, Loader2 } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { Button, Progress } from 'ui'
|
|
|
|
export default function SonnerUpload() {
|
|
const uploadPromise = (files: number, toastId: number) => {
|
|
toast.loading(<UploadContent progress={0} files={files} />, {
|
|
id: toastId,
|
|
})
|
|
|
|
return new Promise((resolve) => {
|
|
let currentProgress = 0
|
|
|
|
toast.loading(<UploadContent progress={currentProgress} files={files} />, {
|
|
id: toastId,
|
|
})
|
|
|
|
const intervalId = setInterval(() => {
|
|
currentProgress += Math.floor(Math.random() * 10) + 1 // Increment progress by a random value
|
|
if (currentProgress > 100) currentProgress = 100 // Ensure progress does not exceed 100%
|
|
|
|
if (currentProgress >= 100) {
|
|
clearInterval(intervalId) // Clear the interval once upload is complete
|
|
resolve({ progress: currentProgress, message: 'Upload complete', files: 3, toastId }) // Resolve the promise when progress reaches 100
|
|
}
|
|
|
|
toast.loading(<UploadContent progress={currentProgress} files={files} />, {
|
|
id: toastId,
|
|
})
|
|
}, 200) // Adjust the interval time as needed
|
|
})
|
|
}
|
|
|
|
const UploadContent = ({ progress, files }: { progress: number; files: number }) => (
|
|
<div className="flex gap-3 w-full">
|
|
{progress >= 100 ? (
|
|
<Check className="text-foreground mt-0.5" size={16} strokeWidth={4} />
|
|
) : (
|
|
<Loader2 className="animate-spin text-foreground-muted mt-0.5" size={16} />
|
|
)}
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<div className="flex w-full justify-between">
|
|
<p className="text-foreground text-sm">
|
|
{progress >= 100
|
|
? `Upload complete`
|
|
: files
|
|
? `Uploading ${files} files...`
|
|
: `Uploading...`}
|
|
</p>
|
|
<p className="text-foreground-light text-sm font-mono">{`${progress}%`}</p>
|
|
</div>
|
|
<Progress value={progress} className="w-full" />
|
|
<small className="text-foreground-muted text-xs">
|
|
Please do not close the browser until completed
|
|
</small>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<Button
|
|
type="default"
|
|
onClick={async () => {
|
|
// random id
|
|
const toastId = Math.random()
|
|
const max = 20 // specify the maximum value
|
|
const files = Math.floor(Math.random() * max)
|
|
try {
|
|
const promise = await uploadPromise(files, toastId)
|
|
// @ts-expect-error
|
|
toast.success(<UploadContent progress={promise.progress} files={promise.files} />, {
|
|
duration: 2000,
|
|
id: toastId,
|
|
})
|
|
} catch (error) {}
|
|
}}
|
|
>
|
|
Start upload
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|