diff options
Diffstat (limited to 'packages/website/ts/components/onboarding/onboarding_flow.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/onboarding_flow.tsx | 93 |
1 files changed, 75 insertions, 18 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 621d14260..4066babaf 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,39 +1,96 @@ import * as _ from 'lodash'; import * as React from 'react'; -import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride'; +import { Placement, Popper, PopperChildrenProps } from 'react-popper'; +import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; +import { Container } from 'ts/components/ui/container'; +import { Overlay } from 'ts/components/ui/overlay'; import { zIndex } from 'ts/utils/style'; +export interface Step { + target: string; + title?: string; + content: React.ReactNode; + placement?: Placement; + hideBackButton?: boolean; + hideNextButton?: boolean; + continueButtonDisplay?: ContinueButtonDisplay; +} + export interface OnboardingFlowProps { steps: Step[]; stepIndex: number; isRunning: boolean; onClose: () => void; + updateOnboardingStep: (stepIndex: number) => void; } -const joyrideStyleOptions: StyleOptions = { - zIndex: zIndex.overlay, -}; - -// Wrapper around Joyride with defaults and styles set export class OnboardingFlow extends React.Component<OnboardingFlowProps> { public render(): React.ReactNode { + if (!this.props.isRunning) { + return null; + } + return ( + <Overlay> + <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}> + {this._renderPopperChildren.bind(this)} + </Popper> + </Overlay> + ); + } + + private _getElementForStep(): Element { + return document.querySelector(this._getCurrentStep().target); + } + + private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { return ( - <Joyride - run={this.props.isRunning} - debug={true} - steps={this.props.steps} - stepIndex={this.props.stepIndex} - styles={{ options: joyrideStyleOptions }} - callback={this._handleChange.bind(this)} - /> + <div ref={props.ref} style={props.style} data-placement={props.placement}> + {this._renderToolTip()} + </div> ); } - private _handleChange(data: CallbackData): void { - switch (data.action) { - case 'close': - this.props.onClose(); + private _renderToolTip(): React.ReactNode { + const { steps, stepIndex } = this.props; + const step = steps[stepIndex]; + const isLastStep = steps.length - 1 === stepIndex; + return ( + <Container marginLeft="15px"> + <OnboardingTooltip + title={step.title} + content={step.content} + isLastStep={isLastStep} + hideBackButton={step.hideBackButton} + hideNextButton={step.hideNextButton} + onClose={this.props.onClose} + onClickNext={this._goToNextStep.bind(this)} + onClickBack={this._goToPrevStep.bind(this)} + continueButtonDisplay={step.continueButtonDisplay} + /> + </Container> + ); + } + + private _getCurrentStep(): Step { + return this.props.steps[this.props.stepIndex]; + } + + private _goToNextStep(): void { + const nextStep = this.props.stepIndex + 1; + if (nextStep < this.props.steps.length) { + this.props.updateOnboardingStep(nextStep); + } else { + this.props.onClose(); + } + } + + private _goToPrevStep(): void { + const nextStep = this.props.stepIndex - 1; + if (nextStep >= 0) { + this.props.updateOnboardingStep(nextStep); + } else { + this.props.onClose(); } } } |