Cleaned (and untested) image loading.

public/objects/image/Image.jsx

@@ -24,120 +24,119 @@
 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]);
+
+  width = parseInt(width);
+  maxWidth = parseInt(maxWidth);
+  height = parseInt(height);
+  maxHeight = parseInt(maxHeight);
+
+  if(loadable) return <LoadableImage {...props} />;
+
+  //Prop Manipulation
+  if(image) {
+    if(Array.isArray(image)) {
+      sources = sources || image;
+    } else {
+      src = src || image;
     }
+  }
 
-    let sourceProps = Object.assign({}, this.props);
+  if(src) {
+    if(src.images) sources = sources || src.images;
+    if(src.width) width = width || src.width;
+    if(src.height) height = height || src.height;
+  }
 
-    //Prop Manipulation
+  //Image
-    if(sourceProps.image) {
+  sources = sources || {};
-      if(Array.isArray(sourceProps.image)) {
+  let sourceElements = [];
-        sourceProps.sources = sourceProps.image;
+
-      } else {
+  let defaultSrc = src;
-        sourceProps.src = sourceProps.image;
+  let defaultAlt = alt;
+  let defaultWidth = width;
+  let defaultHeight = height;
+
+  if(sources) {
+    //Iterate over supplied sources
+    for(let i = 0; i < sources.length; i++) {
+      let source = sources[i];
+      let width = source.size || source.width;
+      let isLast = (i+1) === sources.length;
+
+      for(let scale = 1; scale <= 4; scale++) {//4 = max scales
+        let scaledWidth = Math.round(width / scale);
+        let o = {...source};
+        o.scale = scale;
+        o.isLast = isLast;
+        sources[scaledWidth] = sources[scaledWidth] || [];
+        sources[scaledWidth].push(o);
       }
     }
 
-    if(sourceProps.src) {
+    //Sort by size in descending order
-      if(sourceProps.src.images) sourceProps.sources = sourceProps.src.images;
+    let keys = Object.keys(sources);
-      if(sourceProps.src.width) sourceProps.width = sourceProps.src.width;
+    keys.sort((l, r) => {
-      if(sourceProps.src.height) sourceProps.height = sourceProps.src.height;
+      return parseInt(l) - parseInt(r);
-    }
+    });
 
-    //Image
+    let breakNext = false;
-    let sourceElements = [];
+    for(let i = 0; i < keys.length; i++) {
-    let sources = {};
+      if(breakNext) break;
+      let k = keys[i];//The pixel size
 
-    let defaultSrc = sourceProps.src;
+      let ss = sources[k];//Sources at this pixel resolution
-    let defaultAlt = sourceProps.alt;
+      let mediaQuery = `(max-width:${k}px)`;
-    let defaultWidth = sourceProps.width;
+      let sss = [];
-    let defaultHeight = sourceProps.height;
 
-    if(sourceProps.sources) {
+      let isNextBreak = false;
-      //Iterate over supplied sources
+      if(maxWidth && (i+1 < keys.length)) {
-      for(let i = 0; i < sourceProps.sources.length; i++) {
+        if(keys[i+1] > parseInt(maxWidth)) isNextBreak = true;
-        let x = sourceProps.sources[i];
+      }
-        let width = x.size || x.width;
+      if(isNextBreak) {
-        let isLast = (i+1) === sourceProps.sources.length;
+        breakNext = true;
-
+        mediaQuery = `(min-width:${k}px)`;
-        for(let scale = 1; scale <= 4; scale++) {
-          let scaledWidth = Math.round(width / scale);
-          let o = Object.assign({}, x);
-          o.scale = scale;
-          o.isLast = isLast;
-          sources[scaledWidth] = sources[scaledWidth] || [];
-          sources[scaledWidth].push(o);
-        }
       }
 
-      let keys = Object.keys(sources);
+      if(ss.length && ss[0].isLast) {
-      keys.sort((l, r) => {
+        let prev = i > 0 ? keys[i-1] : 0;
-        return parseInt(l) - parseInt(r);
+        mediaQuery = `(min-width:${prev}px)`;
-      });
-      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 sss = [];
-
-        let isNextBreak = false;
-        if(this.props.maxWidth && (i+1 < keys.length)) {
-          if(keys[i+1] > parseInt(this.props.maxWidth)) isNextBreak = true;
-        }
-        if(isNextBreak) {
-          breakNext = true;
-          mediaQuery = '(min-width:'+k+'px)';
-        }
-
-        if(ss.length && ss[0].isLast) {
-          let prev = i > 0 ? keys[i-1] : 0;
-          mediaQuery = '(min-width:'+prev+'px)';
-        }
-
-        for(let x = 0; x < ss.length; x++) {
-          let scale = ss[x];
-          let source = scale.src || scale.path;
-          sss.push( source + (scale.scale && scale.scale!=1 ? " "+scale.scale+"x" : "") );
-        }
-
-        sourceElements.push(
-          <source media={mediaQuery} srcSet={ sss.join(", ") } key={i} />
-        );
       }
-    }
 
-    return (
+      for(let x = 0; x < ss.length; x++) {
-      <picture>
+        let scale = ss[x];
-        { sourceElements }
+        let source = scale.src || scale.path;
-        <img
+        sss.push( source + (scale.scale && scale.scale!=1 ? " "+scale.scale+"x" : "") );
-          onLoad={ this.onLoad.bind(this) }
+      }
-          onError={ this.onError.bind(this) }
+
-          src={ defaultSrc }
+      sourceElements.push(<source media={mediaQuery} srcSet={sss.join(", ")} key={i} />);
-          alt={ defaultAlt }
+    }
-          className={ sourceProps.className }
-          width={ defaultWidth }
-          height={ defaultHeight }
-          title={sourceProps.title}
-        />
-      </picture>
-    );
   }
+
+  return (
+    <picture>
+      { sourceElements }
+      <img
+        {...newProps}
+        onLoad={ onLoad }
+        onError={ onError }
+        src={ defaultSrc }
+        alt={ defaultAlt }
+        width={ defaultWidth }
+        height={ defaultHeight }
+      />
+    </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";
     }
 
-    return (
+    if(className) clazz += ` ${className}`;
-      <div className={"o-loadable-image " + (this.state.loading ? "is-loading" : "is-loaded")}>
-        { loader }
-        { imageSizerDuringLoad }
 
+    return (
+      <div className={className}>
+        { loader }
+        { 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;
@@ -31,7 +33,7 @@
 
   &.is-loading {
     position: relative;
-    
+
     @include t-animation-name(o-loadable-image--load-flash);
     @include t-animation-timing-function(linear);
     @include t-animation-duration(2s);