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 --- .../components/animations/position_animation.tsx | 9 +-- .../src/components/animations/slide_animation.tsx | 23 +++++++ .../src/components/animations/slide_animations.tsx | 23 ------- .../instant/src/components/instant_heading.tsx | 8 ++- packages/instant/src/components/panel.tsx | 28 -------- packages/instant/src/components/sliding_error.tsx | 12 ++-- packages/instant/src/components/sliding_panel.tsx | 54 +++++++++++++++ .../src/components/zero_ex_instant_container.tsx | 78 ++++++++++++++-------- packages/instant/src/containers/latest_error.tsx | 10 +-- .../containers/selected_asset_instant_heading.ts | 6 +- 10 files changed, 155 insertions(+), 96 deletions(-) create mode 100644 packages/instant/src/components/animations/slide_animation.tsx delete mode 100644 packages/instant/src/components/animations/slide_animations.tsx delete mode 100644 packages/instant/src/components/panel.tsx create mode 100644 packages/instant/src/components/sliding_panel.tsx (limited to 'packages/instant') diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx index 3d6b5f8dc..aefd7ef30 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; @@ -51,7 +50,7 @@ export interface PositionAnimationSettings { left?: TransitionInfo; right?: TransitionInfo; timingFunction: string; - direction?: string; + duration?: string; } export interface PositionAnimationProps extends PositionAnimationSettings { @@ -66,10 +65,12 @@ export const PositionAnimation = css` ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)}; `}; - animation-duration: 0.3s; + animation-duration: ${props => props.duration || '0.3s'}; animation-timing-function: ${props => props.timingFunction}; animation-delay: 0s; animation-iteration-count: 1; - animation-fill-mode: ${props => props.direction || 'none'}; + animation-fill-mode: forwards; position: ${props => props.position}; + height: 100%; + width: 100%; `; diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx new file mode 100644 index 000000000..4124e50c3 --- /dev/null +++ b/packages/instant/src/components/animations/slide_animation.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +import { PositionAnimation, PositionAnimationSettings } from './position_animation'; + +export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; +export interface SlideAnimationProps { + position: string; + animationState: SlideAnimationState; + slideIn: PositionAnimationSettings; + slideOut: PositionAnimationSettings; +} + +export const SlideAnimation: React.StatelessComponent = props => { + if (props.animationState === 'none') { + return {props.children}; + } + const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut; + return ( + + {props.children} + + ); +}; diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx deleted file mode 100644 index 9f1535297..000000000 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import { Keyframes } from 'styled-components'; - -import { css, keyframes, styled } from '../../style/theme'; - -import { PositionAnimation, PositionAnimationSettings } from './position_animation'; - -export type SlideAnimationPhase = 'slideIn' | 'slideOut'; -export interface SlideAnimationProps { - position: string; - phase: SlideAnimationPhase; - slideIn: PositionAnimationSettings; - slideOut: PositionAnimationSettings; -} - -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/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index e1c2f8bc3..08efd1b64 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input'; import { ColorOption } from '../style/theme'; -import { AsyncProcessState, OrderProcessState, OrderState } from '../types'; +import { AsyncProcessState, ERC20Asset, OrderProcessState, OrderState } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; @@ -16,6 +16,7 @@ export interface InstantHeadingProps { ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; buyOrderState: OrderState; + onSymbolClick?: (asset?: ERC20Asset) => void; } const PLACEHOLDER_COLOR = ColorOption.white; @@ -47,7 +48,10 @@ export class InstantHeading extends React.Component { - + {iconOrAmounts} diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx deleted file mode 100644 index ecefadced..000000000 --- a/packages/instant/src/components/panel.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { zIndex } from '../style/z_index'; - -import { Button, Container, Text } from './ui'; - -export interface PanelProps { - onClose?: () => void; -} - -export const Panel: React.StatelessComponent = ({ children, onClose }) => ( - - - {children} - -); diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index 0ad11bbad..a89e201c0 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { PositionAnimationSettings } from './animations/position_animation'; -import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations'; +import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; import { Container, Flex, Text } from './ui'; @@ -33,7 +33,7 @@ export const Error: React.StatelessComponent = props => ( ); export interface SlidingErrorProps extends ErrorProps { - phase: SlideAnimationPhase; + animationState: SlideAnimationState; } export const SlidingError: React.StatelessComponent = props => { const slideAmount = '120px'; @@ -50,10 +50,14 @@ export const SlidingError: React.StatelessComponent = props = from: '0px', to: slideAmount, }, - direction: 'forwards', }; return ( - + ); diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx new file mode 100644 index 000000000..19034eb95 --- /dev/null +++ b/packages/instant/src/components/sliding_panel.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; +import { zIndex } from '../style/z_index'; + +import { PositionAnimationSettings } from './animations/position_animation'; +import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; +import { Button, Container, Text } from './ui'; + +export interface PanelProps { + onClose?: () => void; +} + +export const Panel: React.StatelessComponent = ({ children, onClose }) => ( + + + {children} + +); + +export interface SlidingPanelProps extends PanelProps { + animationState: SlideAnimationState; +} + +export const SlidingPanel: React.StatelessComponent = props => { + if (props.animationState === 'none') { + return null; + } + const { animationState, ...rest } = props; + const slideAmount = '100%'; + const slideUp: PositionAnimationSettings = { + duration: '0.3s', + timingFunction: 'ease-in-out', + top: { + from: slideAmount, + to: '0px', + }, + }; + const slideDown: PositionAnimationSettings = { + duration: '0.3s', + timingFunction: 'ease-out', + top: { + from: '0px', + to: slideAmount, + }, + }; + return ( + + + + ); +}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index c8d5235c8..818a9a957 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -7,36 +7,58 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; -import { Panel } from './panel'; +import { SlideAnimationState } from './animations/slide_animation'; +import { SlidingPanel } from './sliding_panel'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} +export interface ZeroExInstantContainerState { + tokenSelectionPanelAnimationState: SlideAnimationState; +} -export const ZeroExInstantContainer: React.StatelessComponent = props => ( - - - - - - - - - - +export class ZeroExInstantContainer extends React.Component { + public state = { + tokenSelectionPanelAnimationState: 'none' as SlideAnimationState, + }; + public render(): React.ReactNode { + return ( + + + - - {/* - - Hey - - */} - - -); + + + + + + + + + + Select Your Token + + + + ); + } + private readonly _handleSymbolClick = (): void => { + this.setState({ + tokenSelectionPanelAnimationState: 'slidIn', + }); + }; + private readonly _handlePanelClose = (): void => { + this.setState({ + tokenSelectionPanelAnimationState: 'slidOut', + }); + }; +} 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 v1.2.3