super-image - npm Package Compare versions

Comparing version 0.1.0 to 0.3.0

lib/index.js

@@ -19,16 +19,2 @@ 'use strict';
 
-var _object = require('object.assign');
-
-var _object2 = _interopRequireDefault(_object);
-
-var _bemClassnames = require('bem-classnames');
-
-var _bemClassnames2 = _interopRequireDefault(_bemClassnames);
-
-var _viewportObserver = require('viewport-observer');
-
-var _viewportObserver2 = _interopRequireDefault(_viewportObserver);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -42,13 +28,6 @@
 
-_bemClassnames2.default.prefixes.modifiers = '-';
+var NOT_INHERITED_PROPS = ['flexible', 'fit', 'fitFallback'];
 
-var NOT_INHERITED_PROPS = ['src', 'className', 'flexible', 'fit', 'fitFallback', 'lazyload', 'rootMargin', 'altImage'];
-var classes = {
-  name: 'SuperImage',
-  modifiers: ['fit', 'flexible'],
-  states: ['error']
-};
-
 /**
- * Image with lazyload and object-fit
+ * Image with object-fit or object-fit fallback
  *
@@ -61,122 +40,68 @@ * @class SuperImage
 
-  function SuperImage(props) {
+  function SuperImage() {
     _classCallCheck(this, SuperImage);
 
-    var _this = _possibleConstructorReturn(this, (SuperImage.__proto__ || Object.getPrototypeOf(SuperImage)).call(this, props));
-
-    _this.state = {
-      src: props.altImage,
-      error: false
-    };
-
-    _this.onEnter = _this.onEnter.bind(_this);
-    _this.onError = _this.onError.bind(_this);
-    return _this;
+    return _possibleConstructorReturn(this, (SuperImage.__proto__ || Object.getPrototypeOf(SuperImage)).apply(this, arguments));
   }
 
   _createClass(SuperImage, [{
-    key: 'onEnter',
-    value: function onEnter() {
-      this.setState({
-        src: this.props.src
-      });
-    }
-  }, {
-    key: 'onError',
-    value: function onError() {
-      this.setState({
-        src: this.props.altImage,
-        error: true
-      });
-    }
-  }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      var _props = this.props,
-          src = _props.src,
-          lazyload = _props.lazyload;
+    key: 'renderImage',
+    value: function renderImage() {
+      var _this2 = this;
 
+      var styleAttr = {};
+      var extendsProps = {};
 
-      if (!lazyload) {
-        this.setState({
-          src: src
-        });
+      if (this.props.fit) {
+        styleAttr.objectFit = this.props.fit;
       }
-    }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _props2 = this.props,
-          src = _props2.src,
-          lazyload = _props2.lazyload;
 
-
-      if (!window.IntersectionObserver || !lazyload) {
-        this.setState({
-          src: src
-        });
+      if (this.props.flexible) {
+        styleAttr.width = '100%';
+        styleAttr.height = '100%';
       }
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.src !== this.props.src) {
-        this.setState({
-          src: nextProps.src
-        });
-      }
-    }
-  }, {
-    key: 'renderImage',
-    value: function renderImage() {
-      var _props3 = this.props,
-          alt = _props3.alt,
-          className = _props3.className;
-      var src = this.state.src;
 
       // Props given to this Component is inherited <img /> in all
+      Object.keys(this.props).filter(function (key) {
+        return NOT_INHERITED_PROPS.indexOf(key) === -1;
+      }).forEach(function (key) {
+        extendsProps[key] = _this2.props[key];
+      });
 
-      var extendsProps = NOT_INHERITED_PROPS.reduce(function (curt, key) {
-        delete curt[key];
-        return curt;
-      }, (0, _object2.default)({}, this.props));
-
       return React.createElement('img', _extends({
-        src: src,
-        alt: alt,
-        className: (0, _bemClassnames2.default)(classes, this.props, this.state, className),
-        onError: this.onError
+        src: this.props.src,
+        alt: this.props.alt,
+        style: styleAttr
       }, extendsProps));
     }
 
-    // object-fit polyfill
+    // object-fit fallback
 
   }, {
-    key: 'renderImageWithObjectFitPolyfill',
-    value: function renderImageWithObjectFitPolyfill() {
-      var _props4 = this.props,
-          width = _props4.width,
-          height = _props4.height,
-          alt = _props4.alt,
-          className = _props4.className,
-          flexible = _props4.flexible;
-      var src = this.state.src;
-
+    key: 'renderImageWithObjectFitFallback',
+    value: function renderImageWithObjectFitFallback() {
       var styleAttr = {
-        width: width + 'px',
-        height: height + 'px',
-        backgroundImage: 'url(' + src + ')'
+        display: 'inline-block',
+        width: this.props.flexible ? '100%' : this.props.width + 'px',
+        height: this.props.flexible ? '100%' : this.props.height + 'px',
+        backgroundImage: 'url(' + this.props.src + ')',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center center'
       };
 
-      if (!width || flexible) {
+      if (!this.props.width) {
         delete styleAttr.width;
       }
 
-      if (!height || flexible) {
+      if (!this.props.height) {
         delete styleAttr.height;
       }
 
+      if (this.props.fit) {
+        styleAttr.backgroundSize = this.props.fit;
+      }
+
       return React.createElement('div', {
-        'aria-label': alt,
-        className: (0, _bemClassnames2.default)(classes, this.props, className),
+        'aria-label': this.props.alt,
+        className: this.props.className,
         style: styleAttr
@@ -188,30 +113,7 @@ });
     value: function render() {
-      var _props5 = this.props,
-          fit = _props5.fit,
-          fitFallback = _props5.fitFallback,
-          lazyload = _props5.lazyload,
-          rootMargin = _props5.rootMargin;
-
-      var element = void 0;
-
-      if (!fit) {
-        element = this.renderImage();
-      } else if (fitFallback) {
-        element = this.renderImageWithObjectFitPolyfill();
-      } else {
-        element = this.renderImage();
+      if (this.props.fitFallback) {
+        return this.renderImageWithObjectFitFallback();
       }
 
-      if (lazyload) {
-        return React.createElement(
-          _viewportObserver2.default,
-          {
-            triggerOnce: true,
-            rootMargin: rootMargin,
-            onEnter: this.onEnter
-          },
-          element
-        );
-      }
-      return element;
+      return this.renderImage();
     }
@@ -229,8 +131,5 @@ }]);
   className: PropTypes.string,
-  flexible: PropTypes.bool,
   fit: PropTypes.oneOf(['contain', 'cover']),
   fitFallback: PropTypes.bool,
-  lazyload: PropTypes.bool,
-  rootMargin: PropTypes.string,
-  altImage: PropTypes.string
+  flexible: PropTypes.bool
 };
@@ -242,9 +141,6 @@ SuperImage.defaultProps = {
   className: '',
-  flexible: false,
   fit: null,
   fitFallback: false,
-  lazyload: false,
-  rootMargin: '0px',
-  altImage: 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=' // GIF with transparent background
+  flexible: false
 };
 exports.default = SuperImage;

package.json

 {
   "name": "super-image",
-  "version": "0.1.0",
-  "description": "React image component with LazyLoad and object-fit",
+  "version": "0.3.0",
+  "description": "React image component with object-fit and object-fit fallback",
   "main": "lib/index.js",
   "scripts": {
-    "lint": "npm run lint:js && npm run lint:css",
-    "lint:js": "eslint src",
-    "lint:css": "stylelint src/*.css",
-    "build": "rm -rf lib dist && npm run build:js && npm run build:css && npm run build:cp",
-    "build:js": "NODE_ENV=development babel src --out-dir lib --ignore *.test.js",
-    "build:css": "postcss src/index.css --use postcss-cssnext --output dist/super-image.css",
-    "build:cp": "cp lib/index.js dist/super-image.js",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint src",
+    "build": "rm -rf lib dist && NODE_ENV=development babel src --out-dir lib --ignore *.test.js",
     "test": "npm run lint && karma start karma.conf.js --single-run"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/openfresh/super-image.git"
-  },
+  "repository": "openfresh/super-image",
   "keywords": [
     "react",
-    "viewport",
-    "intersection",
     "object-fit",
-    "lazyload",
     "image"
@@ -34,7 +24,2 @@ ],
   "homepage": "https://github.com/openfresh/super-image#readme",
-  "dependencies": {
-    "bem-classnames": "^1.0.7",
-    "object.assign": "^4.0.4",
-    "viewport-observer": "^0.7.1"
-  },
   "devDependencies": {
@@ -63,9 +48,3 @@ "babel-cli": "^6.24.1",
     "mocha": "^3.5.0",
-    "postcss-cli": "^4.1.0",
-    "postcss-cssnext": "^3.0.2",
-    "power-assert": "^1.4.4",
-    "stylelint": "^8.0.0",
-    "stylelint-config-fresh": "^2.0.0",
-    "stylelint-config-standard": "^17.0.0",
-    "stylelint-order": "^0.6.0"
+    "power-assert": "^1.4.4"
   },
@@ -72,0 +51,0 @@ "peerDependencies": {

README.md

@@ -5,3 +5,3 @@ # super-image
 
-React image component with `LazyLoad` and `object-fit`
+React image component with `object-fit` and `object-fit` fallback
 
@@ -12,12 +12,4 @@ ## Usage
 
-You'll have to include the CSS file in your project.
-
-```html
-<link rel="stylesheet" type="text/css" href="/dist/super-image.css"/>
-```
-
 ```jsx
-// Use LazyLoad and object-fit
 <SuperImage
-  lazyload
   src="image.png"
@@ -33,3 +25,2 @@ width="160"
   fitFallback
-  lazyload
   src="image.png"
@@ -51,16 +42,6 @@ width="160"
 | className | String | Custom className | "" | No |
-| altImage | String | Alternate image src |GIF with transparent background| No |
 | flexible | Boolean |If this is true, A Component size is not fixed. | false | No |
 | fit | String | Value of the object-fit property. "contain", or "cover" | - | No |
 | fitFallback | Boolean | Force the component to use `background-image` | false | No |
-| lazyload | Boolean | Use lazyload | false | No |
-| rootMargin | DOMString | `viewport-observer` property. <br />See [viewport-observer](https://github.com/openfresh/viewport-observer/blob/master/readme.md#config) to get more details. | "0px" | No |
 
-
-## Dependencies
-
-- [bem-classnames](https://github.com/pocotan001/bem-classnames)
-- [object.assign](https://github.com/ljharb/object.assign)
-- [viewport-observer](https://github.com/openfresh/viewport-observer)
-
 ## LICENSE
@@ -67,0 +48,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-50%

Dev dependency count

23

decreased by-20.69%

Worsened metrics

Total package byte prevSize

9615

decreased by-68.07%

Number of package files

8

decreased by-50%

Lines of code

129

decreased by-81%

Number of lines in readme file

48

decreased by-28.36%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedbem-classnames@^1.0.7

• - Removedobject.assign@^4.0.4

• - Removedviewport-observer@^0.7.1

• - Removedbem-classnames@1.0.7(transitive)

• - Removedcall-bind@1.0.8(transitive)

• - Removedcall-bind-apply-helpers@1.0.1(transitive)

• - Removedcall-bound@1.0.3(transitive)

• - Removeddefine-data-property@1.1.4(transitive)

• - Removeddefine-properties@1.2.1(transitive)

• - Removeddunder-proto@1.0.1(transitive)

• - Removedes-define-property@1.0.1(transitive)

• - Removedes-errors@1.3.0(transitive)

• - Removedes-object-atoms@1.1.1(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedget-intrinsic@1.2.7(transitive)

• - Removedget-proto@1.0.1(transitive)

• - Removedgopd@1.2.0(transitive)

• - Removedhas-property-descriptors@1.0.2(transitive)

• - Removedhas-symbols@1.1.0(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedmath-intrinsics@1.1.0(transitive)

• - Removedobject-keys@1.1.1(transitive)

• - Removedobject.assign@4.1.7(transitive)

• - Removedset-function-length@1.2.2(transitive)

• - Removedviewport-observer@0.7.1(transitive)