intelicoreact 0.1.87 → 0.1.88

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

@@ -61,20 +61,27 @@ var NavLine = function NavLine(_ref) {
 
   var _useState5 = (0, _react.useState)(0),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      navLineItemsTotalWidth = _useState6[0],
-      setNavLineItemsTotalWidth = _useState6[1];
+      totalScrolledItems = _useState6[0],
+      setTotalScrolledItems = _useState6[1];
 
   var _useState7 = (0, _react.useState)(0),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      wrapperInnerScrollLeft = _useState8[0],
-      setWrapperInnerScrollLeft = _useState8[1];
+      scrollLeft = _useState8[0],
+      setScrollLeft = _useState8[1];
 
   var _useState9 = (0, _react.useState)(0),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      navLineFirstItemOffset = _useState10[0],
-      setNavLineFirstItemOffset = _useState10[1];
+      navLineItemsTotalWidth = _useState10[0],
+      setNavLineItemsTotalWidth = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(0),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      navLineFirstItemOffset = _useState12[0],
+      setNavLineFirstItemOffset = _useState12[1];
 
   var getVisibleNavLineItems = function getVisibleNavLineItems() {
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
     return navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.filter(function (item) {
       var ref = item.ref,
           label = item.label;
@@ -84,11 +91,13 @@ var NavLine = function NavLine(_ref) {
       var _element$getBoundingC = element.getBoundingClientRect(),
           x = _element$getBoundingC.x;
 
-      return x >= 0 && x <= wrapperRefWidth;
+      return x - wrapperInnerProps.x >= 0 && x - wrapperInnerProps.x <= wrapperRefWidth;
     });
   };
 
   var getUnvisibleLeftSideNavLineItems = function getUnvisibleLeftSideNavLineItems() {
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
     return navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.filter(function (item) {
       var ref = item.ref,
           label = item.label;
@@ -98,15 +107,19 @@ var NavLine = function NavLine(_ref) {
       var _element$getBoundingC2 = element.getBoundingClientRect(),
           x = _element$getBoundingC2.x;
 
-      return x <= 0;
+      return x - wrapperInnerProps.x <= 0;
     });
   };
 
   var scroll = function scroll() {
     var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
     var leftOffset = wrapperInner.scrollLeft;
-    setWrapperInnerScrollLeft(leftOffset + offset - navLineFirstItemOffset / 2);
+    setTotalScrolledItems(function (state) {
+      return offset > 0 ? ++state : --state;
+    });
+    setScrollLeft(leftOffset + offset);
     wrapperInner === null || wrapperInner === void 0 ? void 0 : wrapperInner.scrollBy({
       left: offset,
       behavior: 'smooth'
@@ -116,29 +129,33 @@ var NavLine = function NavLine(_ref) {
   var scrollToPrevItem = function scrollToPrevItem() {
     var _prevItem$ref, _prevItem$ref$current;
 
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
     var navLineUnvisibleItems = getUnvisibleLeftSideNavLineItems();
 
     var _navLineUnvisibleItem = navLineUnvisibleItems.reverse(),
         _navLineUnvisibleItem2 = (0, _slicedToArray2.default)(_navLineUnvisibleItem, 1),
         prevItem = _navLineUnvisibleItem2[0];
 
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
     var prevItemProps = prevItem === null || prevItem === void 0 ? void 0 : (_prevItem$ref = prevItem.ref) === null || _prevItem$ref === void 0 ? void 0 : (_prevItem$ref$current = _prevItem$ref.current) === null || _prevItem$ref$current === void 0 ? void 0 : _prevItem$ref$current.getBoundingClientRect();
-    var scrollOffset = (prevItemProps === null || prevItemProps === void 0 ? void 0 : prevItemProps.x) - navLineFirstItemOffset / 2;
+    var scrollOffset = (prevItemProps === null || prevItemProps === void 0 ? void 0 : prevItemProps.x) - (wrapperInnerProps === null || wrapperInnerProps === void 0 ? void 0 : wrapperInnerProps.x);
     scroll(scrollOffset);
   };
 
   var scrollToNextItem = function scrollToNextItem() {
     var _firstVisibleItem$ref, _firstVisibleItem$ref2, _secondVisibleItem$re, _secondVisibleItem$re2;
 
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
     var navLineVisibleItems = getVisibleNavLineItems();
 
     var _navLineVisibleItems = (0, _slicedToArray2.default)(navLineVisibleItems, 2),
         firstVisibleItem = _navLineVisibleItems[0],
         secondVisibleItem = _navLineVisibleItems[1];
 
+    var wrapperInnerProps = wrapperInner.getBoundingClientRect();
     var firstVisibleItemProps = firstVisibleItem === null || firstVisibleItem === void 0 ? void 0 : (_firstVisibleItem$ref = firstVisibleItem.ref) === null || _firstVisibleItem$ref === void 0 ? void 0 : (_firstVisibleItem$ref2 = _firstVisibleItem$ref.current) === null || _firstVisibleItem$ref2 === void 0 ? void 0 : _firstVisibleItem$ref2.getBoundingClientRect();
     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 - navLineFirstItemOffset / 2;
+    var scrollOffset = secondVisibleItemProps.x - wrapperInnerProps.x;
     scroll(scrollOffset);
   }; // Count Total NavLine Items Width
 
@@ -186,11 +203,10 @@ var NavLine = function NavLine(_ref) {
       'nav-line--scroll-mode': scrollMode
     }, className),
     ref: scrollMode ? wrapperRef : null
-  }, scrollMode && wrapperInnerScrollLeft > 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "nav-line--simple__arrow nav-line--simple__arrow--prev"
-  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronLeft, {
+  }, scrollMode && totalScrolledItems > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line--simple__arrow nav-line--simple__arrow--prev",
     onClick: scrollToPrevItem
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronLeft, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner'),
     ref: scrollMode ? wrapperInnerRef : null
   }, navLineItems.map(function (item) {
@@ -245,11 +261,10 @@ var NavLine = function NavLine(_ref) {
     }, item.label), item.count !== undefined ? /*#__PURE__*/_react.default.createElement("span", {
       className: "nav-line--count ml5"
     }, "(", item.count || 0, ")") : null));
-  })), scrollMode && navLineItemsTotalWidth > wrapperRefWidth && wrapperRefWidth + wrapperInnerScrollLeft < navLineItemsTotalWidth && /*#__PURE__*/_react.default.createElement("div", {
-    className: "nav-line--simple__arrow nav-line--simple__arrow--next"
-  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronRight, {
+  })), scrollMode && navLineItemsTotalWidth > wrapperRefWidth && scrollLeft + wrapperRefWidth < navLineItemsTotalWidth && /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line--simple__arrow nav-line--simple__arrow--next",
     onClick: scrollToNextItem
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronRight, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "nav-line__body"
   }, children));
 };

package/dist/Atomic/UI/NavLine/NavLine.scss

@@ -55,15 +55,13 @@
     margin-right: -32px;
     background-color: #f7fafc;
     position: relative;
-    bottom: -19px;
+    bottom: 0px;
     &:empty {
       padding: 0 32px;
     }
   }
 
   &--scroll-mode{
-    display: flex;
-    align-items: center;
     position: relative;
 
     .nav-line--simple__inner{
@@ -74,7 +72,6 @@
     .nav-line--simple__item {
       flex-wrap: nowrap;
       white-space: nowrap;
-      margin-bottom: 0;
     }
   }
 }
@@ -126,6 +123,7 @@
       opacity: 100%;
 
       &::after {
+        left: 0;
         width: 100%;
         opacity: 1;
       }
@@ -137,12 +135,13 @@
     display: flex;
     align-items: center;
     height: 39px;
-    width: 16px;
+    width: 36px;
     background: #fff;
     color:#424242;
     box-sizing: border-box;
     transition: all 0.5s;
     z-index: 2;
+    justify-content: center;
 
     &:hover {
       cursor: pointer;
@@ -152,7 +151,7 @@
       left: 0;
       top: 0;
       border-radius: 8px 0 0 8px;
-      transform: translate(-75%, -2px);
+      transform: translate(-100%, -2px);
       box-shadow: 10px 0px 10px -5px #dddddd;
     }
 
@@ -160,12 +159,13 @@
       right: 0;
       top: 0;
       border-radius: 0 8px 8px 0;
-      transform: translate(75%, -2px);
+      transform: translate(100%, -2px);
       box-shadow: -10px 0px 10px -5px #dddddd;
     }
 
     svg {
-      width: 36px;
+      width: 24px;
+      height: 24px;
     }
   }
 

package/dist/Functions/utils.js

@@ -151,7 +151,7 @@ var changeMeta = function changeMeta(key) {
       return i.key === key;
     });
     document.title = (_item$title = item === null || item === void 0 ? void 0 : item.title) !== null && _item$title !== void 0 ? _item$title : defaultMeta === null || defaultMeta === void 0 ? void 0 : defaultMeta.title;
-    document.description = (_item$description = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description !== void 0 ? _item$description : defaultMeta === null || defaultMeta === void 0 ? void 0 : defaultMeta.description;
+    document.querySelector('meta[name="description"]').setAttribute("content", (_item$description = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description !== void 0 ? _item$description : defaultMeta === null || defaultMeta === void 0 ? void 0 : defaultMeta.description);
   }
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.87",
-  "description": "Nav Line Fixes",
+  "version": "0.1.88",
+  "description": "feature/FIN-1814 | Fix Bugs, correct changeMeta func ",
   "main": "dist/index.js",
   "files": [
     "dist/*",