react-fit - npm Package Compare versions

Comparing version 1.0.0-alpha.5 to 1.0.0-alpha.6

dist/Fit.js

@@ -48,6 +48,7 @@ "use strict";
 
-var displayContentsSupported = 'CSS' in window && CSS.supports('display', 'contents');
+var isDisplayContentsSupported = 'CSS' in window && CSS.supports('display', 'contents');
+var isMutationOberverSupported = 'MutationObserver' in window;
 
-var upperCaseFirstLetter = function upperCaseFirstLetter(a) {
-  return a[0].toUpperCase() + a.slice(1, a.length);
+var capitalize = function capitalize(a) {
+  return a[0].toUpperCase() + a.slice(1);
 };
@@ -90,12 +91,12 @@
   var isX = axis === 'x';
-  var displayStartProperty = isX ? 'left' : 'top';
-  var displayEndProperty = isX ? 'right' : 'bottom';
+  var startProperty = isX ? 'left' : 'top';
+  var endProperty = isX ? 'right' : 'bottom';
   var sizeProperty = isX ? 'width' : 'height';
-  var overflowStartProperty = "overflow".concat(upperCaseFirstLetter(displayStartProperty));
-  var overflowEndProperty = "overflow".concat(upperCaseFirstLetter(displayEndProperty));
-  var uppercasedSizeProperty = upperCaseFirstLetter(sizeProperty);
+  var overflowStartProperty = "overflow".concat(capitalize(startProperty));
+  var overflowEndProperty = "overflow".concat(capitalize(endProperty));
+  var uppercasedSizeProperty = capitalize(sizeProperty);
   var offsetSizeProperty = "offset".concat(uppercasedSizeProperty);
-  var initialSizeProperty = "client".concat(uppercasedSizeProperty);
+  var clientSizeProperty = "client".concat(uppercasedSizeProperty);
   var minSizeProperty = "min-".concat(sizeProperty);
-  var scrollbarWidth = scrollContainer[offsetSizeProperty] - scrollContainer[initialSizeProperty];
+  var scrollbarWidth = scrollContainer[offsetSizeProperty] - scrollContainer[clientSizeProperty];
   var availableStartSpace = -parentCollisions[overflowStartProperty] - spacing;
@@ -105,28 +106,20 @@ var availableEndSpace = -parentCollisions[overflowEndProperty] - spacing - scrollbarWidth;
   if (secondary) {
-    availableStartSpace += parent[initialSizeProperty];
-    availableEndSpace += parent[initialSizeProperty];
+    availableStartSpace += parent[clientSizeProperty];
+    availableEndSpace += parent[clientSizeProperty];
   }
 
-  var initialSize = element[initialSizeProperty];
+  var offsetSize = element[offsetSizeProperty];
 
-  var willFitStart = function willFitStart(size) {
-    return size <= availableStartSpace;
-  };
-
-  var willFitEnd = function willFitEnd(size) {
-    return size <= availableEndSpace;
-  };
-
   var displayStart = function displayStart() {
-    element.style[displayStartProperty] = 'unset';
-    element.style[displayEndProperty] = secondary ? '0' : '100%';
+    element.style[startProperty] = 'unset';
+    element.style[endProperty] = secondary ? '0' : '100%';
   };
 
   var displayEnd = function displayEnd() {
-    element.style[displayStartProperty] = secondary ? '0' : '100%';
-    element.style[displayEndProperty] = 'unset';
+    element.style[startProperty] = secondary ? '0' : '100%';
+    element.style[endProperty] = 'unset';
   };
 
-  var displayIfFits = function displayIfFits(willFit, display) {
-    var fits = willFit(initialSize);
+  var displayIfFits = function displayIfFits(availableSpace, display) {
+    var fits = offsetSize <= availableSpace;
 
@@ -141,7 +134,7 @@ if (fits) {
   var displayStartIfFits = function displayStartIfFits() {
-    return displayIfFits(willFitStart, displayStart);
+    return displayIfFits(availableStartSpace, displayStart);
   };
 
   var displayEndIfFits = function displayEndIfFits() {
-    return displayIfFits(willFitEnd, displayEnd);
+    return displayIfFits(availableEndSpace, displayEnd);
   };
@@ -153,3 +146,8 @@
 
-    var shrinkToSize = function shrinkToSize(newSize) {
+    var shrinkToSize = function shrinkToSize(size) {
+      if (minSize && size < minSize) {
+        (0, _utils.warnOnDev)("<Fit />'s child will not fit anywhere with its current ".concat(minSizeProperty, " of ").concat(minSize, "px."));
+      }
+
+      var newSize = Math.max(size, minSize || 0);
       (0, _utils.warnOnDev)("<Fit />'s child needed to have its ".concat(sizeProperty, " decreased to ").concat(newSize, "px."));
@@ -159,27 +157,7 @@ element.style[sizeProperty] = "".concat(newSize, "px");
 
-    var shrinkToMaximumPossibleSize = function shrinkToMaximumPossibleSize(availableSpace) {
-      var newSize = Math.min(initialSize, availableSpace);
-      shrinkToSize(newSize);
-    };
-
-    var shrinkToMinimum = function shrinkToMinimum() {
-      (0, _utils.warnOnDev)("<Fit />'s child will not fit anywhere on the screen with its current ".concat(minSizeProperty, "."));
-      element.style[sizeProperty] = "".concat(minSize, "px");
-    };
-
     if (moreSpaceStart) {
-      if (!minSize || willFitStart(minSize)) {
-        shrinkToMaximumPossibleSize(availableStartSpace);
-      } else {
-        shrinkToMinimum();
-      }
-
+      shrinkToSize(availableStartSpace);
       displayStart();
     } else {
-      if (!minSize || willFitEnd(minSize)) {
-        shrinkToMaximumPossibleSize(availableEndSpace);
-      } else {
-        shrinkToMinimum();
-      }
-
+      shrinkToSize(availableEndSpace);
       displayEnd();
@@ -189,11 +167,11 @@ }
 
-  var isResized;
+  var fits;
 
   if (invertAxis) {
-    isResized = displayStartIfFits() || displayEndIfFits();
+    fits = displayStartIfFits() || displayEndIfFits();
   } else {
-    isResized = displayEndIfFits() || displayStartIfFits();
+    fits = displayEndIfFits() || displayStartIfFits();
   }
 
-  if (!isResized) {
+  if (!fits) {
     displayWhereverShrinkedFits();
@@ -249,3 +227,3 @@ }
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "mutationOberver", new MutationObserver(_this.onMutation));
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "mutationOberver", isMutationOberverSupported && new MutationObserver(_this.onMutation));
 
@@ -319,3 +297,3 @@ _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "fit", function () {
     value: function componentDidMount() {
-      if (!displayContentsSupported) {
+      if (!isDisplayContentsSupported) {
         // eslint-disable-next-line react/no-find-dom-node
@@ -328,5 +306,8 @@ var element = (0, _reactDom.findDOMNode)(this);
       this.fit();
-      this.mutationOberver.observe(this.element, {
-        attributeFilter: ['class', 'style']
-      });
+
+      if (isMutationOberverSupported) {
+        this.mutationOberver.observe(this.element, {
+          attributeFilter: ['class', 'style']
+        });
+      }
     }
@@ -342,3 +323,3 @@ }, {
 
-      if (displayContentsSupported) {
+      if (isDisplayContentsSupported) {
         return _react.default.createElement("div", {
@@ -345,0 +326,0 @@ style: {

package.json

 {
   "name": "react-fit",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "Fit a popover element on the screen.",
@@ -9,3 +9,4 @@ "main": "dist/Fit.js",
     "build": "babel src -d dist --ignore **/__tests__",
-    "prepublishOnly": "yarn run build",
+    "clean": "rimraf dist",
+    "prepublishOnly": "yarn run clean && yarn run build",
     "test": "yarn run test-eslint",
@@ -40,3 +41,4 @@ "test-eslint": "eslint src/ --ext .jsx,.js"
     "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react-dom": "^16.7.0",
+    "rimraf": "^2.6.2"
   },
@@ -43,0 +45,0 @@ "peerDependencies": {

src/Fit.jsx

@@ -8,5 +8,6 @@ import React, { Component } from 'react';
 
-const displayContentsSupported = 'CSS' in window && CSS.supports('display', 'contents');
+const isDisplayContentsSupported = 'CSS' in window && CSS.supports('display', 'contents');
+const isMutationOberverSupported = 'MutationObserver' in window;
 
-const upperCaseFirstLetter = a => a[0].toUpperCase() + a.slice(1, a.length);
+const capitalize = a => a[0].toUpperCase() + a.slice(1);
 
@@ -46,13 +47,13 @@ const findScrollContainer = (element) => {
   const isX = axis === 'x';
-  const displayStartProperty = isX ? 'left' : 'top';
-  const displayEndProperty = isX ? 'right' : 'bottom';
+  const startProperty = isX ? 'left' : 'top';
+  const endProperty = isX ? 'right' : 'bottom';
   const sizeProperty = isX ? 'width' : 'height';
-  const overflowStartProperty = `overflow${upperCaseFirstLetter(displayStartProperty)}`;
-  const overflowEndProperty = `overflow${upperCaseFirstLetter(displayEndProperty)}`;
-  const uppercasedSizeProperty = upperCaseFirstLetter(sizeProperty);
+  const overflowStartProperty = `overflow${capitalize(startProperty)}`;
+  const overflowEndProperty = `overflow${capitalize(endProperty)}`;
+  const uppercasedSizeProperty = capitalize(sizeProperty);
   const offsetSizeProperty = `offset${uppercasedSizeProperty}`;
-  const initialSizeProperty = `client${uppercasedSizeProperty}`;
+  const clientSizeProperty = `client${uppercasedSizeProperty}`;
   const minSizeProperty = `min-${sizeProperty}`;
 
-  const scrollbarWidth = scrollContainer[offsetSizeProperty] - scrollContainer[initialSizeProperty];
+  const scrollbarWidth = scrollContainer[offsetSizeProperty] - scrollContainer[clientSizeProperty];
   let availableStartSpace = -parentCollisions[overflowStartProperty] - spacing;
@@ -62,23 +63,20 @@ let availableEndSpace = -parentCollisions[overflowEndProperty] - spacing - scrollbarWidth;
   if (secondary) {
-    availableStartSpace += parent[initialSizeProperty];
-    availableEndSpace += parent[initialSizeProperty];
+    availableStartSpace += parent[clientSizeProperty];
+    availableEndSpace += parent[clientSizeProperty];
   }
 
-  const initialSize = element[initialSizeProperty];
+  const offsetSize = element[offsetSizeProperty];
 
-  const willFitStart = size => size <= availableStartSpace;
-  const willFitEnd = size => size <= availableEndSpace;
-
   const displayStart = () => {
-    element.style[displayStartProperty] = 'unset';
-    element.style[displayEndProperty] = secondary ? '0' : '100%';
+    element.style[startProperty] = 'unset';
+    element.style[endProperty] = secondary ? '0' : '100%';
   };
 
   const displayEnd = () => {
-    element.style[displayStartProperty] = secondary ? '0' : '100%';
-    element.style[displayEndProperty] = 'unset';
+    element.style[startProperty] = secondary ? '0' : '100%';
+    element.style[endProperty] = 'unset';
   };
 
-  const displayIfFits = (willFit, display) => {
-    const fits = willFit(initialSize);
+  const displayIfFits = (availableSpace, display) => {
+    const fits = offsetSize <= availableSpace;
     if (fits) {
@@ -91,7 +89,7 @@ display();
   const displayStartIfFits = () => (
-    displayIfFits(willFitStart, displayStart)
+    displayIfFits(availableStartSpace, displayStart)
   );
 
   const displayEndIfFits = () => (
-    displayIfFits(willFitEnd, displayEnd)
+    displayIfFits(availableEndSpace, displayEnd)
   );
@@ -103,3 +101,8 @@
 
-    const shrinkToSize = (newSize) => {
+    const shrinkToSize = (size) => {
+      if (minSize && size < minSize) {
+        warnOnDev(`<Fit />'s child will not fit anywhere with its current ${minSizeProperty} of ${minSize}px.`);
+      }
+
+      const newSize = Math.max(size, minSize || 0);
       warnOnDev(`<Fit />'s child needed to have its ${sizeProperty} decreased to ${newSize}px.`);
@@ -109,25 +112,7 @@ element.style[sizeProperty] = `${newSize}px`;
 
-    const shrinkToMaximumPossibleSize = (availableSpace) => {
-      const newSize = Math.min(initialSize, availableSpace);
-      shrinkToSize(newSize);
-    };
-
-    const shrinkToMinimum = () => {
-      warnOnDev(`<Fit />'s child will not fit anywhere on the screen with its current ${minSizeProperty}.`);
-      element.style[sizeProperty] = `${minSize}px`;
-    };
-
     if (moreSpaceStart) {
-      if (!minSize || willFitStart(minSize)) {
-        shrinkToMaximumPossibleSize(availableStartSpace);
-      } else {
-        shrinkToMinimum();
-      }
+      shrinkToSize(availableStartSpace);
       displayStart();
     } else {
-      if (!minSize || willFitEnd(minSize)) {
-        shrinkToMaximumPossibleSize(availableEndSpace);
-      } else {
-        shrinkToMinimum();
-      }
+      shrinkToSize(availableEndSpace);
       displayEnd();
@@ -137,11 +122,11 @@ }
 
-  let isResized;
+  let fits;
 
   if (invertAxis) {
-    isResized = displayStartIfFits() || displayEndIfFits();
+    fits = displayStartIfFits() || displayEndIfFits();
   } else {
-    isResized = displayEndIfFits() || displayStartIfFits();
+    fits = displayEndIfFits() || displayStartIfFits();
   }
 
-  if (!isResized) {
+  if (!fits) {
     displayWhereverShrinkedFits();
@@ -175,3 +160,3 @@ }
   componentDidMount() {
-    if (!displayContentsSupported) {
+    if (!isDisplayContentsSupported) {
       // eslint-disable-next-line react/no-find-dom-node
@@ -183,3 +168,6 @@ const element = findDOMNode(this);
     this.fit();
-    this.mutationOberver.observe(this.element, { attributeFilter: ['class', 'style'] });
+
+    if (isMutationOberverSupported) {
+      this.mutationOberver.observe(this.element, { attributeFilter: ['class', 'style'] });
+    }
   }
@@ -191,3 +179,3 @@
 
-  mutationOberver = new MutationObserver(this.onMutation);
+  mutationOberver = isMutationOberverSupported && new MutationObserver(this.onMutation);
 
@@ -261,3 +249,3 @@ fit = () => {
 
-    if (displayContentsSupported) {
+    if (isDisplayContentsSupported) {
       return (
@@ -264,0 +252,0 @@ <div

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

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

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

27960

decreased by-30.37%

Dev dependency count

14

increased by7.69%

Number of package files

7

decreased by-12.5%

Lines of code

522

decreased by-4.74%

No dependency changes