muba-posting 5.0.6 → 5.0.9

package/Publish4.js

@@ -61,18 +61,21 @@ export default class Publish4 extends React.Component {
     return true;
   }
 
-  async loadUri(imgUri) {
-    if (imgUri) {
-      let fileType = imgUri.substring(imgUri.lastIndexOf('.') + 1).toLowerCase();
+  async loadUri(photo) {
+    if (photo) {
+      const photoStr = photo.uri.lastIndexOf('.') > 0 && photo.uri.lastIndexOf('.') > photo.uri.length - 5 ? photo.uri : photo.filename;
+      const fileType = photoStr.substring(photoStr.lastIndexOf('.') + 1).toLowerCase();
 
       const image = {
-        uri: imgUri,
+        uri: photo.uri,
         name: 'photo_' + this.state.images.length + '.' + fileType,
         type: 'image/' + fileType,
         mainPicture: this.state.images.length === 0,
         referenceType: 'AD',
         referenceId: this.props.postingAd.id,
-        extraInfo: this.state.images.length
+        extraInfo: this.state.images.length,
+        width: photo.width,
+        height: photo.height
       }
 
       this.loadImage(image);
@@ -127,14 +130,19 @@ export default class Publish4 extends React.Component {
 
   selectMainPhoto(itemSelected) {
     let imagesArray = this.state.images.slice();
+    let imageSize = this.state.imageSize.slice();
 
     for (let imageObject of imagesArray) {
       imageObject.mainPicture = false;
 
       if (imageObject.uri === itemSelected.uri) {
         imageObject.mainPicture = true;
-        imagesArray.splice(imagesArray.indexOf(imageObject), 1);
+        const imageIndex = imagesArray.indexOf(imageObject);
+        imagesArray.splice(imageIndex, 1);
         imagesArray.splice(0, 0, imageObject);
+
+        const size = imageSize.splice(imageIndex, 1);
+        imageSize.splice(0, 0, ...size);
       }
     }
     let index = 0;
@@ -146,7 +154,8 @@ export default class Publish4 extends React.Component {
 
     this.setState({
       updateMainPhoto: true,
-      images: imagesArray
+      images: imagesArray,
+      imageSize: imageSize
     });
   }
 
@@ -187,58 +196,70 @@ export default class Publish4 extends React.Component {
   }
 
   calculateImageSize = async (image) => {
-    if (!image.uri.startsWith('https://') || await this.imageExists(image.uri)) {
-      let imageSize = this.state.imageSize;
+    if (image.width && image.height) {
+      this.setImageSize(image.width, image.height);
+    } else if (!image.uri.startsWith('https://') || await this.imageExists(image.uri)) {
       Image.getSize(image.uri, (width, height) => {
-        if (this.state.containerWidth !== 0 && this.state.containerHeight !== 0) {
-          const containerRatio = this.state.containerWidth / this.state.containerHeight;
-          const imageRatio = width / height;
-
-          let finalWidth;
-          let finalHeight;
-          if (imageRatio > containerRatio) {
-            if (width > this.state.containerWidth) {
-              finalWidth = this.state.containerWidth;
-            } else {
-              finalWidth = width;
-            }
-            finalHeight = height * (finalWidth / width);
-          } else if (imageRatio < containerRatio) {
-            if (height > this.state.containerHeight) {
-              finalHeight = this.state.containerHeight;
-            } else {
-              finalHeight = height;
-            }
-            finalWidth = width * (finalHeight / height);
-          } else {
-            if (width > this.state.containerWidth) {
-              finalWidth = this.state.containerWidth;
-              finalHeight = this.state.containerHeight;
-            } else {
-              finalWidth = width;
-              finalHeight = height;
-            }
-          }
-          imageSize.push({
-            width: finalWidth,
-            height: finalHeight,
-            marginVertical: (this.state.containerHeight - finalHeight) / 2,
-            marginHorizontal: (this.state.containerWidth - finalWidth) / 2
-          });
+        this.setImageSize(width, height);
+      });
+    } else {
+      setTimeout(() => this.calculateImageSize(image), 500);
+    }
+  }
+
+  setImageSize(width, height) {
+    let imageSize = this.state.imageSize;
+    if (this.state.containerWidth !== 0 && this.state.containerHeight !== 0) {
+      const containerRatio = this.state.containerWidth / this.state.containerHeight;
+      const imageRatio = width / height;
+
+      let finalWidth;
+      let finalHeight;
+      if (imageRatio > containerRatio) {
+        if (width > this.state.containerWidth) {
+          finalWidth = this.state.containerWidth;
         } else {
-          imageSize.push({
-            width: '100%',
-            height: '100%',
-            marginVertical: 0,
-            marginHorizontal: 0
-          })
+          finalWidth = width;
         }
-        this.setState({
-          imageSize: imageSize
-        });
+        finalHeight = height * (finalWidth / width);
+      } else if (imageRatio < containerRatio) {
+        if (height > this.state.containerHeight) {
+          finalHeight = this.state.containerHeight;
+        } else {
+          finalHeight = height;
+        }
+        finalWidth = width * (finalHeight / height);
+      } else {
+        if (width > this.state.containerWidth) {
+          finalWidth = this.state.containerWidth;
+          finalHeight = this.state.containerHeight;
+        } else {
+          finalWidth = width;
+          finalHeight = height;
+        }
+      }
+      imageSize.push({
+        width: finalWidth,
+        height: finalHeight,
+        marginVertical: (this.state.containerHeight - finalHeight) / 2,
+        marginHorizontal: (this.state.containerWidth - finalWidth) / 2
       });
     } else {
-      setTimeout(() => this.calculateImageSize(image), 500);
+      imageSize.push({
+        width: '100%',
+        height: '100%',
+        marginVertical: 0,
+        marginHorizontal: 0
+      })
+    }
+    this.setState({
+      imageSize: imageSize
+    });
+  }
+
+  setContainerWidth = (event) => {
+    if (this.state.containerWidth === 0) {
+      this.setState({ containerWidth: event.nativeEvent.layout.width, containerHeight: event.nativeEvent.layout.height })
     }
   }
 
@@ -267,7 +288,7 @@ export default class Publish4 extends React.Component {
                 {this.state.allPhotosSelected ?
                   null
                   :
-                  <TouchableOpacity style={[commonStyles.photoBox, this.state.showErrorNoSelectedImages ? commonStyles.fieldError : null]} onPress={() => this.props.openPictureSelector()}>
+                  <TouchableOpacity onLayout={this.setContainerWidth} style={[commonStyles.photoBox, this.state.showErrorNoSelectedImages ? commonStyles.fieldError : null]} onPress={() => this.props.openPictureSelector()}>
                     <TouchableOpacity style={[commonStyles.photoBoxAddIcon]} onPress={() => this.props.openPictureSelector()}>
                       <TouchableHighlight underlayColor="#104a7a" onPress={() => this.props.openPictureSelector()}>
                         <FontAwesomeIcon style={commonStyles.photoAddIcon} name="plus-circled" />
@@ -280,10 +301,10 @@ export default class Publish4 extends React.Component {
                 }
                 {this.state.images.map((item, index) => {
                   return (
-                    <View style={[commonStyles.photoBox]} onLayout={(event) => this.setState({ containerWidth: event.nativeEvent.layout.width, containerHeight: event.nativeEvent.layout.height })} key={index}>
+                    <View style={[commonStyles.photoBox]} onLayout={this.setContainerWidth} key={index}>
                       <Image style={{ width: this.state.imageSize[index]?.width, height: this.state.imageSize[index]?.height, marginVertical: this.state.imageSize[index]?.marginVertical, marginHorizontal: this.state.imageSize[index]?.marginHorizontal }}
-                        resizeMode='center' source={{ uri: item.uri }} borderRadius={10} onError={() => this.rerenderImage(index)} />
-                      <ImageBackground style={[commonStyles.photoControls, commonStyles.row]} source={require('./assets/images/bg-shadow.png')} resizeMode='center' borderRadius={1.5}>
+                        resizeMode='cover' source={{ uri: item.uri }} borderRadius={10} onError={() => this.rerenderImage(index)} />
+                      <ImageBackground style={[commonStyles.photoControls, commonStyles.row]} source={require('./assets/images/bg-shadow.png')} resizeMode='stretch' borderRadius={1.5}>
 
                         <TouchableHighlight style={commonStyles.leftIcon} onPress={() => this.deleteImage(item.id, index)}>
                           <FontAwesomeIcon style={commonStyles.whiteIcon} name="cancel-circled" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muba-posting",
-  "version": "5.0.6",
+  "version": "5.0.9",
   "description": "Posting",
   "main": "Posting.js",
   "scripts": {