Merge pull request #16177 from GiedriusGrabauskas/react-scroll

Recreated types for react-scroll@1.5

types/react-scroll/index.d.ts

@@ -1,67 +1,9 @@
-// Type definitions for react-scroll
+// Type definitions for react-scroll 1.5
 // Project: https://github.com/fisshy/react-scroll
-// Definitions by: Ioannis Kokkinidis <www.github.com/sudoplz>
+// Definitions by: Ioannis Kokkinidis <https://github.com/sudoplz>
+//                 Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.1
+// TypeScript Version: 2.2
 
-import * as React from 'react';
-
-interface Link extends React.ClassicComponentClass<any> { }
-interface Element extends React.ClassicComponentClass<any> { }
-interface Button extends React.ClassicComponentClass<any> {}
-interface DirectLink extends React.ClassicComponentClass<any> {}
-
-interface scrollEvnt {
-    register(evtName: string, callback: Function): void,
-    remove(evtName: string): void
-}
-
-interface Events {
-    scrollEvent: scrollEvnt
-}
-
-interface scroller {
-    scrollTo(to: any, animate?: any, duration?: any, offset?: any): void
-}
-
-interface scrollSpy {
-    update() : void
-}
-
-interface animateScroll {
-    scrollToTop(options?: any) : void,
-    scrollToBottom(options?: any) : void,
-    scrollTo(toY: number, options?: any) : void,
-    scrollMore(toY: number, options?: any) : void,
-}
-
-interface directScroller {
-    get() : any
-}
-
-interface Helpers {
-}
-
-declare const Link: Link;
-declare const Element: Element;
-declare const Events: Events;
-declare const scroller: scroller;
-declare const DirectLink: DirectLink;
-declare const Button: Button;
-declare const scrollSpy: scrollSpy;
-declare const directScroller: directScroller;
-declare const Helpers: Helpers;
-declare const animateScroll: animateScroll;
-
-export {
-    Link,
-    Element,
-    Events,
-    scroller,
-    scrollSpy,
-    directScroller,
-    DirectLink,
-    Button,
-    Helpers,
-    animateScroll
-}
+import * as ReactScroll from "./modules/index";
+export = ReactScroll;

types/react-scroll/modules/components/Button.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { ReactScrollLinkProps } from "./Link";
+
+export type ButtonProps = ReactScrollLinkProps & React.HTMLProps<HTMLButtonElement>;
+
+export default class Button extends React.Component<ButtonProps, any> { }

types/react-scroll/modules/components/Element.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export interface ElementProps extends React.HTMLProps<HTMLDivElement> {
+    name: string;
+    id?: string;
+}
+
+export default class Element extends React.Component<ElementProps, any> { }

types/react-scroll/modules/components/Link.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+export interface ReactScrollLinkProps {
+    to: string;
+    containerId?: string;
+    activeClass?: string;
+    spy?: boolean;
+    smooth?: boolean | string;
+    offset?: number;
+    delay?: number;
+    isDynamic?: boolean;
+    onClick?(): void;
+    duration?: number | string;
+    absolute?: boolean;
+    onSetActive?(to: string): void;
+    onSetInactive?(): void;
+    ignoreCancelEvents?: boolean;
+}
+
+export type LinkProps = ReactScrollLinkProps & React.HTMLProps<HTMLButtonElement>;
+
+export default class Link extends React.Component<LinkProps, any> { }

types/react-scroll/modules/index.d.ts

@@ -0,0 +1,14 @@
+export { default as Button } from "./components/Button";
+export { default as Element } from "./components/Element";
+export { default as Link } from "./components/Link";
+export { Helpers } from "./mixins/Helpers";
+export { default as Events } from "./mixins/scroll-events";
+export { default as scrollSpy } from "./mixins/scroll-spy";
+
+import * as scroller from "./mixins/scroller";
+import * as animateScroll from "./mixins/animate-scroll";
+
+export {
+    animateScroll,
+    scroller
+};

types/react-scroll/modules/mixins/Helpers.d.ts

@@ -0,0 +1,4 @@
+export namespace Helpers {
+    function Scroll(component: any, customScroller?: any): any;
+    function Element(component: any): any;
+}

types/react-scroll/modules/mixins/animate-scroll.d.ts

@@ -0,0 +1,6 @@
+export function animateTopScroll(y: number, options: any, to: string, target: any): void;
+export function getAnimationType(options: { smooth: boolean | string }): (x: number) => number;
+export function scrollToTop(options?: any): void;
+export function scrollToBottom(options?: any): void;
+export function scrollTo(toY: number, options?: any): void;
+export function scrollMore(toY: number, options?: any): void;

types/react-scroll/modules/mixins/scroll-events.d.ts

@@ -0,0 +1,11 @@
+declare namespace Events {
+    interface ScrollEvent {
+        register(eventName: string, callback: (to: string, element: any) => void): void;
+        remove(eventName: string): void;
+    }
+
+    const registered: {};
+    const scrollEvent: ScrollEvent;
+}
+
+export default Events;

types/react-scroll/modules/mixins/scroll-spy.d.ts

@@ -0,0 +1,17 @@
+interface ScrollSpy {
+    update(): void;
+    unmount(stateHandler: any, spyHandler: any): void;
+    updateStates(): void;
+    addSpyHandler(handler: any, scrollSpyContainer: any): void;
+    addStateHandler(handler: any): void;
+    scrollHandler(scrollSpyContainer: any): void;
+    currentPositionY(scrollSpyContainer: any): number;
+    isMounted(scrollSpyContainer: any): boolean;
+    mount(scrollSpyContainer: any): void;
+    spyCallbacks: any[];
+    spySetState: any[];
+    scrollSpyContainers: any[];
+}
+
+declare const scrollSpy: ScrollSpy;
+export default scrollSpy;

types/react-scroll/modules/mixins/scroller.d.ts

@@ -0,0 +1,7 @@
+export function unmount(): void;
+export function register(name: string, element: any): void;
+export function unregister(name: string): void;
+export function get(name: string): any;
+export function setActiveLink(link: string): void;
+export function getActiveLink(): string;
+export function scrollTo(to: string, props: any): void;

types/react-scroll/react-scroll-tests.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { Link, Element, scroller } from 'react-scroll';
-
-let link = <Link to="test" />;
-let element = <Element name="test" />;
-
-scroller.scrollTo("test");

types/react-scroll/test/react-scroll-tests.tsx

@@ -0,0 +1,138 @@
+import * as React from "react";
+import { Link, Button, animateScroll, Helpers, Events, Element, scrollSpy, scroller } from "react-scroll";
+
+Events.scrollEvent.register('begin', (to, element) => {
+    console.log("begin");
+});
+
+Events.scrollEvent.register('end', (to, element) => {
+    console.log("end");
+});
+
+scrollSpy.update();
+
+Events.scrollEvent.remove('begin');
+Events.scrollEvent.remove('end');
+
+const smothOptions = {
+    a: "",
+    smooth: false
+};
+animateScroll.getAnimationType(smothOptions);
+animateScroll.scrollToTop();
+animateScroll.scrollTo(100);
+animateScroll.scrollMore(100);
+
+const linkTest1 = <Link
+    activeClass="active"
+    to="test1"
+    spy={true}
+    smooth={true}
+    offset={50}
+    duration={500}
+    onSetActive={(to) => { console.log(to); }}
+>
+    Test 1
+</Link>;
+
+const LinkTest2 = <Link
+    activeClass="active"
+    to="test1"
+    spy={true}
+    smooth={true}
+    offset={50}
+    duration={500}
+    delay={1000}
+>
+    Test 2 (delay)
+</Link>;
+
+const linkTest3 = <Link
+    className="test6"
+    to="anchor"
+    spy={true}
+    smooth={true}
+    duration={500}
+>
+    Test 6 (anchor)
+</Link>;
+
+const buttonTest = <Button
+    activeClass="active"
+    className="btn"
+    type="submit"
+    value="Test 2"
+    to="test2"
+    spy={true}
+    smooth={true}
+    offset={50}
+    duration={500}
+>
+    Test 2
+</Button>;
+
+const elementTest = <Element name="test1" className="element">
+    test 1
+</Element>;
+
+const linkTest4 = <Link to="firstInsideContainer" containerId="containerElement">
+    Go to first element inside container
+</Link>;
+
+const linkTest5 = <Link activeClass="active"
+    to="target"
+    spy={true}
+    smooth={true}
+    offset={50}
+    duration={500}
+    delay={1000}
+    isDynamic={true}
+    onSetActive={to => { console.log(to); }}
+    onSetInactive={() => { }}
+    ignoreCancelEvents={false}
+>
+    Your name
+</Link>;
+
+const options = {} as any;
+animateScroll.scrollToTop(options);
+animateScroll.scrollToBottom(options);
+animateScroll.scrollTo(100, options);
+
+scroller.scrollTo('myScrollToElement', {
+    duration: 1500,
+    delay: 100,
+    smooth: true,
+    containerId: 'ContainerElementID'
+});
+
+animateScroll.scrollMore(10, options);
+
+Events.scrollEvent.register('begin', (to, element) => {
+    console.log("begin", to, element);
+});
+
+Events.scrollEvent.register('end', (to, element) => {
+    console.log("end", to, element);
+});
+
+Events.scrollEvent.remove('begin');
+Events.scrollEvent.remove('end');
+
+class CustomComponent extends React.Component<{}, {}> {
+    render() {
+        return <div>
+            {this.props.children}
+        </div>;
+    }
+}
+
+const CustomElement = Helpers.Element(CustomComponent);
+const CustomLink = Helpers.Scroll(CustomComponent);
+
+scroller.scrollTo('myScrollToElement', {
+    duration: 1500,
+    delay: 100,
+    smooth: "easeInOutQuint",
+    containerId: 'ContainerElementID'
+});

types/react-scroll/tsconfig.json

@@ -7,7 +7,7 @@
         ],
         "noImplicitAny": true,
         "noImplicitThis": true,
-        "strictNullChecks": false,
+        "strictNullChecks": true,
         "baseUrl": "../",
         "jsx": "react",
         "typeRoots": [
@@ -19,6 +19,15 @@
     },
     "files": [
         "index.d.ts",
-        "react-scroll-tests.tsx"
+        "modules/index.d.ts",
+        "modules/components/Button.d.ts",
+        "modules/components/Element.d.ts",
+        "modules/components/Link.d.ts",
+        "modules/mixins/animate-scroll.d.ts",
+        "modules/mixins/Helpers.d.ts",
+        "modules/mixins/scroll-events.d.ts",
+        "modules/mixins/scroll-spy.d.ts",
+        "modules/mixins/scroller.d.ts",
+        "test/react-scroll-tests.tsx"
     ]
-}
+}

types/react-scroll/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }