index.d.ts 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. import * as React from 'react';
  2. import { ReactNode, CSSProperties, ElementType, MouseEventHandler, RefCallback } from 'react';
  3. import { Props as Props$1 } from 'react-floater';
  4. import { ValueOf, PartialDeep, Simplify, SetRequired } from 'type-fest';
  5. import * as popper_js from 'popper.js';
  6. declare const ACTIONS: {
  7. readonly INIT: "init";
  8. readonly START: "start";
  9. readonly STOP: "stop";
  10. readonly RESET: "reset";
  11. readonly PREV: "prev";
  12. readonly NEXT: "next";
  13. readonly GO: "go";
  14. readonly CLOSE: "close";
  15. readonly SKIP: "skip";
  16. readonly UPDATE: "update";
  17. };
  18. declare const EVENTS: {
  19. readonly TOUR_START: "tour:start";
  20. readonly STEP_BEFORE: "step:before";
  21. readonly BEACON: "beacon";
  22. readonly TOOLTIP: "tooltip";
  23. readonly STEP_AFTER: "step:after";
  24. readonly TOUR_END: "tour:end";
  25. readonly TOUR_STATUS: "tour:status";
  26. readonly TARGET_NOT_FOUND: "error:target_not_found";
  27. readonly ERROR: "error";
  28. };
  29. declare const LIFECYCLE: {
  30. readonly INIT: "init";
  31. readonly READY: "ready";
  32. readonly BEACON: "beacon";
  33. readonly TOOLTIP: "tooltip";
  34. readonly COMPLETE: "complete";
  35. readonly ERROR: "error";
  36. };
  37. declare const STATUS: {
  38. readonly IDLE: "idle";
  39. readonly READY: "ready";
  40. readonly WAITING: "waiting";
  41. readonly RUNNING: "running";
  42. readonly PAUSED: "paused";
  43. readonly SKIPPED: "skipped";
  44. readonly FINISHED: "finished";
  45. readonly ERROR: "error";
  46. };
  47. type Actions = ValueOf<typeof ACTIONS>;
  48. type Events = ValueOf<typeof EVENTS>;
  49. type Lifecycle = ValueOf<typeof LIFECYCLE>;
  50. type Status = ValueOf<typeof STATUS>;
  51. type AnyObject<T = any> = Record<string, T>;
  52. interface Locale {
  53. back?: ReactNode;
  54. close?: ReactNode;
  55. last?: ReactNode;
  56. next?: ReactNode;
  57. open?: ReactNode;
  58. skip?: ReactNode;
  59. }
  60. type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
  61. interface Styles {
  62. beacon: CSSProperties;
  63. beaconInner: CSSProperties;
  64. beaconOuter: CSSProperties;
  65. buttonBack: CSSProperties;
  66. buttonClose: CSSProperties;
  67. buttonNext: CSSProperties;
  68. buttonSkip: CSSProperties;
  69. options: Partial<StylesOptions>;
  70. overlay: CSSProperties;
  71. overlayLegacy: CSSProperties;
  72. overlayLegacyCenter: CSSProperties;
  73. spotlight: CSSProperties;
  74. spotlightLegacy: CSSProperties;
  75. tooltip: CSSProperties;
  76. tooltipContainer: CSSProperties;
  77. tooltipContent: CSSProperties;
  78. tooltipFooter: CSSProperties;
  79. tooltipFooterSpacer: CSSProperties;
  80. tooltipTitle: CSSProperties;
  81. }
  82. interface StylesOptions {
  83. arrowColor: string;
  84. backgroundColor: string;
  85. beaconSize: number;
  86. overlayColor: string;
  87. primaryColor: string;
  88. spotlightShadow: string;
  89. textColor: string;
  90. width?: string | number;
  91. zIndex: number;
  92. }
  93. type Listener = (state: State) => void;
  94. type PopperData = Parameters<NonNullable<Props$1['getPopper']>>[0];
  95. declare class Store {
  96. private beaconPopper;
  97. private tooltipPopper;
  98. private data;
  99. private listener;
  100. private store;
  101. constructor(options?: StoreOptions);
  102. getState(): State;
  103. private getNextState;
  104. private getSteps;
  105. private hasUpdatedState;
  106. private setState;
  107. addListener: (listener: Listener) => void;
  108. setSteps: (steps: Array<AnyObject>) => void;
  109. getHelpers(): StoreHelpers;
  110. getPopper: (name: 'beacon' | 'tooltip') => popper_js.default.Data | null;
  111. setPopper: (name: 'beacon' | 'tooltip', popper: PopperData) => void;
  112. cleanupPoppers: () => void;
  113. close: () => void;
  114. go: (nextIndex: number) => void;
  115. info: () => AnyObject;
  116. next: () => void;
  117. open: () => void;
  118. prev: () => void;
  119. reset: (restart?: boolean) => void;
  120. skip: () => void;
  121. start: (nextIndex?: number) => void;
  122. stop: (advance?: boolean) => void;
  123. update: (state: Partial<State>) => void;
  124. }
  125. type StoreInstance = ReturnType<typeof createStore>;
  126. declare function createStore(options?: StoreOptions): Store;
  127. type BaseProps = {
  128. beaconComponent?: ElementType<BeaconRenderProps>;
  129. disableCloseOnEsc?: boolean;
  130. disableOverlay?: boolean;
  131. disableOverlayClose?: boolean;
  132. disableScrollParentFix?: boolean;
  133. disableScrolling?: boolean;
  134. floaterProps?: Partial<Props$1>;
  135. hideBackButton?: boolean;
  136. hideCloseButton?: boolean;
  137. locale?: Locale;
  138. nonce?: string;
  139. showProgress?: boolean;
  140. showSkipButton?: boolean;
  141. spotlightClicks?: boolean;
  142. spotlightPadding?: number;
  143. styles?: PartialDeep<Styles>;
  144. tooltipComponent?: ElementType<TooltipRenderProps>;
  145. };
  146. type BeaconProps = Simplify<Pick<Props, 'beaconComponent' | 'nonce'> & BeaconRenderProps & {
  147. locale: Locale;
  148. onClickOrHover: MouseEventHandler<HTMLElement>;
  149. shouldFocus: boolean;
  150. styles: Styles;
  151. }>;
  152. type BeaconRenderProps = {
  153. continuous: boolean;
  154. index: number;
  155. isLastStep: boolean;
  156. size: number;
  157. step: StepMerged;
  158. };
  159. type Callback = (data: CallBackProps) => void;
  160. type CallBackProps = {
  161. action: Actions;
  162. controlled: boolean;
  163. index: number;
  164. lifecycle: Lifecycle;
  165. size: number;
  166. status: Status;
  167. step: Step;
  168. type: Events;
  169. };
  170. type OverlayProps = Simplify<StepMerged & {
  171. debug: boolean;
  172. lifecycle: ValueOf<Lifecycle>;
  173. onClickOverlay: () => void;
  174. }>;
  175. type Props = Simplify<BaseProps & {
  176. callback?: Callback;
  177. continuous?: boolean;
  178. debug?: boolean;
  179. getHelpers?: (helpers: StoreHelpers) => any;
  180. run: boolean;
  181. scrollDuration?: number;
  182. scrollOffset?: number;
  183. scrollToFirstStep?: boolean;
  184. stepIndex?: number;
  185. steps: Array<Step>;
  186. }>;
  187. type State = {
  188. action: Actions;
  189. controlled: boolean;
  190. index: number;
  191. lifecycle: Lifecycle;
  192. size: number;
  193. status: Status;
  194. };
  195. type Step = Simplify<BaseProps & {
  196. content: ReactNode;
  197. disableBeacon?: boolean;
  198. event?: string;
  199. floaterProps?: Props$1;
  200. hideFooter?: boolean;
  201. isFixed?: boolean;
  202. offset?: number;
  203. placement?: Placement | 'auto' | 'center';
  204. placementBeacon?: Placement;
  205. target: string | HTMLElement;
  206. title?: ReactNode;
  207. }>;
  208. type StepMerged = Simplify<SetRequired<Step, 'disableBeacon' | 'disableCloseOnEsc' | 'disableOverlay' | 'disableOverlayClose' | 'disableScrollParentFix' | 'disableScrolling' | 'event' | 'hideBackButton' | 'hideCloseButton' | 'hideFooter' | 'isFixed' | 'locale' | 'offset' | 'placement' | 'showProgress' | 'showSkipButton' | 'spotlightClicks' | 'spotlightPadding'> & {
  209. styles: Styles;
  210. }>;
  211. type StepProps = Simplify<State & {
  212. callback: Callback;
  213. continuous: boolean;
  214. debug: boolean;
  215. helpers: StoreHelpers;
  216. nonce?: string;
  217. shouldScroll: boolean;
  218. step: StepMerged;
  219. store: StoreInstance;
  220. }>;
  221. type StoreHelpers = {
  222. close: () => void;
  223. go: (nextIndex: number) => void;
  224. info: (state: State) => void;
  225. next: () => void;
  226. open: () => void;
  227. prev: () => void;
  228. reset: (restart: boolean) => void;
  229. skip: () => void;
  230. };
  231. type StoreOptions = Simplify<Props & {
  232. controlled: boolean;
  233. }>;
  234. type TooltipProps = {
  235. continuous: boolean;
  236. helpers: StoreHelpers;
  237. index: number;
  238. isLastStep: boolean;
  239. setTooltipRef: RefCallback<HTMLElement>;
  240. size: number;
  241. step: StepMerged;
  242. };
  243. type TooltipRenderProps = Simplify<BeaconRenderProps & {
  244. backProps: {
  245. 'aria-label': string;
  246. 'data-action': string;
  247. onClick: MouseEventHandler<HTMLElement>;
  248. role: string;
  249. title: string;
  250. };
  251. closeProps: {
  252. 'aria-label': string;
  253. 'data-action': string;
  254. onClick: MouseEventHandler<HTMLElement>;
  255. role: string;
  256. title: string;
  257. };
  258. primaryProps: {
  259. 'aria-label': string;
  260. 'data-action': string;
  261. onClick: MouseEventHandler<HTMLElement>;
  262. role: string;
  263. title: string;
  264. };
  265. skipProps: {
  266. 'aria-label': string;
  267. 'data-action': string;
  268. onClick: MouseEventHandler<HTMLElement>;
  269. role: string;
  270. title: string;
  271. };
  272. tooltipProps: {
  273. 'aria-modal': boolean;
  274. ref: RefCallback<HTMLElement>;
  275. role: string;
  276. };
  277. }>;
  278. declare class Joyride extends React.Component<Props, State> {
  279. private readonly helpers;
  280. private readonly store;
  281. static defaultProps: {
  282. continuous: boolean;
  283. debug: boolean;
  284. disableCloseOnEsc: boolean;
  285. disableOverlay: boolean;
  286. disableOverlayClose: boolean;
  287. disableScrolling: boolean;
  288. disableScrollParentFix: boolean;
  289. getHelpers: undefined;
  290. hideBackButton: boolean;
  291. run: boolean;
  292. scrollOffset: number;
  293. scrollDuration: number;
  294. scrollToFirstStep: boolean;
  295. showSkipButton: boolean;
  296. showProgress: boolean;
  297. spotlightClicks: boolean;
  298. spotlightPadding: number;
  299. steps: never[];
  300. };
  301. constructor(props: Props);
  302. componentDidMount(): void;
  303. componentDidUpdate(previousProps: Props, previousState: State): void;
  304. componentWillUnmount(): void;
  305. /**
  306. * Trigger the callback.
  307. */
  308. callback: (data: CallBackProps) => void;
  309. /**
  310. * Keydown event listener
  311. */
  312. handleKeyboard: (event: KeyboardEvent) => void;
  313. /**
  314. * Sync the store with the component's state
  315. */
  316. syncState: (state: State) => void;
  317. scrollToStep(previousState: State): void;
  318. render(): React.JSX.Element | null;
  319. }
  320. declare namespace ReactJoyride {
  321. export { ACTIONS, type Actions, type AnyObject, type BaseProps, type BeaconProps, type BeaconRenderProps, type CallBackProps, type Callback, EVENTS, type Events, LIFECYCLE, type Lifecycle, type Locale, type OverlayProps, type Placement, type Props, STATUS, type State, type Status, type Step, type StepMerged, type StepProps, type StoreHelpers, type StoreOptions, type Styles, type StylesOptions, type TooltipProps, type TooltipRenderProps, Joyride as default };
  322. }
  323. export = ReactJoyride;