Fix/event listener warning (#1605)

ethanshar · web-flow · commit 8da3dbd4985a · 2021-10-18T18:57:25.000+03:00
* Upgrade to rn65

* return jcenter

* Fix usage of Dimensions.removeEventListener for RN65

* Update button snapshot tests

* Remove orientation listener from Dialog
diff --git a/demo/src/screens/componentScreens/CarouselScreen.tsx b/demo/src/screens/componentScreens/CarouselScreen.tsx
@@ -36,6 +36,7 @@ interface State {
 
 class CarouselScreen extends Component<Props, State> {
   carousel = React.createRef<typeof Carousel>();
+  private dimensionsChangeListener: any;
 
   constructor(props: Props) {
     super(props);
@@ -51,11 +52,11 @@ class CarouselScreen extends Component<Props, State> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChange);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChange);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChange);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChange);
   }
 
   onOrientationChange = () => {
diff --git a/generatedTypes/src/components/button/index.d.ts b/generatedTypes/src/components/button/index.d.ts
@@ -154,9 +154,6 @@ declare class Button extends PureComponent<Props, ButtonState> {
         };
     };
     componentDidUpdate(prevProps: Props): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    onOrientationChanged: () => void;
     onLayout: (event: LayoutChangeEvent) => void;
     get isOutline(): boolean;
     get isFilled(): boolean;
diff --git a/generatedTypes/src/components/carousel/index.d.ts b/generatedTypes/src/components/carousel/index.d.ts
@@ -20,6 +20,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     orientationChange?: boolean;
     skippedInitialScroll?: boolean;
     isAutoScrolled: boolean;
+    private dimensionsChangeListener;
     constructor(props: CarouselProps);
     static getDerivedStateFromProps(nextProps: CarouselProps, prevState: CarouselState): {
         pageWidth: number;
diff --git a/generatedTypes/src/components/gridView/index.d.ts b/generatedTypes/src/components/gridView/index.d.ts
@@ -48,6 +48,7 @@ declare class GridView extends UIComponent<GridViewProps, State> {
         itemSpacing: number;
     };
     private itemSize?;
+    private dimensionsChangeListener;
     constructor(props: ExistProps);
     static getDerivedStateFromProps(nextProps: ExistProps, prevState: State): {
         viewWidth: number;
diff --git a/generatedTypes/src/components/slider/index.d.ts b/generatedTypes/src/components/slider/index.d.ts
@@ -124,6 +124,7 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
     private containerSize;
     private trackSize;
     private thumbSize;
+    private dimensionsChangeListener;
     constructor(props: SliderProps);
     checkProps(props: SliderProps): void;
     getAccessibilityProps(): {
diff --git a/generatedTypes/src/components/wizard/index.d.ts b/generatedTypes/src/components/wizard/index.d.ts
@@ -18,6 +18,7 @@ declare class Wizard extends Component<WizardProps, State> {
     static displayName: string;
     static Step: typeof WizardStep;
     static States: typeof WizardStepStates;
+    private dimensionsChangeListener;
     constructor(props: WizardProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -43,21 +43,6 @@ class Button extends PureComponent<Props, ButtonState> {
     }
   }
 
-  componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
-  }
-
-  componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
-  }
-
-  onOrientationChanged = () => {
-    if (Constants.isTablet && this.props.fullWidth) {
-      // only to trigger re-render
-      this.setState({isLandscape: Constants.isLandscape});
-    }
-  };
-
   // This method will be called more than once in case of layout change!
   onLayout = (event: LayoutChangeEvent) => {
     const height = event.nativeEvent.layout.height;
diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
@@ -45,6 +45,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   orientationChange?: boolean;
   skippedInitialScroll?: boolean;
   isAutoScrolled: boolean;
+  private dimensionsChangeListener: any;
 
   constructor(props: CarouselProps) {
     super(props);
@@ -106,15 +107,15 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);
 
     if (this.props.autoplay) {
       this.startAutoPlay();
     }
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChanged);
 
     if (this.autoplayTimer) {
       clearInterval(this.autoplayTimer);
diff --git a/src/components/colorPicker/ColorPalette.tsx b/src/components/colorPicker/ColorPalette.tsx
@@ -110,13 +110,14 @@ class ColorPalette extends PureComponent<Props, State> {
   usePagination?: boolean = undefined;
   innerMargin?: number = undefined;
   swatchStyles?: StyleProp<ViewStyle>[] = undefined;
+  private dimensionsChangeListener: any;
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChanged);
   }
 
   onOrientationChanged = () => {
diff --git a/src/components/gridView/index.tsx b/src/components/gridView/index.tsx
@@ -62,6 +62,7 @@ class GridView extends UIComponent<GridViewProps, State> {
   };
 
   private itemSize?: number;
+  private dimensionsChangeListener: any;
 
   constructor(props: ExistProps) {
     super(props);
@@ -92,11 +93,11 @@ class GridView extends UIComponent<GridViewProps, State> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChanged);
   }
 
   onOrientationChanged = () => {
diff --git a/src/components/slider/index.tsx b/src/components/slider/index.tsx
@@ -162,6 +162,7 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
   private containerSize: Measurements | undefined;
   private trackSize: Measurements | undefined;
   private thumbSize: Measurements | undefined;
+  private dimensionsChangeListener: any;
 
   constructor(props: SliderProps) {
     super(props);
@@ -225,11 +226,11 @@ export default class Slider extends PureComponent<SliderProps, SliderState> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChanged);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChanged);
   }
 
 
diff --git a/src/components/tabController/index.tsx b/src/components/tabController/index.tsx
@@ -59,6 +59,7 @@ function TabController({
 }: PropsWithChildren<TabControllerProps>) {
   const [screenWidth, setScreenWidth] = useState<number>(Constants.windowWidth);
   const orientation = useRef<orientations>(Constants.orientation);
+  const dimensionsChangeListener = useRef<any>();
 
   if (items?.length < 2) {
     console.error('TabController component expect a minimum of 2 items');
@@ -71,9 +72,9 @@ function TabController({
         setScreenWidth(Constants.windowWidth);
       }
     };
-    Constants.addDimensionsEventListener(onOrientationChange);
+    dimensionsChangeListener.current = Constants.addDimensionsEventListener(onOrientationChange);
     return () => {
-      Constants.removeDimensionsEventListener(onOrientationChange);
+      Constants.removeDimensionsEventListener(dimensionsChangeListener.current || onOrientationChange);
     };
   }, []);
 
diff --git a/src/components/wizard/index.tsx b/src/components/wizard/index.tsx
@@ -28,6 +28,8 @@ class Wizard extends Component<WizardProps, State> {
   static Step: typeof WizardStep;
   static States: typeof WizardStepStates;
 
+  private dimensionsChangeListener: any;
+
   constructor(props: WizardProps) {
     super(props);
 
@@ -37,11 +39,11 @@ class Wizard extends Component<WizardProps, State> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChange);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChange);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChange);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChange);
   }
 
   onOrientationChange = () => {
diff --git a/src/helpers/Constants.ts b/src/helpers/Constants.ts
@@ -127,14 +127,12 @@ const constants = {
   },
   /* Orientation */
   addDimensionsEventListener: (callback: any) => {
-    Dimensions.addEventListener('change', callback);
+    return Dimensions.addEventListener('change', callback);
   },
   /* Dimensions */
   removeDimensionsEventListener: (callback: any) => {
-    // @ts-expect-error
-    if (Dimensions.remove) {
-      // @ts-expect-error
-      Dimensions.remove('change', callback);
+    if (callback.remove) {
+      callback.remove();
     } else {
       Dimensions.removeEventListener('change', callback);
     }

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@ interface State {`
`36`	`36`
`37`	`37`	`class CarouselScreen extends Component<Props, State> {`
`38`	`38`	`carousel = React.createRef<typeof Carousel>();`
	`39`	`+ private dimensionsChangeListener: any;`
`39`	`40`
`40`	`41`	`constructor(props: Props) {`
`41`	`42`	`super(props);`
`@@ -51,11 +52,11 @@ class CarouselScreen extends Component<Props, State> {`
`51`	`52`	`}`
`52`	`53`
`53`	`54`	`componentDidMount() {`
`54`		`- Constants.addDimensionsEventListener(this.onOrientationChange);`
	`55`	`+ this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChange);`
`55`	`56`	`}`
`56`	`57`
`57`	`58`	`componentWillUnmount() {`
`58`		`- Constants.removeDimensionsEventListener(this.onOrientationChange);`
	`59`	`+ Constants.removeDimensionsEventListener(this.dimensionsChangeListener \|\| this.onOrientationChange);`
`59`	`60`	`}`
`60`	`61`
`61`	`62`	`onOrientationChange = () => {`
Original file line number	Diff line number	Diff line change
`@@ -110,13 +110,14 @@ class ColorPalette extends PureComponent<Props, State> {`
`110`	`110`	`usePagination?: boolean = undefined;`
`111`	`111`	`innerMargin?: number = undefined;`
`112`	`112`	`swatchStyles?: StyleProp<ViewStyle>[] = undefined;`
	`113`	`+ private dimensionsChangeListener: any;`
`113`	`114`
`114`	`115`	`componentDidMount() {`
`115`		`- Constants.addDimensionsEventListener(this.onOrientationChanged);`
	`116`	`+ this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);`
`116`	`117`	`}`
`117`	`118`
`118`	`119`	`componentWillUnmount() {`
`119`		`- Constants.removeDimensionsEventListener(this.onOrientationChanged);`
	`120`	`+ Constants.removeDimensionsEventListener(this.dimensionsChangeListener \|\| this.onOrientationChanged);`
`120`	`121`	`}`
`121`	`122`
`122`	`123`	`onOrientationChanged = () => {`
Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@ class GridView extends UIComponent<GridViewProps, State> {`
`62`	`62`	`};`
`63`	`63`
`64`	`64`	`private itemSize?: number;`
	`65`	`+ private dimensionsChangeListener: any;`
`65`	`66`
`66`	`67`	`constructor(props: ExistProps) {`
`67`	`68`	`super(props);`
`@@ -92,11 +93,11 @@ class GridView extends UIComponent<GridViewProps, State> {`
`92`	`93`	`}`
`93`	`94`
`94`	`95`	`componentDidMount() {`
`95`		`- Constants.addDimensionsEventListener(this.onOrientationChanged);`
	`96`	`+ this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChanged);`
`96`	`97`	`}`
`97`	`98`
`98`	`99`	`componentWillUnmount() {`
`99`		`- Constants.removeDimensionsEventListener(this.onOrientationChanged);`
	`100`	`+ Constants.removeDimensionsEventListener(this.dimensionsChangeListener \|\| this.onOrientationChanged);`
`100`	`101`	`}`
`101`	`102`
`102`	`103`	`onOrientationChanged = () => {`