vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Update image gallery screen to use TypeScript

Browse source
This commit is contained in:
Arnaud Vergnet 2020-09-22 19:55:41 +02:00
parent d70f22bdae
commit 300558ac56
1 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/screens/Media/ImageGalleryScreen.js → src/screens/Media/ImageGalleryScreen.tsx
View file

@ -17,34 +17,42 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @flow
import * as React from 'react'; import * as React from 'react';
import {IconButton, Text} from 'react-native-paper'; import {IconButton, Text} from 'react-native-paper';
import ImageViewer from 'react-native-image-zoom-viewer'; import ImageViewer from 'react-native-image-zoom-viewer';
import {StackNavigationProp} from '@react-navigation/stack'; import {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import {View} from 'react-native';
import {MainStackParamsList} from '../../navigation/MainNavigator';
type PropsType = { type ImageGalleryScreenNavigationProp = StackScreenProps<
navigation: StackNavigationProp, MainStackParamsList,
route: {params: {images: Array<{url: string}>}}, 'gallery'
>;
type Props = ImageGalleryScreenNavigationProp & {
navigation: StackNavigationProp<any>;
}; };
class ImageGalleryScreen extends React.Component<PropsType> { class ImageGalleryScreen extends React.Component<Props> {
images: Array<{url: string}>; images: Array<{url: string}>;
closeButtonRef: {current: null | Animatable.View}; closeButtonRef: {current: null | (Animatable.View & View)};
indicatorRef: {current: null | Animatable.View}; indicatorRef: {current: null | (Animatable.View & View)};
controlsShown: boolean; controlsShown: boolean;
constructor(props: PropsType) { constructor(props: Props) {
super(props); super(props);
this.closeButtonRef = React.createRef(); this.closeButtonRef = React.createRef();
this.indicatorRef = React.createRef(); this.indicatorRef = React.createRef();
this.controlsShown = true; this.controlsShown = true;
if (props.route.params != null) this.images = props.route.params.images; if (props.route.params) {
this.images = props.route.params.images;
} else {
this.images = [];
}
} }
goBack = () => { goBack = () => {
@ -52,7 +60,7 @@ class ImageGalleryScreen extends React.Component<PropsType> {
navigation.goBack(); navigation.goBack();
}; };
getRenderHeader = (): React.Node => { getRenderHeader = () => {
return ( return (
<Animatable.View <Animatable.View
ref={this.closeButtonRef} ref={this.closeButtonRef}
@ -73,11 +81,8 @@ class ImageGalleryScreen extends React.Component<PropsType> {
); );
}; };
getRenderIndicator = ( getRenderIndicator = (currentIndex?: number, allSize?: number) => {
currentIndex?: number, if (currentIndex != null && allSize != null && allSize !== 1) {
allSize?: number,
): React.Node => {
if (currentIndex != null && allSize != null && allSize !== 1)
return ( return (
<Animatable.View <Animatable.View
ref={this.indicatorRef} ref={this.indicatorRef}
@ -102,30 +107,38 @@ class ImageGalleryScreen extends React.Component<PropsType> {
</Text> </Text>
</Animatable.View> </Animatable.View>
); );
return null; }
return <View />;
}; };
onImageClick = () => { onImageClick = () => {
if (this.controlsShown) this.hideControls(); if (this.controlsShown) {
else this.showControls(); this.hideControls();
} else {
this.showControls();
}
this.controlsShown = !this.controlsShown; this.controlsShown = !this.controlsShown;
}; };
hideControls() { hideControls() {
if (this.closeButtonRef.current != null) if (this.closeButtonRef.current && this.closeButtonRef.current.fadeOutUp) {
this.closeButtonRef.current.fadeOutUp(200); this.closeButtonRef.current.fadeOutUp(200);
if (this.indicatorRef.current != null) }
if (this.indicatorRef.current && this.indicatorRef.current.fadeOutUp) {
this.indicatorRef.current.fadeOutUp(300); this.indicatorRef.current.fadeOutUp(300);
}
} }
showControls() { showControls() {
if (this.closeButtonRef.current != null) if (this.closeButtonRef.current && this.closeButtonRef.current.fadeInDown) {
this.closeButtonRef.current.fadeInDown(300); this.closeButtonRef.current.fadeInDown(300);
if (this.indicatorRef.current != null) }
if (this.indicatorRef.current && this.indicatorRef.current.fadeInDown) {
this.indicatorRef.current.fadeInDown(400); this.indicatorRef.current.fadeInDown(400);
}
} }
render(): React.Node { render() {
return ( return (
<ImageViewer <ImageViewer
useNativeDriver useNativeDriver