intelicoreact 0.0.95 → 0.0.98

package/dist/Atomic/FormElements/Input/Input.js

@@ -52,6 +52,8 @@ var Input = function Input(_ref) {
       className = _ref.className,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
+      _ref$softStringMode = _ref.softStringMode,
+      softStringMode = _ref$softStringMode === void 0 ? false : _ref$softStringMode,
       mask = _ref.mask,
       maskChar = _ref.maskChar,
       formatChars = _ref.formatChars,
@@ -103,7 +105,7 @@ var Input = function Input(_ref) {
 
       if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
       if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
-      if (isOnlyString) inputValue = onlyString(inputValue);
+      if (isOnlyString) inputValue = onlyString(inputValue, softStringMode);
       onChange(inputValue.toString());
     },
     toggleEdit: function toggleEdit() {

package/dist/Atomic/FormElements/Input/Input.stories.js

@@ -43,9 +43,12 @@ var _default = {
     isOnlyNumber: {
       description: 'boolean - only numbers'
     },
-    isOnlyString: {
+    softStringMode: {
       description: 'boolean - only strings'
     },
+    hardStringMode: {
+      description: 'boolean - soft or hard validation'
+    },
     isTwoDigitAfterDot: {
       description: 'boolean - only two digits after dot'
     },
@@ -114,6 +117,7 @@ InputTemplate.args = {
   disabled: false,
   error: '',
   mask: '',
+  softStringMode: true,
   withDelete: true,
   symbolsLimit: 255,
   placeholder: 'Placeholder',

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

@@ -93,14 +93,14 @@ var InputDateRange = function InputDateRange(props) {
 
     var formatedValue = _objectSpread(_objectSpread(_objectSpread({
       intervalKey: newValue.intervalKey,
-      start: newValue.start ? (0, _momentTimezone.default)(newValue.start).format(format || 'YYYY-MM-DDTHH:mm') : newValue.start,
-      end: newValue.end ? (0, _momentTimezone.default)(newValue.end).format(format || 'YYYY-MM-DDTHH:mm') : newValue.end
+      start: newValue.start ? (0, _momentTimezone.default)(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
+      end: newValue.end ? (0, _momentTimezone.default)(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end
     }, newValue.compare ? {
       compare: newValue.compare
     } : {}), newValue.startPrevDate ? {
-      startPrevDate: (0, _momentTimezone.default)(newValue.startPrevDate).format(format || 'YYYY-MM-DDTHH:mm')
+      startPrevDate: (0, _momentTimezone.default)(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm')
     } : {}), newValue.endPrevDate ? {
-      endPrevDate: (0, _momentTimezone.default)(newValue.endPrevDate).format(format || 'YYYY-MM-DDTHH:mm')
+      endPrevDate: (0, _momentTimezone.default)(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm')
     } : {});
 
     onChange(formatedValue);

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

@@ -28,23 +28,24 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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,
+  var _ref$min = _ref.min,
+      min = _ref$min === void 0 ? (0, _moment.default)().subtract('10', 'years') : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? (0, _moment.default)().add('10', 'years') : _ref$max,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? (0, _moment.default)() : _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,
+      timeout = _ref$timeout === void 0 ? 75 : _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$listItemHeight = _ref.listItemHeight,
+      listItemHeight = _ref$listItemHeight === void 0 ? 32 : _ref$listItemHeight,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {
     wrapper: "",
@@ -64,51 +65,69 @@ var MobileCalendar = function MobileCalendar(_ref) {
     activeItem: ""
   } : _ref$classes,
       _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$onMinDateReached = _ref.onMinDateReached,
+      onMinDateReached = _ref$onMinDateReached === void 0 ? function () {} : _ref$onMinDateReached,
+      _ref$onMaxDateReached = _ref.onMaxDateReached,
+      onMaxDateReached = _ref$onMaxDateReached === void 0 ? function () {} : _ref$onMaxDateReached;
   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)()),
+  var _useState = (0, _react.useState)(value ? (0, _moment.default)(value) : (0, _moment.default)()),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       date = _useState2[0],
       setDate = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)((0, _moment.default)(min)),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isMouseDown = _useState4[0],
-      setIsMouseDown = _useState4[1];
+      minDate = _useState4[0],
+      setMinDate = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(null),
+  var _useState5 = (0, _react.useState)((0, _moment.default)(max)),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      mouseDownOn = _useState6[0],
-      setMouseDownOn = _useState6[1];
+      maxDate = _useState6[0],
+      setMaxDate = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(null),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      changeInterval = _useState8[0],
-      setChangeInterval = _useState8[1];
+      isMouseDown = _useState8[0],
+      setIsMouseDown = _useState8[1];
 
   var _useState9 = (0, _react.useState)(null),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      touchY = _useState10[0],
-      setTouchY = _useState10[1];
+      mouseDownOn = _useState10[0],
+      setMouseDownOn = _useState10[1];
 
   var _useState11 = (0, _react.useState)(null),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      touchType = _useState12[0],
-      setTouchType = _useState12[1];
+      changeInterval = _useState12[0],
+      setChangeInterval = _useState12[1];
 
   var _useState13 = (0, _react.useState)(null),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      touchTimestamp = _useState14[0],
-      setTouchTimestamp = _useState14[1];
+      touchY = _useState14[0],
+      setTouchY = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(0),
+  var _useState15 = (0, _react.useState)(null),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      scrollDirection = _useState16[0],
-      setScrollDirection = _useState16[1];
+      touchType = _useState16[0],
+      setTouchType = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(null),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      touchTimestamp = _useState18[0],
+      setTouchTimestamp = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(0),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      scrollDirection = _useState20[0],
+      setScrollDirection = _useState20[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 monthsListRef = (0, _react.useRef)(null);
+  var daysListRef = (0, _react.useRef)(null);
+  var yearsListRef = (0, _react.useRef)(null);
+  var dateRef = (0, _react.useRef)(null);
+  var intervalRef = (0, _react.useRef)(null); //--HANDLERS--//
 
   var changeItem = function changeItem(type, value) {
     setScrollDirection(value);
@@ -123,6 +142,14 @@ var MobileCalendar = function MobileCalendar(_ref) {
     }, 50);
   };
 
+  var checkAvailability = function checkAvailability(type, value) {
+    if (!(dateRef !== null && dateRef !== void 0 && dateRef.current)) return false;
+    var newDate = (0, _moment.default)(dateRef === null || dateRef === void 0 ? void 0 : dateRef.current).add(value, type);
+    if ((0, _moment.default)(newDate).isBefore(minDate)) return false;
+    if ((0, _moment.default)(newDate).isAfter(maxDate)) return false;
+    return true;
+  };
+
   var onArrowMouseDown = function onArrowMouseDown(type, value) {
     setIsMouseDown(true);
     setMouseDownOn({
@@ -136,20 +163,36 @@ var MobileCalendar = function MobileCalendar(_ref) {
     setMouseDownOn(null);
   };
 
-  var _onWheel = function onWheel(e, type) {
+  var onWheel = function onWheel(e, type) {
+    e.preventDefault();
     var deltaY = e.deltaY;
+    var top = window.scrollX;
+    var left = window.scrollY;
+    window.scrollTo({
+      top: top,
+      left: left
+    });
     changeItem(type, deltaY < 0 ? -1 : 1);
   };
 
-  var _onTouchStart = function onTouchStart(e, type) {
+  var onTouchStart = function onTouchStart(e, type) {
+    e.preventDefault();
+
+    if (intervalRef !== null && intervalRef !== void 0 && intervalRef.current) {
+      clearInterval(intervalRef === null || intervalRef === void 0 ? void 0 : intervalRef.current);
+      intervalRef.current = null;
+    }
+
     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) {
+    window.addEventListener('touchend', function (e) {
       return onTouchEnd(e, pageY, timeStamp, type);
+    }, {
+      once: true
     });
   };
 
@@ -159,7 +202,7 @@ var MobileCalendar = function MobileCalendar(_ref) {
         changedTouches = e.changedTouches;
     var pageY = changedTouches[0].pageY;
     var deltaY = touchY - pageY;
-    if (Math.abs(deltaY) < listItemHeight / 2) return;
+    if (Math.abs(deltaY) < listItemHeight) return;
     var direction = deltaY < 0 ? -1 : 1;
     setScrollDirection(direction);
     changeItem(touchType, direction);
@@ -176,7 +219,7 @@ var MobileCalendar = function MobileCalendar(_ref) {
     var time = timeStamp - startTime; //ms
 
     var pxPerMs = path / time;
-    if (pxPerMs > 1) innertionScroll({
+    if (pxPerMs > 0.65) innertionScroll({
       startY: startY,
       pageY: pageY,
       timeStamp: timeStamp,
@@ -184,7 +227,6 @@ var MobileCalendar = function MobileCalendar(_ref) {
       touchType: touchType
     });else setTouchType(null);
     setTouchY(null);
-    Body === null || Body === void 0 ? void 0 : Body.clearEventListeners('touchend');
   };
 
   var innertionScroll = function innertionScroll(_ref2) {
@@ -197,22 +239,31 @@ var MobileCalendar = function MobileCalendar(_ref) {
 
     var time = timeStamp - startTime; //ms
 
-    var pxPerMs = path / time; //speed
+    var pxPerMs = Math.ceil(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 () {
+    var S = pxPerMs / 2 * time;
+    var blocks = Math.ceil(S / listItemHeight * pxPerMs);
+    var i = 1;
+    intervalRef.current = setInterval(function () {
+      if (checkAvailability(touchType, startY - pageY < 0 ? -1 : 1, date) && i <= blocks) {
         changeItem(touchType, startY - pageY < 0 ? -1 : 1);
-      }, timeout);
-    }
+      } else {
+        setTouchType(null);
+        clearInterval(intervalRef === null || intervalRef === void 0 ? void 0 : intervalRef.current);
+        intervalRef.current = null;
+      }
 
-    setTimeout(function () {
-      setTouchType(null);
-    }, timeout);
+      ++i;
+    }, timeout); // for(let i = 1; i <= blocks; ++i){
+    //   // timeout = i*pxPerMs+Math.pow(i,2)*10;
+    //   timeout += 80;
+    //   if(checkAvailability(touchType, startY-pageY < 0 ? -1 : 1, date)){
+    //     setTimeout(() => {
+    //       console.log({timeout})
+    //       changeItem(touchType, startY-pageY < 0 ? -1 : 1);
+    //     }, timeout)
+    //   }
+    // }
   }; //--FUNCTIONS--//
 
 
@@ -245,9 +296,13 @@ var MobileCalendar = function MobileCalendar(_ref) {
   var getYearsList = function getYearsList() {
     return getList('years', 'YYYY');
   }; //--OBSERVERS--//
-  //Events Observer
 
 
+  (0, _react.useEffect)(function () {
+    if ((0, _moment.default)(date.format("L")).isBefore(minDate.format("L"))) setDate(minDate);
+    if ((0, _moment.default)(date.format("L")).isAfter(maxDate.format("L"))) setDate(maxDate);
+  }, []); //Events Observer
+
   (0, _react.useEffect)(function () {
     document.addEventListener('mouseup', onArrowMouseUp);
     return function () {
@@ -256,7 +311,76 @@ var MobileCalendar = function MobileCalendar(_ref) {
   }, []);
   (0, _react.useEffect)(function () {
     onChange(date);
-  }, [date]); //--RENDER--//
+    dateRef.current = date;
+    if ((0, _moment.default)(date.format("L")).isSame(minDate.format("L"))) onMinDateReached(minDate);
+    if ((0, _moment.default)(date.format("L")).isSame(maxDate.format("L"))) onMaxDateReached(maxDate);
+  }, [date]); //monthList Events
+
+  (0, _react.useEffect)(function () {
+    var _monthsListRef$curren, _monthsListRef$curren2;
+
+    if (!(monthsListRef !== null && monthsListRef !== void 0 && monthsListRef.current)) return;
+    monthsListRef === null || monthsListRef === void 0 ? void 0 : (_monthsListRef$curren = monthsListRef.current) === null || _monthsListRef$curren === void 0 ? void 0 : _monthsListRef$curren.addEventListener("mousewheel", function (e) {
+      return onWheel(e, "months");
+    }, {
+      passive: false
+    });
+    monthsListRef === null || monthsListRef === void 0 ? void 0 : (_monthsListRef$curren2 = monthsListRef.current) === null || _monthsListRef$curren2 === void 0 ? void 0 : _monthsListRef$curren2.addEventListener("touchstart", function (e) {
+      return onTouchStart(e, "months");
+    }, {
+      passive: false
+    });
+    return function () {
+      var _monthsListRef$curren3, _monthsListRef$curren4;
+
+      monthsListRef === null || monthsListRef === void 0 ? void 0 : (_monthsListRef$curren3 = monthsListRef.current) === null || _monthsListRef$curren3 === void 0 ? void 0 : _monthsListRef$curren3.clearEventListeners("mousewheel");
+      monthsListRef === null || monthsListRef === void 0 ? void 0 : (_monthsListRef$curren4 = monthsListRef.current) === null || _monthsListRef$curren4 === void 0 ? void 0 : _monthsListRef$curren4.clearEventListeners("touchstart");
+    };
+  }, [monthsListRef]); //daysList Events
+
+  (0, _react.useEffect)(function () {
+    var _daysListRef$current, _daysListRef$current2;
+
+    if (!(daysListRef !== null && daysListRef !== void 0 && daysListRef.current)) return;
+    daysListRef === null || daysListRef === void 0 ? void 0 : (_daysListRef$current = daysListRef.current) === null || _daysListRef$current === void 0 ? void 0 : _daysListRef$current.addEventListener("mousewheel", function (e) {
+      return onWheel(e, "days");
+    }, {
+      passive: false
+    });
+    daysListRef === null || daysListRef === void 0 ? void 0 : (_daysListRef$current2 = daysListRef.current) === null || _daysListRef$current2 === void 0 ? void 0 : _daysListRef$current2.addEventListener("touchstart", function (e) {
+      return onTouchStart(e, "days");
+    }, {
+      passive: false
+    });
+    return function () {
+      var _daysListRef$current3, _daysListRef$current4;
+
+      daysListRef === null || daysListRef === void 0 ? void 0 : (_daysListRef$current3 = daysListRef.current) === null || _daysListRef$current3 === void 0 ? void 0 : _daysListRef$current3.clearEventListeners("mousewheel");
+      daysListRef === null || daysListRef === void 0 ? void 0 : (_daysListRef$current4 = daysListRef.current) === null || _daysListRef$current4 === void 0 ? void 0 : _daysListRef$current4.clearEventListeners("touchstart");
+    };
+  }, [daysListRef]); //yearsList Events
+
+  (0, _react.useEffect)(function () {
+    var _yearsListRef$current, _yearsListRef$current2;
+
+    if (!(yearsListRef !== null && yearsListRef !== void 0 && yearsListRef.current)) return;
+    yearsListRef === null || yearsListRef === void 0 ? void 0 : (_yearsListRef$current = yearsListRef.current) === null || _yearsListRef$current === void 0 ? void 0 : _yearsListRef$current.addEventListener("mousewheel", function (e) {
+      return onWheel(e, "years");
+    }, {
+      passive: false
+    });
+    yearsListRef === null || yearsListRef === void 0 ? void 0 : (_yearsListRef$current2 = yearsListRef.current) === null || _yearsListRef$current2 === void 0 ? void 0 : _yearsListRef$current2.addEventListener("touchstart", function (e) {
+      return onTouchStart(e, "years");
+    }, {
+      passive: false
+    });
+    return function () {
+      var _yearsListRef$current3, _yearsListRef$current4;
+
+      yearsListRef === null || yearsListRef === void 0 ? void 0 : (_yearsListRef$current3 = yearsListRef.current) === null || _yearsListRef$current3 === void 0 ? void 0 : _yearsListRef$current3.clearEventListeners("mousewheel");
+      yearsListRef === null || yearsListRef === void 0 ? void 0 : (_yearsListRef$current4 = yearsListRef.current) === null || _yearsListRef$current4 === void 0 ? void 0 : _yearsListRef$current4.clearEventListeners("touchstart");
+    };
+  }, [yearsListRef]); //--RENDER--//
 
   var renderMonthsList = function renderMonthsList() {
     var half = (rows - 1) / 2;
@@ -303,7 +427,7 @@ var MobileCalendar = function MobileCalendar(_ref) {
     });
   };
 
-  var renderMonthBlock = function renderMonthBlock() {
+  var renderMonthsBlock = function renderMonthsBlock() {
     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", {
@@ -318,12 +442,7 @@ var MobileCalendar = function MobileCalendar(_ref) {
       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");
-      }
+      ref: monthsListRef
     }, renderMonthsList(), isMobile && /*#__PURE__*/_react.default.createElement("div", {
       className: "mobile-calendar_wrapper_body_months-list_touch-zone"
     })), /*#__PURE__*/_react.default.createElement("div", {
@@ -354,12 +473,7 @@ var MobileCalendar = function MobileCalendar(_ref) {
       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");
-      }
+      ref: daysListRef
     }, renderDaysList(), isMobile && /*#__PURE__*/_react.default.createElement("div", {
       className: "mobile-calendar_wrapper_body_days-list_touch-zone"
     })), /*#__PURE__*/_react.default.createElement("div", {
@@ -390,12 +504,7 @@ var MobileCalendar = function MobileCalendar(_ref) {
       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");
-      }
+      ref: yearsListRef
     }, renderYearsList(), isMobile && /*#__PURE__*/_react.default.createElement("div", {
       className: "mobile-calendar_wrapper_body_years-list_touch-zone"
     })), /*#__PURE__*/_react.default.createElement("div", {
@@ -420,7 +529,7 @@ var MobileCalendar = function MobileCalendar(_ref) {
     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()));
+  }, renderMonthsBlock(), renderDaysBlock(), renderYearsBlock()));
 };
 
 var _default = MobileCalendar;

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

@@ -43,29 +43,29 @@
         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%);
-        }
+        // &::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;

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

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _MobileCalendar = _interopRequireDefault(require("./MobileCalendar"));
 
+var _moment = _interopRequireDefault(require("moment"));
+
 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; }
@@ -24,8 +26,65 @@ var _default = {
   title: 'Form Elements/Mobile Calendar',
   component: _MobileCalendar.default,
   argTypes: {
+    min: {
+      description: 'Min Date',
+      control: {
+        type: "date"
+      }
+    },
+    max: {
+      description: 'Max Date',
+      control: {
+        type: "date"
+      }
+    },
     value: {
-      description: 'string (mm.dd.yyyy)'
+      description: 'Value',
+      control: {
+        type: "date"
+      }
+    },
+    rows: {
+      description: 'Calendar Rows',
+      control: {
+        type: "number"
+      }
+    },
+    label: {
+      description: 'Calendar Label',
+      control: {
+        type: "text"
+      }
+    },
+    timeout: {
+      description: 'Scroll Timeout',
+      control: {
+        type: "number"
+      }
+    },
+    isMobile: {
+      description: 'Touch Scroll Switcher'
+    },
+    showSelectedDate: {
+      description: 'Selected Date Block Visibility'
+    },
+    listItemHeight: {
+      description: 'List Item Height For Scroll Calculate',
+      control: {
+        type: "number"
+      }
+    },
+    classes: {
+      description: 'Style Classes'
+    },
+    onChange: {
+      description: 'On Change Callback'
+    },
+    onMinDateReached: {
+      description: 'On Min Date Reached Callback'
+    },
+    onMaxDateReached: {
+      description: 'On Max Date Reached Callback'
     }
   }
 };
@@ -37,20 +96,36 @@ var Template = function Template(args) {
       date = _useState2[0],
       setDate = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_MobileCalendar.default, {
-    classes: {
-      wrapper: "123"
-    },
-    onChange: console.log
-  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MobileCalendar.default, args));
 };
 
 var CalendarTemplate = Template.bind({});
 exports.CalendarTemplate = CalendarTemplate;
 CalendarTemplate.args = {
-  value: '',
-  minDate: '01/01/1900',
-  maxDate: '01/01/2100',
-  isDontLimitFuture: true // isListTop: true,
-
+  min: "",
+  max: "",
+  value: "",
+  rows: 5,
+  label: "",
+  timeout: 75,
+  isMobile: true,
+  showSelectedDate: false,
+  listItemHeight: 32,
+  classes: {
+    wrapper: "",
+    label: "",
+    body: "",
+    yearsBlock: "",
+    yearsList: "",
+    yearsListItem: "",
+    monthsBlock: "",
+    monthsList: "",
+    monthsListItem: "",
+    daysBlock: "",
+    daysList: "",
+    daysListItem: "",
+    prevItem: "",
+    nextItem: "",
+    activeItem: ""
+  }
 };

package/dist/Atomic/FormElements/Spinner/Spinner.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("./Spinner.scss");
+
+var Spinner = function Spinner(_ref) {
+  var _ref$little = _ref.little,
+      little = _ref$little === void 0 ? false : _ref$little;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "loader-box ".concat(little ? 'j8' : 'j5')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lds-ring ".concat(little ? 'lds-ring_little' : '')
+  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null)));
+};
+
+var _default = Spinner;
+exports.default = _default;