-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
Background.js
68 lines (58 loc) · 1.33 KB
/
Background.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React from 'react';
import styled from 'styled-components';
import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
import setupCanvas from './canvas';
const delay = fadeIn(0);
const Container = styled.div`
transition: 0.8s ease background-color;
transition-delay: 1s;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
${delay};
`;
export default class Background extends React.PureComponent {
startCanvas = (el: HTMLElement) => {
this.canvas = setupCanvas(el);
this.props.setCanvas(this.canvas);
};
// Use solid colors for perf
colors = {
'create-react-app': '#1E2428',
'@dojo/cli-create-app': '#211D1C',
'vue-cli': '#1D2525',
'preact-cli': '#202328',
ember: '#2a201d',
svelte: '#202022',
};
componentWillUnmount() {
if (this.canvas) {
this.canvas.destroy();
}
this.canvas = null;
}
render() {
const { template } = this.props;
return (
<Container
aria-hidden
style={{
backgroundColor:
this.colors[template.name] || template.color.clearer(0.97)(),
}}
>
<canvas
style={{
position: 'absolute',
top: 0,
left: 0,
}}
ref={this.startCanvas}
/>
</Container>
);
}
}