aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-31 07:57:42 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-31 07:57:42 +0800
commit91f8487947d7941b508c34d1bfc1e72c0840c33d (patch)
treef3382eda9cae53b2b61e9f2c3cd4690ce6d7cc52 /packages/instant/src/components
parent4456c3ee14f5cd778e0d16ab42a3e2e34d102f23 (diff)
downloaddexon-sol-tools-91f8487947d7941b508c34d1bfc1e72c0840c33d.tar
dexon-sol-tools-91f8487947d7941b508c34d1bfc1e72c0840c33d.tar.gz
dexon-sol-tools-91f8487947d7941b508c34d1bfc1e72c0840c33d.tar.bz2
dexon-sol-tools-91f8487947d7941b508c34d1bfc1e72c0840c33d.tar.lz
dexon-sol-tools-91f8487947d7941b508c34d1bfc1e72c0840c33d.tar.xz
dexon-sol-tools-91f8487947d7941b508c34d1bfc1e72c0840c33d.tar.zst
dexon-sol-tools-91f8487947d7941b508c34d1bfc1e72c0840c33d.zip
feat: implement sliding panel
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/animations/position_animation.tsx9
-rw-r--r--packages/instant/src/components/animations/slide_animation.tsx (renamed from packages/instant/src/components/animations/slide_animations.tsx)12
-rw-r--r--packages/instant/src/components/instant_heading.tsx8
-rw-r--r--packages/instant/src/components/panel.tsx28
-rw-r--r--packages/instant/src/components/sliding_error.tsx12
-rw-r--r--packages/instant/src/components/sliding_panel.tsx54
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx78
7 files changed, 129 insertions, 72 deletions
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_animations.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 9f1535297..4124e50c3 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -1,20 +1,20 @@
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 type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
export interface SlideAnimationProps {
position: string;
- phase: SlideAnimationPhase;
+ animationState: SlideAnimationState;
slideIn: PositionAnimationSettings;
slideOut: PositionAnimationSettings;
}
export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
- const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
+ if (props.animationState === 'none') {
+ return <React.Fragment>{props.children}</React.Fragment>;
+ }
+ const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut;
return (
<PositionAnimation position={props.position} {...propsToUse}>
{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<InstantHeadingProps, {}> {
</Container>
<Flex direction="row" justify="space-between">
<Flex height="60px">
- <SelectedERC20AssetAmountInput startingFontSizePx={38} />
+ <SelectedERC20AssetAmountInput
+ startingFontSizePx={38}
+ onSymbolClick={this.props.onSymbolClick}
+ />
</Flex>
<Flex direction="column" justify="space-between">
{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<PanelProps> = ({ children, onClose }) => (
- <Container
- backgroundColor={ColorOption.white}
- // position="absolute"
- // left="0px"
- // bottom="0px"
- // width="100%"
- // height="100%"
- height="100%"
- zIndex={zIndex.panel}
- >
- <Button onClick={onClose}>
- <Text fontColor={ColorOption.white}>Close </Text>
- </Button>
- {children}
- </Container>
-);
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<ErrorProps> = props => (
);
export interface SlidingErrorProps extends ErrorProps {
- phase: SlideAnimationPhase;
+ animationState: SlideAnimationState;
}
export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
const slideAmount = '120px';
@@ -50,10 +50,14 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
from: '0px',
to: slideAmount,
},
- direction: 'forwards',
};
return (
- <SlideAnimation position="relative" slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
+ <SlideAnimation
+ position="relative"
+ slideIn={slideUp}
+ slideOut={slideDown}
+ animationState={props.animationState}
+ >
<Error icon={props.icon} message={props.message} />
</SlideAnimation>
);
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<PanelProps> = ({ children, onClose }) => (
+ <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel}>
+ <Button onClick={onClose}>
+ <Text fontColor={ColorOption.white}>Close </Text>
+ </Button>
+ {children}
+ </Container>
+);
+
+export interface SlidingPanelProps extends PanelProps {
+ animationState: SlideAnimationState;
+}
+
+export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = 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 (
+ <SlideAnimation position="absolute" slideIn={slideUp} slideOut={slideDown} animationState={animationState}>
+ <Panel {...rest} />
+ </SlideAnimation>
+ );
+};
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<ZeroExInstantContainerProps> = props => (
- <Container width="350px" position="relative">
- <Container zIndex={zIndex.errorPopup} position="relative">
- <LatestError />
- </Container>
- <Container
- zIndex={zIndex.mainContainer}
- position="relative"
- backgroundColor={ColorOption.white}
- borderRadius="3px"
- hasBoxShadow={true}
- overflow="hidden"
- >
- <Flex direction="column" justify="flex-start">
- <SelectedAssetInstantHeading />
- <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 position="absolute" left="0px" bottom="0px" width="100%" height="100%">
- <SlideAnimationHelper direction="up" downY="200px">
- <Panel> Hey </Panel>
- </SlideAnimationHelper>
- </Container> */}
- </Container>
- </Container>
-);
+ <Container
+ zIndex={zIndex.mainContainer}
+ position="relative"
+ backgroundColor={ColorOption.white}
+ borderRadius="3px"
+ hasBoxShadow={true}
+ overflow="hidden"
+ >
+ <Flex direction="column" justify="flex-start">
+ <SelectedAssetInstantHeading onSymbolClick={this._handleSymbolClick} />
+ <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',
+ });
+ };
+}