diff options
| -rw-r--r-- | packages/instant/src/components/timed_progress_bar.tsx | 70 |
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) => { |