Merge pull request #6 from Expertizo/v0.1.3

v0.1.3: New Props and Bugs fixing

README.md

@@ -13,16 +13,17 @@ Below you will find some information on how to perform common tasks.<br>
 - [License](#license)
 
 
-## What's new `v0.1.2`
+## What's new `v0.1.3`
+* New props added: `align`, `fromLeft`, `fromRight`
+* Responsive bugs fixed.
 
-Overlay Counts added for more than 5 images.
 
 
 ## Demo
 ![react-fb-image-grid](https://media.giphy.com/media/g04KayLmHrF5hqXzf6/giphy.gif)
 
 
-## Features `v0.1.2`
+## Some Features Video
 https://youtu.be/HdEhsDNkw6s
 
 
@@ -57,6 +58,9 @@ hideOverlay | Boolean | false | `{true}`
 renderOverlay | Function | `() => 'Preview Image'` | `{() => <button>Show Image</button>}`
 overlayBackgroundColor | String | `#222222` | `'green'` or `'#000000'` or `'rgb(255, 26, 26)'`
 onClickEach | Function | null | `{({src, index}) => {}}`
+align | String | 'center' | `'left'` or `'right'` or `'center'`
+fromLeft | Number | null | `{50}` `//Package consider this as percent to move from left`
+fromRight | Number | null | `{80}` `//Package consider this as percent to move from right`
 
 
 ## Pull Requests

demo/src/index.js

@@ -4,17 +4,19 @@ import '../../src/css/style.css';
 import FbImageLibrary from '../../src'
 
 const images = ['https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
-  'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg',
-  'https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg',
-  'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
-  'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350', " ", " " ]
+    'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg',
+    'https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg',
+    'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
+    'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350',
+    "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
+    "https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg"]
 
 class Demo extends Component {
-  render() {
-    return <div>
-      <FbImageLibrary images={images}/>
-    </div>
-  }
+    render() {
+        return <div>
+            <FbImageLibrary images={images} width="50" align="right"/>
+        </div>
+    }
 }
 
 render(<Demo/>, document.querySelector('#demo'))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fb-image-grid",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A beautifully featured image grid library for React which represents the images just like the facebook grid images with the count for extra as well",
   "main": "lib/index.js",
   "module": "es/index.js",

src/components/Images.js

@@ -11,7 +11,10 @@ class Images extends Component {
     renderOverlay: () => 'Preview Image',
     overlayBackgroundColor: '#222222',
     onClickEach: null,
-    countFrom: 5
+    countFrom: 5,
+    align: 'center',
+    fromLeft: null,
+    fromRight: null
   }
 
   constructor(props) {
@@ -31,6 +34,25 @@ class Images extends Component {
     }
   }
 
+  getStyle() {
+    const {width, align, fromLeft, fromRight} = this.props;
+    const style = {};
+
+    style['width'] = `${width}%`;
+    if(['left', 'right'].includes(align)) {
+      const alignText = align === 'left' ? "Left" : "Right";
+      style[`margin${alignText}`] = 0
+    }
+    if(typeof fromLeft === "number") {
+      style[`marginLeft`] = `${fromLeft}%`;
+    }
+    if(typeof fromRight === "number") {
+      style[`marginRight`] = `${fromRight}%`;
+    }
+
+    return style
+  }
+
   openModal(index) {
     const {onClickEach, images} = this.props;
 
@@ -46,13 +68,12 @@ class Images extends Component {
   }
 
   renderOne() {
-    const {width, images} = this.props;
+    const {images, width} = this.props;
     const {countFrom} = this.state;
     const height = `${100 * (width / 100)}vw`;
-
     const overlay = images.length > countFrom && countFrom == 1 ? this.renderCountOverlay(true) : this.renderOverlay();
 
-    return  <Grid style={{width: `${width}%`}}>
+    return  <Grid style={this.getStyle()}>
       <Row>
         <Col xs={12} md={12} className={`border height-${images.length == 1 || countFrom == 1 ? 'one' : 'two' } background`} onClick={this.openModal.bind(this, 0)} style={{background: `url(${images[0]})`, height}}>
           {overlay}
@@ -68,7 +89,7 @@ class Images extends Component {
     const height = `${50 * (width / 100)}vw`;
     const conditionalRender = [3, 4].includes(images.length) || images.length > +countFrom && [3, 4].includes(+countFrom);
 
-    return <Grid style={{width: `${width}%`}}>
+    return <Grid style={this.getStyle()}>
       <Row>
         <Col xs={6} md={6} className="border height-two background" onClick={this.openModal.bind(this, conditionalRender ? 1 : 0)} style={{background: `url(${conditionalRender ? images[1] : images[0]})`, height}}>
           {this.renderOverlay()}
@@ -83,17 +104,17 @@ class Images extends Component {
   renderThree(more) {
     const {width, images} = this.props;
     const {countFrom} = this.state;
-    const overlay = !countFrom || countFrom > 5 || images.length > countFrom && [4, 5].includes(+countFrom) ? this.renderCountOverlay(true) : this.renderOverlay();
+    const overlay = !countFrom || countFrom > 5 || images.length > countFrom && [4, 5].includes(+countFrom) ? this.renderCountOverlay(true) : this.renderOverlay(conditionalRender ? 3 : 4);
     const height = `${33 * (width / 100)}vw`;
     const conditionalRender = images.length == 4 || images.length > +countFrom && +countFrom == 4;
 
-    return <Grid style={{width: `${width}%`}}>
+    return <Grid style={this.getStyle()}>
       <Row>
         <Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 1 : 2)} style={{background: `url(${conditionalRender ? images[1] : images[2]})`, height}}>
-          {this.renderOverlay()}
+          {this.renderOverlay(conditionalRender ? 1 : 2)}
         </Col>
         <Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 2 : 3)} style={{background: `url(${conditionalRender ? images[2] : images[3]})`, height}}>
-          {this.renderOverlay()}
+          {this.renderOverlay(conditionalRender ? 2 : 3)}
         </Col>
         <Col xs={6} md={4} className="border height-three background" onClick={this.openModal.bind(this, conditionalRender ? 3 : 4)} style={{background: `url(${ conditionalRender ? images[3] : images[4]})`, height}}>
           {overlay}
@@ -102,7 +123,7 @@ class Images extends Component {
     </Grid>;
   }
 
-  renderOverlay() {
+  renderOverlay(id) {
     const {hideOverlay, renderOverlay, overlayBackgroundColor, width} = this.props;
     const fontSize = `${3 * (width / 100)}vw`;
 
@@ -111,7 +132,8 @@ class Images extends Component {
     }
 
     return [
-      <div className="cover slide" style={{backgroundColor: overlayBackgroundColor}}></div>, <div className="cover-text slide animate-text"  style={{fontSize}}>
+      <div key={`cover-${id}`} className="cover slide" style={{backgroundColor: overlayBackgroundColor}}></div>,
+      <div key={`cover-text-${id}`} className="cover-text slide animate-text"  style={{fontSize}}>
         {renderOverlay()}
       </div>
     ]
@@ -136,7 +158,7 @@ class Images extends Component {
     }
 
     return(
-        <div className="App">
+        <div className="grid-container">
           {[1, 3, 4].includes(imagesToShow.length)  && this.renderOne()}
           {imagesToShow.length >= 2 && imagesToShow.length != 4 && this.renderTwo()}
           {imagesToShow.length >= 4 && this.renderThree()}
@@ -155,7 +177,10 @@ Images.propTypes = {
   renderOverlay: PropTypes.func,
   overlayBackgroundColor: PropTypes.string,
   onClickEach: PropTypes.func,
-  countFrom: PropTypes.number
+  countFrom: PropTypes.number,
+  align: PropTypes.string,
+  fromLeft: PropTypes.number,
+  fromRight: PropTypes.number
 };
 
 export default Images;

src/css/style.css

@@ -1,41 +1,22 @@
 @import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
 @import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css';
 
-.App {
+/* Images Component CSS */
+
+.grid-container {
   text-align: center;
   margin: auto;
+  width: 100%;
+  position: absolute;
   padding: 10px;
   height: inherit;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.container {
+  padding-left: 0;
+  padding-right: 0;
 }
 
-/* Images Component CSS */
-
-
 .container *{
   margin: 0;
   padding: 0;