Fix/ migrate callback refs to object (#1912)

* migrate callback refs to object

* fix ref checks

Author: lidord-wix

generatedTypes/src/components/hint/index.d.ts

@@ -127,7 +127,7 @@ declare class Hint extends Component<HintProps, HintState> {
     };
     static positions: typeof HintPositions;
     targetRef: ElementRef<typeof RNView> | null;
-    hintRef: ElementRef<typeof RNView> | null;
+    hintRef: React.RefObject<RNView>;
     animationDuration: number;
     state: {
         targetLayoutInWindow: {
@@ -140,12 +140,12 @@ declare class Hint extends Component<HintProps, HintState> {
         hintUnmounted: boolean;
     };
     visibleAnimated: Animated.Value;
+    componentDidMount(): void;
     componentDidUpdate(prevProps: HintProps): void;
     animateHint: () => void;
     toggleAnimationEndedToRemoveHint: () => void;
     focusAccessibilityOnHint: () => void;
     setTargetRef: (ref: ElementRef<typeof RNView>) => void;
-    setHintRef: (ref: ElementRef<typeof RNView>) => void;
     onTargetLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
     getAccessibilityInfo(): {
         accessible: boolean;

generatedTypes/src/components/slider/context/asSliderGroupChild.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 declare function asSliderGroupChild(WrappedComponent: any): {
     new (props: {} | Readonly<{}>): {
-        contentRef: View | undefined;
+        contentRef: React.RefObject<View>;
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -28,7 +28,7 @@ declare function asSliderGroupChild(WrappedComponent: any): {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: {}, context: any): {
-        contentRef: View | undefined;
+        contentRef: React.RefObject<View>;
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;

generatedTypes/src/components/slider/index.d.ts

@@ -1,5 +1,5 @@
-import { PureComponent, ReactElement, ElementRef } from 'react';
-import { Animated, StyleProp, ViewStyle, PanResponderGestureState, GestureResponderEvent, LayoutChangeEvent, AccessibilityActionEvent, AccessibilityRole, View as RNView, ViewProps } from 'react-native';
+import { PureComponent, ReactElement } from 'react';
+import { Animated, StyleProp, ViewStyle, PanResponderGestureState, GestureResponderEvent, LayoutChangeEvent, AccessibilityActionEvent, AccessibilityRole, ViewProps } from 'react-native';
 export declare type SliderOnValueChange = (value: number) => void;
 export declare type SliderProps = {
     /**
@@ -176,8 +176,6 @@ export default class Slider extends PureComponent<SliderProps, State> {
     getXForValue(v: number): number;
     getValueForX(x: number): number;
     getRange(): number;
-    setMinTrackRef: (ref: ElementRef<typeof RNView>) => void;
-    setThumbRef: (ref: ElementRef<typeof RNView>) => void;
     calculatedThumbActiveScale: () => number;
     updateTrackStepAndStyle: ({ nativeEvent }: GestureResponderEvent) => void;
     onOrientationChanged: () => void;

src/components/hint/index.tsx

@@ -169,7 +169,7 @@ class Hint extends Component<HintProps, HintState> {
   static positions = HintPositions;
 
   targetRef: ElementRef<typeof RNView> | null = null;
-  hintRef: ElementRef<typeof RNView> | null = null;
+  hintRef = React.createRef<RNView>();
   animationDuration = 170;
 
   state = {
@@ -180,6 +180,10 @@ class Hint extends Component<HintProps, HintState> {
 
   visibleAnimated = new Animated.Value(Number(!!this.props.visible));
 
+  componentDidMount() {
+    this.focusAccessibilityOnHint();
+  }
+
   componentDidUpdate(prevProps: HintProps) {
     if (prevProps.visible !== this.props.visible) {
       this.animateHint();
@@ -201,7 +205,7 @@ class Hint extends Component<HintProps, HintState> {
   focusAccessibilityOnHint = () => {
     const {message} = this.props;
     const targetRefTag = findNodeHandle(this.targetRef);
-    const hintRefTag = findNodeHandle(this.hintRef);
+    const hintRefTag = findNodeHandle(this.hintRef.current);
 
     if (targetRefTag && _.isString(message)) {
       AccessibilityInfo.setAccessibilityFocus(targetRefTag);
@@ -215,11 +219,6 @@ class Hint extends Component<HintProps, HintState> {
     this.focusAccessibilityOnHint();
   };
 
-  setHintRef = (ref: ElementRef<typeof RNView>) => {
-    this.hintRef = ref;
-    this.focusAccessibilityOnHint();
-  };
-
   onTargetLayout = ({nativeEvent: {layout}}: LayoutChangeEvent) => {
     if (!_.isEqual(this.state.targetLayout, layout)) {
       this.setState({targetLayout: layout});
@@ -476,7 +475,7 @@ class Hint extends Component<HintProps, HintState> {
           {backgroundColor: color},
           !_.isUndefined(borderRadius) && {borderRadius}
         ]}
-        ref={this.setHintRef}
+        ref={this.hintRef}
       >
         {customContent}
         {!customContent && icon && <Image source={icon} style={[styles.icon, iconStyle]}/>}

src/components/slider/context/asSliderGroupChild.tsx

@@ -1,19 +1,19 @@
-import React, {Component, ElementRef} from 'react';
+import React, {Component} from 'react';
 import {View} from 'react-native';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import SliderContext from './SliderContext';
 
 
 const getConsumer = (WrappedComponent: React.ComponentClass<any>) => (
   class SliderContextConsumer extends Component {
-    contentRef: ElementRef<typeof View> | undefined;
+    contentRef = React.createRef<View>();
 
     render() {
       return (
         <SliderContext.Consumer>
           {(context) => (
             <WrappedComponent
-              ref={(r: ElementRef<typeof View>) => (this.contentRef = r)}
+              ref={this.contentRef}
               sliderContext={context}
               {...this.props}
             />

src/components/slider/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {PureComponent, ReactElement, ElementRef} from 'react';
+import React, {PureComponent, ReactElement} from 'react';
 import {
   StyleSheet,
   PanResponder,
@@ -155,9 +155,9 @@ export default class Slider extends PureComponent<SliderProps, State> {
 
   static defaultProps = defaultProps;
 
-  private thumb: ElementRef<typeof RNView> | undefined = undefined;
+  private thumb = React.createRef<RNView>();
   private _thumbStyles: ThumbStyle = {};
-  private minTrack: ElementRef<typeof RNView> | undefined = undefined;
+  private minTrack = React.createRef<RNView>();
   private _minTrackStyles: MinTrackStyle = {};
   private _x = 0;
   private _dx = 0;
@@ -299,27 +299,18 @@ export default class Slider extends PureComponent<SliderProps, State> {
   }
 
   updateStyles(x: number) {
-    if (this.thumb) {
+    if (this.thumb.current) {
       const {disableRTL} = this.props;
       const {trackSize} = this.state;
-      const _x = Constants.isRTL && disableRTL ? trackSize.width - x : x;
-      const position = _x - this.initialThumbSize.width / 2;
-      const deviation = 3;
-
-      if (position + deviation < 0) {
-        this._thumbStyles.left = 0;
-      } else if (position - deviation > trackSize.width - this.initialThumbSize.width) {
-        this._thumbStyles.left = trackSize.width - this.initialThumbSize.width;
-      } else {
-        this._thumbStyles.left = position;
-      }
-
-      this.thumb.setNativeProps(this._thumbStyles);
+      const nonOverlappingTrackWidth = trackSize.width - this.initialThumbSize.width;
+      const _x = Constants.isRTL && disableRTL ? nonOverlappingTrackWidth - x : x; // adjust for RTL
+      this._thumbStyles.left = trackSize.width === 0 ? _x : (_x * nonOverlappingTrackWidth) / trackSize.width; // do not render above prefix\suffix icon\text
+      this.thumb.current?.setNativeProps(this._thumbStyles);
     }
 
-    if (this.minTrack) {
+    if (this.minTrack.current) {
       this._minTrackStyles.width = Math.min(this.state.trackSize.width, x);
-      this.minTrack.setNativeProps(this._minTrackStyles);
+      this.minTrack.current?.setNativeProps(this._minTrackStyles);
     }
   }
 
@@ -329,14 +320,14 @@ export default class Slider extends PureComponent<SliderProps, State> {
   }
 
   updateThumbStyle(start: boolean) {
-    if (this.thumb && !this.props.disableActiveStyling) {
+    if (this.thumb.current && !this.props.disableActiveStyling) {
       const {thumbStyle, activeThumbStyle} = this.props;
       const style = thumbStyle || styles.thumb;
       const activeStyle = activeThumbStyle || styles.activeThumb;
 
       const activeOrInactiveStyle = !this.props.disabled ? (start ? activeStyle : style) : {};
       this._thumbStyles.style = _.omit(activeOrInactiveStyle, 'height', 'width');
-      this.thumb.setNativeProps(this._thumbStyles);
+      this.thumb.current?.setNativeProps(this._thumbStyles);
       this.scaleThumb(start);
     }
   }
@@ -396,13 +387,6 @@ export default class Slider extends PureComponent<SliderProps, State> {
     return range;
   }
 
-  setMinTrackRef = (ref: ElementRef<typeof RNView>) => {
-    this.minTrack = ref;
-  };
-
-  setThumbRef = (ref: ElementRef<typeof RNView>) => {
-    this.thumb = ref;
-  };
 
   calculatedThumbActiveScale = () => {
     const {activeThumbStyle, thumbStyle, disabled, disableActiveStyling} = this.props;
@@ -527,7 +511,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
     return (
       <Animated.View
         hitSlop={thumbHitSlop}
-        ref={this.setThumbRef}
+        ref={this.thumb}
         onLayout={this.onThumbLayout}
         {...this._panResponder.panHandlers}
         style={[
@@ -588,7 +572,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
               onLayout={this.onTrackLayout}
             />
             <View
-              ref={this.setMinTrackRef}
+              ref={this.minTrack}
               style={[
                 styles.track,
                 trackStyle,