intelicoreact 1.2.75 → 1.2.77

package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -23,18 +23,17 @@ var _dependencies = require("../dependencies");
 
 var _Dropdown = _interopRequireDefault(require("../../Dropdown/Dropdown"));
 
-var _DateInput = _interopRequireDefault(require("./DateInput"));
-
 var _Button = _interopRequireDefault(require("../../../UI/Button/Button"));
 
 var _RangeCalendar = _interopRequireDefault(require("../../RangeCalendar/RangeCalendar"));
 
+var _DateInput = _interopRequireDefault(require("./DateInput"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // eslint-disable-next-line no-unused-vars
-// import Switcher from '../../Switcher/Switcher';
 var outsideScope = {
   handleHoverTimerId: null
 };
@@ -52,6 +51,7 @@ var Datepicker = function Datepicker(props) {
       _props$values = props.values,
       values = _props$values === void 0 ? {} : _props$values,
       onChange = props.onChange,
+      onChangeMobile = props.onChangeMobile,
       onChangeCompare = props.onChangeCompare,
       onCancel = props.onCancel,
       getSelectedMode = props.getSelectedMode,
@@ -67,7 +67,8 @@ var Datepicker = function Datepicker(props) {
       momentMaxDate = props.momentMaxDate,
       isDontLimitFuture = props.isDontLimitFuture,
       testId = props.testId,
-      mainId = props.mainId;
+      mainId = props.mainId,
+      withMobileLogic = props.withMobileLogic;
   var _values$start = values.start,
       start = _values$start === void 0 ? null : _values$start,
       _values$end = values.end,
@@ -465,133 +466,203 @@ var Datepicker = function Datepicker(props) {
     setInterval();
   }, [startDate, endDate]);
   (0, _react.useEffect)(function () {
-    if ((0, _momentTimezone.default)(date1).isSameOrAfter((0, _momentTimezone.default)(date2), 'month')) {
+    if ((0, _momentTimezone.default)(date1).isSameOrAfter((0, _momentTimezone.default)(date2), 'month') && !withMobileLogic) {
       setDate1((0, _momentTimezone.default)(date2).subtract(1, 'month'));
     }
   }, [date1, date2]);
   (0, _react.useEffect)(function () {
     onChangeInterval(dateInterval);
   }, [dateInterval]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('date-picker', className)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "date-picker__header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "date-picker__inputs-block"
-  }, /*#__PURE__*/_react.default.createElement(_DateInput.default, {
-    ref: startDateInputRef,
-    testId: "datepicker-".concat(testId, "_start-date-input"),
-    RC: "date-picker__date-input",
-    className: (0, _classnames.default)('date-picker__date-input'),
-    isFocused: isStartFocused,
-    value: startDateInput,
-    date: getCorrectedDateForDateInput('startDateInput', startDate),
-    disabled: !startDate,
-    onChange: setStartDateInput,
-    onFocus: function onFocus(e) {
-      return handleDateInputFocus('startDateInput', e);
-    },
-    onBlur: function onBlur(e) {
-      return handleDateInputBlur('startDateInput', e);
-    },
-    onKeyUp: function onKeyUp(code, e) {
-      return handleKeyPressed(code, e, 'startDateInput');
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-    testId: testId,
-    id: "datepicker-id-".concat(mainId, "_start-hour-select-input"),
-    dataTest: "datepicker_start-hour-select-input",
-    className: (0, _classnames.default)('date-picker__hour-select-input'),
-    onChange: function onChange(value) {
-      return handleChangeStartHour(value);
-    },
-    value: startHour,
-    options: getStartHourItems(),
-    disabled: !startDate,
-    isDoNotPullOutListOfMainContainer: true,
-    short: true
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "date-picker__inputs-separator date-picker__header--gray"
-  }, "\u2014"), /*#__PURE__*/_react.default.createElement(_DateInput.default, {
-    ref: endDateInputRef,
-    testId: "datepicker-".concat(testId, "_start-date-input"),
-    RC: "date-picker__date-input",
-    className: (0, _classnames.default)('date-picker__date-input'),
-    isFocused: isEndFocused,
-    value: endDateInput,
-    date: getCorrectedDateForDateInput('endDateInput', endDate),
-    disabled: !endDate,
-    onChange: setEndDateInput,
-    onFocus: function onFocus(e) {
-      return handleDateInputFocus('endDateInput', e);
-    },
-    onBlur: function onBlur(e) {
-      return handleDateInputBlur('endDateInput', e);
-    },
-    onKeyUp: function onKeyUp(code, e) {
-      return handleKeyPressed(code, e, 'endDateInput');
+  (0, _react.useEffect)(function () {
+    if (typeof onChangeMobile === 'function') {
+      onChangeMobile({
+        start: (0, _momentTimezone.default)(startDate).format(_dependencies.MAIN_FORMAT),
+        end: (0, _momentTimezone.default)(endDate).format(_dependencies.MAIN_FORMAT),
+        startPrevDate: (0, _momentTimezone.default)(startPrevDate).format(_dependencies.MAIN_FORMAT),
+        endPrevDate: (0, _momentTimezone.default)(endPrevDate).format(_dependencies.MAIN_FORMAT),
+        compare: isCompare
+      });
     }
-  }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-    testId: testId,
-    id: "datepicker-id-".concat(mainId, "_end-hour-select-input"),
-    dataTest: "datepicker_end-hour-select-input",
-    className: (0, _classnames.default)('date-picker__hour-select-input'),
-    onChange: function onChange(value) {
-      return handleChangeEndHour(value);
-    },
-    value: endHour,
-    options: getEndHourItems(),
-    disabled: !endDate,
-    isDoNotPullOutListOfMainContainer: true,
-    short: true
-  })), isCompare && !isCompareHidden && startDate && endDate && /*#__PURE__*/_react.default.createElement("div", {
-    className: "date-picker__previous-period"
-  }, renderPreviousPeriod())), /*#__PURE__*/_react.default.createElement("div", {
-    className: "date-picker__calendars"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "date-picker__calendars-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_RangeCalendar.default, {
-    testId: testId,
-    className: "date-picker__calendar",
-    date: date1,
-    setDate: setDate1,
-    allowNext: !isNearby,
-    startDate: startDate,
-    endDate: endDate,
-    startPrevDate: startPrevDate,
-    endPrevDate: endPrevDate,
-    onClick: handleClick,
-    onHover: handleHover,
-    limitRange: limitRange,
-    isShortWeekNames: isShortWeekNames,
-    minDate: minDate,
-    maxDate: maxDate,
-    momentMinDate: momentMinDate,
-    momentMaxDate: momentMaxDate
-  }), /*#__PURE__*/_react.default.createElement(_RangeCalendar.default, {
-    className: "date-picker__calendar",
-    date: date2,
-    setDate: setDate2,
-    allowPrev: !isNearby,
-    startDate: startDate,
-    endDate: endDate,
-    startPrevDate: startPrevDate,
-    endPrevDate: endPrevDate,
-    onClick: handleClick,
-    onHover: handleHover,
-    isShortWeekNames: isShortWeekNames,
-    minDate: minDate,
-    maxDate: maxDate,
-    momentMinDate: momentMinDate,
-    momentMaxDate: momentMaxDate,
-    isDontLimitFuture: isDontLimitFuture
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('date-picker__footer', {
-      'date-picker__footer_once-element': isCompareHidden
-    })
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "date-picker__buttons-block"
-  }, renderButtons())));
+  }, [startDate, endDate, startPrevDate, endPrevDate, isCompare]);
+
+  var renderRowStart = function renderRowStart() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__date-row"
+    }, /*#__PURE__*/_react.default.createElement(_DateInput.default, {
+      ref: startDateInputRef,
+      testId: "datepicker-".concat(testId, "_start-date-input"),
+      RC: "date-picker__date-input",
+      className: (0, _classnames.default)('date-picker__date-input'),
+      isFocused: isStartFocused,
+      value: startDateInput,
+      date: getCorrectedDateForDateInput('startDateInput', startDate),
+      disabled: !startDate,
+      onChange: setStartDateInput,
+      onFocus: function onFocus(e) {
+        return handleDateInputFocus('startDateInput', e);
+      },
+      onBlur: function onBlur(e) {
+        return handleDateInputBlur('startDateInput', e);
+      },
+      onKeyUp: function onKeyUp(code, e) {
+        return handleKeyPressed(code, e, 'startDateInput');
+      }
+    }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      testId: testId,
+      id: "datepicker-id-".concat(mainId, "_start-hour-select-input"),
+      dataTest: "datepicker_start-hour-select-input",
+      className: (0, _classnames.default)('date-picker__hour-select-input'),
+      onChange: function onChange(value) {
+        return handleChangeStartHour(value);
+      },
+      value: startHour,
+      options: getStartHourItems(),
+      disabled: !startDate,
+      isDoNotPullOutListOfMainContainer: true,
+      short: true,
+      withMobileLogic: withMobileLogic
+    }));
+  };
+
+  var renderRowEnd = function renderRowEnd() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__date-row"
+    }, /*#__PURE__*/_react.default.createElement(_DateInput.default, {
+      ref: endDateInputRef,
+      testId: "datepicker-".concat(testId, "_start-date-input"),
+      RC: "date-picker__date-input",
+      className: (0, _classnames.default)('date-picker__date-input'),
+      isFocused: isEndFocused,
+      value: endDateInput,
+      date: getCorrectedDateForDateInput('endDateInput', endDate),
+      disabled: !endDate,
+      onChange: setEndDateInput,
+      onFocus: function onFocus(e) {
+        return handleDateInputFocus('endDateInput', e);
+      },
+      onBlur: function onBlur(e) {
+        return handleDateInputBlur('endDateInput', e);
+      },
+      onKeyUp: function onKeyUp(code, e) {
+        return handleKeyPressed(code, e, 'endDateInput');
+      }
+    }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      testId: testId,
+      id: "datepicker-id-".concat(mainId, "_end-hour-select-input"),
+      dataTest: "datepicker_end-hour-select-input",
+      className: (0, _classnames.default)('date-picker__hour-select-input'),
+      onChange: function onChange(value) {
+        return handleChangeEndHour(value);
+      },
+      value: endHour,
+      options: getEndHourItems(),
+      disabled: !endDate,
+      isDoNotPullOutListOfMainContainer: true,
+      short: true,
+      withMobileLogic: withMobileLogic
+    }));
+  };
+
+  var renderCalendarStart = function renderCalendarStart() {
+    return /*#__PURE__*/_react.default.createElement(_RangeCalendar.default, {
+      testId: testId,
+      className: "date-picker__calendar",
+      date: date1,
+      setDate: setDate1,
+      allowNext: withMobileLogic ? !(0, _momentTimezone.default)(date1).startOf('month').isSameOrAfter((0, _momentTimezone.default)().startOf('day'), 'months') : !isNearby,
+      startDate: startDate,
+      endDate: endDate,
+      startPrevDate: startPrevDate,
+      endPrevDate: endPrevDate,
+      onClick: handleClick,
+      onHover: handleHover,
+      limitRange: limitRange,
+      isShortWeekNames: isShortWeekNames,
+      minDate: minDate,
+      maxDate: maxDate,
+      momentMinDate: momentMinDate,
+      momentMaxDate: momentMaxDate
+    });
+  };
+
+  var renderCalendarEnd = function renderCalendarEnd() {
+    return /*#__PURE__*/_react.default.createElement(_RangeCalendar.default, {
+      className: "date-picker__calendar",
+      date: date2,
+      setDate: setDate2,
+      allowPrev: !isNearby,
+      startDate: startDate,
+      endDate: endDate,
+      startPrevDate: startPrevDate,
+      endPrevDate: endPrevDate,
+      onClick: handleClick,
+      onHover: handleHover,
+      isShortWeekNames: isShortWeekNames,
+      minDate: minDate,
+      maxDate: maxDate,
+      momentMinDate: momentMinDate,
+      momentMaxDate: momentMaxDate,
+      isDontLimitFuture: isDontLimitFuture
+    });
+  };
+
+  var render = function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('date-picker', className)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__inputs-block"
+    }, renderRowStart(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__inputs-separator date-picker__header--gray"
+    }, "\u2014"), renderRowEnd()), isCompare && !isCompareHidden && startDate && endDate && /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__previous-period"
+    }, renderPreviousPeriod())), /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__calendars"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__calendars-wrapper"
+    }, renderCalendarStart(), renderCalendarEnd())), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('date-picker__footer', {
+        'date-picker__footer_once-element': isCompareHidden
+      })
+    }, !isCompareHidden ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__compare-block"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mr5"
+    }, /*#__PURE__*/_react.default.createElement(Switcher, {
+      dataTest: "datepicker_compare",
+      label: txt.labels.compare,
+      isSwitchOn: isCompare,
+      onChange: function onChange() {
+        onChangeCompare(!isCompare);
+        setIsCompare(function (state) {
+          return !state;
+        });
+      }
+    }))) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__buttons-block"
+    }, renderButtons())));
+  };
+
+  var renderMobile = function renderMobile() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('date-picker', className)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__inputs-block"
+    }, renderRowStart(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__inputs-separator date-picker__header--gray"
+    }, "\u2014"), renderRowEnd()), isCompare && !isCompareHidden && startDate && endDate && /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__previous-period"
+    }, renderPreviousPeriod())), /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__calendars"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker__calendars-wrapper"
+    }, renderCalendarStart())));
+  };
+
+  return withMobileLogic ? renderMobile() : render();
 };
 
 var _default = Datepicker;

package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
@@ -23,19 +23,27 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _dependencies = require("../dependencies");
 
-var _SelectItem = _interopRequireDefault(require("./SelectItem"));
+var _Modal = _interopRequireDefault(require("../../../UI/Modal/Modal"));
 
-var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+var _Dropdown = _interopRequireDefault(require("../../Dropdown/Dropdown"));
+
+var _useIsMobile2 = _interopRequireDefault(require("../../../../Functions/useIsMobile"));
 
 var _useResize2 = require("../../../../Functions/useResize");
 
+var _utils = require("../../../../Functions/utils");
+
+var _SelectItem = _interopRequireDefault(require("./SelectItem"));
+
+var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var classNames = require('classnames');
 
@@ -68,13 +76,22 @@ var OpenedPart = function OpenedPart(props, ref) {
       isDontLimitFuture = props.isDontLimitFuture,
       isListTop = props.isListTop,
       mainId = props.mainId,
-      testId = props.testId;
+      testId = props.testId,
+      withMobileLogic = props.withMobileLogic;
+
+  var _useIsMobile = (0, _useIsMobile2.default)(),
+      isMobile = _useIsMobile.isMobile;
 
   var boxRef = (0, _react.useRef)();
 
   var _useResize = (0, _useResize2.useResize)(boxRef),
       elemPosition = _useResize.elemPosition;
 
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      mobileChange = _useState2[0],
+      setMobileChange = _useState2[1];
+
   var openedPartClass = classNames('date-range-input__opened-part', 'opened-part', (0, _defineProperty2.default)({}, "opened-part--".concat(elemPosition), elemPosition), {
     'opened-part--top': isListTop
   });
@@ -83,10 +100,10 @@ var OpenedPart = function OpenedPart(props, ref) {
   });
   var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
 
-  var _useState = (0, _react.useState)(actualValues.intervalKey),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      activeInterval = _useState2[0],
-      setActiveInterval = _useState2[1];
+  var _useState3 = (0, _react.useState)(actualValues.intervalKey),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      activeInterval = _useState4[0],
+      setActiveInterval = _useState4[1];
 
   var handleItemClick = function handleItemClick(item) {
     if (item !== _dependencies.CUSTOM_INTERVAL_KEY) {
@@ -124,62 +141,119 @@ var OpenedPart = function OpenedPart(props, ref) {
     return _dependencies.CUSTOM_INTERVAL_KEY;
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: openedPartClass,
-    ref: boxRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: openedPartWrapperClass
-  }, !isIntervalsHidden && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('opened-part__intervals-list' // 'form-select-options',
-    // { 'form-select-options--short': short },
-    // { 'form-select-options--hoverable': isHoverable },
-    )
-  }, items.map(function (item, index) {
-    var _intervals$item, _intervals$item2, _intervals$item3, _intervals$item3$star, _intervals$item3$star2, _intervals$item3$star3;
-
-    if ((_intervals$item = _dependencies.INTERVALS[item]) !== null && _intervals$item !== void 0 && _intervals$item.isHidden) return null;
-    return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+  var renderDatepicker = function renderDatepicker() {
+    return /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
+      mainId: mainId,
       testId: testId,
-      key: index,
-      item: item,
-      label: (txt === null || txt === void 0 ? void 0 : txt.labels) && (txt === null || txt === void 0 ? void 0 : txt.labels[item]) || ((_intervals$item2 = _dependencies.INTERVALS[item]) === null || _intervals$item2 === void 0 ? void 0 : _intervals$item2.label) || (item === _dependencies.CUSTOM_INTERVAL_KEY ? _dependencies.CUSTOM_INTERVAL_KEY_TEXT : item),
-      isActive: activeInterval === item,
-      onItemClick: function onItemClick() {
-        return handleItemClick(item.value || item);
+      className: (0, _classnames.default)('opened-part__date-picker'),
+      buttonsTypes: buttonsTypes,
+      values: actualValues,
+      onChangeMobile: setMobileChange,
+      onChange: function onChange(data) {
+        _onChange(_objectSpread({
+          intervalKey: current
+        }, data));
+
+        toggleOff();
+      },
+      getSelectedMode: getSelectedMode,
+      onChangeInterval: function onChangeInterval(val) {
+        return setCurrent(val);
       },
-      disabled: item === _dependencies.CUSTOM_INTERVAL_KEY || minDate && ((_intervals$item3 = _dependencies.INTERVALS[item]) === null || _intervals$item3 === void 0 ? void 0 : (_intervals$item3$star = _intervals$item3.start) === null || _intervals$item3$star === void 0 ? void 0 : (_intervals$item3$star2 = _intervals$item3$star.call(_intervals$item3)) === null || _intervals$item3$star2 === void 0 ? void 0 : (_intervals$item3$star3 = _intervals$item3$star2.isBefore) === null || _intervals$item3$star3 === void 0 ? void 0 : _intervals$item3$star3.call(_intervals$item3$star2, momentMinDate))
+      onChangeCompare: function onChangeCompare(data) {
+        return setIsCompare(data);
+      },
+      onCancel: toggleOff,
+      isCompareHidden: isCompareHidden,
+      limitRange: limitRange,
+      setActiveInterval: setActiveInterval,
+      isShortWeekNames: isShortWeekNames,
+      minDate: minDate,
+      maxDate: maxDate,
+      momentMinDate: momentMinDate,
+      momentMaxDate: momentMaxDate,
+      isDontLimitFuture: isDontLimitFuture,
+      withMobileLogic: withMobileLogic && isMobile
     });
-  })), !isCompact && /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
-    mainId: mainId,
-    testId: testId,
-    className: (0, _classnames.default)('opened-part__date-picker'),
-    buttonsTypes: buttonsTypes,
-    values: actualValues,
-    onChange: function onChange(data) {
-      _onChange(_objectSpread({
-        intervalKey: current
-      }, data));
-
-      toggleOff();
-    },
-    getSelectedMode: getSelectedMode,
-    onChangeInterval: function onChangeInterval(val) {
-      return setCurrent(val);
-    },
-    onChangeCompare: function onChangeCompare(data) {
-      return setIsCompare(data);
-    },
-    onCancel: toggleOff,
-    isCompareHidden: isCompareHidden,
-    limitRange: limitRange,
-    setActiveInterval: setActiveInterval,
-    isShortWeekNames: isShortWeekNames,
-    minDate: minDate,
-    maxDate: maxDate,
-    momentMinDate: momentMinDate,
-    momentMaxDate: momentMaxDate,
-    isDontLimitFuture: isDontLimitFuture
-  })));
+  };
+
+  var renderOpenedPart = function renderOpenedPart() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: openedPartClass,
+      ref: boxRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: openedPartWrapperClass
+    }, !isIntervalsHidden && /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('opened-part__intervals-list')
+    }, items.map(function (item, index) {
+      var _intervals$item, _intervals$item2, _intervals$item3, _intervals$item3$star, _intervals$item3$star2, _intervals$item3$star3;
+
+      if ((_intervals$item = _dependencies.INTERVALS[item]) !== null && _intervals$item !== void 0 && _intervals$item.isHidden) return null;
+      return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+        testId: testId,
+        key: index,
+        item: item,
+        label: (txt === null || txt === void 0 ? void 0 : txt.labels) && (txt === null || txt === void 0 ? void 0 : txt.labels[item]) || ((_intervals$item2 = _dependencies.INTERVALS[item]) === null || _intervals$item2 === void 0 ? void 0 : _intervals$item2.label) || (item === _dependencies.CUSTOM_INTERVAL_KEY ? _dependencies.CUSTOM_INTERVAL_KEY_TEXT : item),
+        isActive: activeInterval === item,
+        onItemClick: function onItemClick() {
+          return handleItemClick(item.value || item);
+        },
+        disabled: item === _dependencies.CUSTOM_INTERVAL_KEY || minDate && ((_intervals$item3 = _dependencies.INTERVALS[item]) === null || _intervals$item3 === void 0 ? void 0 : (_intervals$item3$star = _intervals$item3.start) === null || _intervals$item3$star === void 0 ? void 0 : (_intervals$item3$star2 = _intervals$item3$star.call(_intervals$item3)) === null || _intervals$item3$star2 === void 0 ? void 0 : (_intervals$item3$star3 = _intervals$item3$star2.isBefore) === null || _intervals$item3$star3 === void 0 ? void 0 : _intervals$item3$star3.call(_intervals$item3$star2, momentMinDate))
+      });
+    })), !isCompact && renderDatepicker()));
+  };
+
+  var renderMobileOpenedPart = function renderMobileOpenedPart() {
+    var _items$filter;
+
+    return /*#__PURE__*/_react.default.createElement(_Modal.default, {
+      zIndex: 101,
+      variant: "title",
+      className: "modal-fin date-picker-modal",
+      isOpen: true,
+      title: "Select Interval",
+      onlyTitle: true,
+      confirmBtnLabel: "Apply",
+      onConfirm: function onConfirm() {
+        _onChange(_objectSpread({
+          intervalKey: current
+        }, mobileChange));
+
+        setMobileChange({});
+        toggleOff();
+      },
+      closeModal: function closeModal() {
+        setMobileChange({});
+        toggleOff();
+      },
+      onDecline: function onDecline() {
+        setMobileChange({});
+        toggleOff();
+      },
+      withMobileLogic: withMobileLogic
+    }, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      label: "Select Interval",
+      value: activeInterval,
+      className: "dropdown-fin",
+      onChange: function onChange(v) {
+        return handleItemClick(v);
+      },
+      options: items === null || items === void 0 ? void 0 : (_items$filter = items.filter(function (item) {
+        return !(item !== null && item !== void 0 && item.isHidden);
+      })) === null || _items$filter === void 0 ? void 0 : _items$filter.map(function (item) {
+        var _intervals$item4;
+
+        return {
+          label: (0, _utils.capitalized)((txt === null || txt === void 0 ? void 0 : txt.labels) && (txt === null || txt === void 0 ? void 0 : txt.labels[item]) || ((_intervals$item4 = _dependencies.INTERVALS[item]) === null || _intervals$item4 === void 0 ? void 0 : _intervals$item4.label) || (item === _dependencies.CUSTOM_INTERVAL_KEY ? _dependencies.CUSTOM_INTERVAL_KEY_TEXT : item)),
+          value: item
+        };
+      }),
+      withMobileLogic: withMobileLogic,
+      sortAlphabetical: false
+    }), renderDatepicker());
+  };
+
+  return withMobileLogic && isMobile ? renderMobileOpenedPart() : renderOpenedPart();
 };
 
 var _default = /*#__PURE__*/_react.default.forwardRef(OpenedPart);