@helpscout/hsds-react/components/DropList/DropList.downshift.common.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.stateReducerCommon = stateReducerCommon;
exports.onIsOpenChangeCommon = onIsOpenChangeCommon;
exports.getA11ySelectionMessageCommon = getA11ySelectionMessageCommon;

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

var _downshift = require("downshift");

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

var _lodash2 = _interopRequireDefault(require("lodash.isplainobject"));

var _DropList = require("./DropList.utils");

var _DropList2 = require("./DropList.constants");

var SELECT = _DropList2.VARIANTS.SELECT,
    COMBOBOX = _DropList2.VARIANTS.COMBOBOX;

function stateReducerCommon(_ref) {
  var changes = _ref.changes,
      closeOnSelection = _ref.closeOnSelection,
      items = _ref.items,
      selectedItems = _ref.selectedItems,
      state = _ref.state,
      type = _ref.type,
      withMultipleSelection = _ref.withMultipleSelection;

  switch (type) {
    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.InputChange:
      return (0, _extends2.default)({}, changes);

    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.InputBlur:
      return (0, _extends2.default)({}, changes, {
        selectedItem: state.selectedItem,
        inputValue: ''
      });

    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
      return (0, _extends2.default)({}, changes, {
        inputValue: state.inputValue
      });

    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.ItemClick:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.MenuKeyDownEnter:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.ItemClick:
      if (withMultipleSelection) {
        var newState = (0, _extends2.default)({}, changes, {
          isOpen: !closeOnSelection ? true : changes.isOpen,
          highlightedIndex: !closeOnSelection ? state.highlightedIndex : changes.highlightedIndex,
          inputValue: ''
        });
        var contentKey = (0, _DropList.getItemContentKeyName)(changes.selectedItem);

        if (Boolean((0, _DropList.findItemInArray)({
          arr: selectedItems,
          item: changes.selectedItem,
          key: contentKey
        }))) {
          var _ref2;

          newState.selectedItem = (0, _lodash2.default)(changes.selectedItem) ? (0, _extends2.default)({}, changes.selectedItem, {
            remove: true
          }) : (_ref2 = {}, _ref2[contentKey || 'label'] = changes.selectedItem, _ref2.remove = true, _ref2);
        }

        return newState;
      } else {
        return (0, _extends2.default)({}, changes, {
          inputValue: ''
        });
      }

    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.MenuKeyDownArrowUp:
      {
        var currentHighlightedIndex = state.highlightedIndex;
        var nextHighlightedIndex = changes.highlightedIndex;
        return (0, _extends2.default)({}, changes, {
          highlightedIndex: (0, _DropList.getEnabledItemIndex)({
            currentHighlightedIndex: currentHighlightedIndex,
            nextHighlightedIndex: nextHighlightedIndex,
            items: items,
            arrowKey: 'UP'
          })
        });
      }

    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.MenuKeyDownArrowDown:
      {
        var _nextHighlightedIndex = changes.highlightedIndex;
        var _currentHighlightedIndex = state.highlightedIndex;
        return (0, _extends2.default)({}, changes, {
          highlightedIndex: (0, _DropList.getEnabledItemIndex)({
            currentHighlightedIndex: _currentHighlightedIndex,
            nextHighlightedIndex: _nextHighlightedIndex,
            items: items,
            arrowKey: 'DOWN'
          })
        });
      }

    default:
      return changes;
  }
}

function onIsOpenChangeCommon(_ref3) {
  var closeOnSelection = _ref3.closeOnSelection,
      toggleOpenedState = _ref3.toggleOpenedState,
      type = _ref3.type;

  switch (type) {
    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.ItemClick:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.MenuKeyDownEnter:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.ItemClick:
      closeOnSelection && toggleOpenedState(false);
      break;

    case COMBOBOX + "." + _downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
    case SELECT + "." + _downshift.useSelect.stateChangeTypes.MenuKeyDownEscape:
      toggleOpenedState(false);
      break;

    default:
      break;
  }
} // Haven't found a realiable way to test this, it's handled by downshift so no big deal

/* istanbul ignore next */


function getA11ySelectionMessageCommon(_ref4) {
  var selectedItem = _ref4.selectedItem,
      selectedItems = _ref4.selectedItems,
      withMultipleSelection = _ref4.withMultipleSelection;

  if ((0, _lodash.default)(selectedItem) && selectedItems.length === 0) {
    return 'All have been deselected';
  }

  var contentKey = (0, _DropList.getItemContentKeyName)(selectedItem);
  var msg = (0, _lodash2.default)(selectedItem) ? selectedItem[contentKey] : selectedItem;

  if (!withMultipleSelection) {
    return msg + " was selected";
  }

  var foundItem = (0, _DropList.findItemInArray)({
    arr: selectedItems,
    item: selectedItem,
    key: contentKey
  });

  if (Boolean(foundItem)) {
    return msg + " was selected";
  }

  return msg + " was deselected";
}