react-aspect-ratio - npm Package Compare versions

Comparing version 1.0.39 to 1.0.40

dist/__tests__/index.js

@@ -7,46 +7,92 @@ "use strict";
 
-var _index = _interopRequireDefault(require("../index"));
+var _index = _interopRequireWildcard(require("../index"));
 
+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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// // eslint-disable-line import/no-named-as-default
 describe('Aspect Ratio', function () {
-  it('should render wrapper for children', function () {
-    var innerImage = _react.default.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+  describe('React < 15.6', function () {
+    it('should render wrapper for children', function () {
+      var innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        ratio: "4/3"
+      }, innerImage)).toJSON();
+
+      expect(node).toMatchSnapshot();
     });
+    it('should support number as props', function () {
+      var innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
 
-    var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-      ratio: "4/3"
-    }, innerImage)).toJSON();
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        ratio: 0.75
+      }, innerImage)).toJSON();
 
-    expect(node).toMatchSnapshot();
-  });
-  it('should support number as props', function () {
-    var innerImage = _react.default.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+      expect(node).toMatchSnapshot();
     });
+    it('custom style willl be adpoted', function () {
+      var innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
 
-    var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-      ratio: 0.75
-    }, innerImage)).toJSON();
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        ratio: "4/3",
+        style: {
+          color: '#fff'
+        }
+      }, innerImage)).toJSON();
 
-    expect(node).toMatchSnapshot();
+      expect(node).toMatchSnapshot();
+    });
   });
-  it('custom style willl be adpoted', function () {
-    var innerImage = _react.default.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+  describe('React > 15.6', function () {
+    it('should render wrapper for children', function () {
+      var innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        ratio: "4/3"
+      }, innerImage)).toJSON();
+
+      expect(node).toMatchSnapshot();
     });
+    it('should support number as props', function () {
+      var innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
 
-    var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-      ratio: "4/3",
-      style: {
-        color: '#fff'
-      }
-    }, innerImage)).toJSON();
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        ratio: 0.75
+      }, innerImage)).toJSON();
 
-    expect(node).toMatchSnapshot();
+      expect(node).toMatchSnapshot();
+    });
+    it('custom style willl be adpoted', function () {
+      var innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        ratio: "4/3",
+        style: {
+          color: '#fff'
+        }
+      }, innerImage)).toJSON();
+
+      expect(node).toMatchSnapshot();
+    });
   });
 });

dist/es/__tests__/index.js

@@ -7,46 +7,92 @@ "use strict";
 
-var _index = _interopRequireDefault(require("../index"));
+var _index = _interopRequireWildcard(require("../index"));
 
+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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// // eslint-disable-line import/no-named-as-default
 describe('Aspect Ratio', () => {
-  it('should render wrapper for children', () => {
-    const innerImage = _react.default.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+  describe('React < 15.6', () => {
+    it('should render wrapper for children', () => {
+      const innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+
+      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        ratio: "4/3"
+      }, innerImage)).toJSON();
+
+      expect(node).toMatchSnapshot();
     });
+    it('should support number as props', () => {
+      const innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
 
-    const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-      ratio: "4/3"
-    }, innerImage)).toJSON();
+      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        ratio: 0.75
+      }, innerImage)).toJSON();
 
-    expect(node).toMatchSnapshot();
-  });
-  it('should support number as props', () => {
-    const innerImage = _react.default.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+      expect(node).toMatchSnapshot();
     });
+    it('custom style willl be adpoted', () => {
+      const innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
 
-    const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-      ratio: 0.75
-    }, innerImage)).toJSON();
+      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        ratio: "4/3",
+        style: {
+          color: '#fff'
+        }
+      }, innerImage)).toJSON();
 
-    expect(node).toMatchSnapshot();
+      expect(node).toMatchSnapshot();
+    });
   });
-  it('custom style willl be adpoted', () => {
-    const innerImage = _react.default.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+  describe('React > 15.6', () => {
+    it('should render wrapper for children', () => {
+      const innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+
+      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        ratio: "4/3"
+      }, innerImage)).toJSON();
+
+      expect(node).toMatchSnapshot();
     });
+    it('should support number as props', () => {
+      const innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
 
-    const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-      ratio: "4/3",
-      style: {
-        color: '#fff'
-      }
-    }, innerImage)).toJSON();
+      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        ratio: 0.75
+      }, innerImage)).toJSON();
 
-    expect(node).toMatchSnapshot();
+      expect(node).toMatchSnapshot();
+    });
+    it('custom style willl be adpoted', () => {
+      const innerImage = _react.default.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+
+      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        ratio: "4/3",
+        style: {
+          color: '#fff'
+        }
+      }, innerImage)).toJSON();
+
+      expect(node).toMatchSnapshot();
+    });
   });
 });

dist/es/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.AspectRatio = exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("./react-15.6"));
 
-var _reactLifecyclesCompat = require("react-lifecycles-compat");
+var _reactLatest = _interopRequireDefault(require("./react-latest"));
 
-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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _default = _react.default; // use before react 15.6
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
-
-class AspectRatio extends _react.PureComponent {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "state", {
-      ratio: this.props.ratio
-    });
-
-    _defineProperty(this, "node", null);
-
-    _defineProperty(this, "setNode", node => {
-      this.node = node;
-    });
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.ratio === prevState.ratio) {
-      return null;
-    }
-
-    return {
-      ratio: nextProps.ratio
-    };
-  }
-
-  componentDidUpdate() {
-    if (this.node) {
-      const node = this.node; // BC for older version of React https://github.com/facebook/react/issues/6411
-      // check if React support custom property AFTER
-
-      const customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
-
-      if (!customPropertyValue) {
-        node.style.setProperty(CUSTOM_PROPERTY_NAME, `(${this.state.ratio})`);
-      }
-    }
-  }
-
-  render() {
-    const _this$props = this.props,
-          ratio = _this$props.ratio,
-          style = _this$props.style,
-          children = _this$props.children,
-          otherProps = _objectWithoutPropertiesLoose(_this$props, ["ratio", "style", "children"]); // eslint-disable-line no-unused-vars
-
-
-    const newStyle = _extends({}, style, {
-      // https://github.com/roderickhsiao/react-aspect-ratio/commit/53ec15858ae186c41e70b8c14cc5a5b6e97cb6e3
-      [CUSTOM_PROPERTY_NAME]: `(${this.state.ratio})`
-    });
-
-    return _react.default.createElement("div", _extends({
-      ref: this.setNode,
-      style: newStyle
-    }, otherProps), children);
-  }
-
-}
-
-_defineProperty(AspectRatio, "defaultProps", {
-  className: 'react-aspect-ratio-placeholder',
-  ratio: 1
-});
-
-var _default = (0, _reactLifecyclesCompat.polyfill)(AspectRatio);
-
-exports.default = _default;
+exports.default = _default;
+const AspectRatio = _reactLatest.default;
+exports.AspectRatio = AspectRatio;

dist/es/stories/index.js

@@ -9,3 +9,3 @@ "use strict";
 
-var _index = _interopRequireDefault(require("../index"));
+var _index = require("../index");
 
@@ -78,3 +78,3 @@ require("../../aspect-ratio.css");
   titleText: "Image with Aspect Ratio",
-  contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.default, {
+  contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.AspectRatio, {
     ratio: "300/165",
@@ -91,3 +91,3 @@ style: {
   titleText: "Image with Aspect Ratio (pass number as props)",
-  contentNode: _react.default.createElement(_index.default, {
+  contentNode: _react.default.createElement(_index.AspectRatio, {
     ratio: 0.75,
@@ -103,3 +103,3 @@ style: {
   titleText: "Background image with aspect ratio",
-  contentNode: _react.default.createElement(_index.default, {
+  contentNode: _react.default.createElement(_index.AspectRatio, {
     ratio: "3/4",
@@ -133,3 +133,3 @@ style: {
       key: image.src
-    }, _react.default.createElement(_index.default, {
+    }, _react.default.createElement(_index.AspectRatio, {
       ratio: image.ratio
@@ -143,3 +143,3 @@ }, _react.default.createElement("img", {
   titleText: "Iframe with aspect ratio",
-  contentNode: _react.default.createElement(_index.default, {
+  contentNode: _react.default.createElement(_index.AspectRatio, {
     ratio: "560/315",
@@ -146,0 +146,0 @@ style: {

dist/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.AspectRatio = exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("./react-15.6"));
 
-var _reactLifecyclesCompat = require("react-lifecycles-compat");
+var _reactLatest = _interopRequireDefault(require("./react-latest"));
 
-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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _default = _react.default; // use before react 15.6
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
-
-var AspectRatio =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inheritsLoose(AspectRatio, _PureComponent);
-
-  function AspectRatio() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      ratio: _this.props.ratio
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "node", null);
-
-    _defineProperty(_assertThisInitialized(_this), "setNode", function (node) {
-      _this.node = node;
-    });
-
-    return _this;
-  }
-
-  AspectRatio.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.ratio === prevState.ratio) {
-      return null;
-    }
-
-    return {
-      ratio: nextProps.ratio
-    };
-  };
-
-  var _proto = AspectRatio.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate() {
-    if (this.node) {
-      var node = this.node; // BC for older version of React https://github.com/facebook/react/issues/6411
-      // check if React support custom property AFTER
-
-      var customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
-
-      if (!customPropertyValue) {
-        node.style.setProperty(CUSTOM_PROPERTY_NAME, "(" + this.state.ratio + ")");
-      }
-    }
-  };
-
-  _proto.render = function render() {
-    var _extends2;
-
-    var _this$props = this.props,
-        ratio = _this$props.ratio,
-        style = _this$props.style,
-        children = _this$props.children,
-        otherProps = _objectWithoutPropertiesLoose(_this$props, ["ratio", "style", "children"]); // eslint-disable-line no-unused-vars
-
-
-    var newStyle = _extends({}, style, (_extends2 = {}, _extends2[CUSTOM_PROPERTY_NAME] = "(" + this.state.ratio + ")", _extends2));
-
-    return _react.default.createElement("div", _extends({
-      ref: this.setNode,
-      style: newStyle
-    }, otherProps), children);
-  };
-
-  return AspectRatio;
-}(_react.PureComponent);
-
-_defineProperty(AspectRatio, "defaultProps", {
-  className: 'react-aspect-ratio-placeholder',
-  ratio: 1
-});
-
-var _default = (0, _reactLifecyclesCompat.polyfill)(AspectRatio);
-
-exports.default = _default;
+exports.default = _default;
+var AspectRatio = _reactLatest.default;
+exports.AspectRatio = AspectRatio;

dist/next/__tests__/index.js

 import React from 'react';
 import renderer from 'react-test-renderer';
-import AspectRatio from '../index';
+import OldAspectRatio, { AspectRatio } from '../index'; // // eslint-disable-line import/no-named-as-default
+
 describe('Aspect Ratio', function () {
-  it('should render wrapper for children', function () {
-    var innerImage = React.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+  describe('React < 15.6', function () {
+    it('should render wrapper for children', function () {
+      var innerImage = React.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+      var node = renderer.create(React.createElement(OldAspectRatio, {
+        ratio: "4/3"
+      }, innerImage)).toJSON();
+      expect(node).toMatchSnapshot();
     });
-    var node = renderer.create(React.createElement(AspectRatio, {
-      ratio: "4/3"
-    }, innerImage)).toJSON();
-    expect(node).toMatchSnapshot();
-  });
-  it('should support number as props', function () {
-    var innerImage = React.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+    it('should support number as props', function () {
+      var innerImage = React.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+      var node = renderer.create(React.createElement(OldAspectRatio, {
+        ratio: 0.75
+      }, innerImage)).toJSON();
+      expect(node).toMatchSnapshot();
     });
-    var node = renderer.create(React.createElement(AspectRatio, {
-      ratio: 0.75
-    }, innerImage)).toJSON();
-    expect(node).toMatchSnapshot();
+    it('custom style willl be adpoted', function () {
+      var innerImage = React.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+      var node = renderer.create(React.createElement(OldAspectRatio, {
+        ratio: "4/3",
+        style: {
+          color: '#fff'
+        }
+      }, innerImage)).toJSON();
+      expect(node).toMatchSnapshot();
+    });
   });
-  it('custom style willl be adpoted', function () {
-    var innerImage = React.createElement("img", {
-      src: "https://foo.bar",
-      alt: "demo"
+  describe('React > 15.6', function () {
+    it('should render wrapper for children', function () {
+      var innerImage = React.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+      var node = renderer.create(React.createElement(AspectRatio, {
+        ratio: "4/3"
+      }, innerImage)).toJSON();
+      expect(node).toMatchSnapshot();
     });
-    var node = renderer.create(React.createElement(AspectRatio, {
-      ratio: "4/3",
-      style: {
-        color: '#fff'
-      }
-    }, innerImage)).toJSON();
-    expect(node).toMatchSnapshot();
+    it('should support number as props', function () {
+      var innerImage = React.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+      var node = renderer.create(React.createElement(AspectRatio, {
+        ratio: 0.75
+      }, innerImage)).toJSON();
+      expect(node).toMatchSnapshot();
+    });
+    it('custom style willl be adpoted', function () {
+      var innerImage = React.createElement("img", {
+        src: "https://foo.bar",
+        alt: "demo"
+      });
+      var node = renderer.create(React.createElement(AspectRatio, {
+        ratio: "4/3",
+        style: {
+          color: '#fff'
+        }
+      }, innerImage)).toJSON();
+      expect(node).toMatchSnapshot();
+    });
   });
 });

dist/next/index.js

@@ -1,93 +0,5 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import react156 from './react-15.6';
+import reactLatest from './react-latest';
+export default react156; // use before react 15.6
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-import React, { PureComponent } from 'react';
-import { polyfill } from 'react-lifecycles-compat';
-var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
-
-var AspectRatio =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inheritsLoose(AspectRatio, _PureComponent);
-
-  function AspectRatio() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      ratio: _this.props.ratio
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "node", null);
-
-    _defineProperty(_assertThisInitialized(_this), "setNode", function (node) {
-      _this.node = node;
-    });
-
-    return _this;
-  }
-
-  AspectRatio.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.ratio === prevState.ratio) {
-      return null;
-    }
-
-    return {
-      ratio: nextProps.ratio
-    };
-  };
-
-  var _proto = AspectRatio.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate() {
-    if (this.node) {
-      var node = this.node; // BC for older version of React https://github.com/facebook/react/issues/6411
-      // check if React support custom property AFTER
-
-      var customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
-
-      if (!customPropertyValue) {
-        node.style.setProperty(CUSTOM_PROPERTY_NAME, "(" + this.state.ratio + ")");
-      }
-    }
-  };
-
-  _proto.render = function render() {
-    var _extends2;
-
-    var _this$props = this.props,
-        ratio = _this$props.ratio,
-        style = _this$props.style,
-        children = _this$props.children,
-        otherProps = _objectWithoutPropertiesLoose(_this$props, ["ratio", "style", "children"]); // eslint-disable-line no-unused-vars
-
-
-    var newStyle = _extends({}, style, (_extends2 = {}, _extends2[CUSTOM_PROPERTY_NAME] = "(" + this.state.ratio + ")", _extends2));
-
-    return React.createElement("div", _extends({
-      ref: this.setNode,
-      style: newStyle
-    }, otherProps), children);
-  };
-
-  return AspectRatio;
-}(PureComponent);
-
-_defineProperty(AspectRatio, "defaultProps", {
-  className: 'react-aspect-ratio-placeholder',
-  ratio: 1
-});
-
-export default polyfill(AspectRatio);
+export var AspectRatio = reactLatest;

dist/next/stories/index.js

 import React, { Fragment } from 'react';
 import { storiesOf, setAddon } from '@storybook/react';
 import JSXAddon from 'storybook-addon-jsx';
-import AspectRatio from '../index';
+import { AspectRatio } from '../index';
 import '../../aspect-ratio.css';
@@ -6,0 +6,0 @@ import '../../theme.css';

dist/stories/index.js

@@ -9,3 +9,3 @@ "use strict";
 
-var _index = _interopRequireDefault(require("../index"));
+var _index = require("../index");
 
@@ -61,3 +61,3 @@ require("../../aspect-ratio.css");
     titleText: "Image with Aspect Ratio",
-    contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.default, {
+    contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.AspectRatio, {
       ratio: "300/165",
@@ -76,3 +76,3 @@ style: {
     titleText: "Image with Aspect Ratio (pass number as props)",
-    contentNode: _react.default.createElement(_index.default, {
+    contentNode: _react.default.createElement(_index.AspectRatio, {
       ratio: 0.75,
@@ -90,3 +90,3 @@ style: {
     titleText: "Background image with aspect ratio",
-    contentNode: _react.default.createElement(_index.default, {
+    contentNode: _react.default.createElement(_index.AspectRatio, {
       ratio: "3/4",
@@ -122,3 +122,3 @@ style: {
         key: image.src
-      }, _react.default.createElement(_index.default, {
+      }, _react.default.createElement(_index.AspectRatio, {
         ratio: image.ratio
@@ -134,3 +134,3 @@ }, _react.default.createElement("img", {
     titleText: "Iframe with aspect ratio",
-    contentNode: _react.default.createElement(_index.default, {
+    contentNode: _react.default.createElement(_index.AspectRatio, {
       ratio: "560/315",
@@ -137,0 +137,0 @@ style: {

dist/umd/__tests__/index.js

@@ -18,47 +18,93 @@ (function (global, factory) {
   _reactTestRenderer = _interopRequireDefault(_reactTestRenderer);
-  _index = _interopRequireDefault(_index);
+  _index = _interopRequireWildcard(_index);
 
+  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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+  // // eslint-disable-line import/no-named-as-default
   describe('Aspect Ratio', function () {
-    it('should render wrapper for children', function () {
-      var innerImage = _react.default.createElement("img", {
-        src: "https://foo.bar",
-        alt: "demo"
+    describe('React < 15.6', function () {
+      it('should render wrapper for children', function () {
+        var innerImage = _react.default.createElement("img", {
+          src: "https://foo.bar",
+          alt: "demo"
+        });
+
+        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+          ratio: "4/3"
+        }, innerImage)).toJSON();
+
+        expect(node).toMatchSnapshot();
       });
+      it('should support number as props', function () {
+        var innerImage = _react.default.createElement("img", {
+          src: "https://foo.bar",
+          alt: "demo"
+        });
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-        ratio: "4/3"
-      }, innerImage)).toJSON();
+        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+          ratio: 0.75
+        }, innerImage)).toJSON();
 
-      expect(node).toMatchSnapshot();
-    });
-    it('should support number as props', function () {
-      var innerImage = _react.default.createElement("img", {
-        src: "https://foo.bar",
-        alt: "demo"
+        expect(node).toMatchSnapshot();
       });
+      it('custom style willl be adpoted', function () {
+        var innerImage = _react.default.createElement("img", {
+          src: "https://foo.bar",
+          alt: "demo"
+        });
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-        ratio: 0.75
-      }, innerImage)).toJSON();
+        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+          ratio: "4/3",
+          style: {
+            color: '#fff'
+          }
+        }, innerImage)).toJSON();
 
-      expect(node).toMatchSnapshot();
+        expect(node).toMatchSnapshot();
+      });
     });
-    it('custom style willl be adpoted', function () {
-      var innerImage = _react.default.createElement("img", {
-        src: "https://foo.bar",
-        alt: "demo"
+    describe('React > 15.6', function () {
+      it('should render wrapper for children', function () {
+        var innerImage = _react.default.createElement("img", {
+          src: "https://foo.bar",
+          alt: "demo"
+        });
+
+        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+          ratio: "4/3"
+        }, innerImage)).toJSON();
+
+        expect(node).toMatchSnapshot();
       });
+      it('should support number as props', function () {
+        var innerImage = _react.default.createElement("img", {
+          src: "https://foo.bar",
+          alt: "demo"
+        });
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
-        ratio: "4/3",
-        style: {
-          color: '#fff'
-        }
-      }, innerImage)).toJSON();
+        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+          ratio: 0.75
+        }, innerImage)).toJSON();
 
-      expect(node).toMatchSnapshot();
+        expect(node).toMatchSnapshot();
+      });
+      it('custom style willl be adpoted', function () {
+        var innerImage = _react.default.createElement("img", {
+          src: "https://foo.bar",
+          alt: "demo"
+        });
+
+        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+          ratio: "4/3",
+          style: {
+            color: '#fff'
+          }
+        }, innerImage)).toJSON();
+
+        expect(node).toMatchSnapshot();
+      });
     });
   });
 });

dist/umd/index.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "react-lifecycles-compat"], factory);
+    define(["exports", "./react-15.6", "./react-latest"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("react-lifecycles-compat"));
+    factory(exports, require("./react-15.6"), require("./react-latest"));
   } else {
@@ -10,107 +10,20 @@ var mod = {
     };
-    factory(mod.exports, global.react, global.reactLifecyclesCompat);
+    factory(mod.exports, global.react15, global.reactLatest);
     global.index = mod.exports;
   }
-})(this, function (_exports, _react, _reactLifecyclesCompat) {
+})(this, function (_exports, _react, _reactLatest) {
   "use strict";
 
   _exports.__esModule = true;
-  _exports.default = void 0;
-  _react = _interopRequireWildcard(_react);
+  _exports.AspectRatio = _exports.default = void 0;
+  _react = _interopRequireDefault(_react);
+  _reactLatest = _interopRequireDefault(_reactLatest);
 
-  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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+  var _default = _react.default; // use before react 15.6
 
-  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-  var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
-
-  var AspectRatio =
-  /*#__PURE__*/
-  function (_PureComponent) {
-    _inheritsLoose(AspectRatio, _PureComponent);
-
-    function AspectRatio() {
-      var _this;
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
-
-      _defineProperty(_assertThisInitialized(_this), "state", {
-        ratio: _this.props.ratio
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "node", null);
-
-      _defineProperty(_assertThisInitialized(_this), "setNode", function (node) {
-        _this.node = node;
-      });
-
-      return _this;
-    }
-
-    AspectRatio.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-      if (nextProps.ratio === prevState.ratio) {
-        return null;
-      }
-
-      return {
-        ratio: nextProps.ratio
-      };
-    };
-
-    var _proto = AspectRatio.prototype;
-
-    _proto.componentDidUpdate = function componentDidUpdate() {
-      if (this.node) {
-        var node = this.node; // BC for older version of React https://github.com/facebook/react/issues/6411
-        // check if React support custom property AFTER
-
-        var customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
-
-        if (!customPropertyValue) {
-          node.style.setProperty(CUSTOM_PROPERTY_NAME, "(" + this.state.ratio + ")");
-        }
-      }
-    };
-
-    _proto.render = function render() {
-      var _extends2;
-
-      var _this$props = this.props,
-          ratio = _this$props.ratio,
-          style = _this$props.style,
-          children = _this$props.children,
-          otherProps = _objectWithoutPropertiesLoose(_this$props, ["ratio", "style", "children"]); // eslint-disable-line no-unused-vars
-
-
-      var newStyle = _extends({}, style, (_extends2 = {}, _extends2[CUSTOM_PROPERTY_NAME] = "(" + this.state.ratio + ")", _extends2));
-
-      return _react.default.createElement("div", _extends({
-        ref: this.setNode,
-        style: newStyle
-      }, otherProps), children);
-    };
-
-    return AspectRatio;
-  }(_react.PureComponent);
-
-  _defineProperty(AspectRatio, "defaultProps", {
-    className: 'react-aspect-ratio-placeholder',
-    ratio: 1
-  });
-
-  var _default = (0, _reactLifecyclesCompat.polyfill)(AspectRatio);
-
   _exports.default = _default;
+  var AspectRatio = _reactLatest.default;
+  _exports.AspectRatio = AspectRatio;
 });

dist/umd/stories/index.js

@@ -18,3 +18,2 @@ (function (global, factory) {
   _storybookAddonJsx = _interopRequireDefault(_storybookAddonJsx);
-  _index = _interopRequireDefault(_index);
 
@@ -66,3 +65,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
       titleText: "Image with Aspect Ratio",
-      contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.default, {
+      contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.AspectRatio, {
         ratio: "300/165",
@@ -81,3 +80,3 @@ style: {
       titleText: "Image with Aspect Ratio (pass number as props)",
-      contentNode: _react.default.createElement(_index.default, {
+      contentNode: _react.default.createElement(_index.AspectRatio, {
         ratio: 0.75,
@@ -95,3 +94,3 @@ style: {
       titleText: "Background image with aspect ratio",
-      contentNode: _react.default.createElement(_index.default, {
+      contentNode: _react.default.createElement(_index.AspectRatio, {
         ratio: "3/4",
@@ -127,3 +126,3 @@ style: {
           key: image.src
-        }, _react.default.createElement(_index.default, {
+        }, _react.default.createElement(_index.AspectRatio, {
           ratio: image.ratio
@@ -139,3 +138,3 @@ }, _react.default.createElement("img", {
       titleText: "Iframe with aspect ratio",
-      contentNode: _react.default.createElement(_index.default, {
+      contentNode: _react.default.createElement(_index.AspectRatio, {
         ratio: "560/315",
@@ -142,0 +141,0 @@ style: {

package.json

 {
   "name": "react-aspect-ratio",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "React Aspect Ratio Component",
@@ -65,5 +65,2 @@ "author": "Roderick Hsiao <[e-mail]>",
   },
-  "dependencies": {
-    "react-lifecycles-compat": "^3.0.0"
-  },
   "module": "dist/es/index.js",
@@ -70,0 +67,0 @@ "main": "dist/index.js",

README.md

@@ -100,3 +100,2 @@ <p align="center">
 
-
 ### CSS (By Thierry)
@@ -103,0 +102,0 @@

Fixed 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

Improved metrics

Total package byte prevSize

79970

increased by20.59%

Dependency count

1

decreased by-50%

Number of package files

25

increased by47.06%

Lines of code

1314

increased by25.62%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

135

decreased by-0.74%

Dependency changes

• - Removedreact-lifecycles-compat@^3.0.0

• - Removedreact-lifecycles-compat@3.0.4(transitive)