From 7ae38906926dc09bc10670c361af0d2bf0050426 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Sat, 19 Jan 2019 18:42:04 +0800 Subject: Update dependency packages --- .../instant/src/components/timed_progress_bar.tsx | 106 --------------------- 1 file changed, 106 deletions(-) delete mode 100644 packages/instant/src/components/timed_progress_bar.tsx (limited to 'packages/instant/src/components/timed_progress_bar.tsx') diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx deleted file mode 100644 index 287269af7..000000000 --- a/packages/instant/src/components/timed_progress_bar.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as _ from 'lodash'; -import { transparentize } from 'polished'; -import * as React from 'react'; - -import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants'; -import { ColorOption, css, keyframes, styled, ThemeConsumer } from '../style/theme'; - -import { Container } from './ui/container'; - -export interface TimedProgressBarProps { - expectedTimeMs: number; - hasEnded: boolean; -} - -/** - * Timed Progress Bar - * Goes from 0% -> PROGRESS_STALL_AT_WIDTH over time of expectedTimeMs - * When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length of time - */ -export class TimedProgressBar extends React.PureComponent { - private readonly _barRef = React.createRef(); - - public render(): React.ReactNode { - const widthAnimationSettings = this._calculateWidthAnimationSettings(); - return ; - } - - private _calculateWidthAnimationSettings(): WidthAnimationSettings { - 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, - toWidth: '100%', - }; - } - - return { - timeMs: this.props.expectedTimeMs, - fromWidth: '0px', - toWidth: PROGRESS_STALL_AT_WIDTH, - }; - } -} - -const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => { - return keyframes` - from { - width: ${fromWidth}; - } - to { - width: ${toWidth}; - } - `; -}; - -export interface WidthAnimationSettings { - timeMs: number; - fromWidth: string; - toWidth: string; -} - -interface ProgressProps { - width?: string; - animationSettings?: WidthAnimationSettings; -} - -export const Progress = styled.div` - && { - background-color: ${props => props.theme[ColorOption.primaryColor]}; - border-radius: 6px; - height: 6px; - ${props => (props.width ? `width: ${props.width};` : '')} - ${props => - props.animationSettings - ? css` - animation: ${expandingWidthKeyframes( - props.animationSettings.fromWidth, - props.animationSettings.toWidth, - )} - ${props.animationSettings.timeMs}ms linear 1 forwards; - ` - : ''} - } -`; - -export interface ProgressBarProps extends ProgressProps {} - -export const ProgressBar: React.ComponentType> = React.forwardRef( - (props, ref) => ( - - {theme => ( - - - - )} - - ), -); -- cgit v1.2.3