@nice-digital/global-nav 4.1.734 → 4.1.738-GN-169-Dropdown-open

package/README.md

@@ -42,6 +42,8 @@
 					- [Header.skipLinkId](#headerskiplinkid)
 					- [Header.onNavigating](#headeronnavigating)
 					- [Header.onResize](#headeronresize)
+					- [Header.onDropdownOpen](#headerondropdownopen)
+					- [Header.onDropdownClose](#headerondropdownclose)
 					- [Header.additionalSubMenuItems](#headeradditionalsubmenuitems)
 					- [Header.search](#headersearch)
 					- [Header.search.url](#headersearchurl)
@@ -408,6 +410,49 @@ var global_nav_config = {
 };
 ```
 
+###### Header.onDropdownOpen
+
+- Type: `String`, `Function`
+- Default: `null`
+
+Pass an `onDropdownOpen` property to enable callback when dropdown is open.
+Pass either a function, or the name of a function defined on `window`. E.g.:
+
+```js
+window.onDropdownOpenHandler = function () {
+  // Define your implementation here e.g.:
+  document.querySelector("body").classList.add("global-nav__dropdown--open");
+};
+
+var global_nav_config = {
+  header: {
+      onDropdownOpen: 'onDropdownOpenHandler',
+  },
+};
+```
+
+###### Header.onDropdownClose
+
+- Type: `String`, `Function`
+- Default: `null`
+
+Pass an `onDropdownClose` property to enable callback when dropdown is closed.
+Pass either a function, or the name of a function defined on `window`. E.g.:
+
+```js
+window.onDropdownCloseHandler = function (e) {
+  // Define your implementation here e.g.:
+ document.querySelector("body").classList.remove("global-nav__dropdown--open")
+
+};
+
+var global_nav_config = {
+  header: {
+      onDropdownClose: 'onDropdownCloseHandler',
+  },
+};
+```
+
 ###### Header.additionalSubMenuItems
 
 - Type: `null | Array`

package/lib/Header/Header.js

@@ -33,6 +33,8 @@ var _Account = _interopRequireDefault(require("./Account"));
 
 var _SkipLink = _interopRequireDefault(require("./SkipLink"));
 
+var _utils = require("../utils");
+
 var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
 
 var _HeaderContext = require("./context/HeaderContext");
@@ -103,12 +105,36 @@ var Header = /*#__PURE__*/function (_Component) {
     }
   };
 
+  _proto.dropdownToggleHandler = function dropdownToggleHandler(idOfOpenDropdown) {
+    // If we've got an onDropdownOpen or onDropdownClose prop call the onDropdownOpen or onDropdownClose callback based on idOfOpenDropdown.
+    var _this$props = this.props,
+        onDropdownOpen = _this$props.onDropdownOpen,
+        onDropdownClose = _this$props.onDropdownClose;
+
+    if (onDropdownOpen && idOfOpenDropdown !== null) {
+      var onDropdownOpenCallback = (0, _utils.getCallbackFunction)(onDropdownOpen);
+
+      if (onDropdownOpenCallback) {
+        onDropdownOpenCallback();
+      }
+    }
+
+    if (onDropdownClose && idOfOpenDropdown == null) {
+      var onDropdownCloseCallback = (0, _utils.getCallbackFunction)(onDropdownClose);
+
+      if (onDropdownCloseCallback) {
+        onDropdownCloseCallback();
+      }
+    }
+  };
+
   _proto.render = function render() {
     var _this3 = this;
 
     return this.props.enabled !== false && /*#__PURE__*/_react["default"].createElement(_HeaderContext.HeaderContextProvider, null, /*#__PURE__*/_react["default"].createElement(_HeaderContext.HeaderContext.Consumer, null, function (_ref) {
       (0, _newArrowCheck2["default"])(this, _this3);
       var idOfOpenDropdown = _ref.idOfOpenDropdown;
+      this.dropdownToggleHandler(idOfOpenDropdown);
       return /*#__PURE__*/_react["default"].createElement("span", {
         id: "scrim",
         className: idOfOpenDropdown !== null ? _HeaderModule["default"].scrim : undefined,
@@ -184,6 +210,8 @@ Header.propTypes = {
   auth: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
   onNavigating: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
   onResize: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
+  onDropdownOpen: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
+  onDropdownClose: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
   additionalSubMenuItems: _propTypes["default"].arrayOf(_propTypes["default"].object)
 };
 Header.defaultProps = {

package/lib/Header/Nav/SubNav/SubNav.js

@@ -15,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _cks = _interopRequireDefault(require("./images/cks.svg"));
 
+var _utils = require("../../../utils");
+
 var _tracker = require("../../../tracker");
 
 var _SubNavModule = _interopRequireDefault(require("./SubNav.module.scss"));
@@ -48,9 +50,9 @@ var SubNav = /*#__PURE__*/function (_Component) {
     var eventLabel = currentTarget.textContent || currentTarget.innerText || currentTarget.ariaLabel;
     (0, _tracker.trackEvent)(_tracker.defaultEventCategory, _tracker.headerClickEventAction, eventLabel, null, href, function () {
       var onNavigating = this.props.onNavigating;
-      var onNavigatingCallback = onNavigating && (typeof onNavigating === "function" ? onNavigating : window[onNavigating]);
+      var onNavigatingCallback = (0, _utils.getCallbackFunction)(onNavigating);
 
-      if (typeof onNavigatingCallback === "function") {
+      if (onNavigatingCallback) {
         onNavigatingCallback({
           element: currentTarget,
           href: href

package/lib/Header/Search/Autocomplete/Autocomplete.js

@@ -112,9 +112,9 @@ var Autocomplete = /*#__PURE__*/function (_Component) {
       var onNavigating = this.props.onNavigating;
 
       var eventCallback = function eventCallback() {
-        var onNavigatingCallback = onNavigating && (typeof onNavigating === "function" ? onNavigating : window[onNavigating]);
+        var onNavigatingCallback = (0, _utils.getCallbackFunction)(onNavigating);
 
-        if (typeof onNavigatingCallback === "function") {
+        if (onNavigatingCallback) {
           onNavigatingCallback({
             element: selectedEl,
             href: suggestion.Link

package/lib/Header/Search/Search.js

@@ -19,6 +19,8 @@ var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
 
 var _SkipLink = _interopRequireDefault(require("../SkipLink"));
 
+var _utils = require("../../utils");
+
 var _SearchModule = _interopRequireDefault(require("./Search.module.scss"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -75,9 +77,9 @@ var Search = /*#__PURE__*/function (_Component) {
     var onSearching = this.props.onSearching;
 
     if (onSearching) {
-      var onSearchingCallback = typeof onSearching === "function" ? onSearching : window[onSearching];
+      var onSearchingCallback = (0, _utils.getCallbackFunction)(onSearching);
 
-      if (typeof onSearchingCallback === "function") {
+      if (onSearchingCallback) {
         e.preventDefault();
         var query = document.getElementById("autocomplete").value;
         onSearchingCallback({

package/lib/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
+exports.getCallbackFunction = getCallbackFunction;
 exports.isIosDevice = isIosDevice;
 
 /**
@@ -9,4 +10,23 @@ exports.isIosDevice = isIosDevice;
  */
 function isIosDevice() {
   return navigator && typeof navigator !== "undefined" && !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));
+}
+/**
+ * return callback function if it is available
+ * @returns {function || undefined}
+ */
+
+
+function getCallbackFunction(funcOrFuncName) {
+  if (typeof funcOrFuncName === "function") {
+    return funcOrFuncName;
+  }
+
+  var fn = window[funcOrFuncName];
+
+  if (typeof fn === "function") {
+    return fn;
+  }
+
+  return undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-digital/global-nav",
-  "version": "4.1.734",
+  "version": "4.1.738-GN-169-Dropdown-open",
   "description": "Global header and footer components for NICE digital services",
   "main": "lib/index.js",
   "types": "./types.d.ts",

package/types.d.ts

@@ -72,6 +72,8 @@ declare module "@nice-digital/global-nav" {
 		skipLinkId?: string;
 		search?: false | SearchProps;
 		auth?: NiceAccountsProviderProps | IdamProviderProps | false;
+		onDropdownOpen?: string | (() => void);
+		onDropdownClose?: string | (() => void);
 		onNavigating?: string | OnNavigatingCallback;
 		additionalSubMenuItems?: Array<AdditionalSubMenuItem>;
 	};