Last active
August 7, 2020 07:43
-
-
Save refactornator/c45daf0f7b94ed0a3f4a1e490b4392d4 to your computer and use it in GitHub Desktop.
A workaround type declaration for react-joyride until 2.0 is release and the type definition is updated. Uninstall @types/react-joyride and place this file in @types/react-joyride/index.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
declare module 'react-joyride' { | |
import * as React from "react"; | |
export default class Joyride extends React.Component<Props, State> { | |
constructor(props: Props); | |
reset(restart?: boolean): void; | |
next(): void; | |
back(): void; | |
addTooltip(data: Step): void; | |
getProgress(): Progress; | |
/** | |
* Please don't use the `start` and `stop` methods anymore. Instead use a combination of the props `run` and `autoStart`. | |
*/ | |
private start(autorun?: boolean): void; | |
/** | |
* Please don't use the `start` and `stop` methods anymore. Instead use a combination of the props `run` and `autoStart`. | |
*/ | |
private stop(): void; | |
static defaultProps: Props; | |
} | |
export interface Progress { | |
index: number; | |
percentageComplete: number; | |
step: Step; | |
} | |
export interface Locale { | |
back?: string; | |
close?: string; | |
last?: string; | |
next?: string; | |
skip?: string; | |
} | |
export interface Props { | |
/** | |
* The tour's steps. Defaults to [] | |
*/ | |
steps?: Step[]; | |
/** | |
* The initial step index. Defaults to 0 | |
*/ | |
stepIndex?: number; | |
/** | |
* Run/stop the tour. Defaults to false | |
*/ | |
run?: boolean; | |
/** | |
* Open the tooltip automatically for the first step, without showing a beacon. Defaults to false | |
*/ | |
autoStart?: boolean; | |
/** | |
* Toggle keyboard navigation (esc, space bar, return). Defaults to true | |
*/ | |
keyboardNavigation?: boolean; | |
/** | |
* The strings used in the tooltip. Defaults to `{ back: 'Back', close: 'Close', last: 'Last', next: 'Next', skip: 'Skip' }` | |
*/ | |
locale?: Locale; | |
/** | |
* Delay the reposition of the current step while the window is being resized. Defaults to false | |
*/ | |
resizeDebounce?: boolean; | |
/** | |
* The amount of delay for the resizeDebounce callback. Defaults to 200 | |
*/ | |
resizeDebounceDelay?: number; | |
/** | |
* The gap around the target inside the hole. Defaults to 5 | |
*/ | |
holePadding?: number; | |
/** | |
* The scrollTop offset used in scrollToSteps. Defaults to 20 | |
*/ | |
scrollOffset?: number; | |
/** | |
* Scroll the page to the next step if needed. Defaults to true | |
*/ | |
scrollToSteps?: boolean; | |
/** | |
* Scroll the page for the first step. Defaults to false | |
*/ | |
scrollToFirstStep?: boolean; | |
/** | |
* Display a back button. Defaults to true | |
*/ | |
showBackButton?: boolean; | |
/** | |
* Display an overlay with holes above your steps (for tours only). Defaults to true | |
*/ | |
showOverlay?: boolean; | |
/** | |
* Allow mouse and touch events within overlay hole, and prevent hole:click callback from being sent. Defaults to false | |
*/ | |
allowClicksThruHole?: boolean; | |
/** | |
* Display a link to skip the tour. Defaults to false | |
*/ | |
showSkipButton?: boolean; | |
/** | |
* Display the tour progress in the next button e.g. 2/5 in continuous tours. Defaults to false | |
*/ | |
showStepsProgress?: boolean; | |
showProgress?: boolean; | |
/** | |
* The tooltip offset from the target. Defaults to 30 | |
*/ | |
tooltipOffset?: number; | |
/** | |
* The type of your presentation. It can be continuous (played sequencially with the Next button) or single. Defaults to single | |
*/ | |
type?: "continuous" | "single"; | |
/** | |
* Don't close the tooltip on clicking the overlay. Defaults to false | |
*/ | |
disableOverlay?: boolean; | |
/** | |
* Console.log Joyride's inner actions. Defaults to false | |
*/ | |
debug?: boolean; | |
/** | |
* It will be called when the tour's state changes. | |
*/ | |
callback?(options: any): void; | |
/** | |
* The type of your presentation. It can be continuous (played sequencially with the Next button) or single. Defaults to single | |
*/ | |
continuous?: boolean; | |
} | |
export interface Step { | |
title?: string; | |
text?: React.ReactNode; | |
target: string; | |
position?: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "right" | "left"; | |
type?: "click" | "hover"; | |
isFixed?: boolean; | |
allowClicksThruHole?: boolean; | |
style?: StepStyles; | |
[prop: string]: any; | |
} | |
export interface StepStyles { | |
backgroundColor?: string; | |
borderRadius?: string; | |
color?: string; | |
mainColor?: string; | |
textAlign?: string; | |
width?: string; | |
beacon?: BeaconStyles; | |
[style: string]: any; | |
} | |
export interface BeaconStyles { | |
offsetX?: number; | |
offsetY?: number; | |
inner?: string; | |
outer?: string; | |
} | |
export interface State { | |
action: string; | |
index: number; | |
play: boolean; | |
redraw: boolean; | |
shouldPlay: boolean; | |
showTooltip: boolean; | |
xPos: number; | |
yPos: number; | |
skipped: boolean; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
nice work