flex-wrap-layout - npm Package Compare versions

Comparing version 0.10.0-beta.1 to 0.10.0-beta.2

dist/cjs/detectWrappedElements.js

@@ -5,9 +5,6 @@ "use strict";
 // [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
-function position(el) {
-    const { top, left } = el.getBoundingClientRect();
-    const { marginTop, marginLeft } = window.getComputedStyle(el);
-    return {
-        top: top - parseInt(marginTop, 10),
-        left: left - parseInt(marginLeft, 10)
-    };
+function getTopPosition(el) {
+    const { top } = el.getBoundingClientRect();
+    const { marginTop } = window.getComputedStyle(el);
+    return top - parseInt(marginTop, 10);
 }
@@ -18,4 +15,4 @@ // [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
     //   - find its previous sibling
-    //   - check its sibling is not at the same position
-    //     - if it's not, add .next-is-wrapped
+    //   - check if its previous sibling is at the same top position
+    //     - if not, add .next-is-wrapped
     //     - if same position, remove .next-is-wrapped
@@ -30,6 +27,6 @@ // [...HTMLCollection] vs Array.from(HTMLCollection): the latter doesn't need downlevelIteration with IE
             const child = children[i];
-            const { top } = position(child);
             const prev = child.previousElementSibling;
             if (prev !== null) {
-                const { top: prevTop } = position(prev);
+                const top = getTopPosition(child);
+                const prevTop = getTopPosition(prev);
                 if (top > prevTop) {
@@ -44,2 +41,7 @@ // There is no way to CSS style an element given a match on its next sibling
             }
+            // If the next sibling has been removed since the last run,
+            // .next-is-wrapped may be present and we need to remove it
+            if (child.nextElementSibling === null) {
+                child.classList.remove(nextIsWrappedClassName);
+            }
         }
@@ -46,0 +48,0 @@ });

dist/cjs/DevTools.js

@@ -32,3 +32,3 @@ "use strict";
 };
-function useDevTools(showBordersInit, detectWrappedElementsInit, flexFillInit) {
+function useDevTools({ showBordersInit, detectWrappedElementsInit, flexFillInit }) {
     const [showBorders, setShowBorders] = react_1.useState(showBordersInit);
@@ -51,3 +51,4 @@ const [detectWrappedElements, setDetectWrappedElements] = react_1.useState(detectWrappedElementsInit);
 exports.useDevTools = useDevTools;
-// https://inventingwithmonster.io/20190207-break-the-rules-of-react-hooks/
+// http://web.archive.org/web/20191213203807/https://inventingwithmonster.io/20190207-break-the-rules-of-react-hooks/
+// https://mattperry.is/writing-code/how-to-break-the-rules-of-react-hooks
 function DetectWrappedElements({ detectWrappedElementsRef }) {
@@ -54,0 +55,0 @@ useDetectWrappedElements_1.useDetectWrappedElements(detectWrappedElementsRef);

dist/detectWrappedElements.js

@@ -5,9 +5,6 @@ "use strict";
 // [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
-function position(el) {
-    const { top, left } = el.getBoundingClientRect();
-    const { marginTop, marginLeft } = window.getComputedStyle(el);
-    return {
-        top: top - parseInt(marginTop, 10),
-        left: left - parseInt(marginLeft, 10)
-    };
+function getTopPosition(el) {
+    const { top } = el.getBoundingClientRect();
+    const { marginTop } = window.getComputedStyle(el);
+    return top - parseInt(marginTop, 10);
 }
@@ -18,4 +15,4 @@ // [How to detect CSS flex wrap event](https://stackoverflow.com/q/40012428)
     //   - find its previous sibling
-    //   - check its sibling is not at the same position
-    //     - if it's not, add .next-is-wrapped
+    //   - check if its previous sibling is at the same top position
+    //     - if not, add .next-is-wrapped
     //     - if same position, remove .next-is-wrapped
@@ -30,6 +27,6 @@ // [...HTMLCollection] vs Array.from(HTMLCollection): the latter doesn't need downlevelIteration with IE
             const child = children[i];
-            const { top } = position(child);
             const prev = child.previousElementSibling;
             if (prev !== null) {
-                const { top: prevTop } = position(prev);
+                const top = getTopPosition(child);
+                const prevTop = getTopPosition(prev);
                 if (top > prevTop) {
@@ -44,2 +41,7 @@ // There is no way to CSS style an element given a match on its next sibling
             }
+            // If the next sibling has been removed since the last run,
+            // .next-is-wrapped may be present and we need to remove it
+            if (child.nextElementSibling === null) {
+                child.classList.remove(nextIsWrappedClassName);
+            }
         }
@@ -46,0 +48,0 @@ });

dist/DevTools.d.ts

@@ -12,3 +12,8 @@ import React from 'react';
 }
-export declare function useDevTools(showBordersInit: boolean, detectWrappedElementsInit: boolean, flexFillInit: boolean): {
+interface Init {
+    showBordersInit: boolean;
+    detectWrappedElementsInit: boolean;
+    flexFillInit: boolean;
+}
+export declare function useDevTools({ showBordersInit, detectWrappedElementsInit, flexFillInit }: Init): {
     showBordersClassName: string;
@@ -15,0 +20,0 @@ showBorders: boolean;

dist/DevTools.js

@@ -32,3 +32,3 @@ "use strict";
 };
-function useDevTools(showBordersInit, detectWrappedElementsInit, flexFillInit) {
+function useDevTools({ showBordersInit, detectWrappedElementsInit, flexFillInit }) {
     const [showBorders, setShowBorders] = react_1.useState(showBordersInit);
@@ -51,3 +51,4 @@ const [detectWrappedElements, setDetectWrappedElements] = react_1.useState(detectWrappedElementsInit);
 exports.useDevTools = useDevTools;
-// https://inventingwithmonster.io/20190207-break-the-rules-of-react-hooks/
+// http://web.archive.org/web/20191213203807/https://inventingwithmonster.io/20190207-break-the-rules-of-react-hooks/
+// https://mattperry.is/writing-code/how-to-break-the-rules-of-react-hooks
 function DetectWrappedElements({ detectWrappedElementsRef }) {
@@ -54,0 +55,0 @@ useDetectWrappedElements_1.useDetectWrappedElements(detectWrappedElementsRef);

package.json

 {
   "name": "flex-wrap-layout",
-  "version": "0.10.0-beta.1",
+  "version": "0.10.0-beta.2",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

src/detectWrappedElements.ts

 // [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
-function position(el: Element) {
-  const { top, left } = el.getBoundingClientRect();
-  const { marginTop, marginLeft } = window.getComputedStyle(el);
-  return {
-    top: top - parseInt(marginTop, 10),
-    left: left - parseInt(marginLeft, 10)
-  };
+function getTopPosition(el: Element) {
+  const { top } = el.getBoundingClientRect();
+  const { marginTop } = window.getComputedStyle(el);
+  return top - parseInt(marginTop, 10);
 }
@@ -20,4 +17,4 @@
   //   - find its previous sibling
-  //   - check its sibling is not at the same position
-  //     - if it's not, add .next-is-wrapped
+  //   - check if its previous sibling is at the same top position
+  //     - if not, add .next-is-wrapped
   //     - if same position, remove .next-is-wrapped
@@ -34,8 +31,6 @@
 
-      const { top } = position(child);
-
       const prev = child.previousElementSibling;
-
       if (prev !== null) {
-        const { top: prevTop } = position(prev);
+        const top = getTopPosition(child);
+        const prevTop = getTopPosition(prev);
 
@@ -50,2 +45,8 @@ if (top > prevTop) {
       }
+
+      // If the next sibling has been removed since the last run,
+      // .next-is-wrapped may be present and we need to remove it
+      if (child.nextElementSibling === null) {
+        child.classList.remove(nextIsWrappedClassName);
+      }
     }
@@ -52,0 +53,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

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

Improved metrics

Total package byte prevSize

38391

increased by3.04%

Lines of code

638

increased by2.41%

No dependency changes