Udpdate dist folder to include all items, update default wrapper styl… (#4)

Udpdate dist folder to include all items, update default wrapper style, update usecallback deps

Author: assetcrush

example/src/modules/ImageCrush.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { ErrorRender } from "./ErrorRender/ErrorRender";
 import { getKey } from "./key";
 import { Spinner } from "./Spinner/Spinner";
@@ -19,6 +19,7 @@ const ImageCrush = ({
   width,
   height,
   acEnv = "production",
+  alt = '',
   ...props
 }) => {
   const [image, setImage] = useState("");
@@ -29,7 +30,7 @@ const ImageCrush = ({
       onError(e);
       setIsError(true);
     },
-    [setIsError]
+    [onError, setIsError]
   );
 
   const fetchImage = useCallback(() => {
@@ -58,7 +59,7 @@ const ImageCrush = ({
       })
       .then(() => onLoad(headers))
       .catch(handleError);
-  }, [setIsError]);
+  }, [acEnv, handleError, height, onLoad, url, width, setIsError, setImage]);
 
 
   const handleRetry = useCallback(() => {
@@ -68,9 +69,10 @@ const ImageCrush = ({
   useEffect(() => {
     if (!url) return;
     fetchImage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [url, width, height]);
 
-  if (isError)
+  if (isError) {
     return (
       <ErrorRender
         width={width}
@@ -80,12 +82,22 @@ const ImageCrush = ({
         handleRetry={handleRetry}
       />
     );
-  if (!image)
+  }
+
+  if (!image) {
     return (
       <>{!hideSpinner && <Spinner icon={spinnerIcon} color={spinnerColor} />}</>
     );
+  }
 
-  return <img className={animated && "assetcrush-fade-in-Image"} src={image} {...props} />;
+  return (
+    <img
+      className={animated && "assetcrush-fade-in-Image"}
+      src={image}
+      alt={alt}
+      {...props}
+    />
+  );
 };
 
-export default memo(ImageCrush);
+export default React.memo(ImageCrush);

example/src/modules/ImageCrushAdoptive.js

@@ -1,15 +1,20 @@
 import React, {
-  memo,
   useCallback,
-  useEffect,
   useLayoutEffect,
   useRef,
   useState,
 } from "react";
 import ImageCrush from "./ImageCrush";
 
 const styles = (backgroundColor) =>  ({
- wrapperStyle: { height: "inherit", width: "inherit", background: backgroundColor, display:'flex', alignItems:'center', justifyContent: 'center' }
+  wrapperStyle: {
+    background: backgroundColor,
+    width: '100%',
+    height: '100%',
+    display:'flex',
+    alignItems:'center',
+    justifyContent: 'center'
+  }
 })
 
 const ImageCrushAdoptive = ({  backgroundColor = '#f9f9f9', url, debounce = 100, wrapperStyle, ...restProps }) => {
@@ -28,12 +33,13 @@ const ImageCrushAdoptive = ({  backgroundColor = '#f9f9f9', url, debounce = 100,
       setWidth(_width);
       setHeight(_height);
     }
-  }, [setWidth,setHeight, setCurrentHeight])
+  }, [setWidth,setHeight, setCurrentHeight, width, height])
 
   useLayoutEffect(() => {
    const handler = setTimeout(onLayout, debounce);
 
    return () => clearTimeout(handler);
+   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
 
@@ -46,4 +52,4 @@ const ImageCrushAdoptive = ({  backgroundColor = '#f9f9f9', url, debounce = 100,
   );
 };
 
-export default memo(ImageCrushAdoptive);
+export default React.memo(ImageCrushAdoptive);

index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface ImageCrushProps {
+  animated?: boolean,
+  reloadIconColor?: string,
+  reloadIcon?: React.ReactNode,
+  spinnerIcon?: React.ReactNode,
+  spinnerColor?: string,
+  hideSpinner?: boolean,
+  onError?: function,
+  onLoad?: function,
+  url: string,
+  width?: number,
+  height?: number,
+  acEnv?: string,
+  alt?: string,
+  className?: string,
+  style?: React.CSSProperties
+}
+
+declare const ImageCrush: React.FC<ImageCrushProps>;
+
+export interface ImageCrushAdoptiveProps extends ImageCrushProps {
+  backgroundColor?: string,
+  debounce?: number,
+  wrapperStyle?: React.CSSProperties
+}
+
+declare const ImageCrushAdoptive: React.FC<ImageCrushAdoptiveProps>;
+
+declare const setKey: (key: string) => void;
+
+export {
+  ImageCrush,
+  ImageCrushAdoptive,
+  setKey
+};

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@assetcrush/reactjs-sdk",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A simple reactjs library to resize image on fly",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel example/src/modules/** -d ./dist"
+    "build": "babel example/src/modules/ -d ./dist --copy-files"
   },
   "repository": {
     "type": "git",