react-native-image-gallery-refis360movil
Version:
A React Native image gallery browser with interactive animations
361 lines (346 loc) • 10.8 kB
JavaScript
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { Modal, Platform, SafeAreaView, StyleSheet, TouchableWithoutFeedback, Animated, Alert, Dimensions, PermissionsAndroid } from 'react-native';
import { default as Ionicons } from 'react-native-vector-icons/Ionicons';
import Api from '../../../src/utils/api';
import { ImageListContainer } from './ImageListContainer';
import ImageResizer from 'react-native-image-resizer-refis360movil';
import {launchCamera} from 'react-native-image-picker';
import { ImageViewer } from './ImageViewer';
import { uiTheme } from './UITheme';
var images;
var options = {
title: 'Selecciona una foto',
takePhotoButtonTitle: 'Tomar una foto',
chooseFromLibraryButtonTitle: 'Desde galería',
cancelButtonTitle: 'Cancelar',
storageOptions: {
skipBackup: true,
path: 'images'
}
};
export class ImageGallery extends React.Component {
constructor(props) {
super(props);
this.state = {
mode: 'contain',
images: [],
imageId: undefined,
onlyScaleDown: false,
showImageViewer: false,
resizeTargetSize: 1000,
};
this.imageMeasurers = {};
this.imageSizeMeasurers = {};
this.onChangePhoto = this.onChangePhoto.bind(this);
this.onSourceContext = this.onSourceContext.bind(this);
this.openImageViewer = this.openImageViewer.bind(this);
this.closeImageViewer = this.closeImageViewer.bind(this);
this.getSourceContext = this.getSourceContext.bind(this);
this.componentTheme = Object.assign({}, uiTheme, props.theme);
}
getChildContext() {
return {
onSourceContext: this.onSourceContext
};
}
onSourceContext(imageId, cellMeasurer, imageMeasurer) {
this.imageMeasurers[imageId] = cellMeasurer;
this.imageSizeMeasurers[imageId] = imageMeasurer;
}
getSourceContext(imageId) {
return {
imageSizeMeasurer: this.imageSizeMeasurers[imageId],
measurer: this.imageMeasurers[imageId]
};
}
openImageViewer(imageId) {
if (imageId == 1) {
this.pickImage();
} else {
const {
onPress
} = this.props;
this.setState({
imageId,
showImageViewer: true
});
if (onPress) {
onPress(imageId);
}
}
}
closeImageViewer() {
this.setState({
imageId: undefined,
showImageViewer: false
});
}
onChangePhoto(imageId) {
this.setState({
imageId
});
}
trash() {
Alert.alert(
'Eliminar imagen',
'¿En realidad deseas elimnar esta imagen?', [{
text: 'Cancelar',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
},
{
text: 'Aceptar',
onPress: () => this.delete()
},
], {
cancelable: false
}
)
}
delete() {
Api.post('appcgenmerc/borrarMercanciaBuqueImage', {
imageId: this.state.imageId
})
.then(data => data.json())
.then(data => {
if (data == 1) {
this.props.onDeleteImage(data);
this.closeImageViewer();
} else {
Alert.alert('Problema!', 'No se pudo borrar la imagen, intenta más tarde');
}
});
}
pickImage = async() => {
const { mode, onlyScaleDown, resizeTargetSize } = this.state;
const grantedcamera = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "App Camera Permission",
message:"App needs access to your camera ",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (grantedcamera === PermissionsAndroid.RESULTS.GRANTED) {
console.log("Camera & storage permission given");
var options = {
mediaType: 'photo', //to allow only photo to select ...no video
saveToPhotos:true, //to store captured photo via camera to photos or else it will be stored in temp folders and will get deleted on temp clear
includeBase64:false,
};
launchCamera (options, (res) => {
if (res.didCancel) {
console.log('User cancelled image picker');
} else if (res.error) {
console.log('ImagePicker Error: ', res.error);
} else if (res.customButton) {
console.log('User tapped custom button: ', res.customButton);
alert(res.customButton);
} else {
Api.post('appcgenmerc/obtenerMaxImagenTamanio', {})
.then(data => data.json())
.then(data => {
ImageResizer.createResizedImage(res.assets[0].uri, resizeTargetSize, resizeTargetSize, 'JPEG', 100, 0, undefined, false, { mode, onlyScaleDown })
.then(resizedImage => {
if ((resizedImage.fileSize / 1048576) > data.tValor) {
Alert.alert(
'Tamaño mayor al deseado!',
'El tamaño máximo para una imágen son ' + data.tValor + ' MB', [{
text: 'Cancelar',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
},
{
text: 'Aceptar',
onPress: () => console.log('OK Pressed')
},
], {
cancelable: false
}
)
} else {
this.setState({
images: this.state.images.concat(resizedImage)
});
}
})
.catch(err => {
console.log(err);
return Alert.alert(
'Unable to resize the photo',
'Check the console for full the error message',
);
});
});
Alert.alert(
'¿Tomar otra foto o terminar el proceso? ',
null,
[
{
text: 'Tomar',
onPress: () => {
this.pickImage();
}
},
{
text: 'Terminar',
onPress: () => {
this.props.onUploadImage(this.state.images);
this.setState({ images: [] });
}
},
],
{ cancelable: false }
);
}
});
} else {
console.log("Camera permission denied");
}
}
renderModal() {
const {
images,
pantallaOrigen,
infoDescriptionStyles,
infoTitleStyles,
theme
} = this.props;
const {
imageGalleryCloseSize = 50, imageGalleryTextColor = '#fff', imageGalleryTextSize = 11, imageGalleryBgColor = '#000', statusBarTheme = 'light-content'
} = theme;
const {
imageId,
showImageViewer
} = this.state;
const themeIconClose = [
viewStyles.closeIcon,
viewStyles.textShadow,
{
color: imageGalleryTextColor,
fontSize: imageGalleryCloseSize
}
];
const themeIconTrash = [
viewStyles.closeIcon,
viewStyles.textShadow,
{
color: imageGalleryTextColor,
fontSize: imageGalleryCloseSize,
paddingLeft: Dimensions.get('window').width-100
}
];
if (showImageViewer && imageId) {
return (React.createElement(Modal, {
visible: true,
transparent: true,
animationType: Platform.OS === 'ios' ? 'none' : 'fade',
onRequestClose: this.closeImageViewer
},
React.createElement(ImageViewer, {
getSourceContext: this.getSourceContext,
imageId: imageId,
images: images,
infoTitleStyles: infoTitleStyles,
infoDescriptionStyles: infoDescriptionStyles,
onChange: this.onChangePhoto,
onClose: this.closeImageViewer,
cerrar: this.closeImageViewer,
theme: this.componentTheme
}),
React.createElement(TouchableWithoutFeedback, {},
React.createElement(Animated.View, {
style: [viewStyles.closeTextContainer, {
opacity: this.buttonOpacity
}]
},
React.createElement(Ionicons, {
name: "ios-close-circle-outline",
onPress: this.closeImageViewer,
style: themeIconClose
}),
(pantallaOrigen != 0) ?
React.createElement(Ionicons, {
name: "ios-trash",
onPress: this.trash.bind(this),
style: themeIconTrash
}) : null
))
));
}
return null;
}
render() {
const {
imageHeight,
imageWidth,
images,
topMargin = 0
} = this.props;
const {
imageId,
showImageViewer
} = this.state;
return (React.createElement(SafeAreaView, {
style: styles.container
},
React.createElement(ImageListContainer, {
activeId: imageId,
imageHeight: imageHeight,
imageWidth: imageWidth,
images: images,
onPress: this.openImageViewer,
showImageViewer: showImageViewer,
topMargin: topMargin,
theme: this.componentTheme
}),
this.renderModal()));
}
}
ImageGallery.propTypes = {
imageHeight: PropTypes.number,
imageWidth: PropTypes.number,
images: PropTypes.array,
pantallaOrigen: PropTypes.number, //0=>detalle, 1=>buque, 2=>muelle, 3=>recinto, 4=>hub
infoDescriptionStyles: PropTypes.object,
infoTitleStyles: PropTypes.object,
onPress: PropTypes.func,
theme: PropTypes.object,
topMargin: PropTypes.number
};
ImageGallery.defaultProps = {
images: [],
pantallaOrigen: 0,
theme: {},
topMargin: 0
};
ImageGallery.childContextTypes = {
onSourceContext: PropTypes.func.isRequired
};
const styles = StyleSheet.create({
container: {
flex: 1
}
});
const viewStyles = StyleSheet.create({
closeIcon: {
padding: 5,
textAlign: 'center'
},
closeTextContainer: {
backgroundColor: 'transparent',
flexDirection: 'row'
},
textShadow: {
textShadowColor: 'rgba(0, 0, 0, 0.5)',
textShadowOffset: {
width: 1,
height: 1
},
textShadowRadius: 3
}
});
//# sourceMappingURL=ImageGallery.js.map