Skip to content

Fix/ migrate callback refs to object #1912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 21, 2022
Merged

Fix/ migrate callback refs to object #1912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c7bf87
migrate callback refs to object
lidord-wix Mar 20, 2022
8a45079
fix ref checks
lidord-wix Mar 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions generatedTypes/src/components/hint/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions generatedTypes/src/components/slider/context/asSliderGroupChild.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
6 changes: 2 additions & 4 deletions generatedTypes/src/components/slider/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
/**
Expand Down Expand Up @@ -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;
Expand Down
15 changes: 7 additions & 8 deletions src/components/hint/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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();
Expand All @@ -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);
Expand All @@ -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});
Expand Down Expand Up @@ -472,7 +471,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]}/>}
Expand Down
6 changes: 3 additions & 3 deletions src/components/slider/context/asSliderGroupChild.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
/>
Expand Down
29 changes: 11 additions & 18 deletions src/components/slider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import _ from 'lodash';
import React, {PureComponent, ReactElement, ElementRef} from 'react';
import React, {PureComponent, ReactElement} from 'react';
import {
StyleSheet,
PanResponder,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -299,18 +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 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.setNativeProps(this._thumbStyles);
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);
}
}

Expand All @@ -320,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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, in the check above you probably need to check this.thumb.current
Technically this.thumb is never undefined cause it is {current: undefined} when initialized

this.scaleThumb(start);
}
}
Expand Down Expand Up @@ -387,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;
Expand Down Expand Up @@ -518,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={[
Expand Down Expand Up @@ -579,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,
Expand Down