From 62a0a04e15b561af7ee8fdecc4102221d645f5f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=8F=99=EC=9C=A4?= Date: Sun, 2 Sep 2018 09:22:15 +0900 Subject: [PATCH] react-joyride 2.0 --- types/react-joyride/index.d.ts | 431 +++++++++++--------- types/react-joyride/react-joyride-tests.tsx | 30 +- 2 files changed, 259 insertions(+), 202 deletions(-) diff --git a/types/react-joyride/index.d.ts b/types/react-joyride/index.d.ts index 7cc118a2f0..93ecfce3ee 100644 --- a/types/react-joyride/index.d.ts +++ b/types/react-joyride/index.d.ts @@ -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 , Ben Dixon +// Definitions by: DongYoon Kang // 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 { - 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 { + 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; } diff --git a/types/react-joyride/react-joyride-tests.tsx b/types/react-joyride/react-joyride-tests.tsx index 52fc24f3c9..82171e98e2 100644 --- a/types/react-joyride/react-joyride-tests.tsx +++ b/types/react-joyride/react-joyride-tests.tsx @@ -5,12 +5,13 @@ class NewComponent extends React.Component { 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 { hole: { backgroundColor: "#000", } - }, - name: "my-name", - parent: "MyParent" + } }, - { - target: ".other-selectable", - text: (
Also works
) - }]; + }, + { + target: ".other-selectable", + content: (
Also works
) + }]; render() { - return ; + return ; } doStuff() { @@ -54,6 +54,6 @@ class NewComponent extends React.Component { this.j.addTooltip(this.steps[0]); - const { title, position } = this.j.getProgress().step; + const { title, placement } = this.j.getProgress().step; } }