diff options
13 files changed, 45 insertions, 43 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 /> diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index e413c7ef1..a407279e6 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -10,7 +10,7 @@ import { AsyncProcessState, ERC20Asset, OrderState } from '../types'; import { InstantHeading } from '../components/instant_heading'; export interface InstantHeadingProps { - onSymbolClick?: (asset?: ERC20Asset) => void; + onSelectAssetClick?: (asset?: ERC20Asset) => void; } interface ConnectedState { diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index 4df7faab9..217d603d2 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -19,7 +19,7 @@ import { errorFlasher } from '../util/error_flasher'; export interface SelectedERC20AssetAmountInputProps { fontColor?: ColorOption; startingFontSizePx: number; - onSymbolClick?: (asset?: ERC20Asset) => void; + onSelectAssetClick?: (asset?: ERC20Asset) => void; } interface ConnectedState { |