|
@@ -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
|