diff options
Diffstat (limited to 'packages')
3 files changed, 57 insertions, 7 deletions
diff --git a/packages/typescript-typings/types/react-joyride/index.d.ts b/packages/typescript-typings/types/react-joyride/index.d.ts index b9094823d..dacdf47a6 100644 --- a/packages/typescript-typings/types/react-joyride/index.d.ts +++ b/packages/typescript-typings/types/react-joyride/index.d.ts @@ -65,9 +65,9 @@ declare module 'react-joyride' { continuous?: boolean; run?: boolean; stepIndex?: number; - callback?: (data: CallbackData) => void; debug?: boolean; styles?: StyleOptionsProp; + tooltipComponent: React.ComponentClass<any> | React.StatelessComponent; } export interface State { diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 68dfc11bf..4ed834916 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -2,6 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride'; +import { OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { zIndex } from 'ts/utils/style'; export interface OnboardingFlowProps { @@ -36,7 +37,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { steps={this.props.steps} stepIndex={this.props.stepIndex} styles={{ options: joyrideStyleOptions }} - callback={this._handleChange.bind(this)} + tooltipComponent={this._renderToolTip.bind(this)} /> ); } @@ -86,11 +87,37 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { return newStep; } - private _handleChange(data: CallbackData): void { - switch (data.action) { - case 'close': - this.props.onClose(); - break; + private _renderToolTip(): React.ReactNode { + const { steps, stepIndex } = this.props; + const step = steps[stepIndex]; + const isLastStep = steps.length - 1 === stepIndex; + return ( + <OnboardingTooltip + title={step.title} + content={step.content} + isLastStep={isLastStep} + onClose={this.props.onClose} + onClickNext={this._goToNextStep.bind(this)} + onClickBack={this._goToPrevStep.bind(this)} + /> + ); + } + + private _goToNextStep(): void { + const nextStep = this.props.stepIndex + 1; + if (nextStep < this.props.steps.length) { + this.props.setOnboardingStep(nextStep); + } else { + this.props.onClose(); + } + } + + private _goToPrevStep(): void { + const nextStep = this.props.stepIndex - 1; + if (nextStep >= 0) { + this.props.setOnboardingStep(nextStep); + } else { + this.props.onClose(); } } } diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx new file mode 100644 index 000000000..3ab18b011 --- /dev/null +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +import { Island } from 'ts/components/ui/island'; + +export interface OnboardingTooltipProps { + title: string; + content: React.ReactNode; + isLastStep: boolean; + index: number; + onClose: () => void; + onClickNext: () => void; + onClickBack: () => void; +} + +export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => ( + <Island> + {props.title} + {props.content} + <button onClick={props.onClickBack}>Back</button> + <button onClick={props.onClickNext}>Skip</button> + <button onClick={props.onClose}>Close</button> + </Island> +); |