alm-search-01/dist/fields/DateRangePicker.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 _styles = require("@material-ui/core/styles");

var _DateRangeRounded = _interopRequireDefault(require("@material-ui/icons/DateRangeRounded"));

var _Field = _interopRequireDefault(require("../components/Field/Field"));

var _DatePicker = _interopRequireDefault(require("../components/DatePicker/DatePicker"));

var _moment = _interopRequireDefault(require("moment"));

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

var _langCode = _interopRequireDefault(require("../utils/langCode"));

var _brandStyles = _interopRequireDefault(require("../utils/brandStyles"));

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

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    container: {
      display: 'flex',
      width: '100%',
      justifyContent: 'center',
      margin: '4px 0',
      background: 'transparent'
    },
    icon: {
      paddingRight: theme.spacing(1),
      paddingLeft: theme.spacing(1)
    },
    checkIcon: {
      color: '#FFF'
    }
  };
});

var DateRangePicker = function DateRangePicker(_ref) {
  var _ref$defaultSelectedD = _ref.defaultSelectedDates,
      _ref$defaultSelectedD2 = _ref$defaultSelectedD.checkIn,
      checkInDate = _ref$defaultSelectedD2 === void 0 ? (0, _moment.default)() : _ref$defaultSelectedD2,
      _ref$defaultSelectedD3 = _ref$defaultSelectedD.checkOut,
      checkOutDate = _ref$defaultSelectedD3 === void 0 ? (0, _moment.default)() : _ref$defaultSelectedD3,
      onChange = _ref.onChange,
      lang = _ref.lang,
      brand = _ref.brand,
      isMobile = _ref.isMobile;

  var _getHotelsLocale = (0, _getHotelsLocale2.default)(lang),
      date_picker_checkin_label = _getHotelsLocale.date_picker_checkin_label,
      date_picker_checkout_label = _getHotelsLocale.date_picker_checkout_label,
      calendar_label = _getHotelsLocale.calendar_label;

  var classes = useStyles((0, _brandStyles.default)(brand));

  var _React$useState = _react.default.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      open = _React$useState2[0],
      setOpen = _React$useState2[1];

  var _React$useState3 = _react.default.useState({
    selection: {
      startDate: checkInDate,
      endDate: checkOutDate,
      key: 'selection'
    }
  }),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      selectedDates = _React$useState4[0],
      setSelectedDates = _React$useState4[1];

  var handleDropdownOpen = function handleDropdownOpen() {
    setOpen(true);
  };

  var handleDropdownClose = function handleDropdownClose() {
    setOpen(false);
  };

  var handleSelectedDates = function handleSelectedDates(selectedDates) {
    setSelectedDates(selectedDates);
  };

  var handleSubmit = function handleSubmit() {
    onChange({
      checkIn: selectedDates.selection.startDate,
      checkOut: selectedDates.selection.endDate
    });
    handleDropdownClose();
  };

  return _react.default.createElement("div", {
    className: classes.container
  }, _react.default.createElement(_Field.default, {
    label: date_picker_checkin_label,
    value: (0, _moment.default)(selectedDates.selection.startDate).format('ddd, DD MMM'),
    iconComponent: function iconComponent(props) {
      return _react.default.createElement(_DateRangeRounded.default, props);
    },
    onClick: handleDropdownOpen,
    brand: brand,
    lang: lang
  }), _react.default.createElement(_Field.default, {
    label: date_picker_checkout_label,
    value: (0, _moment.default)(selectedDates.selection.endDate).format('ddd, DD MMM'),
    onClick: handleDropdownOpen,
    brand: brand,
    lang: lang
  }), _react.default.createElement(_DatePicker.default, {
    lang: lang,
    title: calendar_label,
    open: open,
    onOkClick: handleSubmit,
    selectedDates: selectedDates,
    onSelect: handleSelectedDates,
    onClose: handleDropdownClose,
    brand: brand,
    isMobile: isMobile
  }));
};

var _default = DateRangePicker;
exports.default = _default;