intelicoreact 0.2.3 → 0.2.4

package/dist/Atomic/UI/NavLine/NavLine.js

@@ -11,6 +11,10 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -83,6 +87,52 @@ var NavLine = function NavLine(_ref) {
       navLineFirstItemOffset = _useState12[0],
       setNavLineFirstItemOffset = _useState12[1];
 
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      scrollQueue = _useState14[0],
+      setScrollQueue = _useState14[1];
+
+  var popScrollTask = function popScrollTask() {
+    if (!scrollQueue.length) return null;
+
+    var _scrollQueue = (0, _toArray2.default)(scrollQueue),
+        task = _scrollQueue[0],
+        rest = _scrollQueue.slice(1);
+
+    setScrollQueue(rest);
+    return task;
+  };
+
+  var pushScrollTask = function pushScrollTask(task) {
+    return setScrollQueue(function (queue) {
+      return [].concat((0, _toConsumableArray2.default)(queue), [task]);
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!scrollQueue.length) return false;
+    var task = popScrollTask();
+    if (!task) return false;
+
+    switch (task) {
+      case 'next':
+        scrollToNextItem();
+        break;
+
+      case 'prev':
+        scrollToPrevItem();
+        break;
+
+      default:
+        break;
+    }
+  }, [scrollQueue]);
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      isScrollBlocked = _useState16[0],
+      setScrollBlocked = _useState16[1];
+
   var getVisibleNavLineItems = function getVisibleNavLineItems() {
     var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
     var wrapperInnerProps = wrapperInner.getBoundingClientRect();
@@ -117,13 +167,22 @@ var NavLine = function NavLine(_ref) {
 
   var scroll = function scroll() {
     var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    if (isScrollBlocked) return false;
+    setScrollBlocked(true);
     var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
     var wrapperInnerProps = wrapperInner.getBoundingClientRect();
     var leftOffset = wrapperInner.scrollLeft;
-    setTotalScrolledItems(function (state) {
-      return offset > 0 ? ++state : --state;
+    wrapperInner === null || wrapperInner === void 0 ? void 0 : wrapperInner.addEventListener('scroll', function () {
+      setTotalScrolledItems(function (state) {
+        return offset > 0 ? ++state : --state;
+      });
+      setScrollLeft(leftOffset + offset);
+      setTimeout(function () {
+        return setScrollBlocked(false);
+      }, 200);
+    }, {
+      once: true
     });
-    setScrollLeft(leftOffset + offset);
     wrapperInner === null || wrapperInner === void 0 ? void 0 : wrapperInner.scrollBy({
       left: offset,
       behavior: 'smooth'
@@ -133,6 +192,7 @@ var NavLine = function NavLine(_ref) {
   var scrollToPrevItem = function scrollToPrevItem() {
     var _prevItem$ref, _prevItem$ref$current;
 
+    if (isScrollBlocked) return false;
     var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
     var navLineUnvisibleItems = getUnvisibleLeftSideNavLineItems();
 
@@ -161,8 +221,23 @@ var NavLine = function NavLine(_ref) {
     var secondVisibleItemProps = secondVisibleItem === null || secondVisibleItem === void 0 ? void 0 : (_secondVisibleItem$re = secondVisibleItem.ref) === null || _secondVisibleItem$re === void 0 ? void 0 : (_secondVisibleItem$re2 = _secondVisibleItem$re.current) === null || _secondVisibleItem$re2 === void 0 ? void 0 : _secondVisibleItem$re2.getBoundingClientRect();
     var scrollOffset = secondVisibleItemProps.x - wrapperInnerProps.x;
     scroll(scrollOffset);
-  }; // Count Total NavLine Items Width
+  };
+
+  var onWheel = function onWheel(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var deltaY = e.deltaY;
+    deltaY > 0 ? pushScrollTask('next') : pushScrollTask('prev');
+  };
 
+  (0, _react.useEffect)(function () {
+    var _wrapperRef$current;
+
+    if (!(wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current)) return false;
+    wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener("mousewheel", onWheel, {
+      passive: false
+    });
+  }, [wrapperRef]); // Count Total NavLine Items Width
 
   (0, _react.useEffect)(function () {
     var _navLineItems$0$ref$c, _navLineItems$, _navLineItems$$ref, _navLineItems$$ref$cu;
@@ -186,9 +261,9 @@ var NavLine = function NavLine(_ref) {
   }, [navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.length]); // Count Wrapper Width
 
   (0, _react.useEffect)(function () {
-    var _wrapperRef$current$g, _wrapperRef$current, _wrapperRef$current$g2;
+    var _wrapperRef$current$g, _wrapperRef$current2, _wrapperRef$current2$;
 
-    setWrapperRefWidth((_wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : (_wrapperRef$current$g2 = _wrapperRef$current.getBoundingClientRect()) === null || _wrapperRef$current$g2 === void 0 ? void 0 : _wrapperRef$current$g2.width) !== null && _wrapperRef$current$g !== void 0 ? _wrapperRef$current$g : 0);
+    setWrapperRefWidth((_wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : (_wrapperRef$current2$ = _wrapperRef$current2.getBoundingClientRect()) === null || _wrapperRef$current2$ === void 0 ? void 0 : _wrapperRef$current2$.width) !== null && _wrapperRef$current$g !== void 0 ? _wrapperRef$current$g : 0);
   }, [wrapperRef]); //Init NavLine Items
 
   (0, _react.useEffect)(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "",
   "main": "dist/index.js",
   "files": [