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 --- .../components/animations/position_animation.tsx | 70 ++++++++++++++++++++++ .../src/components/animations/slide_animations.tsx | 58 +++--------------- .../src/components/erc20_asset_amount_input.tsx | 7 ++- .../instant/src/components/instant_heading.tsx | 10 ++-- packages/instant/src/components/panel.tsx | 9 +-- packages/instant/src/components/sliding_error.tsx | 28 ++++++--- packages/instant/src/components/ui/container.tsx | 2 + .../src/components/zero_ex_instant_container.tsx | 10 +++- packages/instant/src/containers/latest_error.tsx | 9 +-- .../selected_erc20_asset_amount_input.ts | 1 + 10 files changed, 130 insertions(+), 74 deletions(-) create mode 100644 packages/instant/src/components/animations/position_animation.tsx (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx new file mode 100644 index 000000000..de38ee30a --- /dev/null +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { Keyframes } from 'styled-components'; + +import { css, keyframes, styled } from '../../style/theme'; + +const generateTransitionInfoCss = ( + key: keyof TransitionInfo, + top?: TransitionInfo, + bottom?: TransitionInfo, + left?: TransitionInfo, + right?: TransitionInfo, +): string => { + const topStringIfExists = top ? `top: ${top[key]};` : ''; + const bottomStringIfExists = bottom ? `bottom: ${bottom[key]};` : ''; + const leftStringIfExists = left ? `left: ${left[key]};` : ''; + const rightStringIfExists = right ? `right: ${right[key]};` : ''; + return ` + ${topStringIfExists} + ${bottomStringIfExists} + ${leftStringIfExists} + ${rightStringIfExists} + `; +}; + +const slideKeyframeGenerator = ( + top?: TransitionInfo, + bottom?: TransitionInfo, + left?: TransitionInfo, + right?: TransitionInfo, +) => keyframes` + from { + position: relative; + ${generateTransitionInfoCss('from', top, bottom, left, right)} + } + + to { + position: relative; + ${generateTransitionInfoCss('to', top, bottom, left, right)} + } +`; + +export interface TransitionInfo { + from: string; + to: string; +} + +export interface PositionAnimationProps { + top?: TransitionInfo; + bottom?: TransitionInfo; + left?: TransitionInfo; + right?: TransitionInfo; + timingFunction: string; + direction?: string; +} + +export const PositionAnimation = + styled.div < + PositionAnimationProps > + ` + animation-name: ${props => + css` + ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)}; + `}; + animation-duration: 0.3s; + animation-timing-function: ${props => props.timingFunction}; + animation-delay: 0s; + animation-iteration-count: 1; + animation-fill-mode: ${props => props.direction || 'none'}; + position: relative; +`; diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 84280372b..99533a2f0 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -3,56 +3,16 @@ import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; -const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` - from { - position: relative; - top: ${fromY}; - } - - to { - position: relative; - top: ${toY}; - } -`; +import { PositionAnimation, PositionAnimationProps } from './position_animation'; +export type SlideAnimationPhase = 'slideIn' | 'slideOut'; export interface SlideAnimationProps { - keyframes: Keyframes; - animationType: string; - animationDirection?: string; + phase: SlideAnimationPhase; + slideIn: PositionAnimationProps; + slideOut: PositionAnimationProps; } -export const SlideAnimation = - styled.div < - SlideAnimationProps > - ` - animation-name: ${props => - css` - ${props.keyframes}; - `}; - animation-duration: 0.3s; - animation-timing-function: ${props => props.animationType}; - animation-delay: 0s; - animation-iteration-count: 1; - animation-fill-mode: ${props => props.animationDirection || 'none'}; - position: relative; -`; - -export interface SlideAnimationComponentProps { - downY: string; -} - -export const SlideUpAnimation: React.StatelessComponent = props => ( - - {props.children} - -); - -export const SlideDownAnimation: React.StatelessComponent = props => ( - - {props.children} - -); +export const SlideAnimation: React.StatelessComponent = props => { + const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut; + return {props.children}; +}; diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 4108fd0e8..bed1b3b4e 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; + onSymbolClick?: (asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; isDisabled: boolean; @@ -28,7 +28,6 @@ export interface ERC20AssetAmountInputState { export class ERC20AssetAmountInput extends React.Component { public static defaultProps = { onChange: util.boundNoop, - onSymbolClick: util.boundNoop, isDisabled: false, }; constructor(props: ERC20AssetAmountInputProps) { @@ -112,7 +111,9 @@ export class ERC20AssetAmountInput extends React.Component { - this.props.onSymbolClick(this.props.asset); + if (this.props.onSymbolClick) { + this.props.onSymbolClick(this.props.asset); + } }; // For assets with symbols of different length, // start scaling the input at different character lengths diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 0b41d44d7..e1c2f8bc3 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -60,8 +60,8 @@ export class InstantHeading extends React.Component { private _renderAmountsSection(): React.ReactNode { return ( - {this._placeholderOrAmount(this._ethAmount)} - {this._placeholderOrAmount(this._dollarAmount)} + {this._renderPlaceholderOrAmount(this._renderEthAmount)} + {this._renderPlaceholderOrAmount(this._renderDollarAmount)} ); } @@ -92,7 +92,7 @@ export class InstantHeading extends React.Component { return 'I want to buy'; } - private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { + private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { return ; } @@ -102,7 +102,7 @@ export class InstantHeading extends React.Component { return amountFunction(); } - private readonly _ethAmount = (): React.ReactNode => { + private readonly _renderEthAmount = (): React.ReactNode => { return ( {format.ethBaseAmount( @@ -114,7 +114,7 @@ export class InstantHeading extends React.Component { ); }; - private readonly _dollarAmount = (): React.ReactNode => { + private readonly _renderDollarAmount = (): React.ReactNode => { return ( {format.ethBaseAmountInUsd( diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx index bb16ed9b1..ecefadced 100644 --- a/packages/instant/src/components/panel.tsx +++ b/packages/instant/src/components/panel.tsx @@ -12,10 +12,11 @@ export interface PanelProps { export const Panel: React.StatelessComponent = ({ children, onClose }) => ( diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index cc9abb7dd..8f209765e 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations'; +import { PositionAnimationProps } from './animations/position_animation'; +import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations'; import { Container, Flex, Text } from './ui'; @@ -31,16 +32,29 @@ export const Error: React.StatelessComponent = props => ( ); -export type SlidingDirection = 'up' | 'down'; export interface SlidingErrorProps extends ErrorProps { - direction: SlidingDirection; + phase: SlideAnimationPhase; } export const SlidingError: React.StatelessComponent = props => { - const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation; - + const slideAmount = '120px'; + const slideUp: PositionAnimationProps = { + timingFunction: 'ease-in', + top: { + from: slideAmount, + to: '0px', + }, + }; + const slideDown: PositionAnimationProps = { + timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)', + top: { + from: '0px', + to: slideAmount, + }, + direction: 'forwards', + }; return ( - + - + ); }; diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index b6842b294..7b8642761 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -29,6 +29,7 @@ export interface ContainerProps { whiteSpace?: string; opacity?: number; cursor?: string; + overflow?: string; } export const Container = @@ -59,6 +60,7 @@ export const Container = ${props => cssRuleIfExists(props, 'white-space')} ${props => cssRuleIfExists(props, 'opacity')} ${props => cssRuleIfExists(props, 'cursor')} + ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index ded0d075e..c8d5235c8 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -4,16 +4,16 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order import { LatestError } from '../containers/latest_error'; import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; - import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; +import { Panel } from './panel'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent = props => ( - + @@ -23,6 +23,7 @@ export const ZeroExInstantContainer: React.StatelessComponent @@ -31,6 +32,11 @@ export const ZeroExInstantContainer: React.StatelessComponent + {/* + + Hey + + */} ); 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 v1.2.3