feat(LazyLoadImages): EagerLoadImages now takes a predicate

Author: gja

README.md

@@ -209,7 +209,7 @@ import { LazyCollection } from '@quintype/components'
 
 This component will ensure all [ResponsiveImages](#ResponsiveImage) that are in its descendent path will be loaded async. By default, the image is loaded with an empty gif, and the image becomes visible when the image scrolls 250 from the edge of the screen.
 
-You can use `EagerLoadImages` or `eager={true}` to force the image to be eager.
+You can use `EagerLoadImages` or `eager={true}` to force the image to be eager. If `EagerLoadImages` is passed a predicate, then images that pass a matching value to `eager` will be rendered eagerly.
 
 ```javascript
 import { LazyLoadImages, EagerLoadImages } from '@quintype/components';
@@ -221,11 +221,15 @@ function LazyLoadSecondImage() {
       <div>
         <UnrelatedContent/>
         <ResponsiveImage slug={props["lazy-image-1"]} />
-        <ResponsiveImage slug={props["lazy-image-forced-to-be-eager"]} eager={true}/>
+        <ResponsiveImage slug={props["lazy-image-forced-to-be-eager"]} eager/>
         <ResponsiveImage slug={props["lazy-image-2"]} />
         <EagerLoadImages>
           <ResponsiveImage slug={props["lazy-image-forced-to-be-eager"]} />
         </EagerLoadImages>
+        <EagerLoadImages predicate={(token) => token % 2 === 0}>
+          <ResponsiveImage slug={props["lazy-image"]} eager={1} />
+          <ResponsiveImage slug={props["eager-image"]} eager={2} />
+        </EagerLoadImages>
       </div>
     </LazyLoadImages>
     <ResponsiveImage slug={props["eager-image-2"]} />

src/components/lazy-load-images.js

@@ -109,11 +109,15 @@ export class LazyLoadImages extends React.Component {
   }
 }
 
+LazyLoadImages.childContextTypes = {
+  lazyLoadObserveImage: func,
+  lazyLoadUnobserveImage: func
+};
+
 export class EagerLoadImages extends React.Component {
   getChildContext() {
     return {
-      lazyLoadObserveImage: null,
-      lazyLoadUnobserveImage: null
+      lazyLoadEagerPredicate: this.props.predicate || (() => true)
     }
   }
 
@@ -122,7 +126,6 @@ export class EagerLoadImages extends React.Component {
   }
 }
 
-EagerLoadImages.childContextTypes = LazyLoadImages.childContextTypes = {
-  lazyLoadObserveImage: func,
-  lazyLoadUnobserveImage: func
+EagerLoadImages.childContextTypes = {
+  lazyLoadEagerPredicate: func
 };

src/components/responsive-image.js

@@ -48,7 +48,10 @@ export class ResponsiveImageBase extends React.Component {
   }
 
   shouldLazyLoad() {
-    if (this.props.eager) {
+    if (this.props.eager === true) {
+      return false;
+    }
+    if (this.context.lazyLoadEagerPredicate && this.context.lazyLoadEagerPredicate(this.props.eager)) {
       return false;
     }
     if (this.context.lazyLoadObserveImage && this.context.lazyLoadUnobserveImage) {
@@ -86,7 +89,8 @@ function mapStateToProps(state) {
 
 ResponsiveImageBase.contextTypes = {
   lazyLoadObserveImage: func,
-  lazyLoadUnobserveImage: func
+  lazyLoadUnobserveImage: func,
+  lazyLoadEagerPredicate: func
 }
 
 export const ResponsiveImage = connect(mapStateToProps, {})(ResponsiveImageBase);