aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-01 02:55:48 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-01 02:55:48 +0800
commit27258fe3d45b8ffae81b74da43e473ae5905edc1 (patch)
treef4ebc7107ce10b10ac4b75b758b54d66c6ddd887 /packages/instant/src/components
parent91f8487947d7941b508c34d1bfc1e72c0840c33d (diff)
downloaddexon-sol-tools-27258fe3d45b8ffae81b74da43e473ae5905edc1.tar
dexon-sol-tools-27258fe3d45b8ffae81b74da43e473ae5905edc1.tar.gz
dexon-sol-tools-27258fe3d45b8ffae81b74da43e473ae5905edc1.tar.bz2
dexon-sol-tools-27258fe3d45b8ffae81b74da43e473ae5905edc1.tar.lz
dexon-sol-tools-27258fe3d45b8ffae81b74da43e473ae5905edc1.tar.xz
dexon-sol-tools-27258fe3d45b8ffae81b74da43e473ae5905edc1.tar.zst
dexon-sol-tools-27258fe3d45b8ffae81b74da43e473ae5905edc1.zip
chore: address PR feedback
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/animations/position_animation.tsx14
-rw-r--r--packages/instant/src/components/animations/slide_animation.tsx6
-rw-r--r--packages/instant/src/components/buy_order_state_buttons.tsx11
-rw-r--r--packages/instant/src/components/erc20_asset_amount_input.tsx8
-rw-r--r--packages/instant/src/components/instant_heading.tsx4
-rw-r--r--packages/instant/src/components/placing_order_button.tsx5
-rw-r--r--packages/instant/src/components/secondary_button.tsx3
-rw-r--r--packages/instant/src/components/sliding_error.tsx8
-rw-r--r--packages/instant/src/components/sliding_panel.tsx11
-rw-r--r--packages/instant/src/components/ui/index.ts12
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx2
11 files changed, 43 insertions, 41 deletions
diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index aefd7ef30..4bb21befb 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -2,6 +2,11 @@ import { Keyframes } from 'styled-components';
import { css, keyframes, styled } from '../../style/theme';
+export interface TransitionInfo {
+ from: string;
+ to: string;
+}
+
const generateTransitionInfoCss = (
key: keyof TransitionInfo,
top?: TransitionInfo,
@@ -39,11 +44,6 @@ const slideKeyframeGenerator = (
}
`;
-export interface TransitionInfo {
- from: string;
- to: string;
-}
-
export interface PositionAnimationSettings {
top?: TransitionInfo;
bottom?: TransitionInfo;
@@ -74,3 +74,7 @@ export const PositionAnimation =
height: 100%;
width: 100%;
`;
+
+PositionAnimation.defaultProps = {
+ position: 'relative',
+};
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 4124e50c3..66a314c7f 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -6,15 +6,15 @@ export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
export interface SlideAnimationProps {
position: string;
animationState: SlideAnimationState;
- slideIn: PositionAnimationSettings;
- slideOut: PositionAnimationSettings;
+ slideInSettings: PositionAnimationSettings;
+ slideOutSettings: PositionAnimationSettings;
}
export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
if (props.animationState === 'none') {
return <React.Fragment>{props.children}</React.Fragment>;
}
- const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut;
+ const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
return (
<PositionAnimation position={props.position} {...propsToUse}>
{props.children}
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index d01e9ff57..51e06a284 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -1,16 +1,13 @@
import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
import * as React from 'react';
-import { BuyButton } from '../components/buy_button';
-import { SecondaryButton } from '../components/secondary_button';
-import { Flex } from '../components/ui/flex';
-
-import { PlacingOrderButton } from '../components/placing_order_button';
import { ColorOption } from '../style/theme';
import { OrderProcessState, ZeroExInstantError } from '../types';
-import { Button } from './ui/button';
-import { Text } from './ui/text';
+import { BuyButton } from './buy_button';
+import { PlacingOrderButton } from './placing_order_button';
+import { SecondaryButton } from './secondary_button';
+import { Button, Flex, Text } from './ui';
export interface BuyOrderStateButtonProps {
buyQuote?: BuyQuote;
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index bed1b3b4e..b1fec6405 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps {
asset?: ERC20Asset;
value?: BigNumberInput;
onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
- onSymbolClick?: (asset?: ERC20Asset) => void;
+ onSelectAssetClick?: (asset?: ERC20Asset) => void;
startingFontSizePx: number;
fontColor?: ColorOption;
isDisabled: boolean;
@@ -40,7 +40,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
const { asset } = this.props;
return (
<Container whiteSpace="nowrap">
- {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()}
+ {_.isUndefined(asset) ? this._renderBackupContent() : this._renderContentForAsset(asset)}
</Container>
);
}
@@ -111,8 +111,8 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
});
};
private readonly _handleSymbolClick = () => {
- if (this.props.onSymbolClick) {
- this.props.onSymbolClick(this.props.asset);
+ if (this.props.onSelectAssetClick) {
+ this.props.onSelectAssetClick(this.props.asset);
}
};
// For assets with symbols of different length,
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 08efd1b64..19c08db70 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -16,7 +16,7 @@ export interface InstantHeadingProps {
ethUsdPrice?: BigNumber;
quoteRequestState: AsyncProcessState;
buyOrderState: OrderState;
- onSymbolClick?: (asset?: ERC20Asset) => void;
+ onSelectAssetClick?: (asset?: ERC20Asset) => void;
}
const PLACEHOLDER_COLOR = ColorOption.white;
@@ -50,7 +50,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
<Flex height="60px">
<SelectedERC20AssetAmountInput
startingFontSizePx={38}
- onSymbolClick={this.props.onSymbolClick}
+ onSelectAssetClick={this.props.onSelectAssetClick}
/>
</Flex>
<Flex direction="column" justify="space-between">
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index 4232e6c22..e5a6371e6 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -2,10 +2,7 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
-import { Button } from './ui/button';
-import { Container } from './ui/container';
-import { Spinner } from './ui/spinner';
-import { Text } from './ui/text';
+import { Button, Container, Spinner, Text } from './ui';
export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
<Button isDisabled={true} width="100%">
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 583058b5b..ca698c77a 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -3,8 +3,7 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
-import { Button, ButtonProps } from './ui/button';
-import { Text } from './ui/text';
+import { Button, ButtonProps, Text } from './ui';
export interface SecondaryButtonProps extends ButtonProps {}
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index a89e201c0..17643fd7d 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps {
}
export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
const slideAmount = '120px';
- const slideUp: PositionAnimationSettings = {
+ const slideUpSettings: PositionAnimationSettings = {
timingFunction: 'ease-in',
top: {
from: slideAmount,
to: '0px',
},
};
- const slideDown: PositionAnimationSettings = {
+ const slideDownSettings: PositionAnimationSettings = {
timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
top: {
from: '0px',
@@ -54,8 +54,8 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
return (
<SlideAnimation
position="relative"
- slideIn={slideUp}
- slideOut={slideDown}
+ slideInSettings={slideUpSettings}
+ slideOutSettings={slideDownSettings}
animationState={props.animationState}
>
<Error icon={props.icon} message={props.message} />
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 19034eb95..9219ad1f1 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -30,7 +30,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
}
const { animationState, ...rest } = props;
const slideAmount = '100%';
- const slideUp: PositionAnimationSettings = {
+ const slideUpSettings: PositionAnimationSettings = {
duration: '0.3s',
timingFunction: 'ease-in-out',
top: {
@@ -38,7 +38,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
to: '0px',
},
};
- const slideDown: PositionAnimationSettings = {
+ const slideDownSettings: PositionAnimationSettings = {
duration: '0.3s',
timingFunction: 'ease-out',
top: {
@@ -47,7 +47,12 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
},
};
return (
- <SlideAnimation position="absolute" slideIn={slideUp} slideOut={slideDown} animationState={animationState}>
+ <SlideAnimation
+ position="absolute"
+ slideInSettings={slideUpSettings}
+ slideOutSettings={slideDownSettings}
+ animationState={animationState}
+ >
<Panel {...rest} />
</SlideAnimation>
);
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index 7cfee2491..28f76c262 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,7 +1,7 @@
export { Text, Title } from './text';
-export { Button } from './button';
-export { Flex } from './flex';
-export { Container } from './container';
-export { Input } from './input';
-export { Icon } from './icon';
-export { Spinner } from './spinner';
+export { Button, ButtonProps } from './button';
+export { Flex, FlexProps } from './flex';
+export { Container, ContainerProps } from './container';
+export { Input, InputProps } from './input';
+export { Icon, IconProps } from './icon';
+export { Spinner, SpinnerProps } from './spinner';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 818a9a957..009ad9b2a 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -35,7 +35,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
overflow="hidden"
>
<Flex direction="column" justify="flex-start">
- <SelectedAssetInstantHeading onSymbolClick={this._handleSymbolClick} />
+ <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
<LatestBuyQuoteOrderDetails />
<Container padding="20px" width="100%">
<SelectedAssetBuyOrderStateButtons />