diff --git a/react-redux/react-redux-2.1.2-tests.tsx b/react-redux/react-redux-2.1.2-tests.tsx index ab32609c01..7ead497767 100644 --- a/react-redux/react-redux-2.1.2-tests.tsx +++ b/react-redux/react-redux-2.1.2-tests.tsx @@ -277,4 +277,3 @@ class SomeClass extends Component { public bar: number; } let bar: number = new (connect()(SomeClass))("foo").bar; - diff --git a/react-user-tour/react-user-tour-tests.tsx b/react-user-tour/react-user-tour-tests.tsx new file mode 100644 index 0000000000..5cfe3f3dab --- /dev/null +++ b/react-user-tour/react-user-tour-tests.tsx @@ -0,0 +1,55 @@ +// Tests for type definitions for react-user-tour +// Project: https://github.com/socialtables/react-user-tour +// Definitions by: Carlo Cancellieri +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// +/// +/// + +import React = require('react'); +import ReactDOM = require('react-dom'); + +import ReactUserTour from 'react-user-tour'; + +interface State { + tourStep:number; + isTourActive:boolean; +} + +class TestApp extends React.Component<{}, State> { + + constructor(p:any){ + super(p); + + this.setState({ + isTourActive:true, + tourStep:1 + }); + } + + render() { + + const Tour = this.setState({tourStep: step, isTourActive: true})} + onBack={(step:number) => this.setState({tourStep: step, isTourActive: true})} + onCancel={() => this.setState({tourStep: this.state.tourStep, isTourActive: false})} + steps={[ + { + step: 1, + selector: '.MyClass', + title:
React User Tour
, + body:
Provide a simple guided tour around a website utilizing css selectors.
, + position: 'bottom' + } + ]} + />; + + return
+ {Tour} +
; + } +} + +ReactDOM.render(React.createElement(TestApp, {}), document.getElementById('test-app')); diff --git a/react-user-tour/react-user-tour-tests.tsx.tscparams b/react-user-tour/react-user-tour-tests.tsx.tscparams new file mode 100644 index 0000000000..b238f4f2a8 --- /dev/null +++ b/react-user-tour/react-user-tour-tests.tsx.tscparams @@ -0,0 +1 @@ +--noImplicitAny --jsx react diff --git a/react-user-tour/react-user-tour.d.ts b/react-user-tour/react-user-tour.d.ts new file mode 100644 index 0000000000..1237977dd1 --- /dev/null +++ b/react-user-tour/react-user-tour.d.ts @@ -0,0 +1,133 @@ +// Type definitions for react-user-tour +// Project: https://github.com/socialtables/react-user-tour +// Definitions by: Carlo Cancellieri +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare module 'react-user-tour' { + + // Import React + import { HTMLAttributes, ComponentClass } from 'react'; + + interface TourStep { + /** + Index number of the step in the tour + */ + step: number; + /** + CSS selector to be passed to document.querySelector() + */ + selector: string; + /** + a react element representing the header of the current step + */ + title: string; + /** + a react element representing the main body message of the tour step + */ + body: string; + /** + Optional properties horizontalOffset and verticalOffset values allow to move tooltip around pointed element. + */ + horizontalOffset?: number; + /** + Optional properties horizontalOffset and verticalOffset values allow to move tooltip around pointed element. + */ + verticalOffset?: number; + /** + Each step can also take an optional argument, position which will override the position of the tour component in relation to the selector that is determined by the application. + */ + position?: 'left' | 'right' | 'top' | 'topLeft' | 'bottom' | 'bottomLeft'; + } + + interface TourProps extends HTMLAttributes { + /** + A boolean value representing whether or not the tour should currently be displayed + */ + active: boolean; + /** + An integer representing the current active step of the tour + */ + step: number; + /** + function that fires when user clicks the Next button. + Receives the next step integer as a callback. + For example, if current step is 1 and user clicks the Next button, onNext(2) will be called. + */ + onNext: Function; + /** + function that fires when user clicks the Back button. + Receives the previous step integer as a callback. + For example, if current step is 2 and user clicks the Back button, onBack(1) will be called. + */ + onBack: Function; + /** + function that fires when user clicks the X button or the Done Button. + */ + onCancel: Function; + /** + An array of TourStep. + */ + steps: TourStep[]; + /** + Optional style object. + */ + style?: any; + /** + Optional style object for buttons displayed on component. + */ + buttonStyle?: any; + /** + Optional style object for the container div around the buttons. + */ + buttonContainerStyle?: any; + /** + We provide an arrow that points to the selector, but you may optionally pass in your own React element in the place of the arrow provided. + */ + arrow?: any; + /** + If you choose to use the provided arrow, you can set the pixel size here with an integer value. + */ + arrowSize?: number; + /** + If you choose to use the provided arrow, you can set the color here by passing in a hex value. + */ + arrowColor?: string; + /** + Text that will appear on the button that moves the tour forward. + Defaults to Next + */ + nextButtonText?: string; + /** + Text that will appear on the button that moves the tour backwards. + Defaults to Back + */ + backButtonText?: string; + /** + Text that will appear on the button that finishes the tour. + Defaults to Done + */ + doneButtonText?: string; + /** + Text that will appear on the button that closes the tour. + Defaults to Close + */ + closeButtonText?: string; + /** + Boolean to disable the showing of next/back/done buttons. + Set this to true if you want to insert your own buttons in the body. + */ + hideButtons?: boolean; + /** + Boolean to disable the showing of the close text in the upper left of + the component. Set this to true if you want to insert your own close + functionality or if you would like to disable the ability for the user + to prematurely exit the tour. + */ + hideClose?: boolean; + } + + var ReactUserTour: ComponentClass; + export default ReactUserTour; +}