aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/timed_progress_bar.tsx
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-11-16 21:52:20 +0800
committerFabio Berger <me@fabioberger.com>2018-11-16 21:52:20 +0800
commit25d0b1e6e58987d0f00a5034158c2c514cf476d6 (patch)
tree412ef07e713fd928b856aca2fc603e182adcd1d3 /packages/instant/src/components/timed_progress_bar.tsx
parente36fc4e6aef414c5d3507c59d82e03e92fbc93fb (diff)
parentcabb7432b9a6d4a5bb8da6fc7fe4522d24e4ece5 (diff)
downloaddexon-0x-contracts-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar
dexon-0x-contracts-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.gz
dexon-0x-contracts-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.bz2
dexon-0x-contracts-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.lz
dexon-0x-contracts-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.xz
dexon-0x-contracts-25d0b1e6e58987d0f00a5034158c2c514cf476d6.tar.zst
dexon-0x-contracts-25d0b1e6e58987d0f00a5034158c2c514cf476d6.zip
Merge branch 'development' into launchKitLanding
* development: (110 commits) fix: fix exceeds block gas limit error chore(instant): fix lint error fix: remove unused vars Send in affiliate info as option Have heartbeat update not trigger errors fix: remove redundant handler feat: make onUnlockWalletClick different based on ON chore: remove wallet panel content for mobile feat: use blue for wallet prompt on mobile feat: use stable version of bowser fix: add http to external url string feat: make onUnlockWalletClick different based on ON chore: remove wallet panel content for mobile feat: use blue for wallet prompt on mobile feat: use stable version of bowser feat: expose webpack-dev-server content to local network fix(website): remove node env definition from webpack fix(website): currentProvider called on undefined chore: update yarn lock feat: use capital values for enums ...
Diffstat (limited to 'packages/instant/src/components/timed_progress_bar.tsx')
-rw-r--r--packages/instant/src/components/timed_progress_bar.tsx46
1 files changed, 33 insertions, 13 deletions
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 59aaa33a1..8465b9cd0 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants';
-import { ColorOption, keyframes, styled } from '../style/theme';
+import { ColorOption, css, keyframes, styled } from '../style/theme';
import { Container } from './ui/container';
@@ -20,15 +20,11 @@ export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}>
private readonly _barRef = React.createRef<HTMLDivElement>();
public render(): React.ReactNode {
- const timedProgressProps = this._calculateTimedProgressProps();
- return (
- <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
- <TimedProgress {...timedProgressProps} ref={this._barRef as any} />
- </Container>
- );
+ const widthAnimationSettings = this._calculateWidthAnimationSettings();
+ return <ProgressBar animationSettings={widthAnimationSettings} ref={this._barRef} />;
}
- private _calculateTimedProgressProps(): TimedProgressProps {
+ private _calculateWidthAnimationSettings(): WidthAnimationSettings {
if (this.props.hasEnded) {
if (!this._barRef.current) {
throw new Error('ended but no reference');
@@ -60,21 +56,45 @@ const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => {
`;
};
-interface TimedProgressProps {
+export interface WidthAnimationSettings {
timeMs: number;
fromWidth: string;
toWidth: string;
}
-export const TimedProgress =
+interface ProgressProps {
+ width?: string;
+ animationSettings?: WidthAnimationSettings;
+}
+
+export const Progress =
styled.div <
- TimedProgressProps >
+ ProgressProps >
`
&& {
background-color: ${props => props.theme[ColorOption.primaryColor]};
border-radius: 6px;
height: 6px;
- animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
- ${props => props.timeMs}ms linear 1 forwards;
+ ${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<ProgressBarProps & React.ClassAttributes<{}>> = React.forwardRef(
+ (props, ref) => (
+ <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
+ <Progress {...props} ref={ref as any} />
+ </Container>
+ ),
+);