Skip to content

GitLab

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

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