alm-search-01/dist/components/DropDown/DropDown.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));

var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));

var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));

var _styles = require("@material-ui/core/styles");

var _getHotelsLocale2 = _interopRequireDefault(require("../../utils/getHotelsLocale"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var useStyles = (0, _styles.makeStyles)({
  dropdown: {
    width: 'calc(100% - 60px)',
    left: 60,
    right: 60,
    zIndex: 2
  }
});

function DropDown(_ref) {
  var open = _ref.open,
      handleClose = _ref.handleClose,
      setTripClass = _ref.setTripClass,
      anchorRef = _ref.anchorRef,
      lang = _ref.lang;

  var _getHotelsLocale = (0, _getHotelsLocale2.default)(lang),
      economy_label = _getHotelsLocale.economy_label,
      premium_economy_label = _getHotelsLocale.premium_economy_label,
      business_label = _getHotelsLocale.business_label,
      first_label = _getHotelsLocale.first_label;

  var classes = useStyles();

  var handleChange = function handleChange(event, value, label) {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setTripClass({
      value: value,
      label: label
    });
    handleClose();
  };

  var prevOpen = _react.default.useRef(open);

  function handleListKeyDown(event) {
    if (event.key === 'Tab') {
      event.preventDefault();
      handleClose(false);
    }
  }

  _react.default.useEffect(function () {
    if (prevOpen.current === true && open === false) {
      anchorRef.current.focus();
    }

    prevOpen.current = open;
  }, [open, anchorRef]);

  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Popper.default, {
    className: classes.dropdown,
    open: open,
    anchorEl: anchorRef.current,
    role: undefined,
    transition: true,
    disablePortal: true
  }, function (_ref2) {
    var TransitionProps = _ref2.TransitionProps,
        placement = _ref2.placement;
    return _react.default.createElement(_Grow.default, _extends({}, TransitionProps, {
      style: {
        transformOrigin: placement === 'bottom' ? 'left top' : 'left bottom'
      }
    }), _react.default.createElement(_Paper.default, null, _react.default.createElement(_ClickAwayListener.default, {
      onClickAway: handleClose
    }, _react.default.createElement(_MenuList.default, {
      autoFocusItem: open,
      id: "menu-list-grow",
      onKeyDown: handleListKeyDown
    }, _react.default.createElement(_MenuItem.default, {
      onClick: function onClick(event) {
        return handleChange(event, 'Economy', economy_label);
      }
    }, economy_label), _react.default.createElement(_MenuItem.default, {
      onClick: function onClick(event) {
        return handleChange(event, 'Premium Economy', premium_economy_label);
      }
    }, premium_economy_label), _react.default.createElement(_MenuItem.default, {
      onClick: function onClick(event) {
        return handleChange(event, 'Business', business_label);
      }
    }, business_label), _react.default.createElement(_MenuItem.default, {
      onClick: function onClick(event) {
        return handleChange(event, 'First', first_label);
      }
    }, first_label)))));
  }));
}

var _default = DropDown;
exports.default = _default;