Browse Source

Update image gallery screen to use TypeScript

Arnaud Vergnet 3 years ago
parent
commit
300558ac56
1 changed files with 38 additions and 25 deletions
  1. 38
    25
      src/screens/Media/ImageGalleryScreen.tsx

src/screens/Media/ImageGalleryScreen.js → src/screens/Media/ImageGalleryScreen.tsx View File

@@ -17,34 +17,42 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {IconButton, Text} from 'react-native-paper';
24 22
 import ImageViewer from 'react-native-image-zoom-viewer';
25
-import {StackNavigationProp} from '@react-navigation/stack';
23
+import {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
26 24
 import * as Animatable from 'react-native-animatable';
25
+import {View} from 'react-native';
26
+import {MainStackParamsList} from '../../navigation/MainNavigator';
27
+
28
+type ImageGalleryScreenNavigationProp = StackScreenProps<
29
+  MainStackParamsList,
30
+  'gallery'
31
+>;
27 32
 
28
-type PropsType = {
29
-  navigation: StackNavigationProp,
30
-  route: {params: {images: Array<{url: string}>}},
33
+type Props = ImageGalleryScreenNavigationProp & {
34
+  navigation: StackNavigationProp<any>;
31 35
 };
32 36
 
33
-class ImageGalleryScreen extends React.Component<PropsType> {
37
+class ImageGalleryScreen extends React.Component<Props> {
34 38
   images: Array<{url: string}>;
35 39
 
36
-  closeButtonRef: {current: null | Animatable.View};
40
+  closeButtonRef: {current: null | (Animatable.View & View)};
37 41
 
38
-  indicatorRef: {current: null | Animatable.View};
42
+  indicatorRef: {current: null | (Animatable.View & View)};
39 43
 
40 44
   controlsShown: boolean;
41 45
 
42
-  constructor(props: PropsType) {
46
+  constructor(props: Props) {
43 47
     super(props);
44 48
     this.closeButtonRef = React.createRef();
45 49
     this.indicatorRef = React.createRef();
46 50
     this.controlsShown = true;
47
-    if (props.route.params != null) this.images = props.route.params.images;
51
+    if (props.route.params) {
52
+      this.images = props.route.params.images;
53
+    } else {
54
+      this.images = [];
55
+    }
48 56
   }
49 57
 
50 58
   goBack = () => {
@@ -52,7 +60,7 @@ class ImageGalleryScreen extends React.Component<PropsType> {
52 60
     navigation.goBack();
53 61
   };
54 62
 
55
-  getRenderHeader = (): React.Node => {
63
+  getRenderHeader = () => {
56 64
     return (
57 65
       <Animatable.View
58 66
         ref={this.closeButtonRef}
@@ -73,11 +81,8 @@ class ImageGalleryScreen extends React.Component<PropsType> {
73 81
     );
74 82
   };
75 83
 
76
-  getRenderIndicator = (
77
-    currentIndex?: number,
78
-    allSize?: number,
79
-  ): React.Node => {
80
-    if (currentIndex != null && allSize != null && allSize !== 1)
84
+  getRenderIndicator = (currentIndex?: number, allSize?: number) => {
85
+    if (currentIndex != null && allSize != null && allSize !== 1) {
81 86
       return (
82 87
         <Animatable.View
83 88
           ref={this.indicatorRef}
@@ -102,30 +107,38 @@ class ImageGalleryScreen extends React.Component<PropsType> {
102 107
           </Text>
103 108
         </Animatable.View>
104 109
       );
105
-    return null;
110
+    }
111
+    return <View />;
106 112
   };
107 113
 
108 114
   onImageClick = () => {
109
-    if (this.controlsShown) this.hideControls();
110
-    else this.showControls();
115
+    if (this.controlsShown) {
116
+      this.hideControls();
117
+    } else {
118
+      this.showControls();
119
+    }
111 120
     this.controlsShown = !this.controlsShown;
112 121
   };
113 122
 
114 123
   hideControls() {
115
-    if (this.closeButtonRef.current != null)
124
+    if (this.closeButtonRef.current && this.closeButtonRef.current.fadeOutUp) {
116 125
       this.closeButtonRef.current.fadeOutUp(200);
117
-    if (this.indicatorRef.current != null)
126
+    }
127
+    if (this.indicatorRef.current && this.indicatorRef.current.fadeOutUp) {
118 128
       this.indicatorRef.current.fadeOutUp(300);
129
+    }
119 130
   }
120 131
 
121 132
   showControls() {
122
-    if (this.closeButtonRef.current != null)
133
+    if (this.closeButtonRef.current && this.closeButtonRef.current.fadeInDown) {
123 134
       this.closeButtonRef.current.fadeInDown(300);
124
-    if (this.indicatorRef.current != null)
135
+    }
136
+    if (this.indicatorRef.current && this.indicatorRef.current.fadeInDown) {
125 137
       this.indicatorRef.current.fadeInDown(400);
138
+    }
126 139
   }
127 140
 
128
-  render(): React.Node {
141
+  render() {
129 142
     return (
130 143
       <ImageViewer
131 144
         useNativeDriver

Loading…
Cancel
Save