diff --git a/src/components/ConfettiParty/Confetti.js b/src/components/ConfettiParty/Confetti.js index 478d26ad..0d8e8028 100644 --- a/src/components/ConfettiParty/Confetti.js +++ b/src/components/ConfettiParty/Confetti.js @@ -1,3 +1,4 @@ +// @flow import React, { PureComponent } from 'react' import Animated from 'animated/lib/targets/react-dom' @@ -13,7 +14,7 @@ class Confetti extends PureComponent< delta: [number, number], }, { - value: *, + progress: Animated.Value, }, > { state = { diff --git a/src/components/ConfettiParty/index.js b/src/components/ConfettiParty/index.js index ae6dbeb8..31b46d8b 100644 --- a/src/components/ConfettiParty/index.js +++ b/src/components/ConfettiParty/index.js @@ -1,3 +1,5 @@ +// @flow + import React, { PureComponent } from 'react' import { i } from 'helpers/staticPath' import Confetti from './Confetti' @@ -9,22 +11,68 @@ const shapes = [ i('confetti-shapes/4.svg'), ] -class ConfettiParty extends PureComponent<{}> { - state = { - confettis: Array(64) - .fill(null) - .map((_, i) => ({ - id: i, +let id = 1 + +const nextConfetti = (mode: ?string) => + mode === 'emit' + ? { + id: id++, shape: shapes[Math.floor(shapes.length * Math.random())], initialRotation: 360 * Math.random(), - initialYPercent: -0.2 + 0.1 * Math.random(), + initialYPercent: -0.05, + initialXPercent: + 0.5 + 0.5 * Math.cos(Date.now() / 1000) * (0.5 + 0.5 * Math.sin(Date.now() / 6000)), + initialScale: 1, + rotations: 4 * Math.random() - 2, + delta: [(Math.random() - 0.5) * 200, 600 + 200 * Math.random()], + duration: 10000, + } + : { + id: id++, + shape: shapes[Math.floor(shapes.length * Math.random())], + initialRotation: 360 * Math.random(), + initialYPercent: -0.15 * Math.random(), initialXPercent: 0.2 + 0.6 * Math.random(), initialScale: 1, - rotations: 4 + 4 * Math.random(), + rotations: 8 * Math.random() - 4, delta: [(Math.random() - 0.5) * 600, 300 + 300 * Math.random()], duration: 6000 + 5000 * Math.random(), - })), + } + +class ConfettiParty extends PureComponent<{ emit: boolean }, { confettis: Array }> { + state = { + // $FlowFixMe + confettis: Array(64) + .fill(null) + .map(nextConfetti), + } + + componentDidMount() { + this.setEmit(this.props.emit) + } + + componentDidUpdate(prevProps: *) { + if (this.props.emit !== prevProps.emit) { + this.setEmit(this.props.emit) + } + } + + componentWillUnmount() { + this.setEmit(false) + } + + setEmit(on: boolean) { + if (on) { + this.interval = setInterval(() => { + this.setState(({ confettis }) => ({ + confettis: confettis.slice(confettis.length > 200 ? 1 : 0).concat(nextConfetti('emit')), + })) + }, 40) + } else { + clearInterval(this.interval) + } } + interval: * render() { const { confettis } = this.state diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index a45ca150..d0e02d79 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -61,10 +61,10 @@ export const LiveLogoContainer = styled(Box).attrs({ alignItems: 'center', justifyContent: 'center', })` + background-color: white; box-shadow: 0 2px 24px 0 #00000014; width: ${p => (p.width ? p.width : 80)} height: ${p => (p.height ? p.height : 80)} - ` // INSTRUCTION LIST diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js index 2fb41697..05ba2f96 100644 --- a/src/components/Onboarding/steps/Finish.js +++ b/src/components/Onboarding/steps/Finish.js @@ -1,6 +1,6 @@ // @flow -import React from 'react' +import React, { Component } from 'react' import { shell } from 'electron' import styled from 'styled-components' import { i } from 'helpers/staticPath' @@ -48,39 +48,63 @@ const socialMedia = [ }, ] -export default (props: StepProps) => { - const { finish, t } = props - return ( - - - - - - - } - /> - - +export default class Finish extends Component { + state = { emit: false } + onMouseUp = () => this.setState({ emit: false }) + onMouseDown = () => { + this.setState({ emit: true }) + } + onMouseLeave = () => { + this.setState({ emit: false }) + } + render() { + const { finish, t } = this.props + const { emit } = this.state + return ( + + + + + + + + } + /> + + + - - - {t('onboarding:finish.title')} - {t('onboarding:finish.desc')} - - - - - - {socialMedia.map(socMed => )} + + {t('onboarding:finish.title')} + {t('onboarding:finish.desc')} + + + + + + {socialMedia.map(socMed => )} + - - ) + ) + } } type SocMed = {