intelicoreact 0.0.92 → 0.0.95

package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js

@@ -0,0 +1,427 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+require("./MobileCalendar.scss");
+
+var _reactFeather = require("react-feather");
+
+var _io = require("react-icons/io5");
+
+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; }
+
+require('./../../../../src/Functions/customEventListener');
+
+var MobileCalendar = function MobileCalendar(_ref) {
+  var _listItem$getBounding;
+
+  var _ref$minDate = _ref.minDate,
+      minDate = _ref$minDate === void 0 ? (0, _moment.default)().subtract('10', 'years') : _ref$minDate,
+      _ref$maxDate = _ref.maxDate,
+      maxDate = _ref$maxDate === void 0 ? (0, _moment.default)().add('10', 'years') : _ref$maxDate,
+      value = _ref.value,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 5 : _ref$rows,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? "" : _ref$label,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
+      _ref$isMobile = _ref.isMobile,
+      isMobile = _ref$isMobile === void 0 ? true : _ref$isMobile,
+      _ref$showSelectedDate = _ref.showSelectedDate,
+      showSelectedDate = _ref$showSelectedDate === void 0 ? false : _ref$showSelectedDate,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {
+    wrapper: "",
+    label: "",
+    body: "",
+    yearsBlock: "",
+    yearsList: "",
+    yearsListItem: "",
+    monthsBlock: "",
+    monthsList: "",
+    monthsListItem: "",
+    daysBlock: "",
+    daysList: "",
+    daysListItem: "",
+    prevItem: "",
+    nextItem: "",
+    activeItem: ""
+  } : _ref$classes,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  var Body = document.querySelector("body");
+  var listItem = document.querySelector(".mobile-calendar_wrapper_body_months-list--item");
+
+  var _useState = (0, _react.useState)(value || (0, _moment.default)()),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isMouseDown = _useState4[0],
+      setIsMouseDown = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      mouseDownOn = _useState6[0],
+      setMouseDownOn = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      changeInterval = _useState8[0],
+      setChangeInterval = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      touchY = _useState10[0],
+      setTouchY = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(null),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      touchType = _useState12[0],
+      setTouchType = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(null),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      touchTimestamp = _useState14[0],
+      setTouchTimestamp = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(0),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      scrollDirection = _useState16[0],
+      setScrollDirection = _useState16[1];
+
+  var listItemHeight = listItem === null || listItem === void 0 ? void 0 : (_listItem$getBounding = listItem.getBoundingClientRect()) === null || _listItem$getBounding === void 0 ? void 0 : _listItem$getBounding.height; //--HANDLERS--//
+
+  var changeItem = function changeItem(type, value) {
+    setScrollDirection(value);
+    setDate(function (date) {
+      var newDate = (0, _moment.default)(date).add(value, type);
+      if ((0, _moment.default)(newDate).isBefore(minDate)) return minDate;
+      if ((0, _moment.default)(newDate).isAfter(maxDate)) return maxDate;
+      return newDate;
+    });
+    setTimeout(function () {
+      setScrollDirection(0);
+    }, 50);
+  };
+
+  var onArrowMouseDown = function onArrowMouseDown(type, value) {
+    setIsMouseDown(true);
+    setMouseDownOn({
+      type: type,
+      value: value
+    });
+  };
+
+  var onArrowMouseUp = function onArrowMouseUp() {
+    setIsMouseDown(false);
+    setMouseDownOn(null);
+  };
+
+  var _onWheel = function onWheel(e, type) {
+    var deltaY = e.deltaY;
+    changeItem(type, deltaY < 0 ? -1 : 1);
+  };
+
+  var _onTouchStart = function onTouchStart(e, type) {
+    var timeStamp = e.timeStamp,
+        changedTouches = e.changedTouches;
+    var pageY = changedTouches[0].pageY;
+    setTouchY(pageY);
+    setTouchTimestamp(timeStamp);
+    setTouchType(type);
+    Body === null || Body === void 0 ? void 0 : Body.addEventListener('touchend', function (e) {
+      return onTouchEnd(e, pageY, timeStamp, type);
+    });
+  };
+
+  var onTouchMove = function onTouchMove(e) {
+    if (!touchY || !touchType) return;
+    var timeStamp = e.timeStamp,
+        changedTouches = e.changedTouches;
+    var pageY = changedTouches[0].pageY;
+    var deltaY = touchY - pageY;
+    if (Math.abs(deltaY) < listItemHeight / 2) return;
+    var direction = deltaY < 0 ? -1 : 1;
+    setScrollDirection(direction);
+    changeItem(touchType, direction);
+    setTouchY(pageY);
+    setTouchTimestamp(timeStamp);
+  };
+
+  var onTouchEnd = function onTouchEnd(e, startY, startTime, touchType) {
+    var timeStamp = e.timeStamp,
+        changedTouches = e.changedTouches;
+    var pageY = changedTouches[0].pageY;
+    var path = Math.abs(startY - pageY); //in px
+
+    var time = timeStamp - startTime; //ms
+
+    var pxPerMs = path / time;
+    if (pxPerMs > 1) innertionScroll({
+      startY: startY,
+      pageY: pageY,
+      timeStamp: timeStamp,
+      startTime: startTime,
+      touchType: touchType
+    });else setTouchType(null);
+    setTouchY(null);
+    Body === null || Body === void 0 ? void 0 : Body.clearEventListeners('touchend');
+  };
+
+  var innertionScroll = function innertionScroll(_ref2) {
+    var startY = _ref2.startY,
+        pageY = _ref2.pageY,
+        timeStamp = _ref2.timeStamp,
+        startTime = _ref2.startTime,
+        touchType = _ref2.touchType;
+    var path = Math.abs(startY - pageY); //in px
+
+    var time = timeStamp - startTime; //ms
+
+    var pxPerMs = path / time; //speed
+
+    var S = pxPerMs / 2 * time / 2;
+    var blocks = Math.ceil(S / listItemHeight) * 6 * pxPerMs;
+    var timeout;
+
+    for (var i = 1; i <= blocks; ++i) {
+      timeout = i * pxPerMs + Math.pow(i, 2) * 1.2;
+      setTimeout(function () {
+        changeItem(touchType, startY - pageY < 0 ? -1 : 1);
+      }, timeout);
+    }
+
+    setTimeout(function () {
+      setTouchType(null);
+    }, timeout);
+  }; //--FUNCTIONS--//
+
+
+  var intervalWorker = function intervalWorker() {
+    if (!mouseDownOn) return;
+    var type = mouseDownOn.type,
+        value = mouseDownOn.value;
+    changeItem(type, value);
+  };
+
+  var getList = function getList(type, format) {
+    var list = [];
+    var renderRows = rows;
+
+    for (var i = (renderRows - 1) / 2; i >= (renderRows - 1) / 2 * -1; --i) {
+      list.push((0, _moment.default)(date).subtract(i, type).format(format));
+    }
+
+    return list;
+  };
+
+  var getMonthList = function getMonthList() {
+    return getList('months', 'MMMM');
+  };
+
+  var getDaysList = function getDaysList() {
+    return getList('days', 'D');
+  };
+
+  var getYearsList = function getYearsList() {
+    return getList('years', 'YYYY');
+  }; //--OBSERVERS--//
+  //Events Observer
+
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mouseup', onArrowMouseUp);
+    return function () {
+      document.removeEventListener('mouseup', onArrowMouseUp);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    onChange(date);
+  }, [date]); //--RENDER--//
+
+  var renderMonthsList = function renderMonthsList() {
+    var half = (rows - 1) / 2;
+    return getMonthList().map(function (month, i) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "mobile-calendar_wrapper_body_months-list--item ".concat(i === half ? 'active' : '', " ").concat(i === 0 || i === rows - 1 ? 'transparent' : '', " ").concat(classes === null || classes === void 0 ? void 0 : classes.monthsListItem, " ").concat(i === half ? classes === null || classes === void 0 ? void 0 : classes.activeItem : ''),
+        key: "month-".concat(month),
+        onClick: touchY ? null : function () {
+          return i - half === 0 ? {} : changeItem('months', i - half);
+        },
+        "attr-scroll-direction": touchType === 'months' ? scrollDirection : 0,
+        "attr-is-scrolling": touchType === 'months' ? 1 : 0
+      }, month);
+    });
+  };
+
+  var renderDaysList = function renderDaysList() {
+    var half = (rows - 1) / 2;
+    return getDaysList().map(function (day, i) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "mobile-calendar_wrapper_body_days-list--item ".concat(i === half ? 'active' : '', " ").concat(i === 0 || i === rows - 1 ? 'transparent' : '', " ").concat(classes === null || classes === void 0 ? void 0 : classes.daysListItem, " ").concat(i === half ? classes === null || classes === void 0 ? void 0 : classes.activeItem : ''),
+        key: "day-".concat(day),
+        onClick: function onClick() {
+          return i - half === 0 ? {} : changeItem('days', i - half);
+        },
+        "attr-scroll-direction": touchType === 'days' ? scrollDirection : 0,
+        "attr-is-scrolling": touchType === 'days' ? 1 : 0
+      }, day);
+    });
+  };
+
+  var renderYearsList = function renderYearsList() {
+    var half = (rows - 1) / 2;
+    return getYearsList().map(function (year, i) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "mobile-calendar_wrapper_body_years-list--item ".concat(i === half ? 'active' : '', " ").concat(i === 0 || i === rows - 1 ? 'transparent' : '', " ").concat(classes === null || classes === void 0 ? void 0 : classes.yearsListItem, " ").concat(i === half ? classes === null || classes === void 0 ? void 0 : classes.activeItem : ''),
+        key: "year-".concat(year),
+        onClick: function onClick() {
+          return i - half === 0 ? {} : changeItem('years', i - half);
+        },
+        "attr-scroll-direction": touchType === 'years' ? scrollDirection : 0,
+        "attr-is-scrolling": touchType === 'years' ? 1 : 0
+      }, year);
+    });
+  };
+
+  var renderMonthBlock = function renderMonthBlock() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_months ".concat(classes === null || classes === void 0 ? void 0 : classes.monthsBlock)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_months--prev ".concat(classes === null || classes === void 0 ? void 0 : classes.prevItem)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
+      onClick: function onClick() {
+        return changeItem('months', -1);
+      },
+      onMouseDown: function onMouseDown() {
+        return onArrowMouseDown('months', -1);
+      },
+      onMouseUp: onArrowMouseUp
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_months-list ".concat(classes === null || classes === void 0 ? void 0 : classes.monthsList),
+      onTouchStart: function onTouchStart(e) {
+        return _onTouchStart(e, "months");
+      },
+      onWheel: function onWheel(e) {
+        return _onWheel(e, "months");
+      }
+    }, renderMonthsList(), isMobile && /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_months-list_touch-zone"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_months--next ".concat(classes === null || classes === void 0 ? void 0 : classes.nextItem)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
+      onClick: function onClick() {
+        return changeItem('months', 1);
+      },
+      onMouseDown: function onMouseDown() {
+        return onArrowMouseDown('months', 1);
+      },
+      onMouseUp: onArrowMouseUp
+    })));
+  };
+
+  var renderDaysBlock = function renderDaysBlock() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_days ".concat(classes === null || classes === void 0 ? void 0 : classes.daysBlock)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_days--prev ".concat(classes === null || classes === void 0 ? void 0 : classes.prevItem)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
+      onClick: function onClick() {
+        return changeItem('days', -1);
+      },
+      onMouseDown: function onMouseDown() {
+        return onArrowMouseDown('days', -1);
+      },
+      onMouseUp: onArrowMouseUp
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_days-list ".concat(classes === null || classes === void 0 ? void 0 : classes.daysList),
+      onTouchStart: function onTouchStart(e) {
+        return _onTouchStart(e, "days");
+      },
+      onWheel: function onWheel(e) {
+        return _onWheel(e, "days");
+      }
+    }, renderDaysList(), isMobile && /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_days-list_touch-zone"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_days--next ".concat(classes === null || classes === void 0 ? void 0 : classes.nextItem)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
+      onClick: function onClick() {
+        return changeItem('days', 1);
+      },
+      onMouseDown: function onMouseDown() {
+        return onArrowMouseDown('days', 1);
+      },
+      onMouseUp: onArrowMouseUp
+    })));
+  };
+
+  var renderYearsBlock = function renderYearsBlock() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_years ".concat(classes === null || classes === void 0 ? void 0 : classes.yearsBlock)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_years--prev ".concat(classes === null || classes === void 0 ? void 0 : classes.prevItem)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
+      onClick: function onClick() {
+        return changeItem('years', -1);
+      },
+      onMouseDown: function onMouseDown() {
+        return onArrowMouseDown('years', -1);
+      },
+      onMouseUp: onArrowMouseUp
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_years-list ".concat(classes === null || classes === void 0 ? void 0 : classes.yearsList),
+      onTouchStart: function onTouchStart(e) {
+        return _onTouchStart(e, "years");
+      },
+      onWheel: function onWheel(e) {
+        return _onWheel(e, "years");
+      }
+    }, renderYearsList(), isMobile && /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_years-list_touch-zone"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-calendar_wrapper_body_years--next ".concat(classes === null || classes === void 0 ? void 0 : classes.nextItem)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
+      onClick: function onClick() {
+        return changeItem('years', 1);
+      },
+      onMouseDown: function onMouseDown() {
+        return onArrowMouseDown('years', 1);
+      },
+      onMouseUp: onArrowMouseUp
+    })));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-calendar_wrapper ".concat(classes === null || classes === void 0 ? void 0 : classes.wrapper),
+    onTouchMove: onTouchMove
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-calendar_wrapper_label ".concat(classes === null || classes === void 0 ? void 0 : classes.label)
+  }, label), showSelectedDate && /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-calendar_wrapper_label  ".concat(classes === null || classes === void 0 ? void 0 : classes.label)
+  }, (0, _moment.default)(date).format("LL")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-calendar_wrapper_body  ".concat(classes === null || classes === void 0 ? void 0 : classes.body)
+  }, renderMonthBlock(), renderDaysBlock(), renderYearsBlock()));
+};
+
+var _default = MobileCalendar;
+exports.default = _default;

package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.scss

@@ -0,0 +1,120 @@
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.mobile-calendar_wrapper{
+  @extend .unselectable;
+  max-width: 350px;
+  background: #F8FBFF;
+  padding: 10px;
+  box-shadow: 0 0 10px 10px #00000014;
+  border-radius: 16px;
+
+  &_label{
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 16px 0px;
+  }
+
+  &_body{
+    display: flex;
+    justify-content: space-between;
+
+    &_months,
+    &_days,
+    &_years{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      &--prev,
+      &--next{
+        color:#A6AAB4;
+        cursor: pointer;
+      }
+
+      &-list{
+        position: relative;
+        overflow: hidden;
+
+        &::before,
+        &::after{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #3B414B;
+          height: 32px;
+          width: 90px;
+          cursor: pointer;
+          content: "0000";
+          background-color: red;
+          position: absolute;
+        }
+
+        &::before{
+          top: 0;
+          transform: translateY(-100%);
+        }
+
+        &::after{
+          bottom: 0;
+          transform: translateY(100%);
+        }
+
+        &--item{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #3B414B;
+          height: 32px;
+          width: 90px;
+          cursor: pointer;
+
+          &:not(.active){
+            transition: transform 1s;
+          }
+          &:not(.active)[attr-scroll-direction="1"]{
+            transform: translateY(25%);
+          }
+          &:not(.active)[attr-scroll-direction="-1"]{
+            transform: translateY(-25%);
+          }
+
+          &:not(.active)[attr-is-scrolling="1"]{
+            opacity: 0.3;
+          }
+
+
+          &.active{
+            background: #FFFFFF;
+            border: 1px solid #FFFFFF;
+            box-sizing: border-box;
+            box-shadow: 0px 4px 26px rgba(0, 67, 96, 0.1);
+            border-radius: 8px;
+          }
+
+          &.transparent{
+            opacity: 0.5;
+          }
+        }
+
+        &_touch-zone{
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          z-index: 5;
+        }
+      }
+
+
+    }
+  }
+}

package/dist/{Molecular/Datepicker/Datepicker.stories.js → Atomic/FormElements/MobileCalendar/MobileCalendar.stories.js}

@@ -7,38 +7,50 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DatepickerTemplate = void 0;
+exports.CalendarTemplate = exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _yup = require("yup");
+var _react = _interopRequireWildcard(require("react"));
 
-var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+var _MobileCalendar = _interopRequireDefault(require("./MobileCalendar"));
 
 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; }
 
-global.lng = 'en'; // export default {
-//   title: 'Form Elements/Datepicker',
-//   component: Datepicker,
-// };
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/Mobile Calendar',
+  component: _MobileCalendar.default,
+  argTypes: {
+    value: {
+      description: 'string (mm.dd.yyyy)'
+    }
+  }
+};
+exports.default = _default;
 
 var Template = function Template(args) {
-  var params = {
-    minDate: args === null || args === void 0 ? void 0 : args.minDate,
-    maxDate: args === null || args === void 0 ? void 0 : args.maxDate
-  };
-  return /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
-    data: args.date,
-    params: params
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_MobileCalendar.default, {
+    classes: {
+      wrapper: "123"
+    },
+    onChange: console.log
   });
 };
 
-var DatepickerTemplate = Template.bind({});
-exports.DatepickerTemplate = DatepickerTemplate;
-DatepickerTemplate.args = {
-  date: '10/14/2021',
-  minDate: '10/11/2021',
-  maxDate: '10/25/2021'
+var CalendarTemplate = Template.bind({});
+exports.CalendarTemplate = CalendarTemplate;
+CalendarTemplate.args = {
+  value: '',
+  minDate: '01/01/1900',
+  maxDate: '01/01/2100',
+  isDontLimitFuture: true // isListTop: true,
+
 };

package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js

@@ -44,7 +44,12 @@ var RangeCalendar = function RangeCalendar(props) {
       startPrevDate = props.startPrevDate,
       endPrevDate = props.endPrevDate,
       limitRange = props.limitRange,
-      isShortWeekNames = props.isShortWeekNames;
+      isShortWeekNames = props.isShortWeekNames,
+      minDate = props.minDate,
+      maxDate = props.maxDate,
+      momentMinDate = props.momentMinDate,
+      momentMaxDate = props.momentMaxDate,
+      isDontLimitFuture = props.isDontLimitFuture;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -89,9 +94,7 @@ var RangeCalendar = function RangeCalendar(props) {
     var classNames = (0, _classnames.default)('range-calendar__day', {
       'range-calendar__day--clickable': day
     }, {
-      'range-calendar__day--disabled': isFutureDay
-    }, {
-      'range-calendar__day--disabled': isPastDay
+      'range-calendar__day--disabled': isPastDay || minDate && (0, _momentTimezone.default)(day === null || day === void 0 ? void 0 : day.date).isBefore(minDate, 'day') || !isDontLimitFuture && (maxDate ? (0, _momentTimezone.default)(day === null || day === void 0 ? void 0 : day.date).isAfter(momentMaxDate) : isFutureDay)
     }, {
       'range-calendar__day--range-start': isRangeStart
     }, {
@@ -106,10 +109,10 @@ var RangeCalendar = function RangeCalendar(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(week, "_").concat(dayOfWeek),
       className: classNames,
-      onClick: day && !isFutureDay ? function (e) {
+      onClick: day ? function (e) {
         return onClick(day.date, e);
       } : null,
-      onMouseOver: day && !isFutureDay ? function () {
+      onMouseOver: day ? function () {
         return onHover(day.date);
       } : null,
       onMouseLeave: function onMouseLeave() {
@@ -138,14 +141,14 @@ var RangeCalendar = function RangeCalendar(props) {
     className: "range-calendar-header"
   }, /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     type: "left",
-    disabled: !allowPrev,
+    disabled: !allowPrev || minDate && (0, _momentTimezone.default)(date).startOf('month').isSameOrBefore(momentMinDate, 'months'),
     onClick: handlePrev,
     className: "range-calendar-header__prev"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "range-calendar-header__title"
   }, title), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     type: "right",
-    disabled: !allowNext,
+    disabled: !allowNext || !isDontLimitFuture && (0, _momentTimezone.default)(date).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : (0, _momentTimezone.default)().add(1, 'day').startOf('day'), 'months'),
     onClick: handleNext,
     className: "range-calendar-header__next"
   })), /*#__PURE__*/_react.default.createElement("div", {