aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/containers
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-11-10 07:15:57 +0800
committerGitHub <noreply@github.com>2018-11-10 07:15:57 +0800
commit2c585bfbdc4940e3e6089ac1cf595dd009b141d2 (patch)
tree39f6fc63a8c9b26b0ef9a1ea34afde213b573c3f /packages/instant/src/containers
parentb4a11de097258d37fa9271e64fc28a1d012a8d26 (diff)
downloaddexon-0x-contracts-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.tar.gz
dexon-0x-contracts-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.tar.zst
dexon-0x-contracts-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.zip
feat(instant): Dismissible overlay error messages
Adds dismissible overlay to error messages on mobile
Diffstat (limited to 'packages/instant/src/containers')
-rw-r--r--packages/instant/src/containers/latest_error.tsx41
1 files changed, 33 insertions, 8 deletions
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 99e55a6c4..c0da181f1 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -1,35 +1,60 @@
import * as React from 'react';
import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
import { SlideAnimationState } from '../components/animations/slide_animation';
import { SlidingError } from '../components/sliding_error';
+import { Overlay } from '../components/ui/overlay';
+import { Action } from '../redux/actions';
import { State } from '../redux/reducer';
-import { Asset, DisplayStatus } from '../types';
+import { ScreenWidths } from '../style/media';
+import { generateOverlayBlack } from '../style/theme';
+import { zIndex } from '../style/z_index';
+import { Asset, DisplayStatus, Omit } from '../types';
+import { errorFlasher } from '../util/error_flasher';
export interface LatestErrorComponentProps {
asset?: Asset;
latestErrorMessage?: string;
animationState: SlideAnimationState;
+ shouldRenderOverlay: boolean;
+ onOverlayClick: () => void;
}
export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
if (!props.latestErrorMessage) {
return <div />;
}
- return <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} />;
+ return (
+ <React.Fragment>
+ <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} />
+ {props.shouldRenderOverlay && (
+ <Overlay
+ onClick={props.onOverlayClick}
+ zIndex={zIndex.containerOverlay}
+ showMaxWidth={ScreenWidths.Sm}
+ backgroundColor={generateOverlayBlack(0.4)}
+ />
+ )}
+ </React.Fragment>
+ );
};
-interface ConnectedState {
- asset?: Asset;
- latestErrorMessage?: string;
- animationState: SlideAnimationState;
-}
export interface LatestErrorProps {}
+interface ConnectedState extends Omit<LatestErrorComponentProps, 'onOverlayClick'> {}
const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
asset: state.selectedAsset,
latestErrorMessage: state.latestErrorMessage,
animationState: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slidIn' : 'slidOut',
+ shouldRenderOverlay: state.latestErrorDisplayStatus === DisplayStatus.Present,
+});
+
+type ConnectedDispatch = Pick<LatestErrorComponentProps, 'onOverlayClick'>;
+const mapDispatchToProps = (dispatch: Dispatch<Action>, _ownProps: LatestErrorProps): ConnectedDispatch => ({
+ onOverlayClick: () => {
+ errorFlasher.clearError(dispatch);
+ },
});
-export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
+export const LatestError = connect(mapStateToProps, mapDispatchToProps)(LatestErrorComponent);