* migrated to ts

 * touch problem inside the scrollview fixed

Author: githuboftigran

LabelContainer.js LabelContainer.tsxLabelContainer.js renamed to LabelContainer.tsx

@@ -6,7 +6,7 @@ class LabelContainer extends PureComponent {
   state = {
     value: Number.NaN,
   };
-
+  
   setValue = value => {
     this.setState({ value });
   }

README.md

@@ -66,26 +66,26 @@ const handleValueChange = useCallback((low, high) => {
 
 ### Properties
 
-| Name |      Description      | Type | Default Value |
-| --- | --- | --- | :-------------: |
-| `min` |  Minimum value of slider | number | _**required**_ |
-| `max` |  Maximum value of slider | number | _**required**_ |
-| `minRange` |  Minimum range of thumbs allowed to be selected **by the user**.<br/>**Note:** it is still possible to set values closer to each other than `minRange` programmatically.<br/>If `disableRange` is set to true, maximum value allowed for user will be `max` - `minRange`. | number | `0` |
-| `step` |  Step of slider | number | `1` |
-| `low` |  Low value of slider | number | Initially `min` value will be set if not provided |
-| `high` |  High value of slider | number | Initially `max` value will be set if not provided |
-| `floatingLabel` |  If set to `true`, labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup). | boolean | `false` |
-| `disableRange` | Slider works as an ordinary slider with 1 control if `true` | boolean | `false` |
-| `disabled` | Any user interactions will be ignored if `true` | boolean | `false` |
+| Name                 |      Description      | Type | Default Value |
+|----------------------| --- | --- | :-------------: |
+| `min`                |  Minimum value of slider | number | _**required**_ |
+| `max`                |  Maximum value of slider | number | _**required**_ |
+| `minRange`           |  Minimum range of thumbs allowed to be selected **by the user**.<br/>**Note:** it is still possible to set values closer to each other than `minRange` programmatically.<br/>If `disableRange` is set to true, maximum value allowed for user will be `max` - `minRange`. | number | `0` |
+| `step`               |  Step of slider | number | `1` |
+| `low`                |  Low value of slider | number | Initially `min` value will be set if not provided |
+| `high`               |  High value of slider | number | Initially `max` value will be set if not provided |
+| `floatingLabel`      |  If set to `true`, labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup). | boolean | `false` |
+| `disableRange`       | Slider works as an ordinary slider with 1 control if `true` | boolean | `false` |
+| `disabled`           | Any user interactions will be ignored if `true` | boolean | `false` |
 | `allowLabelOverflow` | If set to `true`, labels are allowed to be drawn outside of slider component's bounds.<br/>Otherwise label's edges will never get out of component's edges. | boolean | `false` |
-| `renderThumb` | Should render the thumb. | `() => Node` | _**required**_ |
-| `renderRail` | Should render the "rail" for thumbs.<br/>Rendered component **should** have `flex: 1` style so it won't fill up the whole space. | `() => Node` | _**required**_ |
+| `renderThumb`        | Should render the thumb. | `() => Node` | _**required**_ |
+| `renderRail`         | Should render the "rail" for thumbs.<br/>Rendered component **should** have `flex: 1` style so it won't fill up the whole space. | `() => Node` | _**required**_ |
 | `renderRailSelected` | Should render the selected part of "rail" for thumbs.<br/>Rendered component **should not** have `flex: 1` style so it fills up the whole space. | `() => Node` | _**required**_ |
-| `renderLabel` | Should render label above thumbs.<br/>If no function is passed, no label will be drawn. | `(value: number) => Node` | `undefined` |
-| `renderNotch` | Should render the notch below the label (above the thumbs).<br/>Classic notch is a small triangle below the label.<br/>If `allowLabelOverflow` is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.| `() => Node` | `undefined` |
-| `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored.<br/>`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` |
-| `onTouchStart` | Will be called when user starts interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
-| `onTouchEnd` | Will be called when user ends interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
+| `renderLabel`        | Should render label above thumbs.<br/>If no function is passed, no label will be drawn. | `(value: number) => Node` | `undefined` |
+| `renderNotch`        | Should render the notch below the label (above the thumbs).<br/>Classic notch is a small triangle below the label.<br/>If `allowLabelOverflow` is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.| `() => Node` | `undefined` |
+| `onValueChanged`     | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored.<br/>`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` |
+| `onSliderTouchStart` | Will be called when user starts interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
+| `onSliderTouchEnd`   | Will be called when user ends interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
 
 All the other props (e.g. style) will be passed to root container component.
 

helpers.js helpers.tshelpers.js renamed to helpers.ts

@@ -1,4 +1,8 @@
-export const isLowCloser = (downX, lowPosition, highPosition) => {
+export const isLowCloser = (
+  downX: number,
+  lowPosition: number,
+  highPosition: number,
+): boolean => {
   if (lowPosition === highPosition) {
     return downX < lowPosition;
   }
@@ -7,11 +11,18 @@ export const isLowCloser = (downX, lowPosition, highPosition) => {
   return distanceFromLow < distanceFromHigh;
 };
 
-export const clamp = (value, min, max) => {
+export const clamp = (value: number, min: number, max: number): number => {
   return Math.min(Math.max(value, min), max);
 };
 
-export const getValueForPosition = (positionInView, containerWidth, thumbWidth, min, max, step) => {
+export const getValueForPosition = (
+  positionInView: number,
+  containerWidth: number,
+  thumbWidth: number,
+  min: number,
+  max: number,
+  step: number,
+): number => {
   const availableSpace = containerWidth - thumbWidth;
   const relStepUnit = step / (max - min);
   let relPosition = (positionInView - thumbWidth / 2) / availableSpace;