typescript definitions file

[alihammad-gist]

here is type definition file for this package for anyone looking for it.

/// <reference path='../react/react.d.ts' />

declare namespace __RCS {
    import React = __React;

    interface positionValues {
        top: number
        left: number
        clientWidth: number
        clientHeight: number
        scrollWidth: number
        scrollHeight: number
        scrollLeft: number
        scrollTop: number
    }

    interface props extends React.HTMLProps<ScrollBar> {
        onScroll?: React.UIEventHandler
        onScrollFrame?: (values: positionValues) => void
        onScrollStart?: () => void
        onScrollStop?: () => void
        onUpdate?: (values: positionValues) => void

        renderView?: React.StatelessComponent<any>
        renderTrackHorizontal?: React.StatelessComponent<any>
        renderTrackVertical?: React.StatelessComponent<any>
        renderThumbHorizontal?: React.StatelessComponent<any>
        renderThumbVertical?: React.StatelessComponent<any>

        autoHide?: boolean
        autoHideTimeout?: number
        autoHideDuration?: number

        thumbSize?: number
        thumbMinSize?: number
        universal?: boolean
    }

    class ScrollBar extends React.Component<props, {}> {
        scrollTop(top: number)
        scrollLeft(left: number)
        scrollToTop()
        scrollToBottom()
        scrollToLeft()
        scrollToRight()
        getScrollLeft(): number
        getScrollTop(): number
        getScrollWidth(): number
        getScrollHeight(): number
        getWidth(): number
        getHeight(): number
        getValues(): positionValues
    }
}

declare module 'react-custom-scrollbars' {
    var Scrollbars: typeof __RCS.ScrollBar;
    export {
        Scrollbars,
    }
}

[malte-wessel]

I'm not familiar with typescript, but would it make sense to ship this file with react-custom-scrollbars? If so, would you mind to make a pull request?

[alihammad-gist]

I am sorry for replying late. People usually organize type-definition files separately. Though you can also provide them with your package which i have no experience with. If you want I can send a pull request with react-custom-scrollbars type-definition and definition test file to the main type-definition repository (definitelyTyped)?

[malte-wessel]

yes, that would be great!

[jombie]

Thanks @alihammad-gist ,
This is great.
I tried it using with typings and added the files manually in typings/ dir, it works with one change

From
/// <reference path='../react/react.d.ts' />
To
/// <reference path='../react/index.d.ts' />

Usage

mkdir -p  typings/browser/ambient/react-custom-scrollbars typings/main/ambient/react-custom-scrollbars
vim typings/browser/ambient/react-custom-scrollbars/index.d.ts 
#Add contents from above

vim typings/main/ambient/react-custom-scrollbars/index.d.ts
#Add contents from above

vim typings/browser.d.ts
/// <reference path="browser/ambient/react-custom-scrollbars/index.d.ts" />

vim typings/main.d.ts
/// <reference path="main/ambient/react-custom-scrollbars/index.d.ts" />

@malte-wessel
Also it would be great if this can be pushed to central typings directory.
Reference for the same : typings registry

[camwest]

You should host the typings with the library and use the "typings" key in the package.json. See https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Typings%20for%20NPM%20Packages.md for details

[malte-wessel]

Thanks, I'll see what I can do

[yvo-niedrich]

Here is an updated TypeScript Definition for noImplicitAny:

declare namespace __RCS {
    import React = __React;

    interface positionValues {
        top: number;
        left: number;
        clientWidth: number;
        clientHeight: number;
        scrollWidth: number;
        scrollHeight: number;
        scrollLeft: number;
        scrollTop: number;
    }

    interface props extends React.HTMLProps<ScrollBar> {
        onScroll?: React.UIEventHandler;
        onScrollFrame?: (values: positionValues) => void;
        onScrollStart?: () => void;
        onScrollStop?: () => void;
        onUpdate?: (values: positionValues) => void;

        renderView?: React.StatelessComponent<any>;
        renderTrackHorizontal?: React.StatelessComponent<any>;
        renderTrackVertical?: React.StatelessComponent<any>;
        renderThumbHorizontal?: React.StatelessComponent<any>;
        renderThumbVertical?: React.StatelessComponent<any>;

        autoHide?: boolean;
        autoHideTimeout?: number;
        autoHideDuration?: number;

        thumbSize?: number;
        thumbMinSize?: number;
        universal?: boolean;
    }

    class ScrollBar extends React.Component<props, {}> {
        scrollTop(top: number): void;
        scrollLeft(left: number): void;
        scrollToTop(): void;
        scrollToBottom(): void;
        scrollToLeft(): void;
        scrollToRight(): void;
        getScrollLeft(): number;
        getScrollTop(): number;
        getScrollWidth(): number;
        getScrollHeight(): number;
        getWidth(): number;
        getHeight(): number;
        getValues(): positionValues;
    }
}

declare module 'react-custom-scrollbars' {
    var Scrollbars: typeof __RCS.ScrollBar;
    export {
        Scrollbars,
    }
}

Is the coupled distribution of the definition still planned?

Edit: If you still want a pull request for the initial integration of the definition, i could prepare it next weekend.

[d-leb]

I followed the instructions that @jombie gave, but I can't get it to compile. I am using TypeScript 2.1 and up until now, typings was not setup in my project since I use npm @types instead.

So, I made a minor change and created a @types/react-custom-scrollbars/index.d.ts file:

import * as React from "react";

declare module "react-custom-scrollbars" {

    export interface positionValues {
        top: number;
        left: number;
        clientWidth: number;
        clientHeight: number;
        scrollWidth: number;
        scrollHeight: number;
        scrollLeft: number;
        scrollTop: number;
    }

    export interface ScrollbarProps extends React.HTMLProps<Scrollbars> {
        onScroll?: React.UIEventHandler<any>;
        onScrollFrame?: (values: positionValues) => void;
        onScrollStart?: () => void;
        onScrollStop?: () => void;
        onUpdate?: (values: positionValues) => void;

        renderView?: React.StatelessComponent<any>;
        renderTrackHorizontal?: React.StatelessComponent<any>;
        renderTrackVertical?: React.StatelessComponent<any>;
        renderThumbHorizontal?: React.StatelessComponent<any>;
        renderThumbVertical?: React.StatelessComponent<any>;

        autoHide?: boolean;
        autoHideTimeout?: number;
        autoHideDuration?: number;

        thumbSize?: number;
        thumbMinSize?: number;
        universal?: boolean;
    }

    export default class Scrollbars extends React.Component<ScrollbarProps, {}> {
        scrollTop(top: number): void;
        scrollLeft(left: number): void;
        scrollToTop(): void;
        scrollToBottom(): void;
        scrollToLeft(): void;
        scrollToRight(): void;
        getScrollLeft(): number;
        getScrollTop(): number;
        getScrollWidth(): number;
        getScrollHeight(): number;
        getWidth(): number;
        getHeight(): number;
        getValues(): positionValues;
    }
}

To reference it from a project file:

import Scrollbars from "react-custom-scrollbars";

I am very new to hacking up ts definition files (this was my first without directly using types or npm). So bare with me if I am doing something fundamentally wrong. Is this something that could be pushed to npm?

Edit: I updated the code above to allow an import statement rather than a require.

[ruslanchek]

You deleted typings from a repository?
I've got this error '@types/react-custom-scrollbars' is not in the npm registry.

[d-leb]

It has never been published to the npm registry (yet). For now, you can grab one of the above snippets.

I think this is why this issue hasn't been closed yet.

[yvo-niedrich]

I have created a pull request to add the definition file to the repo and subsequently to the npm package.

[ruslanchek]

I have created a pull request to add the definition file to the repo and subsequently to the npm package.

Ooops, me too :-)