-
Notifications
You must be signed in to change notification settings - Fork 199
/
LogoIndicator.tsx
79 lines (66 loc) 路 1.47 KB
/
LogoIndicator.tsx
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
69
70
71
72
73
74
75
76
77
78
79
import React from "react";
import { hook } from "renderer/hocs/hook";
import styled from "renderer/styles";
import Vivus from "vivus";
const appWhiteContour = require("static/images/logos/app-white-contour.svg");
const LogoIndicatorDiv = styled.div`
pointer-events: none;
margin-top: 50px;
&,
svg {
height: 170px;
width: 430px;
}
svg {
display: block;
overflow: hidden;
path {
transition: stroke-dashoffset 2s ease-out;
}
}
`;
class LogoIndicator extends React.PureComponent<Props> {
vivus: Vivus;
render() {
return <LogoIndicatorDiv id="logo-indicator-div" ref={this.gotEl} />;
}
gotEl = (el: HTMLDivElement) => {
if (el) {
new Vivus(el.id, {
file: appWhiteContour,
type: "delayed",
start: "manual",
animTimingFunction: Vivus.EASE_OUT,
onReady: vivus => {
this.vivus = vivus;
this.update();
},
});
}
};
componentDidUpdate() {
this.update();
}
update = () => {
if (this.vivus) {
this.vivus.setFrameProgress(this.props.progress);
}
};
}
interface Props {
progress: number;
}
export default hook(map => ({
progress: map(rs => {
const { blockingOperation, done } = rs.setup;
if (done) {
return 1.0;
} else {
if (blockingOperation && blockingOperation.progressInfo) {
return blockingOperation.progressInfo.progress;
} else {
return 0.0;
}
}
}),
}))(LogoIndicator);