diff --git a/types/react-native-multi-slider/index.d.ts b/types/react-native-multi-slider/index.d.ts new file mode 100644 index 0000000000..a3a5f39c63 --- /dev/null +++ b/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 +// 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; + + /** + * 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 {} diff --git a/types/react-native-multi-slider/react-native-multi-slider-tests.tsx b/types/react-native-multi-slider/react-native-multi-slider-tests.tsx new file mode 100644 index 0000000000..1bb7a3ad4f --- /dev/null +++ b/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 ( + + + + + + } + sliderLength={280} + /> + + ); + } +} diff --git a/types/react-native-multi-slider/tsconfig.json b/types/react-native-multi-slider/tsconfig.json new file mode 100644 index 0000000000..c67d12e21d --- /dev/null +++ b/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" + ] +} diff --git a/types/react-native-multi-slider/tslint.json b/types/react-native-multi-slider/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-native-multi-slider/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }