Cleaned (and untested) image loading.

public/objects/image/Image.jsx

@@ -24,60 +24,61 @@
 import React from 'react';
 import LoadableImage from './LoadableImage';
 
-export default class Image extends React.Component {
+export default (props) => {
-  constructor(props) {
+  let newProps = {...props};
-    super(props);
-  }
 
-  onLoad(e) {
+  let {
-    if(this.props.onLoad) this.props.onLoad(e);
+    loadable, image, src, alt, width, height, sources, onLoad, onError,
-  }
+    maxWidth, maxHeight, images
+  } = props;
 
-  onError() {
-    if(this.props.onError) this.props.onErorr(e);
-  }
 
-  render() {
+  [
-    if(this.props.loadable) {
+    "loadable", "image", "src", "alt", "width", "height", "sources", "onLoad",
-      return <LoadableImage {...this.props} />;
+    "onError", "maxWidth", "maxHeight", "images"
-    }
+  ].forEach(e => delete newProps[e]);
 
-    let sourceProps = Object.assign({}, this.props);
+  width = parseInt(width);
+  maxWidth = parseInt(maxWidth);
+  height = parseInt(height);
+  maxHeight = parseInt(maxHeight);
+
+  if(loadable) return <LoadableImage {...props} />;
 
   //Prop Manipulation
-    if(sourceProps.image) {
+  if(image) {
-      if(Array.isArray(sourceProps.image)) {
+    if(Array.isArray(image)) {
-        sourceProps.sources = sourceProps.image;
+      sources = sources || image;
     } else {
-        sourceProps.src = sourceProps.image;
+      src = src || image;
     }
   }
 
-    if(sourceProps.src) {
+  if(src) {
-      if(sourceProps.src.images) sourceProps.sources = sourceProps.src.images;
+    if(src.images) sources = sources || src.images;
-      if(sourceProps.src.width) sourceProps.width = sourceProps.src.width;
+    if(src.width) width = width || src.width;
-      if(sourceProps.src.height) sourceProps.height = sourceProps.src.height;
+    if(src.height) height = height || src.height;
   }
 
   //Image
+  sources = sources || {};
   let sourceElements = [];
-    let sources = {};
 
-    let defaultSrc = sourceProps.src;
+  let defaultSrc = src;
-    let defaultAlt = sourceProps.alt;
+  let defaultAlt = alt;
-    let defaultWidth = sourceProps.width;
+  let defaultWidth = width;
-    let defaultHeight = sourceProps.height;
+  let defaultHeight = height;
 
-    if(sourceProps.sources) {
+  if(sources) {
     //Iterate over supplied sources
-      for(let i = 0; i < sourceProps.sources.length; i++) {
+    for(let i = 0; i < sources.length; i++) {
-        let x = sourceProps.sources[i];
+      let source = sources[i];
-        let width = x.size || x.width;
+      let width = source.size || source.width;
-        let isLast = (i+1) === sourceProps.sources.length;
+      let isLast = (i+1) === sources.length;
 
-        for(let scale = 1; scale <= 4; scale++) {
+      for(let scale = 1; scale <= 4; scale++) {//4 = max scales
         let scaledWidth = Math.round(width / scale);
-          let o = Object.assign({}, x);
+        let o = {...source};
         o.scale = scale;
         o.isLast = isLast;
         sources[scaledWidth] = sources[scaledWidth] || [];
@@ -85,31 +86,33 @@ export default class Image extends React.Component {
       }
     }
 
+    //Sort by size in descending order
     let keys = Object.keys(sources);
     keys.sort((l, r) => {
       return parseInt(l) - parseInt(r);
     });
+
     let breakNext = false;
     for(let i = 0; i < keys.length; i++) {
       if(breakNext) break;
       let k = keys[i];//The pixel size
 
       let ss = sources[k];//Sources at this pixel resolution
-        let mediaQuery = '(max-width:'+k+'px)';
+      let mediaQuery = `(max-width:${k}px)`;
       let sss = [];
 
       let isNextBreak = false;
-        if(this.props.maxWidth && (i+1 < keys.length)) {
+      if(maxWidth && (i+1 < keys.length)) {
-          if(keys[i+1] > parseInt(this.props.maxWidth)) isNextBreak = true;
+        if(keys[i+1] > parseInt(maxWidth)) isNextBreak = true;
       }
       if(isNextBreak) {
         breakNext = true;
-          mediaQuery = '(min-width:'+k+'px)';
+        mediaQuery = `(min-width:${k}px)`;
       }
 
       if(ss.length && ss[0].isLast) {
         let prev = i > 0 ? keys[i-1] : 0;
-          mediaQuery = '(min-width:'+prev+'px)';
+        mediaQuery = `(min-width:${prev}px)`;
       }
 
       for(let x = 0; x < ss.length; x++) {
@@ -118,9 +121,7 @@ export default class Image extends React.Component {
         sss.push( source + (scale.scale && scale.scale!=1 ? " "+scale.scale+"x" : "") );
       }
 
-        sourceElements.push(
+      sourceElements.push(<source media={mediaQuery} srcSet={sss.join(", ")} key={i} />);
-          <source media={mediaQuery} srcSet={ sss.join(", ") } key={i} />
-        );
     }
   }
 
@@ -128,16 +129,14 @@ export default class Image extends React.Component {
     <picture>
       { sourceElements }
       <img
-          onLoad={ this.onLoad.bind(this) }
+        {...newProps}
-          onError={ this.onError.bind(this) }
+        onLoad={ onLoad }
+        onError={ onError }
         src={ defaultSrc }
         alt={ defaultAlt }
-          className={ sourceProps.className }
         width={ defaultWidth }
         height={ defaultHeight }
-          title={sourceProps.title}
       />
     </picture>
   );
 }
-}

public/objects/image/LoadableImage.jsx

@@ -22,11 +22,14 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './LoadableImage.scss';
+
 import Image from './Image';
 import Loader from './../loading/Loader';
 import BoxSizer from './../layout/BoxSizer';
 
-class LoadableImage extends React.Component {
+export default class LoadableImage extends React.Component {
   constructor(props) {
     super(props);
 
@@ -39,37 +42,49 @@ class LoadableImage extends React.Component {
   componentWillUnmount() {}
 
   onLoad() {
+    let { onLoad } = this.props;
+    if(onLoad) onLoad();
+
     this.setState({
       loading: false
     });
   }
 
   onError() {
+    let { onError } = this.props;
+    if(onError) onError();
+
     this.setState({
       loading: false
     });
   }
 
   render() {
-    let p = Object.assign({}, this.props);
+    let newProps = {...this.props};
-    p.loadable = false;
+    let { loading } = this.state;
-    p.onLoad = this.onLoad.bind(this);
+    let { className, width, height } = this.props;
-    let image = <Image {...p} />;
 
-    let loader,imageSizerDuringLoad;
+    let loader,imageSizer;
+    let image = <Image {...newProps} className="o-loadable-image__image" />;
 
-    if(this.state.loading) {
+    let clazz = "o-loadable-image";
+
+    if(loading) {
+      clazz += " is-loading";
       loader = <Loader />;
-      if(p.width && p.height) {
+      if(width && height) {
-        imageSizerDuringLoad = <BoxSizer ratioWidth={p.width} ratioHeight={p.height} />
+        imageSizer = <BoxSizer ratioWidth={width} ratioHeight={height} />
       }
+    } else {
+      clazz += " is-loaded";
     }
 
+    if(className) clazz += ` ${className}`;
+
     return (
-      <div className={"o-loadable-image " + (this.state.loading ? "is-loading" : "is-loaded")}>
+      <div className={className}>
         { loader }
-        { imageSizerDuringLoad }
+        { imageSizer }
-
         <div className="o-loadable-image__image-container">
           { image }
         </div>
@@ -77,5 +92,3 @@ class LoadableImage extends React.Component {
     );
   }
 }
-
-export default LoadableImage;

public/objects/image/LoadableImage.scss

@@ -7,6 +7,8 @@
  *  Version:
  *    1.0.0 - 2018/07/11
  */
+@import '~@styles/global';
+
 @include t-keyframes(o-loadable-image--load-flash) {
   from {
     background: transparent;