mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-05-22 20:37:58 +08:00
react-joyride 2.0
This commit is contained in:
강동윤
431
types/react-joyride/index.d.ts
vendored
431
types/react-joyride/index.d.ts
vendored
@@ -1,196 +1,253 @@
|
||||
// Type definitions for react-joyride 1.11
|
||||
// Type definitions for react-joyride 2.0
|
||||
// Project: https://github.com/gilbarbara/react-joyride
|
||||
// Definitions by: Daniel Rosenwasser <https://github.com/DanielRosenwasser>, Ben Dixon <https://github.com/bendxn>
|
||||
// Definitions by: DongYoon Kang <https://github.com/kdy1>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import * as React from "react";
|
||||
declare module "react-joyride" {
|
||||
import * as React from "react";
|
||||
|
||||
export default class Joyride extends React.Component<Props, State> {
|
||||
constructor(props: Props);
|
||||
type Action = 'init' | 'start' | 'stop' | 'reset' | 'restart' | 'prev' |
|
||||
'next' | 'go' | 'index' | 'close' | 'skip' | 'update';
|
||||
|
||||
reset(restart?: boolean): void;
|
||||
next(): void;
|
||||
back(): void;
|
||||
addTooltip(data: Step): void;
|
||||
getProgress(): Progress;
|
||||
type Lifecycle = 'init' | 'ready' | 'beacon' | 'tooltip' | 'complete' | 'error';
|
||||
|
||||
/**
|
||||
* 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;
|
||||
type Status = 'idle' | 'ready' | 'waiting' | 'running' |
|
||||
'paused' | 'skipped' | 'finished' | 'error';
|
||||
|
||||
type EventType =
|
||||
'tour:start' |
|
||||
'step:before' |
|
||||
'beacon' |
|
||||
'tooltip' |
|
||||
'step:after' |
|
||||
'tour:end' |
|
||||
// these usually don't happen in a normal tour
|
||||
'tour:status' |
|
||||
'error:target_not_found' |
|
||||
'error';
|
||||
|
||||
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 extends OverridableProps {
|
||||
|
||||
/**
|
||||
* The tour's steps. Defaults to []
|
||||
*/
|
||||
steps: Step[];
|
||||
|
||||
/**
|
||||
* Setting a number here will turn Joyride into controlled mode.
|
||||
* You will receive the state events in the callback and you'll have to update this prop by yourself.
|
||||
*/
|
||||
stepIndex?: number;
|
||||
|
||||
/**
|
||||
* Run/stop the tour. Defaults to true.
|
||||
*/
|
||||
run?: boolean;
|
||||
|
||||
/**
|
||||
* The scroll distance from the element scrollTop value. Defaults to 20.
|
||||
*/
|
||||
scrollOffset?: number;
|
||||
|
||||
/**
|
||||
* Scroll the page for the first step. Defaults to false
|
||||
*/
|
||||
scrollToFirstStep?: boolean;
|
||||
|
||||
/**
|
||||
* Display a link to skip the tour. Defaults to false
|
||||
*/
|
||||
showSkipButton?: boolean;
|
||||
|
||||
/**
|
||||
* Disable auto scrolling between steps. Defaults to false.
|
||||
*/
|
||||
disableScrolling?: boolean;
|
||||
|
||||
/**
|
||||
* Log Joyride's actions to the console. Defaults to false.
|
||||
*/
|
||||
debug?: boolean;
|
||||
|
||||
/**
|
||||
* It will be called when Joyride's state changes. It returns a single parameter with the state.
|
||||
*/
|
||||
callback?(options: (data: State) => any): void;
|
||||
|
||||
/**
|
||||
* The tour is played sequentially with the Next button. Defaults to false.
|
||||
*/
|
||||
continuous?: boolean;
|
||||
}
|
||||
|
||||
export interface OverridableProps {
|
||||
/**
|
||||
* A React component or function to be used instead the default Beacon.
|
||||
*/
|
||||
beaconComponent?: React.ReactNode;
|
||||
|
||||
/**
|
||||
* Allow mouse and touch events thru the spotlight. You can click links in your app. Defaults to true.
|
||||
*/
|
||||
spotlightClicks?: boolean;
|
||||
|
||||
/**
|
||||
* The padding of the spotlight. Defaults to 10.
|
||||
*/
|
||||
spotlightPadding?: number;
|
||||
|
||||
/**
|
||||
* Display the tour progress in the next button _e.g. 2/5 _in continuous tours. Defaults to false.
|
||||
*/
|
||||
showProgress?: boolean;
|
||||
|
||||
|
||||
/**
|
||||
* Disable closing the tooltip on ESC. Defaults to false.
|
||||
*/
|
||||
disableCloseOnEsc?: boolean;
|
||||
|
||||
/**
|
||||
* Don't show the overlay. Defaults to false
|
||||
*/
|
||||
disableOverlay?: boolean;
|
||||
|
||||
/**
|
||||
* Don't close the tooltip when clicking the overlay. Defaults to false.
|
||||
*/
|
||||
disableOverlayClose?: boolean;
|
||||
|
||||
/**
|
||||
* The strings used in the tooltip. Defaults to `{ back: 'Back', close: 'Close', last: 'Last', next: 'Next', skip: 'Skip' }`
|
||||
*/
|
||||
locale?: Locale;
|
||||
|
||||
/**
|
||||
* A React component or function to be used instead the default Tooltip excluding the arrow.
|
||||
*/
|
||||
tooltipComponent?: React.ReactNode;
|
||||
|
||||
/**
|
||||
* Options to be passed to react-floater.
|
||||
*/
|
||||
floaterProps?: object;
|
||||
|
||||
/**
|
||||
* Hide the "back" button. Defaults to false.
|
||||
*/
|
||||
hideBackButton?: boolean;
|
||||
|
||||
styles?: StepStyles;
|
||||
}
|
||||
|
||||
export interface Step extends OverridableProps {
|
||||
/**
|
||||
* The target for the step. It can be a CSS selector or an HtmlElement directly (but using refs created in the same render would required an additional render afterwards).
|
||||
*/
|
||||
target: HTMLElement | string;
|
||||
/**
|
||||
* The tooltip's body.
|
||||
*/
|
||||
content: React.ReactNode | string;
|
||||
|
||||
/**
|
||||
* The tooltip's title.
|
||||
*/
|
||||
title?: React.ReactNode | string;
|
||||
|
||||
/**
|
||||
* Don't show the Beacon before the tooltip. Defaults to false.
|
||||
*/
|
||||
disableBeacon?: boolean;
|
||||
|
||||
/**
|
||||
* The event to trigger the beacon. It can be click or hover. Defaults to click.
|
||||
*/
|
||||
event?: 'click' | 'hover';
|
||||
|
||||
/**
|
||||
* Force the step to be fixed. Defaults to false.
|
||||
*/
|
||||
isFixed?: boolean;
|
||||
|
||||
/**
|
||||
* The distance from the target to the tooltip. Defaults to 10.
|
||||
*/
|
||||
offset?: number;
|
||||
/**
|
||||
* The placement of the beacon and tooltip. It will re-position itself if there's no space available.
|
||||
* Defaults to bottom.
|
||||
*/
|
||||
placement?: 'top' | 'top-start' | 'top-end' |
|
||||
'bottom' | 'bottom-start' | 'bottom-end' |
|
||||
'left' | 'left-start' | 'left-end' |
|
||||
'right' | 'right-start' | 'right-end' |
|
||||
'auto' | 'center';
|
||||
|
||||
/**
|
||||
* The placement of the beacon. It will use the placement if nothing is passed and it can be: top, bottom, left, right.
|
||||
*/
|
||||
placementBeacon?: 'top' | 'bottom' | 'left' | 'right';
|
||||
|
||||
}
|
||||
|
||||
export interface StepStyles {
|
||||
/**
|
||||
* See https://github.com/gilbarbara/react-joyride/blob/master/docs/styling.md
|
||||
*/
|
||||
options?: {
|
||||
[s: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
export interface State {
|
||||
action: Action;
|
||||
index: number;
|
||||
controlled: boolean;
|
||||
lifecycle: Lifecycle;
|
||||
size: number;
|
||||
status: Status;
|
||||
/**
|
||||
* The current step.
|
||||
*/
|
||||
step: Step;
|
||||
type: EventType;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -5,12 +5,13 @@ class NewComponent extends React.Component<undefined, undefined> {
|
||||
j: Joyride;
|
||||
|
||||
steps: Step[] = [{
|
||||
title: "Title",
|
||||
text: "Hurray",
|
||||
target: ".selectable",
|
||||
position: "top-right",
|
||||
type: "click",
|
||||
style: {
|
||||
title: "Title",
|
||||
content: "Hurray",
|
||||
target: ".selectable",
|
||||
placement: "top-end",
|
||||
event: "click",
|
||||
styles: {
|
||||
options: {
|
||||
backgroundColor: "#000",
|
||||
borderRadius: "0",
|
||||
color: "#000",
|
||||
@@ -32,17 +33,16 @@ class NewComponent extends React.Component<undefined, undefined> {
|
||||
hole: {
|
||||
backgroundColor: "#000",
|
||||
}
|
||||
},
|
||||
name: "my-name",
|
||||
parent: "MyParent"
|
||||
}
|
||||
},
|
||||
{
|
||||
target: ".other-selectable",
|
||||
text: (<div>Also works</div>)
|
||||
}];
|
||||
},
|
||||
{
|
||||
target: ".other-selectable",
|
||||
content: (<div>Also works</div>)
|
||||
}];
|
||||
|
||||
render() {
|
||||
return <Joyride ref="j" run={true} holePadding={4} resizeDebounceDelay={100} steps={this.steps} autoStart={true} />;
|
||||
return <Joyride ref="j" run={true} steps={this.steps} />;
|
||||
}
|
||||
|
||||
doStuff() {
|
||||
@@ -54,6 +54,6 @@ class NewComponent extends React.Component<undefined, undefined> {
|
||||
|
||||
this.j.addTooltip(this.steps[0]);
|
||||
|
||||
const { title, position } = this.j.getProgress().step;
|
||||
const { title, placement } = this.j.getProgress().step;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user