@helpscout/hsds-react/components/Dropdown/Dropdown.actions.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.updateInputValue = exports.updateOpen = exports.updateItems = exports.updateDropUp = exports.updateIndex = exports.updateSelectedItem = exports.clearSelection = exports.selectItem = exports.closeAndRefocusTriggerNode = exports.selectItemFromIndex = exports.focusItem = exports.decrementIndex = exports.incrementIndex = exports.setMenuNode = exports.setTriggerNode = exports.onMenuReposition = exports.onMenuUnmounted = exports.onMenuMounted = exports.closeDropdown = exports.openDropdown = exports.toggleOpen = exports.changeDirection = void 0;

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _Dropdown = _interopRequireDefault(require("./Dropdown.actionTypes"));

var _Dropdown2 = require("./Dropdown.utils");

var _Dropdown3 = require("./Dropdown.renderUtils");

var _Dropdown4 = require("./Dropdown.store");

// Deprecated

/* istanbul ignore file */
var changeDirection = function changeDirection(state) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.CHANGE_DIRECTION
  });
};

exports.changeDirection = changeDirection;

var toggleOpen = function toggleOpen(state) {
  if (state.isOpen) {
    return closeDropdown(state);
  } else {
    return openDropdown(state);
  }
};

exports.toggleOpen = toggleOpen;

var openDropdown = function openDropdown(state) {
  var onOpen = state.onOpen,
      isFocusSelectedItemOnOpen = state.isFocusSelectedItemOnOpen,
      isSelectFirstItemOnOpen = state.isSelectFirstItemOnOpen;
  var selectedIndex = (0, _Dropdown2.getSelectedItemIndex)(state);
  var payload = {}; // Trigger callback from Provider

  onOpen && state.onOpen();

  if (isSelectFirstItemOnOpen) {
    payload['index'] = '0';
  }

  if (isFocusSelectedItemOnOpen && selectedIndex) {
    payload['index'] = selectedIndex;
  }

  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.OPEN_DROPDOWN,
    payload: payload
  });
};

exports.openDropdown = openDropdown;

var closeDropdown = function closeDropdown(state) {
  // Trigger callback from Provider
  state.onClose && state.onClose();
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.CLOSE_DROPDOWN
  });
};

exports.closeDropdown = closeDropdown;

var onMenuMounted = function onMenuMounted(state) {
  // Trigger callback from Provider
  state.onMenuMount && state.onMenuMount();
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.MENU_MOUNT
  });
};

exports.onMenuMounted = onMenuMounted;

var onMenuUnmounted = function onMenuUnmounted(state) {
  // Trigger callback from Provider
  state.onMenuUnmount && state.onMenuUnmount();
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.MENU_UNMOUNT
  });
};

exports.onMenuUnmounted = onMenuUnmounted;

var onMenuReposition = function onMenuReposition(state, position) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.MENU_REPOSITION,
    payload: {
      position: position
    }
  });
};

exports.onMenuReposition = onMenuReposition;

var setTriggerNode = function setTriggerNode(state, triggerNode) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.SET_TRIGGER_NODE,
    payload: {
      triggerNode: triggerNode
    }
  });
};

exports.setTriggerNode = setTriggerNode;

var setMenuNode = function setMenuNode(state, menuNode) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.SET_MENU_NODE,
    payload: {
      menuNode: menuNode
    }
  });
};

exports.setMenuNode = setMenuNode;

var incrementIndex = function incrementIndex(state, modifier) {
  if (modifier === void 0) {
    modifier = 1;
  }

  var envNode = state.envNode,
      index = state.index,
      indexMap = state.indexMap,
      items = state.items,
      selectionClearer = state.selectionClearer;
  if (!items.length) return;
  var prevIndex = "" + (index ? index : -1);
  var nextIndex = (0, _Dropdown2.incrementPathIndex)(prevIndex, modifier);
  var isLastItemWhenClearerPresent = selectionClearer != null && Number.parseInt(nextIndex) === items.length;
  if (!indexMap[nextIndex] && !isLastItemWhenClearerPresent) return; // This extra check is to support item filtering.
  // The next DOM node may not exist, depending on filtering results.

  var target = (0, _Dropdown3.findItemDOMNode)(nextIndex, envNode);
  if (!target) return;
  return focusItem(state, {
    target: target
  });
};

exports.incrementIndex = incrementIndex;

var decrementIndex = function decrementIndex(state, modifier) {
  if (modifier === void 0) {
    modifier = 1;
  }

  var envNode = state.envNode,
      index = state.index,
      indexMap = state.indexMap,
      items = state.items;
  if (!items.length || (0, _lodash.default)(index)) return;
  var nextIndex = (0, _Dropdown2.decrementPathIndex)(index, modifier);
  if (!indexMap[nextIndex]) return; // This extra check is to support item filtering.
  // The next DOM node may not exist, depending on filtering results.

  var target = (0, _Dropdown3.findItemDOMNode)(nextIndex, envNode);
  if (!target) return;
  return focusItem(state, {
    target: target
  });
};

exports.decrementIndex = decrementIndex;

var focusItem = function focusItem(state, event) {
  var node = (0, _Dropdown3.findClosestItemDOMNode)(event.target);
  if (!node) return;
  var index = (0, _Dropdown3.getIndexFromItemDOMNode)(node); // Performance guard to prevent store from uppdating

  if (state.index === index) return;

  if (event && event.stopPropagation) {
    event.stopPropagation();
  }

  var isMouseEvent = !(0, _lodash.default)(event.pageX);
  var lastInteractionType = isMouseEvent ? 'mouse' : 'keyboard';

  if (state.enableTabNavigation && !isMouseEvent) {
    node.focus();
  }

  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.FOCUS_ITEM,
    payload: {
      index: index,
      lastInteractionType: lastInteractionType
    }
  });
};

exports.focusItem = focusItem;

var selectItemFromIndex = function selectItemFromIndex(state, event) {
  var target = (0, _Dropdown3.findItemDOMNode)(state.index, state.envNode);
  if (!target) return;

  if (state.allowMultipleSelection && state.selectionClearer && target.classList.contains('c-SelectionClearerItem')) {
    return clearSelection(state, event);
  }

  return selectItem(state, event, target);
};

exports.selectItemFromIndex = selectItemFromIndex;

var closeAndRefocusTriggerNode = function closeAndRefocusTriggerNode(state) {
  var closeOnSelect = state.closeOnSelect,
      envNode = state.envNode,
      shouldRefocusOnClose = state.shouldRefocusOnClose; // Trigger close callback from Provider

  if (closeOnSelect && shouldRefocusOnClose(state)) {
    state.onClose && state.onClose(); // Refocus triggerNode

    var triggerNode = (0, _Dropdown3.findTriggerNode)(envNode);
    (0, _Dropdown2.focusWithoutScrolling)(triggerNode);
  }
};

exports.closeAndRefocusTriggerNode = closeAndRefocusTriggerNode;

var selectItem = function selectItem(state, event, eventTarget) {
  var allowMultipleSelection = state.allowMultipleSelection,
      items = state.items,
      selectedItemsInState = state.selectedItem;
  var node = eventTarget || (0, _Dropdown3.findClosestItemDOMNode)(event.target);
  var index = (0, _Dropdown3.getIndexFromItemDOMNode)(node);
  var itemValue = (0, _Dropdown3.getValueFromItemDOMNode)(node);
  var item = (0, _Dropdown2.getItemFromCollection)(items, itemValue);

  var maybeCallItemOnClick = function maybeCallItemOnClick() {
    var isMouseEvent = !(0, _lodash.default)(event.pageX);

    if (item && item.onClick && !isMouseEvent) {
      item.onClick(event);
    }
  }; // Performance guard to prevent store from updating


  if (!index) return;
  if (!item) return;
  if (item.disabled) return;
  if (item.items) return; // This allows dropdown items to be clickable, but
  // not update the internal `selectedItem` state.

  if (item.preventSelect) {
    maybeCallItemOnClick();
    return updateOpen(state, false);
  }

  var selectedItem;

  if (!state.clearOnSelect) {
    selectedItem = item;
  } else {
    selectedItem = null;
  }

  if (allowMultipleSelection) {
    selectedItem = (0, _Dropdown2.processSelectionOfItem)(selectedItemsInState, item);
  } // Trigger select callback


  if (item && state.onSelect) {
    var deselected = selectedItem == null ? undefined : (0, _Dropdown2.itemIsActive)(selectedItemsInState, item);
    state.onSelect(item.value, {
      event: event,
      item: item,
      selection: selectedItem,
      deselected: deselected,
      dropdownType: 'hsds-dropdown'
    });
  }

  maybeCallItemOnClick();
  closeAndRefocusTriggerNode(state);
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.SELECT_ITEM,
    payload: {
      selectedItem: selectedItem
    }
  });
};

exports.selectItem = selectItem;

var clearSelection = function clearSelection(state, event) {
  var selectedItem = state.selectedItem; // Performance guard to prevent store from updating

  if ((0, _Dropdown2.isSelectedItemEmpty)(selectedItem)) return; // Trigger select callback

  if (state.onSelect) {
    var callbackProps = {
      event: event,
      item: '',
      dropdownType: 'hsds-dropdown'
    };
    state.onSelect('', callbackProps);
  }

  closeAndRefocusTriggerNode(state);
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.CLEAR_SELECTION,
    payload: {
      selectedItem: ''
    }
  });
};

exports.clearSelection = clearSelection;

var updateSelectedItem = function updateSelectedItem(state, selectedItem) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.UPDATE_SELECTED_ITEM,
    payload: {
      selectedItem: selectedItem
    }
  });
};

exports.updateSelectedItem = updateSelectedItem;

var updateIndex = function updateIndex(state, index) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.UPDATE_INDEX,
    payload: {
      index: index
    }
  });
};

exports.updateIndex = updateIndex;

var updateDropUp = function updateDropUp(state, dropUp) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.UPDATE_DROPUP,
    payload: {
      dropUp: dropUp
    }
  });
};

exports.updateDropUp = updateDropUp;

var updateItems = function updateItems(state, items) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.UPDATE_ITEMS,
    payload: {
      items: items,
      indexMap: (0, _Dropdown2.getIndexMapFromItems)(items)
    }
  });
};

exports.updateItems = updateItems;

var updateOpen = function updateOpen(state, isOpen) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.UPDATE_OPEN,
    payload: {
      isOpen: isOpen
    }
  });
};

exports.updateOpen = updateOpen;

var updateInputValue = function updateInputValue(state, inputValue) {
  return (0, _Dropdown4.dispatch)(state, {
    type: _Dropdown.default.UPDATE_INPUT_VALUE,
    payload: {
      previousIndex: state.index,
      inputValue: inputValue,
      index: '0'
    }
  });
};

exports.updateInputValue = updateInputValue;