forked from vergnet/application-amicale
Added fullscreen image modal
This commit is contained in:
parent
cb98e1c546
commit
754c43a81a
4 changed files with 88 additions and 20 deletions
|
|
@ -4,6 +4,7 @@ import {TouchableOpacity, View} from "react-native";
|
|||
import Autolink from "react-native-autolink";
|
||||
import i18n from "i18n-js";
|
||||
|
||||
|
||||
const ICON_AMICALE = require('../../assets/amicale.png');
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -28,27 +28,28 @@
|
|||
"@react-navigation/native": "^5.0.9",
|
||||
"@react-navigation/stack": "^5.1.1",
|
||||
"expo": "^36.0.0",
|
||||
"expo-linear-gradient": "~8.0.0",
|
||||
"expo-localization": "~8.0.0",
|
||||
"expo-permissions": "~8.0.0",
|
||||
"expo-secure-store": "~8.0.0",
|
||||
"expo-web-browser": "~8.0.0",
|
||||
"i18n-js": "^3.3.0",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
|
||||
"react-native-app-intro-slider": "^3.0.0",
|
||||
"react-native-appearance": "~0.3.1",
|
||||
"react-native-autolink": "^1.8.1",
|
||||
"react-native-calendars": "^1.260.0",
|
||||
"react-native-gesture-handler": "~1.5.0",
|
||||
"react-native-image-viewing": "^0.1.8",
|
||||
"react-native-modalize": "^1.3.6",
|
||||
"react-native-paper": "^3.6.0",
|
||||
"react-native-reanimated": "~1.4.0",
|
||||
"react-native-render-html": "^4.1.2",
|
||||
"react-native-safe-area-context": "0.6.0",
|
||||
"react-native-screens": "2.0.0-alpha.12",
|
||||
"react-native-webview": "7.4.3",
|
||||
"react-native-appearance": "~0.3.1",
|
||||
"expo-linear-gradient": "~8.0.0",
|
||||
"expo-secure-store": "~8.0.0"
|
||||
"react-native-webview": "7.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-expo": "^8.0.0",
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@ import {View} from 'react-native';
|
|||
import i18n from "i18n-js";
|
||||
import DashboardItem from "../components/Home/EventDashboardItem";
|
||||
import WebSectionList from "../components/Lists/WebSectionList";
|
||||
import {Text, withTheme} from 'react-native-paper';
|
||||
import {Portal, Text, withTheme} from 'react-native-paper';
|
||||
import FeedItem from "../components/Home/FeedItem";
|
||||
import SquareDashboardItem from "../components/Home/SquareDashboardItem";
|
||||
import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
|
||||
import {stringToDate} from "../utils/Planning";
|
||||
import {openBrowser} from "../utils/WebBrowser";
|
||||
import ImageView from "react-native-image-viewing";
|
||||
// import DATA from "../dashboard_data.json";
|
||||
|
||||
|
||||
|
|
@ -29,10 +30,15 @@ type Props = {
|
|||
theme: Object,
|
||||
}
|
||||
|
||||
type State = {
|
||||
imageModalVisible: boolean,
|
||||
imageList: Array<Object>,
|
||||
}
|
||||
|
||||
/**
|
||||
* Class defining the app's home screen
|
||||
*/
|
||||
class HomeScreen extends React.Component<Props> {
|
||||
class HomeScreen extends React.Component<Props, State> {
|
||||
|
||||
onProxiwashClick: Function;
|
||||
onTutorInsaClick: Function;
|
||||
|
|
@ -43,6 +49,11 @@ class HomeScreen extends React.Component<Props> {
|
|||
|
||||
colors: Object;
|
||||
|
||||
state = {
|
||||
imageModalVisible: false,
|
||||
imageList: [],
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onProxiwashClick = this.onProxiwashClick.bind(this);
|
||||
|
|
@ -405,6 +416,18 @@ class HomeScreen extends React.Component<Props> {
|
|||
openBrowser(link, this.colors.primary);
|
||||
}
|
||||
|
||||
showImageModal(imageList) {
|
||||
this.setState({
|
||||
imageModalVisible: true,
|
||||
imageList: imageList,
|
||||
});
|
||||
};
|
||||
|
||||
hideImageModal = () => {
|
||||
this.setState({imageModalVisible: false});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Gets a render item for the given feed object
|
||||
*
|
||||
|
|
@ -412,16 +435,21 @@ class HomeScreen extends React.Component<Props> {
|
|||
* @return {*}
|
||||
*/
|
||||
getFeedItem(item: Object) {
|
||||
const onImagePress = this.openLink.bind(this, item.full_picture);
|
||||
const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
|
||||
const imageList = [
|
||||
{
|
||||
uri: item.full_picture,
|
||||
}
|
||||
];
|
||||
const onPress = this.showImageModal.bind(this, imageList);
|
||||
return (
|
||||
<FeedItem
|
||||
title={NAME_AMICALE}
|
||||
subtitle={HomeScreen.getFormattedDate(item.created_time)}
|
||||
full_picture={item.full_picture}
|
||||
message={item.message}
|
||||
onImagePress={onImagePress}
|
||||
onOutLinkPress={onOutLinkPress}
|
||||
onImagePress={onPress}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -441,13 +469,25 @@ class HomeScreen extends React.Component<Props> {
|
|||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<WebSectionList
|
||||
createDataset={this.createDataset}
|
||||
navigation={nav}
|
||||
autoRefreshTime={REFRESH_TIME}
|
||||
refreshOnFocus={true}
|
||||
fetchUrl={DATA_URL}
|
||||
renderItem={this.getRenderItem}/>
|
||||
<View>
|
||||
<WebSectionList
|
||||
createDataset={this.createDataset}
|
||||
navigation={nav}
|
||||
autoRefreshTime={REFRESH_TIME}
|
||||
refreshOnFocus={true}
|
||||
fetchUrl={DATA_URL}
|
||||
renderItem={this.getRenderItem}/>
|
||||
<Portal>
|
||||
<ImageView
|
||||
images={this.state.imageList}
|
||||
imageIndex={0}
|
||||
presentationStyle={"fullScreen"}
|
||||
visible={this.state.imageModalVisible}
|
||||
onRequestClose={this.hideImageModal}
|
||||
/>
|
||||
</Portal>
|
||||
</View>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,23 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image, ScrollView, View} from 'react-native';
|
||||
import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
|
||||
import HTML from "react-native-render-html";
|
||||
import {Linking} from "expo";
|
||||
import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
|
||||
import {Card, withTheme} from 'react-native-paper';
|
||||
import {Card, Portal, withTheme} from 'react-native-paper';
|
||||
import DateManager from "../../managers/DateManager";
|
||||
import ImageView from "react-native-image-viewing";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object
|
||||
};
|
||||
|
||||
type State = {
|
||||
imageModalVisible: boolean,
|
||||
};
|
||||
|
||||
function openWebLink(event, link) {
|
||||
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
|
||||
}
|
||||
|
|
@ -20,17 +25,29 @@ function openWebLink(event, link) {
|
|||
/**
|
||||
* Class defining a planning event information page.
|
||||
*/
|
||||
class PlanningDisplayScreen extends React.Component<Props> {
|
||||
class PlanningDisplayScreen extends React.Component<Props, State> {
|
||||
|
||||
displayData = this.props.route.params['data'];
|
||||
|
||||
colors: Object;
|
||||
|
||||
state = {
|
||||
imageModalVisible: false,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.colors = props.theme.colors;
|
||||
}
|
||||
|
||||
showImageModal = () => {
|
||||
this.setState({imageModalVisible: true});
|
||||
};
|
||||
|
||||
hideImageModal = () => {
|
||||
this.setState({imageModalVisible: false});
|
||||
};
|
||||
|
||||
render() {
|
||||
// console.log("rendering planningDisplayScreen");
|
||||
let subtitle = getFormattedEventTime(
|
||||
|
|
@ -45,10 +62,10 @@ class PlanningDisplayScreen extends React.Component<Props> {
|
|||
subtitle={subtitle}
|
||||
/>
|
||||
{this.displayData.logo !== null ?
|
||||
<View style={{width: '100%', height: 300}}>
|
||||
<TouchableOpacity onPress={this.showImageModal} style={{width: '100%', height: 300}}>
|
||||
<Image style={{flex: 1, resizeMode: "contain"}}
|
||||
source={{uri: this.displayData.logo}}/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
: <View/>}
|
||||
|
||||
{this.displayData.description !== null ?
|
||||
|
|
@ -62,6 +79,15 @@ class PlanningDisplayScreen extends React.Component<Props> {
|
|||
onLinkPress={openWebLink}/>
|
||||
</Card.Content>
|
||||
: <View/>}
|
||||
<Portal>
|
||||
<ImageView
|
||||
images={[{uri: this.displayData.logo}]}
|
||||
imageIndex={0}
|
||||
presentationStyle={"fullScreen"}
|
||||
visible={this.state.imageModalVisible}
|
||||
onRequestClose={this.hideImageModal}
|
||||
/>
|
||||
</Portal>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue