react-aspect-ratio - npm Package Compare versions

Comparing version 1.0.37 to 1.0.39

dist/es/index.js

@@ -1,37 +0,36 @@
-var _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; };
+"use strict";
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+exports.__esModule = true;
+exports.default = void 0;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _react = _interopRequireWildcard(require("react"));
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var _reactLifecyclesCompat = require("react-lifecycles-compat");
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+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; } }
 
-import React, { PureComponent } from 'react';
+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 { polyfill } from 'react-lifecycles-compat';
+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; }
 
-var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
+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 AspectRatio = function (_PureComponent) {
-  _inherits(AspectRatio, _PureComponent);
+const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
 
-  function AspectRatio() {
-    var _temp, _this, _ret;
+class AspectRatio extends _react.PureComponent {
+  constructor() {
+    super(...arguments);
 
-    _classCallCheck(this, AspectRatio);
+    _defineProperty(this, "state", {
+      ratio: this.props.ratio
+    });
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    _defineProperty(this, "node", null);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.state = {
-      ratio: _this.props.ratio
-    }, _this.node = null, _this.setNode = function (node) {
-      _this.node = node;
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    _defineProperty(this, "setNode", node => {
+      this.node = node;
+    });
   }
 
-  AspectRatio.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.ratio === prevState.ratio) {
@@ -44,45 +43,45 @@ return null;
     };
-  };
+  }
 
-  AspectRatio.prototype.componentDidUpdate = function componentDidUpdate() {
+  componentDidUpdate() {
     if (this.node) {
-      var node = this.node;
-
-      // BC for older version of React https://github.com/facebook/react/issues/6411
+      const 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);
+      const customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
+
       if (!customPropertyValue) {
-        node.style.setProperty(CUSTOM_PROPERTY_NAME, '(' + this.state.ratio + ')');
+        node.style.setProperty(CUSTOM_PROPERTY_NAME, `(${this.state.ratio})`);
       }
     }
-  };
+  }
 
-  AspectRatio.prototype.render = function render() {
-    var _extends2;
+  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
 
-    var _props = this.props,
-        ratio = _props.ratio,
-        style = _props.style,
-        children = _props.children,
-        otherProps = _objectWithoutProperties(_props, ['ratio', 'style', 'children']); // eslint-disable-line no-unused-vars
 
-    var newStyle = _extends({}, style, (_extends2 = {}, _extends2[CUSTOM_PROPERTY_NAME] = '(' + this.state.ratio + ')', _extends2));
+    const newStyle = _extends({}, style, {
+      // https://github.com/roderickhsiao/react-aspect-ratio/commit/53ec15858ae186c41e70b8c14cc5a5b6e97cb6e3
+      [CUSTOM_PROPERTY_NAME]: `(${this.state.ratio})`
+    });
 
-    return React.createElement(
-      'div',
-      _extends({ ref: this.setNode, style: newStyle }, otherProps),
-      children
-    );
-  };
+    return _react.default.createElement("div", _extends({
+      ref: this.setNode,
+      style: newStyle
+    }, otherProps), children);
+  }
 
-  return AspectRatio;
-}(PureComponent);
+}
 
-AspectRatio.defaultProps = {
+_defineProperty(AspectRatio, "defaultProps", {
   className: 'react-aspect-ratio-placeholder',
   ratio: 1
-};
+});
 
+var _default = (0, _reactLifecyclesCompat.polyfill)(AspectRatio);
 
-export default polyfill(AspectRatio);
+exports.default = _default;

dist/index.js

@@ -1,103 +0,104 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
+exports.default = void 0;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _react = _interopRequireWildcard(require("react"));
 
-var _react = require('react');
+var _reactLifecyclesCompat = require("react-lifecycles-compat");
 
-var _react2 = _interopRequireDefault(_react);
+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; } }
 
-var _reactLifecyclesCompat = require('react-lifecycles-compat');
+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); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
 
-var AspectRatio = function (_PureComponent) {
-  _inherits(AspectRatio, _PureComponent);
+var AspectRatio =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(AspectRatio, _PureComponent);
 
   function AspectRatio() {
-    var _ref;
+    var _this;
 
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, AspectRatio);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AspectRatio.__proto__ || Object.getPrototypeOf(AspectRatio)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
       ratio: _this.props.ratio
-    }, _this.node = null, _this.setNode = function (node) {
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "node", null);
+
+    _defineProperty(_assertThisInitialized(_this), "setNode", function (node) {
       _this.node = node;
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    return _this;
   }
 
-  _createClass(AspectRatio, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      if (this.node) {
-        var node = this.node;
+  AspectRatio.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.ratio === prevState.ratio) {
+      return null;
+    }
 
-        // BC for older version of React https://github.com/facebook/react/issues/6411
-        // check if React support custom property AFTER
+    return {
+      ratio: nextProps.ratio
+    };
+  };
 
-        var customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
-        if (!customPropertyValue) {
-          node.style.setProperty(CUSTOM_PROPERTY_NAME, '(' + this.state.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 + ")");
       }
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          ratio = _props.ratio,
-          style = _props.style,
-          children = _props.children,
-          otherProps = _objectWithoutProperties(_props, ['ratio', 'style', 'children']); // eslint-disable-line no-unused-vars
+  };
 
-      var newStyle = Object.assign({}, style, _defineProperty({}, CUSTOM_PROPERTY_NAME, '(' + this.state.ratio + ')'));
+  _proto.render = function render() {
+    var _extends2;
 
-      return _react2.default.createElement(
-        'div',
-        Object.assign({ ref: this.setNode, style: newStyle }, otherProps),
-        children
-      );
-    }
-  }], [{
-    key: 'getDerivedStateFromProps',
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      if (nextProps.ratio === prevState.ratio) {
-        return null;
-      }
+    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
 
-      return {
-        ratio: nextProps.ratio
-      };
-    }
-  }]);
 
+    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);
 
-AspectRatio.defaultProps = {
+_defineProperty(AspectRatio, "defaultProps", {
   className: 'react-aspect-ratio-placeholder',
   ratio: 1
-};
-exports.default = (0, _reactLifecyclesCompat.polyfill)(AspectRatio);
-module.exports = exports['default'];
+});
+
+var _default = (0, _reactLifecyclesCompat.polyfill)(AspectRatio);
+
+exports.default = _default;

package.json

 {
   "name": "react-aspect-ratio",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "React Aspect Ratio Component",
@@ -29,20 +29,17 @@ "author": "Roderick Hsiao <[e-mail]>",
     "test": "npm run lint && npm run testonly",
-    "testonly": "jest --config jest-config.js"
+    "test:ci": "npm run lint && npm run testonly:ci",
+    "testonly": "jest --config jest-config.js",
+    "testonly:ci": "jest --config jest-config.js -u"
   },
   "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.2.3",
+    "@babel/plugin-transform-spread": "^7.2.2",
     "@storybook/react": "^4.0.0",
-    "babel-cli": "^6.14.0",
-    "babel-core": "^6.14.0",
-    "babel-eslint": "^8.0.0",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-polyfill": "^6.13.0",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-app": "^3.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.1.0",
+    "babel-loader": "^8.0.5",
+    "babel-preset-react-app": "^7.0.1",
     "babel-runtime": "^6.11.6",
@@ -56,7 +53,7 @@ "bundlesize": "^0.17.0",
     "eslint-plugin-react": "^7.0.0",
-    "flow-bin": "^0.90.0",
+    "flow-bin": "^0.93.0",
     "git-url-parse": "^11.1.1",
-    "jest": "^23.0.0",
-    "jest-cli": "^23.6.0",
-    "jest-junit": "^5.2.0",
+    "jest": "^24.1.0",
+    "jest-cli": "^24.1.0",
+    "jest-junit": "^6.3.0",
     "react": "^16.0.0",
@@ -63,0 +60,0 @@ "react-dom": "^16.0.0",

README.md

 <p align="center">
-  <h1>React Aspect Ratio</h1>
-  <br>
+    <h1>React Aspect Ratio</h1>
   <img src="https://cloud.githubusercontent.com/assets/3906130/23882532/7e0cd586-081e-11e7-995f-005196385335.jpg" width="400" alt="reac aspect ratio">
@@ -10,2 +9,4 @@ <br>
   <a href="https://circleci.com/gh/roderickhsiao/react-aspect-ratio"><img src="https://circleci.com/gh/roderickhsiao/react-aspect-ratio.svg?style=svg" alt="circleci"></a>
+  <a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/roderickhsiao/react-aspect-ratio.svg" alt="Greenkeeper badge"></a>
+
 </p>
@@ -16,2 +17,4 @@
 
+[Demo](https://roderickhsiao.github.io/react-aspect-ratio/)
+
 Inspired by [Thierry](https://twitter.com/thierrykoblentz)
@@ -23,2 +26,17 @@
 
+## Why
+
+Most common use case is image loading. If you are not define dimensions for your image tag, browser will assume its a square size of image before image loaded. Hence you will see browser reflow your layout after image loaded.
+
+If you define a hard dimensions, it might not fit a responsive design.
+
+* Chrome is developing [Intrinsic size attribute](https://www.chromestatus.com/feature/4704436815396864) which potentially will act the same as what this library does. However, its very early stage and no other vendors showing signals of development yet.
+
+## How
+
+This component using what people call "Padding trick" - creating a wrapper html tag with zero height and a percentage of `padding-bottom` to perserve space. (`padding-bottom` will be percentage of your component width).
+
+This library also utilizes [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for modern browser as well as CSS `calc` [API](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) to minimized the style needed for different padding value.
+
+
 ## Installation
@@ -40,2 +58,10 @@
 
+### Props
+
+| Props       | Type          | Default                                     | Description                                                                                   |
+|-------------|---------------|---------------------------------------------|-----------------------------------------------------------------------------------------------|
+| ratio       | string/number | 1                                           | Aspect ratio of your component, could be number or string like width/height                   |
+| other props | Object        | ```{style: {--aspect-ratio: ${ratio}} }``` | Any props to your React component, the library will add `--aspect-ratio` to your style object |
+| children    | React Element |                                             | Single DOM element                                                                            |
+
 **You will need to `import 'react-aspect-ratio/aspect-ratio.css'`**
@@ -53,4 +79,2 @@
 
-For browser support [CSS variable](http://caniuse.com/#feat=css-variables), you can use it to wrap other elements (like iframe, video, object ...etc) as well
-
 ```js
@@ -81,8 +105,37 @@ import AspectRatio from 'react-aspect-ratio';
 
-## API
 
-### Props
+### CSS (By Thierry)
 
-- `ratio`: string | number
-- any other props, note that the component will add custom variable `--aspect-ratio` to component `style`
-- children: single DOM child
+```css
+[style*="--aspect-ratio"] > :first-child {
+  width: 100%;
+}
+[style*="--aspect-ratio"] > img {  
+  height: auto;
+}
+@supports (--custom:property) {
+  [style*="--aspect-ratio"] {
+    position: relative;
+  }
+  [style*="--aspect-ratio"]::before {
+    height: 0;
+    content: "";
+    display: block;
+    padding-bottom: calc(100% / (var(--aspect-ratio)));
+  }  
+  [style*="--aspect-ratio"] > :first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }  
+}
+```
+
+- We use `[style*="--aspect-ratio"]` as a hook to target the appropriate boxes
+- We stretch the inner box regardless of support for custom property
+- We make sure the height of images comes from their intrinsic ratio rather than their height attribute
+- We style the container as a containing block (so the inner box references that ancestor for its positioning)
+- We create a pseudo-element to be used with the “padding hack” (it is that element that creates the aspect ratio)
+- We use `calc()` and `var()` to calculate padding based on the value of the custom property
+- We style the inner box so it matches the dimensions of its containing block

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66318

increased by329.1%

Dev dependency count

27

decreased by-15.62%

Number of package files

17

increased by142.86%

Lines of code

1046

increased by494.32%

Number of lines in readme file

136

increased by63.86%

Worsened metrics

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes