aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/onboarding
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/onboarding')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx31
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx3
2 files changed, 23 insertions, 11 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 4ed834916..cd6fe2195 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,6 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride';
+import { Popper, PopperChildrenProps } from 'react-popper';
import { OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
import { zIndex } from 'ts/utils/style';
@@ -29,16 +30,13 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
}
public render(): React.ReactNode {
+ if (!this.props.isRunning) {
+ return null;
+ }
return (
- <Joyride
- run={this.props.isRunning}
- continuous={true}
- debug={true}
- steps={this.props.steps}
- stepIndex={this.props.stepIndex}
- styles={{ options: joyrideStyleOptions }}
- tooltipComponent={this._renderToolTip.bind(this)}
- />
+ <Popper referenceElement={this._getElementForStep()} placement="right">
+ {this._renderPopperChildren.bind(this)}
+ </Popper>
);
}
@@ -87,6 +85,21 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
return newStep;
}
+ private _getElementForStep(): Element {
+ const step = this.props.steps[this.props.stepIndex];
+ return document.querySelector(step.target);
+ }
+
+ private _renderPopperChildren(props: any): React.ReactNode {
+ const { arrowProps } = props;
+ return (
+ <div ref={props.ref} style={props.style} data-placement={props.placement}>
+ {this._renderToolTip()}
+ <div ref={arrowProps.ref} style={arrowProps.style} />
+ </div>
+ );
+ }
+
private _renderToolTip(): React.ReactNode {
const { steps, stepIndex } = this.props;
const step = steps[stepIndex];
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 3ab18b011..3994b0546 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -3,10 +3,9 @@ import * as React from 'react';
import { Island } from 'ts/components/ui/island';
export interface OnboardingTooltipProps {
- title: string;
+ title?: string;
content: React.ReactNode;
isLastStep: boolean;
- index: number;
onClose: () => void;
onClickNext: () => void;
onClickBack: () => void;