Merge pull request #25812 from Slessi/typings/react-native-multi-slider

Typings for react-native-multi-slider

types/react-native-multi-slider/index.d.ts

@@ -0,0 +1,145 @@
+// Type definitions for react-native-multi-slider 0.3
+// Project: https://github.com/JackDanielsAndCode/react-native-multi-slider#readme
+// Definitions by: Edward Sammut Alessi <https://github.com/Slessi>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.6
+
+import * as React from "react";
+import { ViewStyle } from "react-native";
+
+export interface MarkerProps {
+    pressed?: number;
+    markerStyle?: ViewStyle;
+    pressedMarkerStyle?: ViewStyle;
+    value?: number;
+}
+
+export interface MultiSliderProps {
+    /**
+     * An array containing one or two values (determines one or two markers respectively) that are the initial marker values.
+     * Note these must be possible values from your set up.
+     *
+     * Default [0]
+     */
+    values?: number[];
+
+    /**
+     * Function to be called at beginning of press
+     */
+    onValuesChangeStart?: () => void;
+
+    /**
+     * Function called after every change in value, with current values passed in as an array.
+     */
+    onValuesChange?: (change: number[]) => void;
+
+    /**
+     * Function called on end of press with final values passed in as an array
+     */
+    onValuesChangeFinish?: (change: number[]) => void;
+
+    /**
+     * Width of track
+     *
+     * Default 280
+     */
+    sliderLength?: number;
+
+    /**
+     * TODO
+     */
+    sliderOrientation?: "horizontal" | "vertical";
+
+    /**
+     * Area to be touched, should enclose the whole marker.
+     * Will be automatically centered and contain the marker.
+     * Slip displacement If finger leaves the marker measures distance before responder cuts out and changes are no
+     * longer registered, if not given marker will be active until pressed released.
+     */
+    touchDimensions?: {
+        height: number;
+        width: number;
+        borderRadius: number;
+        slipDisplacement: number;
+    };
+
+    customMarker?: React.ComponentType<MarkerProps>;
+
+    /**
+     * Slider min value corresponding to far left
+     *
+     * Default 0
+     */
+    min?: number;
+
+    /**
+     * Slider max value corresponding to far right
+     *
+     * Default 10
+     */
+    max?: number;
+
+    /**
+     * The step size between values. Make sure min max range is divisible by this to get expected results
+     *
+     * Default 1
+     */
+    step?: number;
+
+    /**
+     * Array of values corresponding to the slider's position (left to right on slider index 0 to end respectively).
+     * Values of any type can be inserted and the slider will simply give them back in the callbacks
+     */
+    optionsArray?: number[];
+
+    /**
+     * Style of sliders container, note be careful in applying styles that may affect the children's (i.e. the slider's) positioning
+     *
+     * Default { height: 30 }
+     */
+    containerStyle?: ViewStyle;
+
+    /**
+     * Customise the track
+     *
+     * Default { borderRadius: 7, height: 3.5 }
+     */
+    trackStyle?: ViewStyle;
+
+    /**
+     * Style for the track up to a single marker or between double markers
+     *
+     * Default { backgroundColor: 'blue' }
+     */
+    selectedStyle?: ViewStyle;
+
+    /**
+     * Style for remaining track
+     *
+     * Default { backgroundColor: 'grey' }
+     */
+    unselectedStyle?: ViewStyle;
+
+    /**
+     * Customise the marker's style
+     *
+     * Default {
+     *     height:30,
+     *     width: 30,
+     *     borderRadius: 15,
+     *     backgroundColor:'#E8E8E8',
+     *     borderWidth: 0.5,
+     *     borderColor: 'grey',
+     * }
+     */
+    markerStyle?: ViewStyle;
+
+    /**
+     * Style to be given to marker when pressed
+     *
+     * Default { backgroundColor:'#D3D3D3' }
+     */
+    pressedMarkerStyle?: ViewStyle;
+}
+
+export default class MultiSlider extends React.Component<MultiSliderProps> {}

types/react-native-multi-slider/react-native-multi-slider-tests.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { View } from "react-native";
+import MultiSlider from "react-native-multi-slider";
+
+class SliderTest extends React.Component {
+    getInitialState() {
+        return {
+            sliderOneChanging: false,
+            sliderOneValue: [ 5 ],
+        };
+    }
+
+    SliderOneValuesChangeStart() {
+        return true;
+    }
+
+    SliderOneValuesChange(values: number[]) {
+        return values[0];
+    }
+
+    SliderOneValuesChangeFinish() {
+        return false;
+    }
+
+    /**
+     * Examples as from https://github.com/JackDanielsAndCode/react-native-multi-slider/blob/master/index.ios.js
+     */
+    render() {
+        return (
+            <React.Fragment>
+                <MultiSlider
+                    values={[ 5 ]}
+                    sliderLength={280}
+                    onValuesChangeStart={this.SliderOneValuesChangeStart}
+                    onValuesChange={this.SliderOneValuesChange}
+                    onValuesChangeFinish={this.SliderOneValuesChangeFinish}
+                />
+
+                <MultiSlider values={[ 3, 7 ]} sliderLength={280} />
+
+                <MultiSlider
+                    selectedStyle={{
+                        backgroundColor: "gold",
+                    }}
+                    unselectedStyle={{
+                        backgroundColor: "silver",
+                    }}
+                    values={[ 5 ]}
+                    containerStyle={{
+                        height: 40,
+                    }}
+                    trackStyle={{
+                        height: 10,
+                        backgroundColor: "red",
+                    }}
+                    touchDimensions={{
+                        height: 40,
+                        width: 40,
+                        borderRadius: 20,
+                        slipDisplacement: 40,
+                    }}
+                    customMarker={(props) => <View {...props} />}
+                    sliderLength={280}
+                />
+            </React.Fragment>
+        );
+    }
+}

types/react-native-multi-slider/tsconfig.json

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

types/react-native-multi-slider/tslint.json

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