react-super-components - npm Package Compare versions

Comparing version 1.6.2 to 1.6.3

dist/AnimatedStack.js

@@ -35,3 +35,3 @@ 'use strict';
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(AnimatedStack).call(this, props));
+    var _this = _possibleConstructorReturn(this, (AnimatedStack.__proto__ || Object.getPrototypeOf(AnimatedStack)).call(this, props));
 
@@ -56,3 +56,9 @@ _this.state = {
 
-        acc[index] = { position: 'absolute' };
+        acc[index] = {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        };
 
@@ -64,3 +70,3 @@ var active = _lodash2.default.includes(activeIndexes, index);
           acc[index]['opacity'] = '0';
-          acc[index]['zIndex'] = '-1000';
+          acc[index]['zIndex'] = '-1';
         }
@@ -67,0 +73,0 @@

dist/Image.js

@@ -29,2 +29,6 @@ 'use strict';
 
+var _Animations = require('./Animations');
+
+var _Animations2 = _interopRequireDefault(_Animations);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -77,3 +81,3 @@
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Image).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).apply(this, arguments));
   }
@@ -156,2 +160,27 @@
   }, {
+    key: 'createBlurURL',
+    value: function createBlurURL(src) {
+      var paramsToUpdate = src.substring(src.lastIndexOf('/upload/') + 8, src.lastIndexOf('/'));
+      var paramsToUpdateArray = paramsToUpdate.split(',');
+      var blurParams = [];
+
+      paramsToUpdateArray.map(function (param) {
+        if (param.includes('h_') || param.includes('w_')) {
+          var paramType = param.substring(0, 2);
+          var paramBlurValue = Math.round(Number(param.substring(2)) * .1);
+          var newParamValue = '' + paramType + paramBlurValue;
+
+          return blurParams.push(newParamValue);
+        }
+
+        return blurParams.push(param);
+      });
+
+      var originURL = src.substring(0, src.indexOf('/upload/') + 8);
+      var originURLEnd = src.substring(src.lastIndexOf('/'), src.length);
+      var blurURL = originURL + 'e_blur:250,' + blurParams + originURLEnd;
+
+      return blurURL;
+    }
+  }, {
     key: 'render',
@@ -164,3 +193,3 @@ value: function render() {
       var loadingSrc = _props.loadingSrc;
-      var errorSrc = _props.errorSrc;
+      var errorFallback = _props.errorFallback;
       var style = _props.style;
@@ -170,4 +199,6 @@ var lazy = _props.lazy;
       var wrapperProps = _props.wrapperProps;
+      var animation = _props.animation;
+      var blurUp = _props.blurUp;
 
-      var other = _objectWithoutProperties(_props, ['src', 'loadingSrc', 'errorSrc', 'style', 'lazy', 'imageDidLoad', 'wrapperProps']);
+      var other = _objectWithoutProperties(_props, ['src', 'loadingSrc', 'errorFallback', 'style', 'lazy', 'imageDidLoad', 'wrapperProps', 'animation', 'blurUp']);
 
@@ -178,3 +209,15 @@ var status = this.state.status;
       var loadingElement = function loadingElement() {
+        if (blurUp && src.indexOf('res.cloudinary.com') > -1) {
+
+          var blurUpURL = _this4.createBlurURL(src);
+
+          return _react2.default.createElement('img', { index: 'loading', src: blurUpURL, style: style });
+        }
+
         if (loadingSrc) {
+          if (loadingSrc.substring(0, 1) == '#') {
+            var newStyle = _.extend({}, style, { backgroundColor: loadingSrc });
+
+            return _react2.default.createElement('div', { index: 'loading', style: newStyle });
+          }
           return _react2.default.createElement('img', { index: 'loading', src: loadingSrc, style: style });
@@ -186,4 +229,11 @@ }
       var errorElement = function errorElement() {
-        if (errorSrc) {
-          return _react2.default.createElement('img', { index: 'error', src: errorSrc, style: style, onClick: function onClick() {
+        if (errorFallback) {
+          if (errorFallback.substring(0, 1) == '#') {
+            var newStyle = _.extend({}, style, { backgroundColor: errorFallback });
+
+            return _react2.default.createElement('div', { index: 'error', style: newStyle, onClick: function onClick() {
+                return _this4.reload(src);
+              } });
+          }
+          return _react2.default.createElement('img', { index: 'error', src: errorFallback, style: style, onClick: function onClick() {
               return _this4.reload(src);
@@ -201,3 +251,3 @@ } });
         _Stack2.default,
-        _extends({ activeLayerIndex: status }, wrapperProps),
+        _extends({ activeLayerIndex: status, animations: animation ? [{ from: 'loading', to: 'display', use: _Animations2.default[animation] }] : null }, wrapperProps),
         loadingElement(),
@@ -219,3 +269,4 @@ errorElement(),
   loadingSrc: _react.PropTypes.string,
-  errorSrc: _react.PropTypes.string,
+  errorFallback: _react.PropTypes.string,
+  animation: _react.PropTypes.string,
   wrapperStyles: _react.PropTypes.object,
@@ -225,5 +276,4 @@ style: _react.PropTypes.object,
   imageDidLoad: _react.PropTypes.func,
-  lazy: _react.PropTypes.bool
-};
-
-exports.default = Image;
+  lazy: _react.PropTypes.bool,
+  blurUp: _react.PropTypes.bool
+};

dist/List.js

@@ -37,3 +37,3 @@ 'use strict';
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
+    return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
   }
@@ -40,0 +40,0 @@

dist/RegularList.js

@@ -35,3 +35,3 @@ 'use strict';
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(RegularList).apply(this, arguments));
+    return _possibleConstructorReturn(this, (RegularList.__proto__ || Object.getPrototypeOf(RegularList)).apply(this, arguments));
   }
@@ -38,0 +38,0 @@

dist/SimpleStack.js

@@ -32,3 +32,3 @@ 'use strict';
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(SimpleStack).apply(this, arguments));
+    return _possibleConstructorReturn(this, (SimpleStack.__proto__ || Object.getPrototypeOf(SimpleStack)).apply(this, arguments));
   }
@@ -35,0 +35,0 @@

dist/Stack.js

@@ -48,3 +48,3 @@ 'use strict';
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Stack).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Stack.__proto__ || Object.getPrototypeOf(Stack)).call(this, props));
 
@@ -51,0 +51,0 @@ _this.state = {};

docs/image.md

@@ -14,11 +14,11 @@ # Image
  * - src (required)
- * - loadingSrc
- * - loadingComponent (loadingComponent takes precedence over loadingSrc)
- * - errorSrc
- * - errorComponent (errorComponent takes precedence over errorSrc)
+ * - loadingSrc (image src or hex color)
+ * - errorFallback (image src or hex color)
+ * - animation (specify animation stack animation type)
+ * - imageDidLoad (function to be called when image loads)
+ * - lazy (boolean - in-view lazy loading)
+ * - blurUp (boolean - cloudinary URLs only - enables blur-up loading)
  *
  * Other props will be pass to the html native img commponent,
- * loadingComponent and errorComponent.
  *
- * When error happens, an error prop will be passed to errorComponent.
  *
@@ -25,0 +25,0 @@ * NOTE: Using 'width' and 'height' in style is highly recommanded.

package.json

@@ -46,3 +46,3 @@ {
   },
-  "version": "1.6.2"
+  "version": "1.6.3"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71652

increased by3.43%

Lines of code

1077

increased by4.36%

No dependency changes