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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import * as _ from 'lodash';
import * as React from 'react';
import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_PERCENTAGE } from '../constants';
import { ColorOption, keyframes, styled } from '../style/theme';
import { Container } from './ui/container';
export interface TimedProgressBarProps {
expectedTimeMs: number;
hasEnded: boolean;
}
interface TimedProgressBarState {
animationTimeMs: number;
animationStartingWidth: string;
maxWidthPercent: number;
}
export const beginningState = (props: TimedProgressBarProps): TimedProgressBarState => {
return {
animationTimeMs: props.expectedTimeMs,
animationStartingWidth: '0%',
maxWidthPercent: PROGRESS_STALL_AT_PERCENTAGE,
};
};
/**
* Timed Progress Bar
* Goes from 0% -> PROGRESS_STALL_AT_PERCENTAGE% over time of expectedTimeMs
* When ended set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length
*/
export class TimedProgressBar extends React.Component<TimedProgressBarProps, TimedProgressBarState> {
private readonly _barRef = React.createRef<HTMLDivElement>();
public constructor(props: TimedProgressBarProps) {
super(props);
this.state = beginningState(props);
}
public componentDidUpdate(prevProps: TimedProgressBarProps, prevState: TimedProgressBarState): void {
if (prevProps.hasEnded === false && this.props.hasEnded === true) {
// Show nice animation going to end
// barRef current should always exist, but checking for typesafety
if (this._barRef.current) {
const curProgressWidth = this._barRef.current.offsetWidth;
this.setState({
animationTimeMs: PROGRESS_FINISH_ANIMATION_TIME_MS,
animationStartingWidth: `${curProgressWidth}px`,
maxWidthPercent: 100,
});
}
return;
}
if (prevProps.expectedTimeMs !== this.props.expectedTimeMs || prevProps.hasEnded !== this.props.hasEnded) {
// things changed, get fresh state
this.setState(beginningState(this.props));
}
}
public render(): React.ReactNode {
return (
<Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
<TimedProgress
fromWidth={this.state.animationStartingWidth}
timeMs={this.state.animationTimeMs}
maxWidthPercent={this.state.maxWidthPercent}
ref={this._barRef as any}
/>
</Container>
);
}
}
const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) => {
return keyframes`
from {
width: ${fromWidth}
}
to {
width: ${maxWidthPercent}%;
}
`;
};
interface TimedProgressProps {
timeMs: number;
fromWidth: string;
maxWidthPercent: number;
}
// TODO use PrimaryColor instead of black
export const TimedProgress =
styled.div <
TimedProgressProps >
`
background-color: black;
border-radius: 6px;
height: 6px;
animation: ${props => expandingWidthKeyframes(props.fromWidth, props.maxWidthPercent)}
${props => props.timeMs}ms linear 1 forwards;
`;
|
