diff options
Diffstat (limited to 'jb-ui/src/components/ui/confetti.tsx')
| -rw-r--r-- | jb-ui/src/components/ui/confetti.tsx | 98 |
1 files changed, 49 insertions, 49 deletions
diff --git a/jb-ui/src/components/ui/confetti.tsx b/jb-ui/src/components/ui/confetti.tsx index e0d353a..57d3273 100644 --- a/jb-ui/src/components/ui/confetti.tsx +++ b/jb-ui/src/components/ui/confetti.tsx @@ -1,4 +1,4 @@ -import type { ReactNode } from "react" +import type { ReactNode } from "react"; import React, { createContext, forwardRef, @@ -7,30 +7,30 @@ import React, { useImperativeHandle, useMemo, useRef, -} from "react" +} from "react"; import type { GlobalOptions as ConfettiGlobalOptions, CreateTypes as ConfettiInstance, Options as ConfettiOptions, -} from "canvas-confetti" -import confetti from "canvas-confetti" +} from "canvas-confetti"; +import confetti from "canvas-confetti"; -import { Button } from "@/components/ui/button" +import { Button } from "@/components/ui/button"; type Api = { - fire: (options?: ConfettiOptions) => void -} + fire: (options?: ConfettiOptions) => void; +}; type Props = React.ComponentPropsWithRef<"canvas"> & { - options?: ConfettiOptions - globalOptions?: ConfettiGlobalOptions - manualstart?: boolean - children?: ReactNode -} + options?: ConfettiOptions; + globalOptions?: ConfettiGlobalOptions; + manualstart?: boolean; + children?: ReactNode; +}; -export type ConfettiRef = Api | null +export type ConfettiRef = Api | null; -const ConfettiContext = createContext<Api>({} as Api) +const ConfettiContext = createContext<Api>({} as Api); // Define component first const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => { @@ -40,76 +40,76 @@ const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => { manualstart = false, children, ...rest - } = props - const instanceRef = useRef<ConfettiInstance | null>(null) + } = props; + const instanceRef = useRef<ConfettiInstance | null>(null); const canvasRef = useCallback( (node: HTMLCanvasElement) => { if (node !== null) { - if (instanceRef.current) return + if (instanceRef.current) return; instanceRef.current = confetti.create(node, { ...globalOptions, resize: true, - }) + }); } else { if (instanceRef.current) { - instanceRef.current.reset() - instanceRef.current = null + instanceRef.current.reset(); + instanceRef.current = null; } } }, - [globalOptions] - ) + [globalOptions], + ); const fire = useCallback( async (opts = {}) => { try { - await instanceRef.current?.({ ...options, ...opts }) + await instanceRef.current?.({ ...options, ...opts }); } catch (error) { - console.error("Confetti error:", error) + console.error("Confetti error:", error); } }, - [options] - ) + [options], + ); const api = useMemo( () => ({ fire, }), - [fire] - ) + [fire], + ); - useImperativeHandle(ref, () => api, [api]) + useImperativeHandle(ref, () => api, [api]); useEffect(() => { if (!manualstart) { - ;(async () => { + (async () => { try { - await fire() + await fire(); } catch (error) { - console.error("Confetti effect error:", error) + console.error("Confetti effect error:", error); } - })() + })(); } - }, [manualstart, fire]) + }, [manualstart, fire]); return ( <ConfettiContext.Provider value={api}> <canvas ref={canvasRef} {...rest} /> {children} </ConfettiContext.Provider> - ) -}) + ); +}); // Set display name immediately -ConfettiComponent.displayName = "Confetti" +ConfettiComponent.displayName = "Confetti"; // Export as Confetti -export const Confetti = ConfettiComponent +export const Confetti = ConfettiComponent; interface ConfettiButtonProps extends React.ComponentProps<"button"> { options?: ConfettiOptions & - ConfettiGlobalOptions & { canvas?: HTMLCanvasElement } + ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }; } const ConfettiButtonComponent = ({ @@ -119,28 +119,28 @@ const ConfettiButtonComponent = ({ }: ConfettiButtonProps) => { const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => { try { - const rect = event.currentTarget.getBoundingClientRect() - const x = rect.left + rect.width / 2 - const y = rect.top + rect.height / 2 + const rect = event.currentTarget.getBoundingClientRect(); + const x = rect.left + rect.width / 2; + const y = rect.top + rect.height / 2; await confetti({ ...options, origin: { x: x / window.innerWidth, y: y / window.innerHeight, }, - }) + }); } catch (error) { - console.error("Confetti button error:", error) + console.error("Confetti button error:", error); } - } + }; return ( <Button onClick={handleClick} {...props}> {children} </Button> - ) -} + ); +}; -ConfettiButtonComponent.displayName = "ConfettiButton" +ConfettiButtonComponent.displayName = "ConfettiButton"; -export const ConfettiButton = ConfettiButtonComponent +export const ConfettiButton = ConfettiButtonComponent; |
