import * as _ from 'lodash'; import * as React from 'react'; 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/style/z_index'; 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; } export class OnboardingFlow extends React.Component { public render(): React.ReactNode { if (!this.props.isRunning) { return null; } return ( {this._renderPopperChildren.bind(this)} ); } private _getElementForStep(): Element { return document.querySelector(this._getCurrentStep().target); } private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { return (
{this._renderToolTip()}
); } private _renderToolTip(): React.ReactNode { const { steps, stepIndex } = this.props; const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; return ( ); } 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(); } } }