@shopify/app-bridge-react
Version:
**[Join our team and work on libraries like this one.](https://www.shopify.ca/careers)**
41 lines (40 loc) • 1.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var AppLink_1 = require("@shopify/app-bridge/actions/Link/AppLink");
var NavigationMenu_1 = require("@shopify/app-bridge/actions/Menu/NavigationMenu");
var useAppBridge_1 = require("../../useAppBridge");
function defaultMatcher(link, location) {
return link.destination.replace(/\/$/, '') === location.pathname.replace(/\/$/, '');
}
function NavigationMenu(_a) {
var navigationLinks = _a.navigationLinks, _b = _a.matcher, matcher = _b === void 0 ? defaultMatcher : _b;
var app = useAppBridge_1.useAppBridge();
var _c = react_1.useState(), items = _c[0], setItems = _c[1];
react_1.useEffect(function () {
var items = navigationLinks.map(function (link) { return AppLink_1.create(app, link); });
setItems(items);
}, [app, JSON.stringify(navigationLinks)]);
var activeLink = react_1.useMemo(function () {
var activeLinkIndex = (items || []).findIndex(function (link) {
return matcher(link, location);
});
if (activeLinkIndex >= 0) {
return items === null || items === void 0 ? void 0 : items[activeLinkIndex];
}
}, [app, location.pathname, matcher, items, location.pathname]);
react_1.useEffect(function () {
// Skip creating the navigation menu on initial render
if (!items) {
return;
}
/**
* There isn't any advantage to keeping around a consistent instance of
* the navigation menu as when we create a new one it results in
* the same UPDATE action to be dispatched
*/
NavigationMenu_1.create(app, { items: items, active: activeLink });
}, [items, activeLink]);
return null;
}
exports.default = NavigationMenu;