diff --git a/types/react-interactive/index.d.ts b/types/react-interactive/index.d.ts new file mode 100644 index 0000000000..322573e7c0 --- /dev/null +++ b/types/react-interactive/index.d.ts @@ -0,0 +1,82 @@ +// Type definitions for react-interactive 0.9 +// Project: https://github.com/rafrex/react-interactive +// Definitions by: Daniel Santoro +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import { ReactNode, ReactElement, Component, SyntheticEvent, CSSProperties } from 'react'; + +export {}; + +export type IState = 'normal' | 'hover' | 'hoverActive' | 'touchActive' | 'keyActive'; +export type Focus = false | 'tab' | 'mouse' | 'touch'; +export type ClickType = "mouseClick" | "tapClick" | "keyClick"; + +export type State = {focus: Focus, iState: IState}; + +type ActiveProps = { + active?: CSSProperties; +} | { + hoverActive?: CSSProperties; + touchActive?: CSSProperties; + keyActive?: CSSProperties; +}; + +type FocusProps = { + focus?: CSSProperties; +} | { + focusFromTab?: CSSProperties; + focusFromMouse?: CSSProperties; + focusFromTouch?: CSSProperties; +}; + +export type InteractiveProps = FocusProps & ActiveProps & { + // as: string | Component | ReactElement; + as: any; + + hover?: CSSProperties; + + style?: CSSProperties; + + className?: string; + + onStateChange?: (arg0: {prevState: State, nextState: State, event: SyntheticEvent}) => void; + + setStateCallback?: (arg0: {prevState: State, nextState: State}) => void; + + onClick?: (event: SyntheticEvent, clickType: ClickType) => void; + + onTapTwo?: (event: Event) => void; + onTapThree?: (event: Event) => void; + onTapFour?: (event: Event) => void; + + tapTimeCutoff?: number; + + onLongPress?: (event: Event) => void; + + touchActiveTapOnly?: boolean; + + extraTouchNoTap?: boolean; + + nonContainedChild?: boolean; + + initialState?: State; + + forceState?: State; + + styleProperty?: object; + + refDOMNode?: (node: any) => any; // Not sure about this type + + focusToggleOff?: boolean; + + mutableProps?: boolean; + + interactiveChild?: boolean; + + wrapperStyle?: CSSProperties; + + wrapperClassName?: string; +}; + +export default class Interactive extends Component {} diff --git a/types/react-interactive/react-interactive-tests.tsx b/types/react-interactive/react-interactive-tests.tsx new file mode 100644 index 0000000000..1d6cc05ca9 --- /dev/null +++ b/types/react-interactive/react-interactive-tests.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; +import Interactive, { State } from 'react-interactive'; + +class InteractiveDiv extends React.Component { + private handleInteractiveStateChange(arg0: {prevState: State, nextState: State, event: React.SyntheticEvent}): void {} + private handleClick(e: React.SyntheticEvent): void {} + + render() { + return (This is an interactive and focusable div); + } +} + +export default InteractiveDiv; diff --git a/types/react-interactive/tsconfig.json b/types/react-interactive/tsconfig.json new file mode 100644 index 0000000000..0bc00db626 --- /dev/null +++ b/types/react-interactive/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "preserve" + }, + "files": [ + "index.d.ts", + "react-interactive-tests.tsx" + ] +} diff --git a/types/react-interactive/tslint.json b/types/react-interactive/tslint.json new file mode 100644 index 0000000000..4fbbc11fc6 --- /dev/null +++ b/types/react-interactive/tslint.json @@ -0,0 +1,6 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "interface-over-type-literal": false + } +}