react-fit - npm Package Compare versions

Comparing version 1.0.0-alpha.3 to 1.0.0-alpha.4

dist/Fit.js

@@ -48,4 +48,6 @@ "use strict";
 
+var displayContentsSupported = 'CSS' in window && CSS.supports('display', 'contents');
+
 var upperCaseFirstLetter = function upperCaseFirstLetter(a) {
-  return a.slice(0, 1).toUpperCase() + a.slice(1, a.length);
+  return a[0].toUpperCase() + a.slice(1, a.length);
 };
@@ -64,3 +66,5 @@
 
-    if (overflow === 'auto' || overflow === 'scroll' || overflow === 'auto scroll' || overflow === 'scroll auto') {
+    if (overflow.split(' ').every(function (o) {
+      return o === 'auto' || o === 'scroll';
+    })) {
       return parent;
@@ -72,3 +76,3 @@ }
 
-  return document.body;
+  return document.documentElement;
 };
@@ -92,4 +96,5 @@
   var overflowEndProperty = "overflow".concat(upperCaseFirstLetter(displayEndProperty));
-  var offsetSizeProperty = "offset".concat(upperCaseFirstLetter(sizeProperty));
-  var initialSizeProperty = "client".concat(upperCaseFirstLetter(sizeProperty));
+  var uppercasedSizeProperty = upperCaseFirstLetter(sizeProperty);
+  var offsetSizeProperty = "offset".concat(uppercasedSizeProperty);
+  var initialSizeProperty = "client".concat(uppercasedSizeProperty);
   var minSizeProperty = "min-".concat(sizeProperty);
@@ -107,9 +112,7 @@ var scrollbarWidth = scrollContainer[offsetSizeProperty] - scrollContainer[initialSizeProperty];
 
-  var willFitStart = function willFitStart() {
-    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialSize;
+  var willFitStart = function willFitStart(size) {
     return size <= availableStartSpace;
   };
 
-  var willFitEnd = function willFitEnd() {
-    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialSize;
+  var willFitEnd = function willFitEnd(size) {
     return size <= availableEndSpace;
@@ -119,3 +122,3 @@ };
   var displayStart = function displayStart() {
-    element.style[displayStartProperty] = null;
+    element.style[displayStartProperty] = 'unset';
     element.style[displayEndProperty] = secondary ? '0' : '100%';
@@ -126,9 +129,6 @@ };
     element.style[displayStartProperty] = secondary ? '0' : '100%';
-    element.style[displayEndProperty] = null;
+    element.style[displayEndProperty] = 'unset';
   };
 
-  var displayIfFits = function displayIfFits() {
-    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialSize;
-    var willFit = arguments.length > 1 ? arguments[1] : undefined;
-    var display = arguments.length > 2 ? arguments[2] : undefined;
+  var displayIfFits = function displayIfFits(size, willFit, display) {
     var fits = willFit(size);
@@ -144,9 +144,7 @@
   var displayStartIfFits = function displayStartIfFits() {
-    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialSize;
-    return displayIfFits(size, willFitStart, displayStart);
+    return displayIfFits(initialSize, willFitStart, displayStart);
   };
 
   var displayEndIfFits = function displayEndIfFits() {
-    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialSize;
-    return displayIfFits(size, willFitEnd, displayEnd);
+    return displayIfFits(initialSize, willFitEnd, displayEnd);
   };
@@ -159,3 +157,3 @@
     var shrinkToSize = function shrinkToSize(newSize) {
-      (0, _utils.warnOnDev)("<Fit />'s child needed to be shrank to ".concat(newSize, "px."));
+      (0, _utils.warnOnDev)("<Fit />'s child needed to have its ".concat(sizeProperty, " decreased to ").concat(newSize, "px."));
       element.style[sizeProperty] = "".concat(newSize, "px");
@@ -249,3 +247,3 @@ };
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMutation", function () {
-      _this.fit(_this.element);
+      _this.fit();
     });
@@ -255,3 +253,7 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "fit", function (element) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "fit", function () {
+      var _assertThisInitialize = _assertThisInitialized(_assertThisInitialized(_this)),
+          container = _assertThisInitialize.container,
+          element = _assertThisInitialize.element;
+
       if (!element) {
@@ -271,3 +273,3 @@ return;
       _this.elementHeight = elementHeight;
-      var parent = element.parentElement;
+      var parent = container.parentElement;
       /**
@@ -319,5 +321,10 @@ * We need to ensure that <Fit />'s child has a absolute position. Otherwise,
     value: function componentDidMount() {
-      // eslint-disable-next-line react/no-find-dom-node
-      this.element = (0, _reactDom.findDOMNode)(this);
-      this.fit(this.element);
+      if (!displayContentsSupported) {
+        // eslint-disable-next-line react/no-find-dom-node
+        var element = (0, _reactDom.findDOMNode)(this);
+        this.container = element;
+        this.element = element;
+      }
+
+      this.fit();
       this.mutationOberver.observe(this.element, {
@@ -330,4 +337,21 @@ attributeFilter: ['class', 'style']
     value: function render() {
+      var _this2 = this;
+
       var children = this.props.children;
-      return _react.default.Children.only(children);
+
+      var child = _react.default.Children.only(children);
+
+      if (displayContentsSupported) {
+        return _react.default.createElement("div", {
+          style: {
+            display: 'contents'
+          },
+          ref: function ref(_ref2) {
+            _this2.container = _ref2;
+            _this2.element = _ref2 && _ref2.firstChild;
+          }
+        }, child);
+      }
+
+      return child;
     }
@@ -334,0 +358,0 @@ }]);

package.json

 {
   "name": "react-fit",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "Fit a popover element on the screen.",
@@ -38,4 +38,4 @@ "main": "dist/Fit.js",
     "eslint-plugin-react": "^7.11.1",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0"
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
   },
@@ -42,0 +42,0 @@ "peerDependencies": {

src/Fit.jsx

@@ -8,4 +8,6 @@ import React, { Component } from 'react';
 
-const upperCaseFirstLetter = a => a.slice(0, 1).toUpperCase() + a.slice(1, a.length);
+const displayContentsSupported = 'CSS' in window && CSS.supports('display', 'contents');
 
+const upperCaseFirstLetter = a => a[0].toUpperCase() + a.slice(1, a.length);
+
 const findScrollContainer = (element) => {
@@ -19,3 +21,3 @@ if (!element) {
     const { overflow } = window.getComputedStyle(parent);
-    if (overflow === 'auto' || overflow === 'scroll' || overflow === 'auto scroll' || overflow === 'scroll auto') {
+    if (overflow.split(' ').every(o => o === 'auto' || o === 'scroll')) {
       return parent;
@@ -26,3 +28,3 @@ }
 
-  return document.body;
+  return document.documentElement;
 };
@@ -50,4 +52,5 @@
   const overflowEndProperty = `overflow${upperCaseFirstLetter(displayEndProperty)}`;
-  const offsetSizeProperty = `offset${upperCaseFirstLetter(sizeProperty)}`;
-  const initialSizeProperty = `client${upperCaseFirstLetter(sizeProperty)}`;
+  const uppercasedSizeProperty = upperCaseFirstLetter(sizeProperty);
+  const offsetSizeProperty = `offset${uppercasedSizeProperty}`;
+  const initialSizeProperty = `client${uppercasedSizeProperty}`;
   const minSizeProperty = `min-${sizeProperty}`;
@@ -66,7 +69,7 @@
 
-  const willFitStart = (size = initialSize) => size <= availableStartSpace;
-  const willFitEnd = (size = initialSize) => size <= availableEndSpace;
+  const willFitStart = size => size <= availableStartSpace;
+  const willFitEnd = size => size <= availableEndSpace;
 
   const displayStart = () => {
-    element.style[displayStartProperty] = null;
+    element.style[displayStartProperty] = 'unset';
     element.style[displayEndProperty] = secondary ? '0' : '100%';
@@ -77,6 +80,6 @@ };
     element.style[displayStartProperty] = secondary ? '0' : '100%';
-    element.style[displayEndProperty] = null;
+    element.style[displayEndProperty] = 'unset';
   };
 
-  const displayIfFits = (size = initialSize, willFit, display) => {
+  const displayIfFits = (size, willFit, display) => {
     const fits = willFit(size);
@@ -89,8 +92,8 @@ if (fits) {
 
-  const displayStartIfFits = (size = initialSize) => (
-    displayIfFits(size, willFitStart, displayStart)
+  const displayStartIfFits = () => (
+    displayIfFits(initialSize, willFitStart, displayStart)
   );
 
-  const displayEndIfFits = (size = initialSize) => (
-    displayIfFits(size, willFitEnd, displayEnd)
+  const displayEndIfFits = () => (
+    displayIfFits(initialSize, willFitEnd, displayEnd)
   );
@@ -103,3 +106,3 @@
     const shrinkToSize = (newSize) => {
-      warnOnDev(`<Fit />'s child needed to be shrank to ${newSize}px.`);
+      warnOnDev(`<Fit />'s child needed to have its ${sizeProperty} decreased to ${newSize}px.`);
       element.style[sizeProperty] = `${newSize}px`;
@@ -172,6 +175,9 @@ };
   componentDidMount() {
-    // eslint-disable-next-line react/no-find-dom-node
-    this.element = findDOMNode(this);
-
-    this.fit(this.element);
+    if (!displayContentsSupported) {
+      // eslint-disable-next-line react/no-find-dom-node
+      const element = findDOMNode(this);
+      this.container = element;
+      this.element = element;
+    }
+    this.fit();
     this.mutationOberver.observe(this.element, { attributeFilter: ['class', 'style'] });
@@ -181,3 +187,3 @@ }
   onMutation = () => {
-    this.fit(this.element);
+    this.fit();
   };
@@ -187,3 +193,5 @@
 
-  fit = (element) => {
+  fit = () => {
+    const { container, element } = this;
+
     if (!element) {
@@ -205,3 +213,3 @@ return;
 
-    const parent = element.parentElement;
+    const parent = container.parentElement;
 
@@ -251,3 +259,19 @@ /**
 
-    return React.Children.only(children);
+    const child = React.Children.only(children);
+
+    if (displayContentsSupported) {
+      return (
+        <div
+          style={{ display: 'contents' }}
+          ref={(ref) => {
+            this.container = ref;
+            this.element = ref && ref.firstChild;
+          }}
+        >
+          {child}
+        </div>
+      );
+    }
+
+    return child;
   }
@@ -254,0 +278,0 @@ }

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40007

increased by66.74%

Number of package files

8

increased by60%

Lines of code

544

increased by7.51%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

79

increased byInfinity%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes