@massds/mayflower-react/dist/HeaderNav/hooks.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports.initMainNavState = void 0;
exports.mainNavReducer = mainNavReducer;
exports.useHeaderNavMouseEvents = exports.useHeaderNavKeydown = exports.useHeaderNavButtonEffects = exports.useHeaderMainNav = void 0;
var _react = _interopRequireDefault(require("react"));
var _useEventListener = _interopRequireDefault(require("../hooks/use-event-listener.js"));
var _useWindowWidth = _interopRequireDefault(require("../hooks/use-window-width.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function mainNavReducer(state, action) {
  var newState = _extends({}, state);
  switch (action.type) {
    case 'setButtonExpanded':
      {
        if (newState.items[action.index]) {
          newState.items[action.index] = _extends({}, newState.items[action.index], {
            buttonExpanded: action.status
          });
        }
        break;
      }
    case 'setIsOpen':
      {
        if (action.status) {
          newState.isOpen = action.status;
        }
        break;
      }
    case 'setIsItemOpen':
      {
        if (newState.items[action.index]) {
          newState.items[action.index] = _extends({}, newState.items[action.index], {
            isOpen: action.status
          });
        }
        break;
      }
    case 'hide':
      {
        newState.items = newState.items.map(function () {
          return {
            buttonExpanded: false,
            isOpen: false
          };
        });
        newState.isOpen = false;
        if (Object.prototype.hasOwnProperty.call(action, 'index') && newState.items[action.index]) {
          newState.items[action.index] = {
            buttonExpanded: true,
            isOpen: true
          };
        }
        break;
      }
    case 'show':
      {
        if (Object.prototype.hasOwnProperty.call(action, 'index') && state.items[action.index]) {
          newState.items[action.index] = {
            buttonExpanded: true,
            isOpen: true
          };
        }
        newState.isOpen = true;
        break;
      }
    default:
      return newState;
  }
  return newState;
}
var initMainNavState = exports.initMainNavState = function initMainNavState(items) {
  var initialList = {
    isOpen: false,
    items: items.map(function () {
      return {
        buttonExpanded: false,
        isOpen: false
      };
    })
  };
  return initialList;
};

// Custom hook that sets up the Header's MainNav context.
// This isn't placed in the hooks file because it uses mainNavReducer.
var useHeaderMainNav = exports.useHeaderMainNav = function useHeaderMainNav(items) {
  var windowWidth = (0, _useWindowWidth["default"])();
  var breakpoint = 840;
  var _React$useReducer = _react["default"].useReducer(mainNavReducer, items, initMainNavState),
    state = _React$useReducer[0],
    dispatch = _React$useReducer[1];
  var setButtonExpanded = _react["default"].useCallback(function (_ref) {
    var index = _ref.index,
      status = _ref.status;
    dispatch({
      type: 'setButtonExpanded',
      index: index,
      status: status
    });
  }, []);
  var setIsOpen = _react["default"].useCallback(function (_ref2) {
    var index = _ref2.index,
      status = _ref2.status;
    dispatch({
      type: 'setIsItemOpen',
      index: index,
      status: status
    });
  }, []);

  // Hides all Nav Items. If you pass an object with an index key,
  // all nav items except the one that matches the index will be hidden.

  var hide = _react["default"].useCallback(function (options) {
    if (options === void 0) {
      options = {};
    }
    var _options = options,
      _options$index = _options.index,
      index = _options$index === void 0 ? undefined : _options$index;
    if (windowWidth) {
      var body = document.querySelector('body');
      var submenuClass = 'show-submenu';
      body.classList.remove(submenuClass);
      if (windowWidth <= breakpoint) {
        dispatch({
          type: 'hide',
          index: index,
          status: false
        });
      } else {
        // @todo animate here!
        dispatch({
          type: 'hide',
          index: index,
          status: false
        });
      }
    }
  }, [windowWidth]);

  // Shows the NavItem with the passed index number.
  var show = _react["default"].useCallback(function (options) {
    if (options === void 0) {
      options = {};
    }
    var _options2 = options,
      index = _options2.index;
    var body = document.querySelector('body');
    var submenuClass = 'show-submenu';
    body.classList.add(submenuClass);
    if (windowWidth <= breakpoint) {
      dispatch({
        type: 'show',
        index: index
      });
    } else {
      // @todo animate here!
      dispatch({
        type: 'show',
        index: index
      });
    }
  }, [windowWidth]);
  // Restrict the available functionality for NavItem components to the following.
  return _react["default"].useMemo(function () {
    return _extends({}, state, {
      setButtonExpanded: setButtonExpanded,
      setIsOpen: setIsOpen,
      hide: hide,
      show: show
    });
  }, [state]);
};
var useHeaderNavKeydown = exports.useHeaderNavKeydown = function useHeaderNavKeydown(element, onKeyDown) {
  (0, _useEventListener["default"])('keydown', onKeyDown, element);
};
var useHeaderNavMouseEvents = exports.useHeaderNavMouseEvents = function useHeaderNavMouseEvents(element, onMouseEnter, onMouseLeave) {
  (0, _useEventListener["default"])('mouseenter', onMouseEnter, element);
  (0, _useEventListener["default"])('mouseleave', onMouseLeave, element);
};
var useHeaderNavButtonEffects = exports.useHeaderNavButtonEffects = function useHeaderNavButtonEffects(element, onClick) {
  (0, _useEventListener["default"])('click', onClick, element);
};