diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-05-23 06:18:22 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-05-25 01:52:11 +0800 |
commit | b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7 (patch) | |
tree | 951170665292c24f2bd3720ad21200185d7e2e54 /packages/website | |
parent | 7af77d3eb0a73a0bd27898f5d3842c7dc7afef77 (diff) | |
download | dexon-0x-contracts-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar dexon-0x-contracts-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.gz dexon-0x-contracts-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.bz2 dexon-0x-contracts-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.lz dexon-0x-contracts-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.xz dexon-0x-contracts-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.zst dexon-0x-contracts-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.zip |
Fix issue where modal can be out of sync with app state
Diffstat (limited to 'packages/website')
6 files changed, 51 insertions, 16 deletions
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<OnboardingFlowProps> { + public static defaultProps: Partial<OnboardingFlowProps> = { + onChange: _.noop, + }; + public render(): React.ReactNode { - const { steps, stepIndex, isRunning } = this.props; return ( <Joyride - run={isRunning} + run={this.props.isRunning} debug={true} - steps={steps} - stepIndex={stepIndex} + steps={this.props.steps} + stepIndex={this.props.stepIndex} styles={{ options: style }} + callback={this._handleChange.bind(this)} /> ); } -}; + + 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<PortalOnboardingFlow> { +export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> { public render(): React.ReactNode { return ( <OnboardingFlow steps={steps} stepIndex={this.props.stepIndex} isRunning={this.props.isRunning} + onClose={this._handleClose.bind(this)} /> - ) + ); } -}; + + 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<PortalOnboardingFlowComponentProps> = connect(mapStateToProps)(PortalOnboardingFlowComponent); +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + setOnboardingShowing: (isShowing: boolean): void => { + dispatch({ + type: ActionTypes.UpdatePortalOnboardingShowing, + data: isShowing, + }); + }, +}); + +export const PortalOnboardingFlow: React.ComponentClass<PortalOnboardingFlowComponentProps> = 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 +}; |