react-native-thumbnail-grid - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

 {
   "name": "react-native-thumbnail-grid",
-  "version": "0.1.1",
-  "description": "the photo thumbnail grid",
+  "version": "0.1.2",
+  "description": "The photo thumbnail grid",
   "main": "PhotoGrid.js",
@@ -6,0 +6,0 @@ "scripts": {

PhotoGrid.js

@@ -12,4 +12,2 @@ import React, { Component } from 'react'
     this.state = {
-      width: 0,
-      height: 0,
       direction: null,
@@ -19,4 +17,4 @@ images: [],
       secondViewImages: [],
-      containerWidth: props.containerWidth,
-      containerHeight: props.containerHeight
+      width: props.width,
+      height: props.height
     }
@@ -59,3 +57,3 @@ }
     }, () => {
-      if (this.state.containerWidth) {
+      if (this.state.width) {
         this.setState({ images, firstViewImages, secondViewImages })
@@ -68,18 +66,25 @@ this.getDimensions(firstViewImages, secondViewImages)
   getDimensions (firstViewImages, secondViewImages) {
-    const { containerWidth, containerHeight } = this.state
-    const { width, height, ratio } = this.props
+    const { width, height } = this.props
+    let ratio = 0
+    if (secondViewImages.length === 0) {
+      ratio = 0
+    } else if (secondViewImages.length === 1) {
+      ratio = 1 / 2
+    } else {
+      ratio = this.props.ratio
+    }
     const iWidth = _.sumBy(firstViewImages, 'width')
     const iHeight = _.sumBy(firstViewImages, 'height')
     const direction = iWidth / iHeight > width / height ? 'column' : 'row'
-    
-    const firstViewWidth = direction === 'column' ? containerWidth : (containerWidth * (1 - ratio))
-    const firstViewHeight = direction === 'column' ? (containerHeight * (1 - ratio)) : containerHeight
 
-    const firstImageWidth = direction === 'column' ? (containerWidth / firstViewImages.length) : (containerWidth * (1 - ratio))
-    const firstImageHeight = direction === 'column' ? (containerHeight * (1 - ratio)) : (containerHeight / firstViewImages.length)
+    const firstImageWidth = direction === 'column' ? (width / firstViewImages.length) : (width * (1 - ratio))
+    const firstImageHeight = direction === 'column' ? (height * (1 - ratio)) : (height / firstViewImages.length)
 
-    const secondImageWidth = direction === 'column' ? (containerWidth * ratio) : (containerWidth / secondViewImages.length)
-    const secondImageHeight = direction === 'column' ? (containerHeight / secondViewImages.length) : (containerHeight * ratio)
+    const secondImageWidth = direction === 'column' ? (width * ratio) : (width / secondViewImages.length)
+    const secondImageHeight = direction === 'column' ? (height / secondViewImages.length) : (height * ratio)
 
-    this.setState({ firstImageWidth, firstImageHeight, secondImageWidth, secondImageHeight, direction, width, height })
+    const secondViewWidth = direction === 'column' ? width : (width * ratio)
+    const secondViewHeight = direction === 'column' ? (height * ratio) : height
+
+    this.setState({ secondViewWidth, secondViewHeight, firstImageWidth, firstImageHeight, secondImageWidth, secondImageHeight, direction, width, height })
   }
@@ -95,2 +100,4 @@
       secondViewImages,
+      secondViewWidth,
+      secondViewHeight,
       direction,
@@ -100,3 +107,3 @@ width,
     } = this.state
-
+    console.log(this.state)
     return (
@@ -117,3 +124,3 @@ <View style={[{ flexDirection: direction, width, height }, this.props.styles]}>
           secondViewImages.length ? (
-            <View style={{ flex: 1, flexDirection: direction === 'row' ? 'column' : 'row' }}>
+            <View style={{ width: secondViewWidth, height: secondViewHeight, flexDirection: direction === 'row' ? 'column' : 'row' }}>
               {secondViewImages.map((image, index) => (
@@ -120,0 +127,0 @@ <TouchableOpacity key={index} style={{ flex: 1 }}

readme.md

@@ -26,4 +26,5 @@ # React Native Photo Grid
 height | PropTypes.number | Container height
+ratio | PropTypes.float | Split screen ratio
 style | PropTypes.object | Container styles
 imageStyle | PropTypes.object | Image styles
 onPressImage | PropTypes.func | Callback when press image

No alert changes

Improved metrics

Total package byte prevSize

347582

0.04%

Lines of code

165

5.1%

Number of lines in readme file

30

3.45%

No dependency changes