diff options
7 files changed, 56 insertions, 18 deletions
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<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 +}; |