aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/timed_progress_bar.tsx70
1 files changed, 23 insertions, 47 deletions
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 8dc95808b..694ae7e2f 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -11,66 +11,42 @@ export interface TimedProgressBarProps {
hasEnded: boolean;
}
-interface TimedProgressBarState {
- animationTimeMs: number;
- animationStartingWidth: string;
- maxWidthPercent: number;
-}
-
-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 hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length
*/
-export class TimedProgressBar extends React.Component<TimedProgressBarProps, TimedProgressBarState> {
+export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}> {
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 {
+ const timedProgressProps = this._calculateTimedProgressProps();
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}
- />
+ <TimedProgress {...timedProgressProps} ref={this._barRef as any} />
</Container>
);
}
+
+ private _calculateTimedProgressProps(): TimedProgressProps {
+ if (this.props.hasEnded) {
+ if (!this._barRef.current) {
+ throw new Error('ended but no reference');
+ }
+ const fromWidth = `${this._barRef.current.offsetWidth}px`;
+ return {
+ timeMs: PROGRESS_FINISH_ANIMATION_TIME_MS,
+ fromWidth,
+ maxWidthPercent: 100,
+ };
+ }
+
+ return {
+ timeMs: this.props.expectedTimeMs,
+ fromWidth: '0px',
+ maxWidthPercent: PROGRESS_STALL_AT_PERCENTAGE,
+ };
+ }
}
const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) => {