diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-02 05:33:43 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-02 05:33:43 +0800 |
commit | f341626e290a5c8241400b8dd0d9cce2dcfeb405 (patch) | |
tree | 08fc761936e7c8d620087ac6b4c83ac6aa1f3864 /packages/instant/src/components/zero_ex_instant_container.tsx | |
parent | 7858dafce4c9441c8205fa6ed607ca50851cc4ba (diff) | |
parent | 0955feb0234bc90b7dcf5ad3a308570c9fa5d490 (diff) | |
download | dexon-0x-contracts-f341626e290a5c8241400b8dd0d9cce2dcfeb405.tar.gz dexon-0x-contracts-f341626e290a5c8241400b8dd0d9cce2dcfeb405.tar.zst dexon-0x-contracts-f341626e290a5c8241400b8dd0d9cce2dcfeb405.zip |
Merge branch 'development' into feature/instant/simulated-progress-bar
Diffstat (limited to 'packages/instant/src/components/zero_ex_instant_container.tsx')
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 74 |
1 files changed, 52 insertions, 22 deletions
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index c47f3af73..f8e3935fb 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -8,30 +8,60 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress'; import { ColorOption } from '../style/theme'; +import { zIndex } from '../style/z_index'; +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<ZeroExInstantContainerProps> = props => ( - <Container width="350px"> - <Container zIndex={1} position="relative"> - <LatestError /> - </Container> - <Container - zIndex={2} - position="relative" - backgroundColor={ColorOption.white} - borderRadius="3px" - hasBoxShadow={true} - > - <Flex direction="column" justify="flex-start"> - <SelectedAssetInstantHeading /> - <SelectedAssetBuyOrderProgress /> - <LatestBuyQuoteOrderDetails /> - <Container padding="20px" width="100%"> - <SelectedAssetBuyOrderStateButtons /> +export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> { + public state = { + tokenSelectionPanelAnimationState: 'none' as SlideAnimationState, + }; + public render(): React.ReactNode { + return ( + <Container width="350px" position="relative"> + <Container zIndex={zIndex.errorPopup} position="relative"> + <LatestError /> </Container> - </Flex> - </Container> - </Container> -); + <Container + zIndex={zIndex.mainContainer} + position="relative" + backgroundColor={ColorOption.white} + borderRadius="3px" + hasBoxShadow={true} + overflow="hidden" + > + <Flex direction="column" justify="flex-start"> + <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} /> + <SelectedAssetBuyOrderProgress /> + <LatestBuyQuoteOrderDetails /> + <Container padding="20px" width="100%"> + <SelectedAssetBuyOrderStateButtons /> + </Container> + </Flex> + <SlidingPanel + animationState={this.state.tokenSelectionPanelAnimationState} + onClose={this._handlePanelClose} + > + Select Your Token + </SlidingPanel> + </Container> + </Container> + ); + } + private readonly _handleSymbolClick = (): void => { + this.setState({ + tokenSelectionPanelAnimationState: 'slidIn', + }); + }; + private readonly _handlePanelClose = (): void => { + this.setState({ + tokenSelectionPanelAnimationState: 'slidOut', + }); + }; +} |