|
1 | | -import React, { useEffect } from 'react'; |
2 | | -import { useState } from 'react'; |
3 | | -import { createPortal } from 'react-dom'; |
| 1 | +import React, { type ComponentProps } from 'react'; |
4 | 2 |
|
5 | 3 | import { styled } from 'storybook/internal/theming'; |
6 | 4 |
|
7 | | -import ReactConfetti from 'react-confetti'; |
| 5 | +import { Confetti as ReactConfetti } from '@neoconfetti/react'; |
8 | 6 |
|
9 | | -interface ConfettiProps extends Omit<React.ComponentProps<typeof ReactConfetti>, 'drawShape'> { |
10 | | - top?: number; |
11 | | - left?: number; |
12 | | - width?: number; |
13 | | - height?: number; |
14 | | - numberOfPieces?: number; |
15 | | - recycle?: boolean; |
16 | | - colors?: string[]; |
17 | | -} |
| 7 | +const Wrapper = styled.div({ |
| 8 | + zIndex: 9999, |
| 9 | + position: 'fixed', |
| 10 | + top: 0, |
| 11 | + left: '50%', |
| 12 | + width: '50%', |
| 13 | + height: '100%', |
| 14 | +}); |
18 | 15 |
|
19 | | -const Wrapper = styled.div<{ |
20 | | - width: number; |
21 | | - height: number; |
22 | | - top: number; |
23 | | - left: number; |
24 | | -}>(({ width, height, left, top }) => ({ |
25 | | - width: `${width}px`, |
26 | | - height: `${height}px`, |
27 | | - left: `${left}px`, |
28 | | - top: `${top}px`, |
29 | | - position: 'relative', |
30 | | - overflow: 'hidden', |
31 | | -})); |
32 | | - |
33 | | -export function Confetti({ |
34 | | - top = 0, |
35 | | - left = 0, |
36 | | - width = window.innerWidth, |
37 | | - height = window.innerHeight, |
| 16 | +export const Confetti = React.memo(function Confetti({ |
| 17 | + timeToFade = 5000, |
38 | 18 | colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'], |
39 | 19 | ...confettiProps |
40 | | -}: ConfettiProps): React.ReactPortal { |
41 | | - const [confettiContainer] = useState(() => { |
42 | | - const container = document.createElement('div'); |
43 | | - container.setAttribute('id', 'confetti-container'); |
44 | | - container.setAttribute( |
45 | | - 'style', |
46 | | - 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;' |
47 | | - ); |
48 | | - |
49 | | - return container; |
50 | | - }); |
51 | | - |
52 | | - useEffect(() => { |
53 | | - document.body.appendChild(confettiContainer); |
54 | | - |
55 | | - return () => { |
56 | | - document.body.removeChild(confettiContainer); |
57 | | - }; |
58 | | - }, []); |
59 | | - |
60 | | - return createPortal( |
61 | | - <Wrapper top={top} left={left} width={width} height={height}> |
62 | | - <ReactConfetti colors={colors} drawShape={draw} {...confettiProps} /> |
63 | | - </Wrapper>, |
64 | | - confettiContainer |
| 20 | +}: ComponentProps<typeof ReactConfetti> & { timeToFade?: number }) { |
| 21 | + return ( |
| 22 | + <Wrapper> |
| 23 | + <ReactConfetti |
| 24 | + colors={colors} |
| 25 | + particleCount={200} |
| 26 | + duration={5000} |
| 27 | + stageHeight={window.innerHeight} |
| 28 | + stageWidth={window.innerWidth} |
| 29 | + destroyAfterDone |
| 30 | + {...confettiProps} |
| 31 | + /> |
| 32 | + </Wrapper> |
65 | 33 | ); |
66 | | -} |
67 | | - |
68 | | -enum ParticleShape { |
69 | | - Circle = 1, |
70 | | - Square = 2, |
71 | | - TShape = 3, |
72 | | - LShape = 4, |
73 | | - Triangle = 5, |
74 | | - QuarterCircle = 6, |
75 | | -} |
76 | | - |
77 | | -function getRandomInt(min: number, max: number) { |
78 | | - return Math.floor(Math.random() * (max - min)) + min; |
79 | | -} |
80 | | - |
81 | | -function draw(this: any, context: CanvasRenderingContext2D) { |
82 | | - this.shape = this.shape || getRandomInt(1, 6); |
83 | | - |
84 | | - switch (this.shape) { |
85 | | - case ParticleShape.Square: { |
86 | | - const cornerRadius = 2; |
87 | | - const width = this.w / 2; |
88 | | - const height = this.h / 2; |
89 | | - |
90 | | - context.moveTo(-width + cornerRadius, -height); |
91 | | - context.lineTo(width - cornerRadius, -height); |
92 | | - context.arcTo(width, -height, width, -height + cornerRadius, cornerRadius); |
93 | | - context.lineTo(width, height - cornerRadius); |
94 | | - context.arcTo(width, height, width - cornerRadius, height, cornerRadius); |
95 | | - context.lineTo(-width + cornerRadius, height); |
96 | | - context.arcTo(-width, height, -width, height - cornerRadius, cornerRadius); |
97 | | - context.lineTo(-width, -height + cornerRadius); |
98 | | - context.arcTo(-width, -height, -width + cornerRadius, -height, cornerRadius); |
99 | | - |
100 | | - break; |
101 | | - } |
102 | | - case ParticleShape.TShape: { |
103 | | - context.rect(-4, -4, 8, 16); |
104 | | - context.rect(-12, -4, 24, 8); |
105 | | - break; |
106 | | - } |
107 | | - case ParticleShape.LShape: { |
108 | | - context.rect(-4, -4, 8, 16); |
109 | | - context.rect(-4, -4, 24, 8); |
110 | | - break; |
111 | | - } |
112 | | - case ParticleShape.Circle: { |
113 | | - context.arc(0, 0, this.radius, 0, 2 * Math.PI); |
114 | | - break; |
115 | | - } |
116 | | - case ParticleShape.Triangle: { |
117 | | - context.moveTo(16, 4); |
118 | | - context.lineTo(4, 24); |
119 | | - context.lineTo(24, 24); |
120 | | - break; |
121 | | - } |
122 | | - case ParticleShape.QuarterCircle: { |
123 | | - context.arc(4, -4, 4, -Math.PI / 2, 0); |
124 | | - context.lineTo(4, 0); |
125 | | - break; |
126 | | - } |
127 | | - } |
128 | | - |
129 | | - context.closePath(); |
130 | | - context.fill(); |
131 | | -} |
| 34 | +}); |
0 commit comments