aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-26 06:31:27 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-26 06:31:27 +0800
commit39008372e522bd0963dc71ec91235bb81813355f (patch)
tree5aebb33ebc4543e00d4c3793cb39f8c0e57affe8 /packages/website/ts
parent1026952f26043611c4aa3d77b2024cae304021e9 (diff)
downloaddexon-sol-tools-39008372e522bd0963dc71ec91235bb81813355f.tar
dexon-sol-tools-39008372e522bd0963dc71ec91235bb81813355f.tar.gz
dexon-sol-tools-39008372e522bd0963dc71ec91235bb81813355f.tar.bz2
dexon-sol-tools-39008372e522bd0963dc71ec91235bb81813355f.tar.lz
dexon-sol-tools-39008372e522bd0963dc71ec91235bb81813355f.tar.xz
dexon-sol-tools-39008372e522bd0963dc71ec91235bb81813355f.tar.zst
dexon-sol-tools-39008372e522bd0963dc71ec91235bb81813355f.zip
Write custom tooltip component
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx39
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx23
2 files changed, 56 insertions, 6 deletions
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>
+);