Skip to content

GitLab

Verified Commit fbefc59e authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Use other zoom viewer library

parent 633dab8c
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 79 deletions
__tests__/ui/screens/photos/PhotoView.spec.js
View file @ fbefc59e
import React from 'react';
import renderer from 'react-test-renderer';
import PhotoView from '../../../../app/ui/screens/photos/PhotoView';
import PhotoListItem from '../../../../app/ui/screens/photos/PhotoListItem';
describe('PhotoView component', () => {
const photo = {
......@@ -17,7 +17,7 @@ describe('PhotoView component', () => {
it('renders correctly', () => {
const tree = renderer
.create(<PhotoView onPress={() => {}} photo={photo} size={20} token="token" />)
.create(<PhotoListItem onPress={() => {}} photo={photo} size={20} token="token" />)
.toJSON();
expect(tree).toMatchSnapshot();
});
......
app/ui/screens/photos/AlbumDetailScreen.js
View file @ fbefc59e
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Dimensions, FlatList, TouchableOpacity, View } from 'react-native';
import Gallery from 'react-native-image-gallery';
import {
Dimensions, FlatList, TouchableOpacity, View,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { STATUS_FAILURE, STATUS_INITIAL } from '../../../reducers/photos';
import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import styles from './style/AlbumDetail';
import PhotoView from './PhotoView';
import PhotoViewContainer from './PhotoViewContainer';
import styles from './style/AlbumDetailScreen';
import PhotoListItem from './PhotoListItem';
import PhotoViewContainer from './PhotoListItemContainer';
import Colors from '../../style/Colors';
import StandardHeader from '../../components/standardHeader/StandardHeader';
......@@ -16,6 +18,15 @@ const windowWidth = Dimensions.get('window').width;
export const itemSize = (windowWidth - 48) / 3;
class AlbumDetailScreen extends Component {
constructor(props) {
super(props);
this.state = {
gallery: [],
selection: null,
};
}
static getDerivedStateFromProps(nextProps, prevState) {
const { token, photos } = nextProps;
const gallerySources = [];
......@@ -23,18 +34,16 @@ class AlbumDetailScreen extends Component {
const keys = Object.keys(photos);
for (let i = 0; i < keys.length; i += 1) {
const photo = photos[i];
gallerySources.push({
source: {
uri: photo.file.large,
headers: {
Authorization: `Token ${token}`,
if (!photo.hidden) {
gallerySources.push({
url: photo.file.large,
props: {
headers: {
Authorization: `Token ${token}`,
},
},
},
dimensions: {
height: 1080,
width: 1920,
},
});
});
}
}
}
......@@ -44,15 +53,6 @@ class AlbumDetailScreen extends Component {
};
}
constructor(props) {
super(props);
this.state = {
gallery: [],
selection: null,
};
}
openGallery(index) {
this.setState({ selection: index });
}
......@@ -62,14 +62,16 @@ class AlbumDetailScreen extends Component {
}
render() {
const { t, fetching, status, photos } = this.props;
const {
t, fetching, status, photos,
} = this.props;
let content = (
<View style={styles.wrapper}>
<FlatList
style={styles.flatList}
contentContainerStyle={styles.listContainer}
data={photos}
data={photos.filter(p => !p.hidden)}
renderItem={
data => (
<PhotoViewContainer
......@@ -98,26 +100,16 @@ class AlbumDetailScreen extends Component {
return (
<View style={styles.screenWrapper}>
<View style={styles.galleryWrapper}>
<Gallery
initialPage={this.state.selection}
style={styles.gallery}
images={this.state.gallery}
flatListProps={{
initialNumToRender: 20,
initialScrollIndex: this.state.selection,
getItemLayout: (data, index) => ({
length: Dimensions.get('screen').width,
offset: Dimensions.get('screen').width * index,
index,
}),
}}
<ImageViewer
index={this.state.selection}
imageUrls={this.state.gallery}
/>
<TouchableOpacity
style={styles.closeGalleryTouchable}
onPress={() => this.closeGallery()}
>
<Icon
name={'close'}
name="close"
style={styles.icon}
size={24}
color={Colors.white}
......@@ -140,7 +132,7 @@ class AlbumDetailScreen extends Component {
AlbumDetailScreen.propTypes = {
fetching: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,
photos: PropTypes.arrayOf(PhotoView.propTypes.photo),
photos: PropTypes.arrayOf(PhotoListItem.propTypes.photo),
// eslint-disable-next-line react/no-unused-prop-types
token: PropTypes.string.isRequired,
t: PropTypes.func.isRequired,
......
app/ui/screens/photos/AlbumListItem.js
View file @ fbefc59e
......@@ -5,7 +5,7 @@ import {
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Moment from 'moment/moment';
import PhotoView from './PhotoView';
import PhotoListItem from './PhotoListItem';
import styles from './style/AlbumListItem';
import SquareView from '../../components/memberView/SquareView';
......@@ -52,7 +52,7 @@ AlbumListItem.propTypes = {
shareable: PropTypes.bool.isRequired,
accessible: PropTypes.bool.isRequired,
hidden: PropTypes.bool.isRequired,
cover: PropTypes.shape(PhotoView.propTypes.photo),
cover: PropTypes.shape(PhotoListItem.propTypes.photo),
}).isRequired,
openAlbum: PropTypes.func.isRequired,
token: PropTypes.string.isRequired,
......
app/ui/screens/photos/AlbumsOverviewScreen.js
View file @ fbefc59e
......@@ -5,7 +5,7 @@ import { STATUS_FAILURE, STATUS_INITIAL } from '../../../reducers/photos';
import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import AlbumListItem from './AlbumListItem';
import styles from './style/AlbumsOverview';
import styles from './style/AlbumsOverviewScreen';
import AlbumListItemContainer from './AlbumListItemContainer';
import { withStandardHeader } from '../../components/standardHeader/StandardHeader';
......
app/ui/screens/photos/PhotoView.js → app/ui/screens/photos/PhotoListItem.js
View file @ fbefc59e
......@@ -2,9 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Image, TouchableHighlight, ViewPropTypes } from 'react-native';
import SquareView from '../../components/memberView/SquareView';
import styles from './style/PhotoView';
import styles from './style/PhotoListItem';
const PhotoView = props => (
const PhotoListItem = props => (
<TouchableHighlight
style={styles.touchable}
onPress={() => props.onPress()}
......@@ -17,13 +17,20 @@ const PhotoView = props => (
Authorization: `Token ${props.token}`,
},
}}
style={[styles.image, { width: props.size, height: props.size }]}
style={[
styles.image,
{
width: props.size,
height: props.size,
transform: [{ rotate: `${props.photo.rotation}deg` }],
},
]}
/>
</SquareView>
</TouchableHighlight>
);
PhotoView.propTypes = {
PhotoListItem.propTypes = {
size: PropTypes.number.isRequired,
style: ViewPropTypes.style,
photo: PropTypes.shape({
......@@ -43,8 +50,8 @@ PhotoView.propTypes = {
onPress: PropTypes.func.isRequired,
};
PhotoView.defaultProps = {
PhotoListItem.defaultProps = {
style: {},
};
export default PhotoView;
export default PhotoListItem;
app/ui/screens/photos/PhotoViewContainer.js → app/ui/screens/photos/PhotoListItemContainer.js
View file @ fbefc59e
import { connect } from 'react-redux';
import PhotoView from './PhotoView';
import PhotoListItem from './PhotoListItem';
import { tokenSelector } from '../../../utils/url';
const mapStateToProps = state => ({
token: tokenSelector(state),
});
export default connect(mapStateToProps)(PhotoView);
export default connect(mapStateToProps)(PhotoListItem);
app/ui/screens/photos/style/AlbumDetail.js → app/ui/screens/photos/style/AlbumDetailScreen.js
View file @ fbefc59e
......@@ -39,7 +39,4 @@ export default StyleSheet.create({
marginRight: 8,
marginBottom: 8,
},
gallery: {
flex: 1,
},
});
app/utils/url.js
View file @ fbefc59e
......@@ -3,7 +3,7 @@ import DeviceInfo from 'react-native-device-info';
let server = 'https://thalia.nu';
/* istanbul ignore next line */
if (__DEV__) { // eslint-disable-line no-undef
server = 'http://localhost:8000';
// server = 'http://localhost:8000';
}
export const url = server;
......
yarn.lock
View file @ fbefc59e
......@@ -6805,7 +6805,7 @@ prompts@^2.0.1:
kleur "^3.0.2"
sisteransi "^1.0.0"
prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -6952,14 +6952,6 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-mixin@^3.0.5:
version "3.1.1"
resolved "https://registry.yarnpkg.com/react-mixin/-/react-mixin-3.1.1.tgz#68749756bfe32699e561372a4aeecb926db72b7f"
integrity sha512-z9fZ0aCRDjlgxLdMeWkJ9TwhmVLhQ09r8RFpin/cEPA2T6jsb7YHNWcIe0Oii+hhJNyMymdy91CSya5mRkuCkg==
dependencies:
object-assign "^4.0.1"
smart-mixin "^2.0.0"
react-native-device-info@2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-2.1.2.tgz#5c553498e8930410aa65796b83f8f8c8fb9893b4"
......@@ -7028,6 +7020,16 @@ react-native-image-gallery@^2.1.5:
react-mixin "^3.0.5"
react-timer-mixin "^0.13.3"
react-native-image-pan-zoom@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.8.tgz#2f8d8459a6f56b897b53222649e1225d8fc6e5ee"
react-native-image-zoom-viewer@^2.2.15:
version "2.2.15"
resolved "https://registry.yarnpkg.com/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-2.2.15.tgz#186734ea25473fd1c15202a157adf53fb8fa8fb6"
dependencies:
react-native-image-pan-zoom "^2.1.8"
react-native-linear-gradient@2.5.4:
version "2.5.4"
resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.4.tgz#dce133526f5a5510a639af94544f1ed0c984bd1e"
......@@ -7213,11 +7215,6 @@ react-test-renderer@16.8.6:
react-is "^16.8.6"
scheduler "^0.13.6"
react-timer-mixin@^0.13.3:
version "0.13.4"
resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
react-transform-hmr@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
......@@ -7920,11 +7917,6 @@ slide@^1.1.5:
resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
smart-mixin@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/smart-mixin/-/smart-mixin-2.0.0.tgz#a34a1055e32a75b30d2b4e3ca323dc99cb53f437"
integrity sha1-o0oQVeMqdbMNK048oyPcmctT9Dc=
snapdragon-node@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment