refactoring

Author: dzmitry-stramavus

README.md

@@ -61,7 +61,6 @@ powered by [Cloudimage](https://www.cloudimage.io/)
 * [Step 3: Implement](#implement)
 * [Configuration](#configuration)
 * [Image properties](#image_properties)
-* [Lazy loading](#lazy_loading)
 * [Browser support](#browser_support)
 * [Filerobot UI Family](#ui_family)
 * [Contributing](#contributing)
@@ -164,7 +163,7 @@ Applies a nice interlacing effect for preview transition
 
 ### filters
 
-###### Type: **String** | Default: **'n'** | _optional_
+###### Type: **String** | Default: **'q35.foil1'** | _optional_
 
 Applies default Cloudimage filters to your image, e.g. fcontrast, fpixelate, fgaussian, backtransparent,
 rotation...  Multiple filters can be applied, separated by "```.```" (dot).

examples/src/index.js

@@ -12,9 +12,7 @@ import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 const cloudimageConfig = {
   token: 'demo',
   baseUrl: 'https://cloudimage.public.airstore.io/demo/',
-  filters: 'q80.foil1',
   queryString: '?&size_info=1&v=2',
-  lazyLoadOffset: 100,
   placeholderBackground: '#e1e1e1'
 };
 
@@ -409,8 +407,8 @@ render(<App />, document.body);`}</SyntaxHighlighter>
                   <ul>
                     <li><a target="_blank" href="https://github.com/scaleflex/js-cloudimage-responsive">JS Cloudimage Responsive</a></li>
                     <li><a target="_blank" href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage Responsive</a></li>
-                    <li><a target="_blank" href="https://github.com/scaleflex/filerobot-image-editor">Uploader</a></li>
-                    <li><a target="_blank" href="https://github.com/scaleflex/filerobot-uploader">Image Editor</a></li>
+                    <li><a target="_blank" href="https://github.com/scaleflex/filerobot-uploader">Uploader</a></li>
+                    <li><a target="_blank" href="https://github.com/scaleflex/filerobot-image-editor">Image Editor</a></li>
                   </ul>
                 </div>
               </div>

src/Provider.js

@@ -19,7 +19,7 @@ class CloudimageProvider extends Component {
       width = '400',
       height = '300',
       operation = 'width',
-      filters = 'n',
+      filters = 'q35.foil1',
       placeholderBackground = '#f4f4f4',
       baseUrl = '/',
       presets,

src/index.js

@@ -107,13 +107,14 @@ class Img extends Component {
 
     const ratioBySize = getRatioBySize(this.state.size, config);
     const imageHeight = Math.floor(parentContainerWidth / (ratioBySize || ratio || 1));
+    const resultRatio = (ratioBySize || ratio);
 
-    const pictureWithRatioStyles =  (ratioBySize || ratio) ?
+    const pictureWithRatioStyles =  resultRatio ?
       {
-        paddingBottom: (100 / (ratioBySize || ratio)) + '%',
+        paddingBottom: (100 / resultRatio) + '%',
         background: (!isPreviewLoaded && !isLoaded) ? config.placeholderBackground : 'transparent'
       } : {};
-    const imgWithRatioStyles = (ratioBySize || ratio) ? styles.imgWithRatio : {};
+    const imgWithRatioStyles = resultRatio ? styles.imgWithRatio : {};
     const imgLoadingStyles = config.imgLoadingAnimation ?
       { ...styles.imgWithEffect, filter: `blur(${Math.floor(parentContainerWidth / 100)}px)` } : {};
     const imgLoadedStyles = isLoaded && config.imgLoadingAnimation ? styles.imgLoaded : {};
@@ -133,7 +134,8 @@ class Img extends Component {
             ...styles.img,
             ...imgWithRatioStyles,
             ...imgLoadingStyles,
-            ...imgLoadedStyles
+            ...imgLoadedStyles,
+            ...((isPreview && resultRatio) ? { height: '100%' } : {})
           }}
           src={!isPreview ? cloudimageUrl : (isPreviewLoaded ? cloudimageUrl : previewCloudimageUrl)}
           alt={alt}