armstrong-react - npm Package Compare versions

Comparing version 4.0.0-pre22 to 4.0.0-pre23

dist/components/navigation/burgerMenu.d.ts

@@ -12,5 +12,5 @@ import * as React from "react";
     /** Icon for the open button */
-    openButtonIcon: string;
+    openButtonIcon?: string;
     /** Icon for the close button */
-    closeButtonIcon: string;
+    closeButtonIcon?: string;
     /** How long the transition takes in ms */
@@ -22,2 +22,4 @@ transitionTime?: number;
     hideCloseButton?: boolean;
+    /** Auto closes the burger menu when navigating */
+    closeOnNavigate?: boolean;
 }
@@ -24,0 +26,0 @@ interface IBurgerMenuContext {

dist/components/navigation/burgerMenu.js

@@ -9,7 +9,21 @@ "use strict";
 var BurgerMenuComponent = function (_a) {
-    var openButtonIcon = _a.openButtonIcon, closeButtonIcon = _a.closeButtonIcon, onChange = _a.onChange, Content = _a.content, position = _a.position, mode = _a.mode, transitionTime = _a.transitionTime, children = _a.children, hideOpenButton = _a.hideOpenButton, hideCloseButton = _a.hideCloseButton;
+    var openButtonIcon = _a.openButtonIcon, closeButtonIcon = _a.closeButtonIcon, onChange = _a.onChange, Content = _a.content, position = _a.position, mode = _a.mode, transitionTime = _a.transitionTime, children = _a.children, hideOpenButton = _a.hideOpenButton, hideCloseButton = _a.hideCloseButton, closeOnNavigate = _a.closeOnNavigate;
     var _b = React.useContext(exports.BurgerMenuContext), isOpen = _b.isOpen, setIsOpen = _b.setIsOpen, transitioning = _b.transitioning, setTransitioning = _b.setTransitioning;
     var _c = React.useState(0), menuWidth = _c[0], setMenuWidth = _c[1];
     var menuRef = React.useRef();
+    var menuContentRef = React.useRef();
     React.useEffect(function () {
+        if (menuContentRef.current && closeOnNavigate) {
+            menuContentRef.current.querySelectorAll("a").forEach(function (tag) { return tag.addEventListener("click", close); });
+        }
+        return function () {
+            if (menuContentRef.current && closeOnNavigate) {
+                menuContentRef.current.querySelectorAll("a").forEach(function (tag) { return tag.removeEventListener("click", close); });
+            }
+        };
+    }, [menuContentRef]);
+    var close = React.useCallback(function () {
+        setIsOpen(false);
+    }, []);
+    React.useEffect(function () {
         if (onChange) {
@@ -40,7 +54,7 @@ onChange(isOpen ? "open" : "closed");
     }, [isOpen, transitionTime]);
-    var slideTransform = React.useMemo(function () { return (mode === "push" ? { transform: open ? "translateX(" + (position === "left" ? menuWidth : -menuWidth) + "px)" : "translateX(0)" } : {}); }, [menuWidth, isOpen, mode]);
+    var slideTransform = React.useMemo(function () { return (mode === "push" ? { transform: isOpen ? "translateX(" + (position === "left" ? menuWidth : -menuWidth) + "px)" : "translateX(0)" } : {}); }, [menuWidth, isOpen, mode]);
     return (React.createElement(React.Fragment, null,
         React.createElement("nav", { className: "armstrong-menu", ref: menuRef, "data-open": isOpen, "data-position": position, "data-mode": mode, style: { transition: transitionTime + "ms" }, role: "navigation" },
             !hideCloseButton && React.createElement(button_1.Button, { className: "armstrong-menu-button close", onClick: function () { return setIsOpen(false); }, "aria-label": "Close the menu" }, closeButtonIcon && React.createElement(icon_1.Icon, { "aria-hidden": true, icon: closeButtonIcon })),
-            React.createElement("div", { className: "armstrong-burger-content" }, Content)),
+            React.createElement("div", { className: "armstrong-burger-content", ref: menuContentRef }, Content)),
         !hideOpenButton && React.createElement(button_1.Button, { "data-position": position, className: "armstrong-menu-button open", onClick: function () { return setIsOpen(true); }, "aria-label": "Open the menu" }, openButtonIcon && React.createElement(icon_1.Icon, { "aria-hidden": true, icon: openButtonIcon })),
@@ -53,3 +67,6 @@ mode === "slide" && React.createElement("div", { className: "armstrong-menu-overlay", onClick: function () { return setIsOpen(false); }, "aria-label": "Close the menu", "aria-hidden": !open, style: { transition: transitionTime + "ms" }, "data-transition": transitioning ? isOpen ? "in" : "out" : isOpen ? "open" : "closed" }),
     mode: "slide",
-    transitionTime: 300
+    transitionTime: 300,
+    closeButtonIcon: icon_1.Icon.Icomoon.cross,
+    openButtonIcon: icon_1.Icon.Icomoon.menu7,
+    closeOnNavigate: true
 };
@@ -56,0 +73,0 @@ exports.BurgerMenuContext = React.createContext(undefined);

package.json

 {
   "name": "armstrong-react",
-  "version": "4.0.0-pre22",
+  "version": "4.0.0-pre23",
   "description": "Rocketmakers Armstrong library of React components",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

976851

increased by0.18%

Lines of code

20528

increased by0.2%

No dependency changes