aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-02 01:50:37 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-02 01:50:37 +0800
commit9990f8720cbc04bc7a5074d6668f22af80b2a476 (patch)
tree7bada306ed5a2ae70a15339a43b49714f4701323 /packages/instant/src/components
parent544ddd44a00fe7432d6d8cef44c75f9bfbc78150 (diff)
downloaddexon-0x-contracts-9990f8720cbc04bc7a5074d6668f22af80b2a476.tar
dexon-0x-contracts-9990f8720cbc04bc7a5074d6668f22af80b2a476.tar.gz
dexon-0x-contracts-9990f8720cbc04bc7a5074d6668f22af80b2a476.tar.bz2
dexon-0x-contracts-9990f8720cbc04bc7a5074d6668f22af80b2a476.tar.lz
dexon-0x-contracts-9990f8720cbc04bc7a5074d6668f22af80b2a476.tar.xz
dexon-0x-contracts-9990f8720cbc04bc7a5074d6668f22af80b2a476.tar.zst
dexon-0x-contracts-9990f8720cbc04bc7a5074d6668f22af80b2a476.zip
maxWidth -> toWidth, and make from and to width consistent units
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/timed_progress_bar.tsx20
1 files changed, 10 insertions, 10 deletions
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 694ae7e2f..78c7ee849 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_PERCENTAGE } from '../constants';
+import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants';
import { ColorOption, keyframes, styled } from '../style/theme';
import { Container } from './ui/container';
@@ -13,8 +13,8 @@ export interface TimedProgressBarProps {
/**
* 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
+ * 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.Component<TimedProgressBarProps, {}> {
private readonly _barRef = React.createRef<HTMLDivElement>();
@@ -37,25 +37,25 @@ export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}>
return {
timeMs: PROGRESS_FINISH_ANIMATION_TIME_MS,
fromWidth,
- maxWidthPercent: 100,
+ toWidth: '100%',
};
}
return {
timeMs: this.props.expectedTimeMs,
fromWidth: '0px',
- maxWidthPercent: PROGRESS_STALL_AT_PERCENTAGE,
+ toWidth: PROGRESS_STALL_AT_WIDTH,
};
}
}
-const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) => {
+const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => {
return keyframes`
from {
- width: ${fromWidth}
+ width: ${fromWidth};
}
to {
- width: ${maxWidthPercent}%;
+ width: ${toWidth};
}
`;
};
@@ -63,7 +63,7 @@ const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) =>
interface TimedProgressProps {
timeMs: number;
fromWidth: string;
- maxWidthPercent: number;
+ toWidth: string;
}
// TODO use PrimaryColor instead of black
export const TimedProgress =
@@ -73,6 +73,6 @@ export const TimedProgress =
background-color: black;
border-radius: 6px;
height: 6px;
- animation: ${props => expandingWidthKeyframes(props.fromWidth, props.maxWidthPercent)}
+ animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
${props => props.timeMs}ms linear 1 forwards;
`;