Application Android et IOS pour l'amicale des élèves
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ImageGalleryScreen.tsx 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import * as React from 'react';
  20. import {IconButton, Text} from 'react-native-paper';
  21. import ImageViewer from 'react-native-image-zoom-viewer';
  22. import {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
  23. import * as Animatable from 'react-native-animatable';
  24. import {View} from 'react-native';
  25. import {MainStackParamsList} from '../../navigation/MainNavigator';
  26. type ImageGalleryScreenNavigationProp = StackScreenProps<
  27. MainStackParamsList,
  28. 'gallery'
  29. >;
  30. type Props = ImageGalleryScreenNavigationProp & {
  31. navigation: StackNavigationProp<any>;
  32. };
  33. class ImageGalleryScreen extends React.Component<Props> {
  34. images: Array<{url: string}>;
  35. closeButtonRef: {current: null | (Animatable.View & View)};
  36. indicatorRef: {current: null | (Animatable.View & View)};
  37. controlsShown: boolean;
  38. constructor(props: Props) {
  39. super(props);
  40. this.closeButtonRef = React.createRef();
  41. this.indicatorRef = React.createRef();
  42. this.controlsShown = true;
  43. if (props.route.params) {
  44. this.images = props.route.params.images;
  45. } else {
  46. this.images = [];
  47. }
  48. }
  49. goBack = () => {
  50. const {navigation} = this.props;
  51. navigation.goBack();
  52. };
  53. getRenderHeader = () => {
  54. return (
  55. <Animatable.View
  56. ref={this.closeButtonRef}
  57. useNativeDriver
  58. style={{
  59. position: 'absolute',
  60. top: 10,
  61. left: 10,
  62. zIndex: 1000,
  63. }}>
  64. <IconButton
  65. onPress={this.goBack}
  66. icon="close"
  67. size={30}
  68. style={{backgroundColor: 'rgba(0,0,0,0.6)'}}
  69. />
  70. </Animatable.View>
  71. );
  72. };
  73. getRenderIndicator = (currentIndex?: number, allSize?: number) => {
  74. if (currentIndex != null && allSize != null && allSize !== 1) {
  75. return (
  76. <Animatable.View
  77. ref={this.indicatorRef}
  78. useNativeDriver
  79. style={{
  80. width: '100%',
  81. height: 50,
  82. position: 'absolute',
  83. }}>
  84. <Text
  85. style={{
  86. marginLeft: 'auto',
  87. marginRight: 'auto',
  88. marginTop: 'auto',
  89. marginBottom: 'auto',
  90. fontSize: 15,
  91. backgroundColor: 'rgba(0,0,0,0.6)',
  92. padding: 10,
  93. borderRadius: 20,
  94. }}>
  95. {currentIndex}/{allSize}
  96. </Text>
  97. </Animatable.View>
  98. );
  99. }
  100. return <View />;
  101. };
  102. onImageClick = () => {
  103. if (this.controlsShown) {
  104. this.hideControls();
  105. } else {
  106. this.showControls();
  107. }
  108. this.controlsShown = !this.controlsShown;
  109. };
  110. hideControls() {
  111. if (this.closeButtonRef.current && this.closeButtonRef.current.fadeOutUp) {
  112. this.closeButtonRef.current.fadeOutUp(200);
  113. }
  114. if (this.indicatorRef.current && this.indicatorRef.current.fadeOutUp) {
  115. this.indicatorRef.current.fadeOutUp(300);
  116. }
  117. }
  118. showControls() {
  119. if (this.closeButtonRef.current && this.closeButtonRef.current.fadeInDown) {
  120. this.closeButtonRef.current.fadeInDown(300);
  121. }
  122. if (this.indicatorRef.current && this.indicatorRef.current.fadeInDown) {
  123. this.indicatorRef.current.fadeInDown(400);
  124. }
  125. }
  126. render() {
  127. return (
  128. <ImageViewer
  129. useNativeDriver
  130. imageUrls={this.images}
  131. enableSwipeDown
  132. onSwipeDown={this.goBack}
  133. renderHeader={this.getRenderHeader}
  134. renderIndicator={this.getRenderIndicator}
  135. pageAnimateTime={100}
  136. onClick={this.onImageClick}
  137. doubleClickInterval={250}
  138. />
  139. );
  140. }
  141. }
  142. export default ImageGalleryScreen;