fix(Gallery): add ref getter

* feat(Image): added image component

* fix(image): was not accepting aspectRatio in getCdnUrl function

* fix(image): added background color to image, if image is not loaded yet

* fix(image): lazy is a type of bool not a string

* feat(gallery): added gallery component

* fix(image): added shape and remove props from intial state

* refactor(image): change name of storeContainerRef to setImageRef, removed aspectRatio which was redu

* fix(image): changed propType of shape to oneOf

* fix(image): added horizontal lazy load

* fix(image): added propType in Img.js, inside image component

* refactor(image): added default props in img.js inside image component

* fix(image): grayscale props will be false by default

* fix(gallery): use subscription method to perform horizonatal lazy loading of images inside a contain

* fix(image): use subscription method to perform horizonatal lazy load of images

* feat(images): added border in image.js component

* fix(add border in img.js in image component):

* fix(image): added componentDidUpdate in image.js

* fix(image): added display property

* feat(image): added image container in image.js

* fix(gallery): added height and width to gallery component

* refactor(images): remove display prop from component

* refactor(gallery): use flex fro display property in gallery.js

* fix(image): added height to image container

* style(image): removed shape props from img.js

* fix(gallery): removed white-space property and added display flex property in gallery.js

* fix(gallery): added conditional margin to gallery component in gallery.js

* fix(gallery): ref getter

src/components/Gallery/Gallery.js

@@ -19,22 +19,15 @@ const GalleryContainer = styled.div`
 class Gallery extends Component {
   getChildContext() {
     return {
-      subscribeToGalleryRef: this.subscribeToGalleryRef,
+      getGalleryRef: this.getGalleryRef,
     };
   }
 
   setGalleryRef = (ref) => {
-    this.listeners = this.listeners.filter((listener) => {
-      listener(ref);
-      return false;
-    });
+    this.galleryRef = ref;
   }
 
-  subscribeToGalleryRef = (listener) => {
-    this.listeners.push(listener);
-  }
-
-  listeners = [];
+  getGalleryRef = () => this.galleryRef
 
   render() {
     const {
@@ -54,7 +47,7 @@ class Gallery extends Component {
         {
           React.Children.map(children, (child) => (
             <Spacer margin={scrollDirection === 'horizontal' ? [0, 0.5, 0, 0] : [0, 0, 0.5, 0]}>
-              <Flex display="inline-block">
+              <Flex display="inline-flex">
                 {child}
               </Flex>
             </Spacer>
@@ -66,7 +59,7 @@ class Gallery extends Component {
 }
 
 Gallery.childContextTypes = {
-  subscribeToGalleryRef: PropTypes.node,
+  getGalleryRef: PropTypes.func,
 };
 
 Gallery.propTypes = {

src/components/Image/Image.js

@@ -23,13 +23,10 @@ class Image extends Component {
   };
 
   componentDidMount() {
-    const { subscribeToGalleryRef } = this.context;
-    if (subscribeToGalleryRef) {
-      subscribeToGalleryRef((galleryRef) => {
-        this.galleryRef = galleryRef;
-        this.galleryRef.addEventListener('scroll', this.handleScroll, { passive: true });
-        window.setTimeout(this.handleScroll);
-      });
+    const { getGalleryRef } = this.context;
+    if (getGalleryRef()) {
+      getGalleryRef().addEventListener('scroll', this.handleScroll, { passive: true });
+      window.setTimeout(this.handleScroll);
     }
     window.addEventListener('scroll', this.handleScroll, { passive: true });
     window.setTimeout(this.handleScroll);
@@ -41,8 +38,9 @@ class Image extends Component {
   }
 
   componentWillUnmount() {
-    if (this.galleryRef) {
-      this.galleryRef.removeEventListener('scroll', this.handleScroll, { passive: true });
+    const { getGalleryRef } = this.context;
+    if (getGalleryRef()) {
+      getGalleryRef().removeEventListener('scroll', this.handleScroll, { passive: true });
     }
     window.removeEventListener('scroll', this.handleScroll, { passive: true });
   }
@@ -57,10 +55,11 @@ class Image extends Component {
 
   handleScroll = () => {
     const { isLoaded } = this.state;
+    const { getGalleryRef } = this.context;
     if (!isLoaded && isInViewport(this.imageRef)) {
       this.setState({ shouldFetch: true });
-      if (this.galleryRef) {
-        this.galleryRef.removeEventListener('scroll', this.handleScroll, { passive: true });
+      if (getGalleryRef()) {
+        getGalleryRef().removeEventListener('scroll', this.handleScroll, { passive: true });
       }
       window.removeEventListener('scroll', this.handleScroll, { passive: true });
     }
@@ -106,7 +105,7 @@ class Image extends Component {
 }
 
 Image.contextTypes = {
-  subscribeToGalleryRef: PropTypes.func,
+  getGalleryRef: PropTypes.func,
 };
 
 Image.propTypes = {