From a49bf353f85c22a029db3085a620f3c031b52d73 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 30 Oct 2018 15:21:58 -0700 Subject: feat: refactor animation code --- packages/instant/src/containers/latest_error.tsx | 9 +++++---- .../instant/src/containers/selected_erc20_asset_amount_input.ts | 1 + 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 45ca09673..2a8d232da 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; +import { SlideAnimationPhase } from '../components/animations/slide_animations'; import { SlidingError } from '../components/sliding_error'; import { State } from '../redux/reducer'; import { Asset, DisplayStatus } from '../types'; @@ -9,26 +10,26 @@ import { Asset, DisplayStatus } from '../types'; export interface LatestErrorComponentProps { asset?: Asset; latestErrorMessage?: string; - slidingDirection: 'down' | 'up'; + slidingPhase: SlideAnimationPhase; } export const LatestErrorComponent: React.StatelessComponent = props => { if (!props.latestErrorMessage) { return
; } - return ; + return ; }; interface ConnectedState { asset?: Asset; latestErrorMessage?: string; - slidingDirection: 'down' | 'up'; + slidingPhase: SlideAnimationPhase; } export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ asset: state.selectedAsset, latestErrorMessage: state.latestErrorMessage, - slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down', + slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut', }); export const LatestError = connect(mapStateToProps)(LatestErrorComponent); 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 4767b15d4..4df7faab9 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -19,6 +19,7 @@ import { errorFlasher } from '../util/error_flasher'; export interface SelectedERC20AssetAmountInputProps { fontColor?: ColorOption; startingFontSizePx: number; + onSymbolClick?: (asset?: ERC20Asset) => void; } interface ConnectedState { -- cgit From 91f8487947d7941b508c34d1bfc1e72c0840c33d Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 30 Oct 2018 16:57:42 -0700 Subject: feat: implement sliding panel --- packages/instant/src/containers/latest_error.tsx | 10 +++++----- .../instant/src/containers/selected_asset_instant_heading.ts | 6 ++++-- 2 files changed, 9 insertions(+), 7 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 2a8d232da..99e55a6c4 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; -import { SlideAnimationPhase } from '../components/animations/slide_animations'; +import { SlideAnimationState } from '../components/animations/slide_animation'; import { SlidingError } from '../components/sliding_error'; import { State } from '../redux/reducer'; import { Asset, DisplayStatus } from '../types'; @@ -10,26 +10,26 @@ import { Asset, DisplayStatus } from '../types'; export interface LatestErrorComponentProps { asset?: Asset; latestErrorMessage?: string; - slidingPhase: SlideAnimationPhase; + animationState: SlideAnimationState; } export const LatestErrorComponent: React.StatelessComponent = props => { if (!props.latestErrorMessage) { return
; } - return ; + return ; }; interface ConnectedState { asset?: Asset; latestErrorMessage?: string; - slidingPhase: SlideAnimationPhase; + animationState: SlideAnimationState; } export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ asset: state.selectedAsset, latestErrorMessage: state.latestErrorMessage, - slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut', + animationState: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slidIn' : 'slidOut', }); export const LatestError = connect(mapStateToProps)(LatestErrorComponent); diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index 6b2a29b07..e413c7ef1 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -5,11 +5,13 @@ import { connect } from 'react-redux'; import { oc } from 'ts-optchain'; import { State } from '../redux/reducer'; -import { AsyncProcessState, OrderState } from '../types'; +import { AsyncProcessState, ERC20Asset, OrderState } from '../types'; import { InstantHeading } from '../components/instant_heading'; -export interface InstantHeadingProps {} +export interface InstantHeadingProps { + onSymbolClick?: (asset?: ERC20Asset) => void; +} interface ConnectedState { selectedAssetAmount?: BigNumber; -- cgit From 27258fe3d45b8ffae81b74da43e473ae5905edc1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 31 Oct 2018 11:55:48 -0700 Subject: chore: address PR feedback --- packages/instant/src/containers/selected_asset_instant_heading.ts | 2 +- packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/containers') 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 { -- cgit