mirror of
https://github.com/brianlovin/security-checklist.git
synced 2026-03-11 08:55:31 +00:00
Fix Confetti so it works
This commit is contained in:
Joachim Robert
parent
ced5968aff
commit
b5bf8fae1a
3 changed files with 83 additions and 79 deletions
|
|
@ -1,19 +1,8 @@
|
|||
// @flow
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import React, { useState, useRef, useEffect, Fragment } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import styled from 'styled-components';
|
||||
import { ParticleZone } from './style';
|
||||
|
||||
const ConfettiZone = styled.div`
|
||||
.particles {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
transition: all 5s ease-out;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const COLORS = ['#2ecc71','#3498db','#e67e22','#e67e22','#e74c3c'];
|
||||
const TOP_OFFSET = typeof window !== 'undefined' && window.innerHeight;
|
||||
|
|
@ -31,7 +20,7 @@ export function CircularParticle(props: Props) {
|
|||
const ROTATION_RANGE = [0, 45];
|
||||
|
||||
const size = generateWholeNumber(...SIZE_RANGE);
|
||||
style = {
|
||||
const style = {
|
||||
backgroundColor: generateRandomColor(),
|
||||
width: size,
|
||||
height: size,
|
||||
|
|
@ -41,63 +30,66 @@ export function CircularParticle(props: Props) {
|
|||
top: generateWholeNumber(-TOP_OFFSET, 0)
|
||||
};
|
||||
|
||||
const {left} = style;
|
||||
|
||||
setTimeout(() => {
|
||||
const node = ReactDOM.findDOMNode(currentConfetti);
|
||||
node.style.top = TOP_OFFSET + generateWholeNumber(0, TOP_OFFSET) + 'px';
|
||||
node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + 'px';
|
||||
},0);
|
||||
|
||||
useEffect(() => {
|
||||
const {left} = style;
|
||||
setTimeout(() => {
|
||||
const node = currentConfetti.current;
|
||||
if (node) {
|
||||
node.style.top = TOP_OFFSET + generateWholeNumber(0, TOP_OFFSET) + 'px';
|
||||
node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + 'px';
|
||||
}
|
||||
},10);
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={currentConfetti} className='particle' style={this.style}/>
|
||||
<div ref={currentConfetti} className='particle' style={style}/>
|
||||
);
|
||||
}
|
||||
|
||||
// function SquiggleParticle(props: Props) {
|
||||
|
||||
// static SIZE_RANGE = [15, 45];
|
||||
// static ROTATION_RANGE = [-15, 15];
|
||||
function SquiggleParticle(props: Props) {
|
||||
const currentConfetti = useRef(null);
|
||||
const SIZE_RANGE = [15, 45];
|
||||
const ROTATION_RANGE = [-15, 15];
|
||||
|
||||
// const size = generateWholeNumber(...SquiggleParticle.SIZE_RANGE);
|
||||
// this.style = {
|
||||
// fill: generateRandomColor(),
|
||||
// width: size,
|
||||
// height: size,
|
||||
// transform: `rotateZ(${generateWholeNumber(...SquiggleParticle.ROTATION_RANGE)}deg)`,
|
||||
// left: generateWholeNumber(0, window.innerWidth),
|
||||
// top: generateWholeNumber(-TOP_OFFSET, 0)
|
||||
// };
|
||||
const size = generateWholeNumber(...SIZE_RANGE);
|
||||
const style = {
|
||||
fill: generateRandomColor(),
|
||||
width: size,
|
||||
height: size,
|
||||
transform: `rotateZ(${generateWholeNumber(...ROTATION_RANGE)}deg)`,
|
||||
left: generateWholeNumber(0, INNER_WIDTH),
|
||||
top: generateWholeNumber(-TOP_OFFSET, 0)
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// const {left} = this.style;
|
||||
// const {ROTATION_RANGE} = SquiggleParticle;
|
||||
// setTimeout(() => {
|
||||
// const node = ReactDOM.findDOMNode(this.ref);
|
||||
// node.style.top = window.innerHeight + generateWholeNumber(0, TOP_OFFSET) + 'px';
|
||||
// node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + 'px';
|
||||
// node.style.transform = `rotateZ(${generateWholeNumber(...ROTATION_RANGE)}deg)`;
|
||||
// },0);
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <svg
|
||||
// ref={ref => this.ref = ref}
|
||||
// className='particle'
|
||||
// style={this.style}
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// viewBox="0 0 512 512">
|
||||
// <path fill={this.style.fill} d="M428.127,0l-12.716,10.062l12.718-10.06c8.785,11.101,19.716,24.917,19.716,51.051 s-10.932,39.951-19.716,51.053c-7.382,9.331-12.716,16.072-12.716,30.927c0,14.854,5.334,21.594,12.716,30.925 c8.784,11.101,19.716,24.917,19.716,51.05c0,26.135-10.931,39.949-19.715,51.051c-7.383,9.331-12.717,16.072-12.717,30.927 c0,14.855,5.332,21.593,12.711,30.919l-25.435,20.124c-8.781-11.097-19.708-24.909-19.708-51.042 c0-26.135,10.931-39.949,19.715-51.051c7.383-9.331,12.717-16.072,12.717-30.927c0-14.855-5.335-21.595-12.717-30.926 c-8.784-11.101-19.715-24.916-19.715-51.049s10.931-39.95,19.715-51.051c7.383-9.331,12.717-16.072,12.717-30.928 c0-14.855-5.335-21.596-12.718-30.927L428.127,0z"/>
|
||||
// </svg>
|
||||
// );
|
||||
// }
|
||||
useEffect(() => {
|
||||
const {left} = style;
|
||||
setTimeout(() => {
|
||||
const node = currentConfetti.current;
|
||||
if (node){
|
||||
node.style.top = window.innerHeight + generateWholeNumber(0, TOP_OFFSET) + 'px';
|
||||
node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + 'px';
|
||||
node.style.transform = `rotateZ(${generateWholeNumber(...ROTATION_RANGE)}deg)`;
|
||||
}
|
||||
},10);
|
||||
});
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={currentConfetti}
|
||||
className='particle'
|
||||
style={style}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill={style.fill} d="M428.127,0l-12.716,10.062l12.718-10.06c8.785,11.101,19.716,24.917,19.716,51.051 s-10.932,39.951-19.716,51.053c-7.382,9.331-12.716,16.072-12.716,30.927c0,14.854,5.334,21.594,12.716,30.925 c8.784,11.101,19.716,24.917,19.716,51.05c0,26.135-10.931,39.949-19.715,51.051c-7.383,9.331-12.717,16.072-12.717,30.927 c0,14.855,5.332,21.593,12.711,30.919l-25.435,20.124c-8.781-11.097-19.708-24.909-19.708-51.042 c0-26.135,10.931-39.949,19.715-51.051c7.383-9.331,12.717-16.072,12.717-30.927c0-14.855-5.335-21.595-12.717-30.926 c-8.784-11.101-19.715-24.916-19.715-51.049s10.931-39.95,19.715-51.051c7.383-9.331,12.717-16.072,12.717-30.928 c0-14.855-5.335-21.596-12.718-30.927L428.127,0z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function Particles(props: Props) {
|
||||
let {count: n} = props;
|
||||
const particles = [];
|
||||
// const types = [SquiggleParticle, CircularParticle, CircularParticle];
|
||||
const types = [CircularParticle];
|
||||
const types = [SquiggleParticle, CircularParticle, CircularParticle];
|
||||
|
||||
while(n--) {
|
||||
const Particle = types[generateWholeNumber(0,3)];
|
||||
|
|
@ -107,9 +99,9 @@ export function Particles(props: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='particles'>
|
||||
<ParticleZone className='particles'>
|
||||
{particles}
|
||||
</div>
|
||||
</ParticleZone>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -124,21 +116,25 @@ export default function Confetti(props: Props) {
|
|||
}
|
||||
|
||||
useEffect(() => {
|
||||
id = id;
|
||||
id++;
|
||||
if (props.fireConfetti) {
|
||||
id = id;
|
||||
id++;
|
||||
|
||||
setParticles([...particles, id])
|
||||
|
||||
setParticles([...particles, id])
|
||||
|
||||
setTimeout(() => {
|
||||
clean(id);
|
||||
}, 5000);
|
||||
});
|
||||
setTimeout(() => {
|
||||
clean(id);
|
||||
}, 5000);
|
||||
}
|
||||
},
|
||||
[props.fireConfetti]
|
||||
);
|
||||
|
||||
return (
|
||||
<ConfettiZone>
|
||||
{particles.map(id => (
|
||||
<Fragment>
|
||||
{props.fireConfetti && particles.map(id => (
|
||||
<Particles key={id} count={Math.floor(INNER_WIDTH / 20)}/>
|
||||
))}
|
||||
</ConfettiZone>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,12 +22,6 @@ type Props = {
|
|||
export default function Header(props: Props) {
|
||||
const { showHeaderShadow, totalItemsCount, currentCount, displayProgress } = props;
|
||||
|
||||
const getConfetti = () => {
|
||||
if (currentCount === totalItemsCount) {
|
||||
return (<Confetti />);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container showHeaderShadow={showHeaderShadow} data-cy="header">
|
||||
<div>
|
||||
|
|
@ -43,7 +37,7 @@ export default function Header(props: Props) {
|
|||
{ currentCount === totalItemsCount && `🎉 `}
|
||||
{currentCount} of {totalItemsCount} completed
|
||||
{ currentCount === totalItemsCount && ` 🎉`}
|
||||
{ getConfetti() }
|
||||
<Confetti fireConfetti={currentCount === totalItemsCount} />
|
||||
<ProgressBar />
|
||||
</Progression>
|
||||
|
||||
|
|
|
|||
|
|
@ -93,3 +93,17 @@ export const Label = styled.h1`
|
|||
left: -9999px;
|
||||
visibility: none;
|
||||
`;
|
||||
|
||||
export const ParticleZone = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
& > div, & > svg {
|
||||
position: absolute;
|
||||
transition: all 5s ease-out;
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue