fix(component): Bug fixes

Author: wcandillon

package.json

@@ -44,6 +44,5 @@
     "verifyConditions": "condition-circle"
   },
   "dependencies": {
-    "lodash": "^4.17.4"
   }
 }

src/index.tsx

@@ -1,4 +1,3 @@
-import {assign} from "lodash";
 import * as React from "react";
 
 export type DivProps = React.HTMLProps<HTMLImageElement>;
@@ -19,7 +18,7 @@ export interface ProgressiveImageState {
 
 export class ProgressiveImage extends React.Component<ProgressiveImageProps & DivProps & ImageProps, ProgressiveImageState> {
 
-    private clonedProps: React.HTMLProps<HTMLDivElement | HTMLImageElement> = {};
+    private clonedProps: React.HTMLProps<HTMLDivElement & HTMLImageElement> = {};
 
     static defaultProps = {
         transitionTime: 500,
@@ -30,24 +29,37 @@ export class ProgressiveImage extends React.Component<ProgressiveImageProps & Di
         const {src, preview} = this.props;
         this.setState({ src: "", blur: 10 });
         this.cloneProps();
-        fetch(preview)
-            .then(() => this.setState({ src: preview, blur: 10 }))
-            .then(() => fetch(src))
-            .then(() => this.setState({ src, blur: 0 }));
+        this.fetch(preview)
+            .then(previewDataURI => this.setState({ src: previewDataURI, blur: 10 }))
+            .then(() => this.fetch(src))
+            .then(srcDataURI => this.setState({ src: srcDataURI, blur: 0 }));
     }
-
     render() {
         const {src, style, background} = this.props;
         return background ?
-            <div style={assign(this.getBackgroundStyle(), style)} {...this.clonedProps} />
-        :
-            <img src={src} style={assign(this.getStyle(), style)} {...this.clonedProps} />
-        ;
+            <div style={Object.assign(this.getBackgroundStyle(), style)} {...this.clonedProps} />
+            :
+            <img src={src} style={Object.assign(this.getStyle(), style)} {...this.clonedProps} />
+            ;
+    }
+
+    private fetch(uri: string): Promise<string> {
+        return new Promise(resolve => {
+            fetch(uri)
+                .then(response => response.blob())
+                .then(blob => {
+                    const fp = new FileReader();
+                    fp.onload = () => {
+                        resolve(fp.result as string);
+                    };
+                    fp.readAsDataURL(blob);
+                });
+        });
     }
 
     private cloneProps() {
         Object.keys(this.props)
-            .filter(prop => ["style", "src", "preview", "background"].indexOf(prop) === -1)
+            .filter(prop => ["style", "src", "preview", "background", "transitionTime", "timingFunction"].indexOf(prop) === -1)
             .forEach(prop => this.clonedProps[prop] = this.props[prop]);
     }
 
@@ -65,6 +77,6 @@ export class ProgressiveImage extends React.Component<ProgressiveImageProps & Di
         const style = {
             backgroundImage: `url(${src})`
         };
-        return assign(style, this.getStyle());
+        return Object.assign(style, this.getStyle());
     }
-}
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "es2015",
         "module": "commonjs",
         "moduleResolution": "node",
         "jsx": "react",