wix-style-react/dist/src/SidebarSubMenuNext/hooks/useMenuState.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.useMenuState = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _constants = require("../constants");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var useMenuState = _ref => {
  var {
    itemKey,
    selectedKey,
    children,
    disabled,
    onExpand,
    onCollapse,
    onToggle,
    onClick
  } = _ref;
  var [state, setState] = (0, _react.useReducer)((currentState, newState) => _objectSpread(_objectSpread({}, currentState), newState), {
    lastTrigger: null,
    isMenuOpen: false,
    isItemKeySelected: false,
    animation: _constants.SIDEBAR_SUBMENU_ANIMATION_TYPES.CLOSED
  });
  (0, _react.useEffect)(() => {
    var selectedKeyMatchesChildKey = _react.Children.toArray(children).some(_ref2 => {
      var {
        props
      } = _ref2;
      return props && props.itemKey === selectedKey;
    });
    var selectedKeyMatchesItemKey = itemKey === selectedKey;
    var isItemKeySelected = selectedKeyMatchesItemKey || selectedKeyMatchesChildKey;
    setState({
      isItemKeySelected
    });
  }, [selectedKey, itemKey, children, disabled]);
  (0, _react.useEffect)(() => {
    var isMenuOpen = state.isItemKeySelected && !disabled;
    setState({
      isMenuOpen,
      lastTrigger: _constants.ExpandCollapseTriggers.select
    });
  }, [state.isItemKeySelected, disabled]);
  (0, _react.useEffect)(() => {
    if (state.lastTrigger) {
      var animation = state.isMenuOpen ? _constants.SIDEBAR_SUBMENU_ANIMATION_TYPES.OPENING : _constants.SIDEBAR_SUBMENU_ANIMATION_TYPES.CLOSING;
      setState({
        animation
      });
      state.isMenuOpen ? onExpand && onExpand(state.lastTrigger) : onCollapse && onCollapse(state.lastTrigger);
    }
    setState({
      lastTrigger: null
    });
  }, [state.isMenuOpen, state.lastTrigger, disabled, onExpand, onCollapse]);
  var _onClick = (0, _react.useCallback)(e => {
    if (state.isItemKeySelected) {
      setState({
        lastTrigger: _constants.ExpandCollapseTriggers.click,
        isMenuOpen: !state.isMenuOpen
      });
      onToggle && onToggle();
      e.preventDefault();
    }
    onClick(e);
  }, [state.isItemKeySelected, state.isMenuOpen, onToggle, onClick]);
  return {
    isMenuOpen: state.isMenuOpen,
    isItemKeySelected: state.isItemKeySelected,
    animation: state.animation,
    _onClick
  };
};
exports.useMenuState = useMenuState;
//# sourceMappingURL=useMenuState.js.map