diff --git a/types/reactour/index.d.ts b/types/reactour/index.d.ts new file mode 100644 index 0000000000..c9a4fa869e --- /dev/null +++ b/types/reactour/index.d.ts @@ -0,0 +1,302 @@ +// Type definitions for reactour 1.13 +// Project: https://github.com/elrumordelaluz/reactour#readme +// Definitions by: Paweł Dąbrowski +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from 'react'; + +// --------------------- +// Step interfaces +// --------------------- + +export type ReactourStepPosition = 'top' | 'right' | 'bottom' | 'left' | 'center'; + +export interface ReactourStepContentArgs { + close: () => void; + goTo: (step: number) => void; + inDOM: boolean; + step: number; +} + +export interface ReactourStep { + /** + * Content of the step + */ + content: React.ReactNode | ((args: ReactourStepContentArgs) => React.ReactNode); + + /** + * Action that can be executed on target element of the step + */ + action?: (domNode: any) => void; + + /** + * Position of step content + */ + position?: ReactourStepPosition; + + /** + * DOM selector to find the target element + */ + selector?: string; + + /** + * Disable interaction for this specific step. + * Could be enabled passing `true` + * when `disableInteraction` prop is present in Tour + */ + stepInteraction?: boolean; + + /** + * Additional styles + */ + style?: React.CSSProperties; +} + +export interface ReactourProps { + /** + * You know… + */ + isOpen: boolean; + + /** + * Array of elements to highlight with special info and props + */ + steps: ReactourStep[]; + + /** + * Function to close the _Tour_ + */ + onRequestClose: (event: React.MouseEvent) => void; + + /** + * Change `--reactour-accent` _(defaults to accentColor on IE)_ css custom prop to apply color in _Helper_, number, dots, etc + * @default #007aff + */ + accentColor?: string; + + /** + * Customize _Badge_ content using `current` and `total` steps values + */ + badgeContent?: (current: number, total: number) => React.ReactNode; + + /** + * Content to be rendered inside the _Helper_ + */ + children?: React.ReactNode; + + /** + * Custom class name to add to the _Helper_ + */ + className?: string; + + /** + * Close the _Tour_ by clicking the _Mask_ + * @default true + */ + closeWithMask?: boolean; + + /** + * Disable interactivity with _Dots_ navigation in _Helper_ + */ + disableDotsNavigation?: boolean; + + /** + * Disable the ability to click or intercat in any way with the _Highlighted_ element + */ + disableInteraction?: boolean; + + /** + * Disable all keyboard navigation (next and prev step) when true, disable only selected keys when array + */ + disableKeyboardNavigation?: boolean | Array<'esc' | 'right' | 'left'>; + + /** + * Function triggered each time current step change + */ + getCurrentStep?: (currentStep: number) => void; + + /** + * Programmatically change current step after the first render, when the value changes + */ + goToStep?: number; + + /** + * Custom class name to add to the element which is the overlay for the target element when `disableInteraction` + */ + highlightedMaskClassName?: string; + + /** + * Tolerance in pixels to add when calculating if an element is outside viewport to scroll into view + */ + inViewThreshold?: number; + + /** + * Change Next button in last step into a custom button to close the Tour + */ + lastStepNextButton?: React.ReactNode; + + /** + * Custom class name to add to the _Mask_ + */ + maskClassName?: string; + + /** + * Extra Space between in pixels between _Highlighted_ element and _Mask_ + */ + maskSpace?: number; + + /** + * Renders as next button navigation + */ + nextButton?: React.ReactNode; + + /** + * Overrides default `nextStep` internal function + */ + nextStep?: () => void; + + /** + * Do something after _Tour_ is opened + */ + onAfterOpen?: (target: HTMLDivElement) => void; + + /** + * Do something before _Tour_ is closed + */ + onBeforeClose?: (target: HTMLDivElement) => void; + + /** + * Renders as prev button navigation + */ + prevButton?: React.ReactNode; + + /** + * Overrides default `prevStep` internal function + */ + prevStep?: () => void; + + /** + * Beautify _Helper_ and _Mask_ with `border-radius` (in px) + * @default 0 + */ + rounded?: number; + + /** + * Smooth scroll duration when positioning the target element (in ms) + * @default 1 + */ + scrollDuration?: number; + + /** + * Offset when positioning the target element after scroll to it, by default it's a calculation to the center of the viewport + */ + scrollOffset?: number; + + /** + * Show/Hide _Helper_ Navigation buttons + * @default true + */ + showButton?: boolean; + + /** + * Show/Hide _Helper_ Close button + * @default true + */ + showCloseButton?: boolean; + + /** + * Show/Hide _Helper_ Navigation Dots + * @default true + */ + showNavigation?: boolean; + + /** + * Show/Hide number when hovers on each Navigation Dot + * @default true + */ + showNavigationNumber?: boolean; + + /** + * Show/Hide _Helper_ Number Badge + * @default true + */ + showNumber?: boolean; + + /** + * Starting step when _Tour_ is open the first time + */ + startAt?: number; + + /** + * Value to listen if a forced update is needed + */ + update?: string; + + /** + * Delay time when forcing update. Useful when there are known animation/transitions + * @default 1 + */ + updateDelay?: number; +} + +export interface ReactourState { + isOpen: boolean; + current: number; + top: number; + right: number; + bottom: number; + left: number; + width: number; + height: number; + w: number; + h: number; + inDOM: boolean; + observer: MutationObserver | null; + focusUnlocked: boolean; + helperWidth?: number; + helperHeight?: number; + helperPosition?: ReactourStepPosition; +} + +declare class Tour extends React.Component {} +export default Tour; + +// Components below are all styled components +// Arrow and Close are styled SVG components +// and the rest are simply made with `styled[htmlTagName]` + +export interface ArrowProps { + onClick: React.MouseEventHandler; + className?: string; + disabled?: boolean; + inverted?: boolean; + label?: React.ReactNode; +} +export function Arrow(props: ArrowProps): React.ReactElement; + +export interface BadgeProps extends React.ComponentPropsWithRef<'span'> { + accentColor?: string; +} +export const Badge: React.FC; + +export interface CloseProps { + onClick: React.MouseEventHandler; + className?: string; +} +export function Close(props: CloseProps): React.ReactElement; + +export interface ControlsProps extends React.ComponentPropsWithRef<'div'> {} +export const Controls: React.FC; + +export interface DotProps extends React.ComponentPropsWithRef<'button'> { + disabled?: boolean; + current?: number; + index?: number; + showNumber?: boolean; + accentColor?: string; +} +export const Dot: React.FC; + +export type NavigationProps = React.ComponentPropsWithRef<'nav'>; +export const Navigation: React.FC; diff --git a/types/reactour/reactour-tests.tsx b/types/reactour/reactour-tests.tsx new file mode 100644 index 0000000000..de92bebc91 --- /dev/null +++ b/types/reactour/reactour-tests.tsx @@ -0,0 +1,147 @@ +import * as React from 'react'; +import Tour, { Arrow, Badge, Close, Controls, Dot, Navigation } from 'reactour'; + +class CustomTour extends React.Component<{}, { isTourOpen: boolean }> { + ref = React.createRef(); + + state = { + isTourOpen: false, + update: '13213' + }; + + printTourStateForSomeReason = () => { + if (this.ref.current) { + const { + inDOM, + current, + bottom, + focusUnlocked, + h, + height, + helperHeight, + helperPosition, + helperWidth, + isOpen, + left, + observer, + right, + top, + w, + width + } = this.ref.current.state; + + console.log( + inDOM, + current, + bottom, + focusUnlocked, + h, + height, + helperHeight, + helperPosition, + helperWidth, + isOpen, + left, + observer, + right, + top, + w, + width + ); + } + } + + render() { + return ( +
+ + Example
+ }, + { + content: ({ close, goTo, inDOM, step }) => ( +
+ + + goTo(0)} label="Go to first step" /> + goTo(2)} + label={
Go to next step
} + /> + console.log('do nothing')} /> + + + + + {inDOM ? 'Is in DOM' : 'Not in DOM'}, step: {step} +
+ ), + selector: 'button.opener', + position: 'center', + stepInteraction: false, + style: { + display: 'flex' + }, + action: (node: HTMLElement) => node.focus() + }, + { + content: 'Last step' + } + ]} + onRequestClose={() => this.setState({ isTourOpen: false })} + accentColor="#f0123d" + badgeContent={(current, total) => ( + + {current} / {total} + + )} + className="my-tour" + closeWithMask={false} + disableDotsNavigation={false} + disableInteraction + disableKeyboardNavigation={['esc']} + getCurrentStep={currentStep => console.log(currentStep)} + goToStep={4} + highlightedMaskClassName="mask-hi" + inViewThreshold={10} + lastStepNextButton={Finish} + maskClassName="mask" + maskSpace={10} + nextButton="Next" + nextStep={() => console.log('this would probably break something')} + onAfterOpen={target => target.focus()} + onBeforeClose={target => target.blur()} + prevButton="Prev" + prevStep={() => console.log("this would too but it's fine")} + rounded={3} + scrollDuration={100} + scrollOffset={1} + showNumber={false} + showButton={false} + showCloseButton={false} + showNavigation={false} + showNavigationNumber={false} + startAt={1} + update={this.state.update} + updateDelay={2} + > +
Something
+ + + ); + } +} diff --git a/types/reactour/tsconfig.json b/types/reactour/tsconfig.json new file mode 100644 index 0000000000..48beaae502 --- /dev/null +++ b/types/reactour/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6", "dom"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": ["../"], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": ["index.d.ts", "reactour-tests.tsx"] +} diff --git a/types/reactour/tslint.json b/types/reactour/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/reactour/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }