Changes in images and src

nileshkikani · nileshkikani · commit d26334722bad · 2019-04-22T17:46:14.000+05:30
diff --git a/Component/Constant.js b/Component/Constant.js
@@ -1,46 +1,46 @@
-import { Dimensions } from "react-native";
+import { Dimensions } from 'react-native'
 
 // constants
-const DEVICE_WIDTH = Dimensions.get("window").width;
-const DEVICE_HEIGHT = Dimensions.get("window").height;
+const DEVICE_WIDTH = Dimensions.get('window').width
+const DEVICE_HEIGHT = Dimensions.get('window').height
 
-const SQUARE_WIDTH_PERCENT = 8.1333 / 100;
-const GUTTER_WIDTH_PERCENT = 2.6667 / 100;
-const CONTAINER_WIDTH_PERCENTAGE = 100 / 100;
+const SQUARE_WIDTH_PERCENT = 8.1333 / 100
+const GUTTER_WIDTH_PERCENT = 2.6667 / 100
+const CONTAINER_WIDTH_PERCENTAGE = 100 / 100
 
-const SQUARE_WIDTH = DEVICE_WIDTH * SQUARE_WIDTH_PERCENT;
-const GUTTER_WIDTH = DEVICE_WIDTH * GUTTER_WIDTH_PERCENT;
+const SQUARE_WIDTH = DEVICE_WIDTH * SQUARE_WIDTH_PERCENT
+const GUTTER_WIDTH = DEVICE_WIDTH * GUTTER_WIDTH_PERCENT
 
-const CONTAINER_WIDTH = DEVICE_WIDTH * CONTAINER_WIDTH_PERCENTAGE;
+const CONTAINER_WIDTH = DEVICE_WIDTH * CONTAINER_WIDTH_PERCENTAGE
 
-const CONTAINER_HEIGHT = DEVICE_HEIGHT;
+const CONTAINER_HEIGHT = DEVICE_HEIGHT
 
 // functions
 export function getSectionSize(xSquares = 1, ySquares = 1, fullScreenWidth = false) {
-    let width;
-    if (fullScreenWidth === true) {
-        width = DEVICE_WIDTH;
-    } else {
-        width = xSquares < 0 ? 0 : xSquares * SQUARE_WIDTH + (xSquares - 1) * GUTTER_WIDTH;
-    }
-    let height = null || ySquares < 0 ? 0 : ySquares * SQUARE_WIDTH + (ySquares - 1) * GUTTER_WIDTH;
-
-    return {
-        width: width,
-        height: height,
-        margin: GUTTER_WIDTH,
-    };
+  let width
+  if (fullScreenWidth === true) {
+    width = DEVICE_WIDTH
+  } else {
+    width = xSquares < 0 ? 0 : xSquares * SQUARE_WIDTH + (xSquares - 1) * GUTTER_WIDTH
+  }
+  let height = null || ySquares < 0 ? 0 : ySquares * SQUARE_WIDTH + (ySquares - 1) * GUTTER_WIDTH
+
+  return {
+    width: width,
+    height: height,
+    margin: GUTTER_WIDTH,
+  }
 }
 
 export default {
-    DEVICE_WIDTH,
-    DEVICE_HEIGHT,
-    SQUARE_WIDTH_PERCENT,
-    GUTTER_WIDTH_PERCENT,
-    CONTAINER_WIDTH_PERCENTAGE,
-    SQUARE_WIDTH,
-    GUTTER_WIDTH,
-    CONTAINER_WIDTH,
-    CONTAINER_HEIGHT,
-    getSectionSize,
-};
+  DEVICE_WIDTH,
+  DEVICE_HEIGHT,
+  SQUARE_WIDTH_PERCENT,
+  GUTTER_WIDTH_PERCENT,
+  CONTAINER_WIDTH_PERCENTAGE,
+  SQUARE_WIDTH,
+  GUTTER_WIDTH,
+  CONTAINER_WIDTH,
+  CONTAINER_HEIGHT,
+  getSectionSize,
+}
diff --git a/Component/Container.js b/Component/Container.js
@@ -1,59 +1,66 @@
-import React, { PureComponent } from "react";
-import { SafeAreaView, ScrollView, View, Text } from "react-native";
-import { styles } from "./SectionStyle";
-import Constant from "./Constant";
-import PropTypes from "prop-types";
+import React, { PureComponent } from 'react'
+import { SafeAreaView, ScrollView, View } from 'react-native'
+import { styles } from './SectionStyle'
+import Constant from './Constant'
+import PropTypes from 'prop-types'
 
-export default class Container extends PureComponent {
-    render() {
-        const isNested = this.props.isNested;
-        const isFullHeight = this.props.isFullHeight;
-        const zero = 0;
-        let height;
-        if (isFullHeight) {
-            height = "100%";
-        } else {
-            height = isNested ? "100%" : this.props.height;
-        }
-        return (
-            <SafeAreaView
-                style={{
-                    height: height,
-                    ...this.props.style,
-                    backgroundColor: "#fff",
-                }}
-            >
-                {isNested || isFullHeight ? (
-                    <View
-                        style={[
-                            styles.scrollContent,
-                            { ...this.props.style, marginHorizontal: isNested ? zero : Constant.GUTTER_WIDTH },
-                        ]}
-                    >
-                        {this.props.children}
-                    </View>
-                ) : (
-                    <ScrollView
-                        ref={scrollView => {
-                            this.scrollView = scrollView;
-                        }}
-                        contentContainerStyle={[styles.scrollContent, { ...this.props.style }]}
-                        removeClippedSubviews={false}
-                        alwaysBounceVertical={false} // for iOS
-                    >
-                        {this.props.children}
-                    </ScrollView>
-                )}
-            </SafeAreaView>
-        );
-    }
+class Container extends PureComponent {
+  render() {
+    const { isNested, backgroundColor } = this.props
+    const zero = 0
+    let height = isNested ? '100%' : this.props.height
+    const color = '#fff'
+    return (
+      <SafeAreaView
+        style={{
+          height: height,
+          ...this.props.style,
+          backgroundColor: color,
+        }}
+      >
+        {isNested ? (
+          <View
+            style={[
+              styles.scrollContent,
+              {
+                backgroundColor: backgroundColor,
+                ...this.props.style,
+                marginHorizontal: isNested ? zero : Constant.GUTTER_WIDTH,
+              },
+            ]}
+          >
+            {this.props.children}
+          </View>
+        ) : (
+          <ScrollView
+            ref={(scrollView) => {
+              this.scrollView = scrollView
+            }}
+            contentContainerStyle={[styles.scrollContent, { ...this.props.style }]}
+            removeClippedSubviews={false}
+            alwaysBounceVertical={false} // for iOS
+          >
+            {this.props.children}
+          </ScrollView>
+        )}
+      </SafeAreaView>
+    )
+  }
 }
 
-Container.prototypes = {
-    height: PropTypes.number,
-    width: PropTypes.number,
-};
+export default Container
+
+Container.propTypes = {
+  height: PropTypes.number,
+  isNested: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  style: PropTypes.oneOf(PropTypes.object, PropTypes.array, PropTypes.number),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+}
 Container.defaultProps = {
-    height: Constant.CONTAINER_HEIGHT,
-    width: Constant.CONTAINER_WIDTH,
-};
+  height: Constant.CONTAINER_HEIGHT,
+  isNested: false,
+  backgroundColor: 'white',
+  style:null,
+  children:null
+}
diff --git a/Component/SectionStyle.js b/Component/SectionStyle.js
@@ -1,16 +1,20 @@
-import { StyleSheet } from "react-native";
-import Constant from "./Constant";
+import { StyleSheet } from 'react-native'
+import Constant from './Constant'
 
 export const styles = StyleSheet.create({
-    fullScreenWidth: {},
-    scrollContent: {
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: Constant.CONTAINER_WIDTH,
-    },
-    secondaryContainer: {
-        marginBottom: 0,
-        marginRight: 0,
-        padding: 0,
-    },
-});
+  fullScreenWidth: {
+    margin: 0,
+    width: Constant.CONTAINER_WIDTH,
+  },
+  scrollContent: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    width: Constant.CONTAINER_WIDTH,
+  },
+  secondaryContainer: {
+    marginBottom: 0,
+    marginRight: 0,
+    padding: 0,
+  },
+})
+
diff --git a/Component/Square.js b/Component/Square.js
@@ -2,18 +2,20 @@ import React, { PureComponent } from "react";
 import { View } from "react-native";
 import { styles } from "./SectionStyle";
 import Constant from "./Constant";
+import PropTypes from "prop-types";
 
 export default class Square extends PureComponent {
     render() {
-        const { xSquares, ySquares, fullScreenWidth, allowHeightExcess } = this.props;
+        const { xSquares, ySquares, fullScreenWidth, allowHeightExcess, backgroundColor } = this.props;
         let dimensions = Constant.getSectionSize(xSquares, ySquares, fullScreenWidth);
         const maxHeight = allowHeightExcess ? null : dimensions.height;
+
         return (
             <View
                 style={[
                     styles.secondaryContainer,
                     {
-                        backgroundColor: "pink",
+                        backgroundColor: backgroundColor,
                         margin: dimensions.margin,
                         minHeight: dimensions.height,
                         maxHeight: maxHeight,
@@ -28,7 +30,20 @@ export default class Square extends PureComponent {
         );
     }
 }
-Square.prototypes = {
-    height: PropTypes.number,
-    width: PropTypes.number,
+Square.propTypes = {
+    xSquares: PropTypes.number,
+    ySquares: PropTypes.number,
+    backgroundColor: PropTypes.string,
+    allowHeightExcess: PropTypes.bool,
+    fullScreenWidth: PropTypes.bool,
+    style: PropTypes.oneOf(PropTypes.object, PropTypes.array, PropTypes.number),
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+};
+Square.defaultProps = {
+    xSquares: 1,
+    ySquares: 1,
+    backgroundColor: "#D3D3D3",
+    allowHeightExcess: false,
+    fullScreenWidth: false,
+    style: null,
 };
diff --git a/RNGrid.png b/RNGrid.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logisticinfotech/react-native-grid",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Grid Layout library for React Native",
   "main": "index.js",
   "scripts": {
@@ -23,5 +23,8 @@
   "bugs": {
     "url": "https://github.com/logisticinfotech/react-native-grid/issues"
   },
-  "homepage": "https://github.com/logisticinfotech/react-native-grid#readme"
+  "homepage": "https://github.com/logisticinfotech/react-native-grid#readme",
+  "dependencies": {
+    "prop-types": "^15.7.2"
+  }
 }
