From b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 22 May 2018 15:18:22 -0700 Subject: Fix issue where modal can be out of sync with app state --- .../types/react-joyride/index.d.ts | 7 +++++-- .../ts/components/onboarding/onboarding_flow.tsx | 24 +++++++++++++++++----- .../onboarding/portal_onboarding_flow.tsx | 17 ++++++++++----- packages/website/ts/components/portal/portal.tsx | 6 +++--- packages/website/ts/components/top_bar/top_bar.tsx | 2 +- .../ts/containers/portal_onboarding_flow.ts | 16 ++++++++++++++- packages/website/ts/utils/style.ts | 2 +- 7 files changed, 56 insertions(+), 18 deletions(-) (limited to 'packages') diff --git a/packages/typescript-typings/types/react-joyride/index.d.ts b/packages/typescript-typings/types/react-joyride/index.d.ts index 21e46074f..a0cd6a1e8 100644 --- a/packages/typescript-typings/types/react-joyride/index.d.ts +++ b/packages/typescript-typings/types/react-joyride/index.d.ts @@ -14,11 +14,13 @@ declare module 'react-joyride' { zIndex?: number, } + export type Placement = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "right" | "left"; + export interface Step { title?: string; content: React.ReactNode; target: string; - placement?: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "right" | "left"; + placement?: Placement; type?: "click" | "hover"; isFixed?: boolean; allowClicksThruHole?: boolean; @@ -29,7 +31,8 @@ declare module 'react-joyride' { export interface Props { steps?: Step[]; - beaconComponent?: React.ComponentClass; + beaconComponent?: React.ReactNode; + disableOverlayClose?: boolean; run?: boolean; stepIndex?: number; callback?: (options: any) => void; diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 5bbf84e1b..1d98d5901 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -8,6 +8,8 @@ interface OnboardingFlowProps { steps: Step[]; stepIndex?: number; isRunning: boolean; + onClose: () => void; + onChange?: (options: any) => void; } const style: StyleOptions = { @@ -16,16 +18,28 @@ const style: StyleOptions = { // Wrapper around Joyride with defaults and styles set export class OnboardingFlow extends React.Component { + public static defaultProps: Partial = { + onChange: _.noop, + }; + public render(): React.ReactNode { - const { steps, stepIndex, isRunning } = this.props; return ( ); } -}; + + private _handleChange(options: any): void { + switch (options.action) { + case 'close': + this.props.onClose(); + } + this.props.onChange(options); + } +} diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 57b209fac..9bccd0a9c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,29 +1,36 @@ import * as React from 'react'; +import { Step } from 'react-joyride'; import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow'; export interface PortalOnboardingFlowProps { stepIndex: number; isRunning: boolean; + setOnboardingShowing: (isShowing: boolean) => void; } -const steps = [ +const steps: Step[] = [ { target: '.wallet', - content: 'Hey!', + content: 'You are onboarding right now!', placement: 'right', disableBeacon: true, }, ]; -export class PortalOnboardingFlow extends React.Component { +export class PortalOnboardingFlow extends React.Component { public render(): React.ReactNode { return ( - ) + ); } -}; + + private _handleClose(): void { + this.props.setOnboardingShowing(false); + } +} diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index a4e3a006e..a03731ec0 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -19,13 +19,13 @@ import { TextHeader } from 'ts/components/portal/text_header'; import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; -import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow'; -import { Island } from 'ts/components/ui/island'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; -import { FlashMessage } from 'ts/components/ui/flash_message'; import { Container } from 'ts/components/ui/container'; +import { FlashMessage } from 'ts/components/ui/flash_message'; +import { Island } from 'ts/components/ui/island'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; +import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow'; import { localStorage } from 'ts/local_storage/local_storage'; import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; import { FullscreenMessage } from 'ts/pages/fullscreen_message'; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 3f11f9779..db8e3cb82 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -18,9 +18,9 @@ import { Identicon } from 'ts/components/ui/identicon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; +import { zIndex } from 'ts/utils/style'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -import { zIndex } from 'ts/utils/style'; export enum TopBarDisplayType { Default, diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts index 46c23f62f..7e4b3ef39 100644 --- a/packages/website/ts/containers/portal_onboarding_flow.ts +++ b/packages/website/ts/containers/portal_onboarding_flow.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; +import { ActionTypes } from 'ts/types'; import { PortalOnboardingFlow as PortalOnboardingFlowComponent, @@ -13,6 +14,10 @@ interface ConnectedState { isRunning: boolean; } +interface ConnectedDispatch { + setOnboardingShowing: (isShowing: boolean) => void; +} + const mapStateToProps = (state: State, ownProps: PortalOnboardingFlowComponentProps): ConnectedState => { return { stepIndex: state.portalOnboardingStep, @@ -20,4 +25,13 @@ const mapStateToProps = (state: State, ownProps: PortalOnboardingFlowComponentPr }; }; -export const PortalOnboardingFlow: React.ComponentClass = connect(mapStateToProps)(PortalOnboardingFlowComponent); +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + setOnboardingShowing: (isShowing: boolean): void => { + dispatch({ + type: ActionTypes.UpdatePortalOnboardingShowing, + data: isShowing, + }); + }, +}); + +export const PortalOnboardingFlow: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)(PortalOnboardingFlowComponent); diff --git a/packages/website/ts/utils/style.ts b/packages/website/ts/utils/style.ts index f3593b198..51b6e4eb6 100644 --- a/packages/website/ts/utils/style.ts +++ b/packages/website/ts/utils/style.ts @@ -1,4 +1,4 @@ export const zIndex = { topBar: 1100, overlay: 1101, -}; \ No newline at end of file +}; -- cgit