Creating rc-slider typescript definition file (#14887)

* Initial

* Rc-slider typings

* Adhering to linting rules

* linting rules

* Tests

* Fixing tests and missed commit stuff

* Referencing react instead of importing it

* Undoing last change

* Marks types fixed

* Test fix

* Review changes. Added tests to Handle

rc-slider/README.md

@@ -0,0 +1,13 @@
+# Installation
+> `npm install --save @types/rc-select`
+
+# Summary
+This package contains type definitions for rc-slider (https://github.com/react-component/slider).
+
+Additional Details
+ * Last updated: Tue, 24 Feb 2017
+ * Dependencies: react
+ * Global values: none
+
+# Credits
+These definitions were written by Marcinkus Mantas <https://github.com/mantasmarcinkus/>

rc-slider/index.d.ts

@@ -0,0 +1,156 @@
+// Type definitions for rc-slider 6.1
+// Project: https://github.com/react-component/slider
+// Definitions by: Marcinkus Mantas <https://github.com/mantasmarcinkus/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
+
+import * as React from 'react';
+
+declare namespace RcSliderClass {
+    export interface Marks {
+        [number: number]: JSX.Element | string | { style: any, label: string | JSX.Element };
+    }
+
+    export interface CommonApiProps {
+        /**
+         * Additional CSS class for the root DOM node
+         *  @default ''
+         */
+        className?: string;
+        /**
+         * The minimum value of the slider
+         *  @default 0
+         */
+        min?: number;
+        /**
+         * The maximum value of the slider
+         *  @default 100
+         */
+        max?: number;
+        /**
+        * Marks on the slider. The key determines the position, and the value determines what will show.
+        * If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.
+        *  @default '{}' | {number: { style, label }}
+        */
+        marks?: Marks;
+        /**
+        * Value to be added or subtracted on each step the slider makes. Must be greater than zero, and max - min should be evenly divisible by the step value.
+        *  @default 1
+        */
+        step?: number;
+        /**
+         * If vertical is true, the slider will be vertical.
+         * @default false
+         */
+        vertical?: boolean;
+        /**
+         * A handle generator which could be used to customized handle.
+         */
+        handle?(props: any): React.ReactNode;
+        /**
+         * If the value is true, it means a continuous value interval, otherwise, it is a independent value.
+         *  @default true
+         */
+        included?: boolean;
+        /**
+         * If true, handles can't be moved.
+         *  @default false
+         */
+        disabled?: boolean;
+        /**
+         * When the step value is greater than 1, you can set the dots to true if you want to render the slider with dots.
+         *  @default false
+         */
+        dots?: boolean;
+        /**
+         * onBeforeChange will be triggered when ontouchstart or onmousedown is triggered.
+         */
+        onBeforeChange?: (value: any) => any | undefined;
+        /**
+         * onChange will be triggered while the value of Slider changing.
+         */
+        onChange?: (value: any) => any | undefined;
+        /**
+         * onAfterChange will be triggered when ontouchend or onmouseup is triggered.
+         */
+        onAfterChange?: (value: any) => any | undefined;
+
+        /**
+         * @deprecated in version ^6.0.0. Use rc-tooltip
+         * Tooltip transition class name
+         */
+        tipTransitionName?: string;
+
+        /**
+         * @deprecated in version ^6.0.0. Use rc-tooltip
+         * Tooltip formatter
+         */
+        tipFormatter?: ((value: any) => any | undefined) | null;
+    }
+
+    interface SliderProps extends CommonApiProps {
+        /**
+         * Set initial value of slider.
+         *  @default 0
+         */
+        defaultValue?: number;
+        /**
+         * Set current value of slider.
+         */
+        value?: number;
+    }
+
+
+    export interface RangeProps extends CommonApiProps {
+        /**
+         * Set initial positions of handles.
+         *  @default [0,0]
+         */
+        defaultValue?: number[];
+        /**
+         * Set current positions of handles.
+         */
+        value?: number[];
+        /**
+         * Determine how many ranges to render, and multiple handles will be rendered (number + 1).
+         *  @default 1
+         */
+        count?: number;
+        /**
+         * allowCross could be set as true to allow those handles to cross.
+         *  @default true
+         */
+        allowCross?: boolean;
+        /**
+         * pushable could be set as true to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles.
+         *  @default true
+         */
+        pushable?: boolean;
+    }
+
+    export interface HandleProps extends CommonApiProps {
+        /**
+         * Class name
+         */
+        className: string;
+        /**
+         * Styling if true, then bottom: {offset} else left: {offset}
+         * @default False
+         */
+        vertical: boolean;
+        /**
+         * Styling option offset
+         */
+        offset: number;
+    }
+}
+
+declare class RcSliderClass extends React.Component<RcSliderClass.SliderProps, {}> { }
+
+declare namespace RcSliderClass {
+    class Range extends React.Component<RcSliderClass.RangeProps, {}> { }
+    class Handle extends React.Component<RcSliderClass.HandleProps, {}> { }
+}
+
+
+export = RcSliderClass;

rc-slider/rc-slider-tests.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as Slider from 'rc-slider';
+import { Range, Handle } from 'rc-slider';
+
+ReactDOM.render(
+    <Slider defaultValue={1} max={2} step={0.01} min={0.01} />,
+    document.querySelector('.app')
+);
+
+ReactDOM.render(
+    <Handle
+        className="bottom"
+        vertical={true}
+        offset={10}
+    />,
+    document.querySelector('.another-app')
+);
+ReactDOM.render(
+    <Slider
+        className="bottomRight"
+        min={0.01}
+        max={1}
+        marks={{ 1: "1" }}
+        step={0.01}
+        vertical={true}
+        handle={() => { return <Slider /> }}
+        included={true}
+        disabled={false}
+        dots={true}
+        onBeforeChange={() => { }}
+        onChange={() => { }}
+        onAfterChange={() => { }}
+        defaultValue={0.1}
+        value={0.1}
+    />,
+    document.querySelector('.another-app')
+);
+
+ReactDOM.render(
+    <Range
+        defaultValue={[0, 1]}
+        value={[0, 1]}
+        count={3}
+        allowCross={false}
+        pushable={true} />,
+    document.querySelector('.app')
+);

rc-slider/tsconfig.json

@@ -0,0 +1,24 @@
+ {
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+       "index.d.ts",
+       "rc-slider-tests.tsx"
+    ]
+}

rc-slider/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tslint.json"
+}