aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/typescript-typings/types/react-joyride/index.d.ts2
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx39
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx23
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>
+);