aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/animations/slide_animation.tsx8
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx34
-rw-r--r--packages/instant/src/components/sliding_panel.tsx74
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx13
4 files changed, 75 insertions, 54 deletions
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index dc42e168d..6ac47e9a6 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -11,6 +11,7 @@ export interface SlideAnimationProps {
slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
zIndex?: OptionallyScreenSpecific<number>;
height?: string;
+ onAnimationEnd?: () => void;
}
export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
@@ -19,7 +20,12 @@ export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = pro
}
const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
return (
- <PositionAnimation height={props.height} positionSettings={positionSettings} zIndex={props.zIndex}>
+ <PositionAnimation
+ onAnimationEnd={props.onAnimationEnd}
+ height={props.height}
+ positionSettings={positionSettings}
+ zIndex={props.zIndex}
+ >
{props.children}
</PositionAnimation>
);
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index b5f01e349..a26fb5cf5 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -154,21 +154,23 @@ const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => {
}
};
-const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => {
- const { token } = props;
- const iconUrlIfExists = token.metaData.iconUrl;
+class TokenSelectorRowIcon extends React.PureComponent<TokenSelectorRowIconProps> {
+ public render(): React.ReactNode {
+ const { token } = this.props;
+ const iconUrlIfExists = token.metaData.iconUrl;
- const TokenIcon = getTokenIcon(token.metaData.symbol);
- const displaySymbol = assetUtils.bestNameForAsset(token);
- if (!_.isUndefined(iconUrlIfExists)) {
- return <img src={iconUrlIfExists} />;
- } else if (!_.isUndefined(TokenIcon)) {
- return <TokenIcon />;
- } else {
- return (
- <Text fontColor={ColorOption.white} fontSize="8px">
- {displaySymbol}
- </Text>
- );
+ const TokenIcon = getTokenIcon(token.metaData.symbol);
+ const displaySymbol = assetUtils.bestNameForAsset(token);
+ if (!_.isUndefined(iconUrlIfExists)) {
+ return <img src={iconUrlIfExists} />;
+ } else if (!_.isUndefined(TokenIcon)) {
+ return <TokenIcon />;
+ } else {
+ return (
+ <Text fontColor={ColorOption.white} fontSize="8px">
+ {displaySymbol}
+ </Text>
+ );
+ }
}
-};
+}
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 33a483662..9b09a0d80 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -30,42 +30,44 @@ Panel.displayName = 'Panel';
export interface SlidingPanelProps extends PanelProps {
animationState: SlideAnimationState;
+ onAnimationEnd?: () => void;
}
-export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props => {
- if (props.animationState === 'none') {
- return null;
+export class SlidingPanel extends React.PureComponent<SlidingPanelProps> {
+ public render(): React.ReactNode {
+ if (this.props.animationState === 'none') {
+ return null;
+ }
+ const { animationState, onAnimationEnd, ...rest } = this.props;
+ const slideAmount = '100%';
+ const slideUpSettings: PositionAnimationSettings = {
+ duration: '0.3s',
+ timingFunction: 'ease-in-out',
+ top: {
+ from: slideAmount,
+ to: '0px',
+ },
+ position: 'absolute',
+ };
+ const slideDownSettings: PositionAnimationSettings = {
+ duration: '0.3s',
+ timingFunction: 'ease-out',
+ top: {
+ from: '0px',
+ to: slideAmount,
+ },
+ position: 'absolute',
+ };
+ return (
+ <SlideAnimation
+ slideInSettings={slideUpSettings}
+ slideOutSettings={slideDownSettings}
+ animationState={animationState}
+ height="100%"
+ onAnimationEnd={onAnimationEnd}
+ >
+ <Panel {...rest} />
+ </SlideAnimation>
+ );
}
- const { animationState, ...rest } = props;
- const slideAmount = '100%';
- const slideUpSettings: PositionAnimationSettings = {
- duration: '0.3s',
- timingFunction: 'ease-in-out',
- top: {
- from: slideAmount,
- to: '0px',
- },
- position: 'absolute',
- };
- const slideDownSettings: PositionAnimationSettings = {
- duration: '0.3s',
- timingFunction: 'ease-out',
- top: {
- from: '0px',
- to: slideAmount,
- },
- position: 'absolute',
- };
- return (
- <SlideAnimation
- slideInSettings={slideUpSettings}
- slideOutSettings={slideDownSettings}
- animationState={animationState}
- height="100%"
- >
- <Panel {...rest} />
- </SlideAnimation>
- );
-};
-
-SlidingPanel.displayName = 'SlidingPanel';
+}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 63497e639..e8c64d5d1 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -24,7 +24,10 @@ export interface ZeroExInstantContainerState {
tokenSelectionPanelAnimationState: SlideAnimationState;
}
-export class ZeroExInstantContainer extends React.PureComponent<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
+export class ZeroExInstantContainer extends React.PureComponent<
+ ZeroExInstantContainerProps,
+ ZeroExInstantContainerState
+> {
public state = {
tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
};
@@ -60,6 +63,7 @@ export class ZeroExInstantContainer extends React.PureComponent<ZeroExInstantCon
<SlidingPanel
animationState={this.state.tokenSelectionPanelAnimationState}
onClose={this._handlePanelCloseClickedX}
+ onAnimationEnd={this._handleSlidingPanelAnimationEnd}
>
<AvailableERC20TokenSelector onTokenSelect={this._handlePanelCloseAfterChose} />
</SlidingPanel>
@@ -98,4 +102,11 @@ export class ZeroExInstantContainer extends React.PureComponent<ZeroExInstantCon
tokenSelectionPanelAnimationState: 'slidOut',
});
};
+ private readonly _handleSlidingPanelAnimationEnd = (): void => {
+ if (this.state.tokenSelectionPanelAnimationState === 'slidOut') {
+ // When the slidOut animation completes, don't keep the panel mounted.
+ // Performance optimization
+ this.setState({ tokenSelectionPanelAnimationState: 'none' });
+ }
+ };
}