mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 19:07:08 +00:00
Added types for reactour package (#35042)
This commit is contained in:
Paweł Dąbrowski
Wesley Wigham
parent
0558f65597
commit
cecf36fdde
302
types/reactour/index.d.ts
vendored
Normal file
302
types/reactour/index.d.ts
vendored
Normal file
@ -0,0 +1,302 @@
|
||||
// Type definitions for reactour 1.13
|
||||
// Project: https://github.com/elrumordelaluz/reactour#readme
|
||||
// Definitions by: Paweł Dąbrowski <https://github.com/paolostyle>
|
||||
// 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<HTMLDivElement>) => 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<ReactourProps, ReactourState> {}
|
||||
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<HTMLButtonElement>;
|
||||
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<BadgeProps>;
|
||||
|
||||
export interface CloseProps {
|
||||
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
||||
className?: string;
|
||||
}
|
||||
export function Close(props: CloseProps): React.ReactElement;
|
||||
|
||||
export interface ControlsProps extends React.ComponentPropsWithRef<'div'> {}
|
||||
export const Controls: React.FC<ControlsProps>;
|
||||
|
||||
export interface DotProps extends React.ComponentPropsWithRef<'button'> {
|
||||
disabled?: boolean;
|
||||
current?: number;
|
||||
index?: number;
|
||||
showNumber?: boolean;
|
||||
accentColor?: string;
|
||||
}
|
||||
export const Dot: React.FC<DotProps>;
|
||||
|
||||
export type NavigationProps = React.ComponentPropsWithRef<'nav'>;
|
||||
export const Navigation: React.FC<NavigationProps>;
|
||||
147
types/reactour/reactour-tests.tsx
Normal file
147
types/reactour/reactour-tests.tsx
Normal file
@ -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<Tour>();
|
||||
|
||||
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 (
|
||||
<div>
|
||||
<button className="opener" onClick={() => this.setState({ isTourOpen: true })}>
|
||||
Open
|
||||
</button>
|
||||
<Tour
|
||||
ref={this.ref}
|
||||
isOpen={this.state.isTourOpen}
|
||||
steps={[
|
||||
{
|
||||
content: <div>Example</div>
|
||||
},
|
||||
{
|
||||
content: ({ close, goTo, inDOM, step }) => (
|
||||
<div>
|
||||
<Close onClick={close} className="something" />
|
||||
<Controls className="im-a-div">
|
||||
<Arrow onClick={() => goTo(0)} label="Go to first step" />
|
||||
<Arrow
|
||||
className="hello"
|
||||
inverted
|
||||
onClick={() => goTo(2)}
|
||||
label={<pre>Go to next step</pre>}
|
||||
/>
|
||||
<Arrow disabled onClick={() => console.log('do nothing')} />
|
||||
</Controls>
|
||||
<Navigation className="im-a-div">
|
||||
<Dot
|
||||
disabled
|
||||
current={1}
|
||||
index={0}
|
||||
showNumber
|
||||
accentColor="#000"
|
||||
/>
|
||||
</Navigation>
|
||||
{inDOM ? 'Is in DOM' : 'Not in DOM'}, step: {step}
|
||||
</div>
|
||||
),
|
||||
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) => (
|
||||
<Badge accentColor="#f34">
|
||||
{current} / {total}
|
||||
</Badge>
|
||||
)}
|
||||
className="my-tour"
|
||||
closeWithMask={false}
|
||||
disableDotsNavigation={false}
|
||||
disableInteraction
|
||||
disableKeyboardNavigation={['esc']}
|
||||
getCurrentStep={currentStep => console.log(currentStep)}
|
||||
goToStep={4}
|
||||
highlightedMaskClassName="mask-hi"
|
||||
inViewThreshold={10}
|
||||
lastStepNextButton={<span>Finish</span>}
|
||||
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}
|
||||
>
|
||||
<div>Something</div>
|
||||
</Tour>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
types/reactour/tsconfig.json
Normal file
17
types/reactour/tsconfig.json
Normal file
@ -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"]
|
||||
}
|
||||
1
types/reactour/tslint.json
Normal file
1
types/reactour/tslint.json
Normal file
@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Loading…
Reference in New Issue
Block a user