added logic to fix runAfterInteraction issue

Author: rick-nice

LabelContainer.tsx

@@ -1,24 +1,24 @@
-import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import React, {PureComponent, ReactNode} from 'react';
+import {View, ViewProps} from 'react-native';
 
-class LabelContainer extends PureComponent {
+type Props = ViewProps & {renderContent: (value: number) => ReactNode};
 
+type State = {
+  value: number;
+};
+class LabelContainer extends PureComponent<Props, State> {
   state = {
     value: Number.NaN,
   };
-  
-  setValue = value => {
-    this.setState({ value });
-  }
+
+  setValue = (value: number) => {
+    this.setState({value});
+  };
 
   render() {
-    const { renderContent, ...restProps } = this.props;
-    const { value } = this.state;
-    return (
-      <View {...restProps}>
-        {renderContent(value)}
-      </View>
-    );
+    const {renderContent, ...restProps} = this.props;
+    const {value} = this.state;
+    return <View {...restProps}>{renderContent(value)}</View>;
   }
 }
 

helpers.ts renamed to helpers/helpers.ts

@@ -0,0 +1,2 @@
+export * from './helpers';
+export * from './pan-responder-factory';

helpers/index.ts

@@ -0,0 +1,58 @@
+import { useRef } from 'react';
+import {
+  GestureResponderEvent,
+  PanResponder,
+  PanResponderCallbacks,
+  PanResponderGestureState,
+} from 'react-native';
+
+const trueFunc = () => true;
+const falseFunc = () => false;
+
+type Props = {
+  onPanResponderMove: NonNullable<PanResponderCallbacks['onPanResponderMove']>;
+  onPanResponderGrant: NonNullable<
+    PanResponderCallbacks['onPanResponderGrant']
+  >;
+  onPanResponderRelease: NonNullable<
+    PanResponderCallbacks['onPanResponderRelease']
+  >;
+};
+
+export class PanResponderFactory {
+  // external
+  private onPanResponderMove!: Props['onPanResponderMove'];
+  private onPanResponderGrant!: Props['onPanResponderGrant'];
+  private onPanResponderRelease!: Props['onPanResponderRelease'];
+
+  constructor(props: Props) {
+    this.updateValues(props);
+  }
+
+  public updateValues(props: Props) {
+    this.onPanResponderMove = props.onPanResponderMove;
+    this.onPanResponderGrant = props.onPanResponderGrant;
+    this.onPanResponderRelease = props.onPanResponderRelease;
+  }
+
+  public usePanResponder = () => {
+    const panResponder = useRef(
+      PanResponder.create({
+        onMoveShouldSetPanResponderCapture: falseFunc,
+        onPanResponderTerminationRequest: falseFunc,
+        onStartShouldSetPanResponderCapture: trueFunc,
+        onPanResponderTerminate: trueFunc,
+        onShouldBlockNativeResponder: trueFunc,
+        onMoveShouldSetPanResponder: (
+          evt: GestureResponderEvent,
+          gestureState: PanResponderGestureState,
+        ) => Math.abs(gestureState.dx) > 2 * Math.abs(gestureState.dy),
+        onPanResponderGrant: (...args) => this.onPanResponderGrant(...args),
+        onPanResponderMove: (...args) => this.onPanResponderMove(...args),
+        onPanResponderRelease: (...args) => this.onPanResponderRelease(...args),
+      }),
+    );
+
+    return panResponder.current;
+  };
+}

helpers/pan-responder-factory.ts

@@ -0,0 +1,5 @@
+export * from "./use-label-container-props";
+export * from "./use-low-high";
+export * from "./use-selected-rail";
+export * from "./use-thumb-follower";
+export * from "./use-width-layout";

hooks.tsx

@@ -0,0 +1,7 @@
+export interface InProps {
+  low: number;
+  high: number;
+  min: number;
+  max: number;
+  step: number;
+}

hooks/index.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+
+import styles from '../styles';
+
+/**
+ * @param floating
+ * @returns {{onLayout: ((function({nativeEvent: *}): void)|undefined), style: [*, {top}]}}
+ */
+export const useLabelContainerProps = (floating: boolean) => {
+  const [labelContainerHeight, setLabelContainerHeight] = useState(0);
+  const onLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    const {
+      layout: { height },
+    } = nativeEvent;
+    setLabelContainerHeight(height);
+  }, []);
+
+  const top = floating ? -labelContainerHeight : 0;
+  const style = [
+    floating ? styles.labelFloatingContainer : styles.labelFixedContainer,
+    { top },
+  ];
+  return { style, onLayout: onLayout };
+};

hooks/types.ts

@@ -0,0 +1,50 @@
+import { useRef } from 'react';
+
+import { clamp } from '../helpers';
+
+/**
+ * low and high state variables are fallbacks for props (props are not required).
+ * This hook ensures that current low and high are not out of [min, max] range.
+ * It returns an object which contains:
+ * - ref containing correct low, high, min, max and step to work with.
+ * - setLow and setHigh setters
+ * @param lowProp
+ * @param highProp
+ * @param min
+ * @param max
+ * @param step
+ * @returns {{inPropsRef: React.MutableRefObject<{high: (*|number), low: (*|number)}>, setLow: (function(number): undefined), setHigh: (function(number): undefined)}}
+ */
+export const useLowHigh = (
+  lowProp: number | undefined,
+  highProp: number | undefined,
+  min: number,
+  max: number,
+  step: number,
+) => {
+  const validLowProp = lowProp === undefined ? min : clamp(lowProp, min, max);
+  const validHighProp =
+    highProp === undefined ? max : clamp(highProp, min, max);
+  const inPropsRef = useRef({
+    low: validLowProp,
+    high: validHighProp,
+    step,
+    // These 2 fields will be overwritten below.
+    min: validLowProp,
+    max: validHighProp,
+  });
+  const { low: lowState, high: highState } = inPropsRef.current;
+  const inPropsRefPrev = { lowPrev: lowState, highPrev: highState };
+
+  // Props have higher priority.
+  // If no props are passed, use internal state variables.
+  const low = clamp(lowProp === undefined ? lowState : lowProp, min, max);
+  const high = clamp(highProp === undefined ? highState : highProp, min, max);
+
+  // Always update values of refs so pan responder will have updated values
+  Object.assign(inPropsRef.current, { low, high, min, max });
+
+  const setLow = (value: number) => (inPropsRef.current.low = value);
+  const setHigh = (value: number) => (inPropsRef.current.high = value);
+  return { inPropsRef, inPropsRefPrev, setLow, setHigh };
+};