@livetiles/reach-components-react 0.4.0-preview.225 → 0.4.0-preview.226

package/index.esm2.js

@@ -87469,9 +87469,9 @@ var AuthenticationContextProvider = function AuthenticationContextProvider(_a) {
   }), void 0);
 };
 
-var version$1 = "0.4.0-preview.225";
-var buildId = "98680";
-var commitId = "be8e899c8ca58314f4e81278a19e5a941f5463ba";
+var version$1 = "0.4.0-preview.226";
+var buildId = "98723";
+var commitId = "d4ffc6f3cefd0299aae5b9ab8b63fad6ff105570";
 var isCustomerBuild = false;
 var buildInfo = {
 	version: version$1,
@@ -133982,63 +133982,43 @@ var HeroPaging = function HeroPaging(_a) {
       goToSlide = _a.goToSlide,
       currentSlide = _a.currentSlide,
       frameWidth = _a.frameWidth,
-      slideCount = _a.slideCount,
       autoplay = _a.autoplay,
       className = _a.className;
   var user = useCurrentUserContext().user;
   var formatMessage = useIntl().formatMessage;
   var palette = useContext(ThemeContext$1).theme.palette;
+  var containerWidth = frameWidth - 60; // margins are extracted
 
-  var _b = useState$2(false),
-      showArrows = _b[0],
-      setShowArrows = _b[1];
-
-  var _c = useState$2(0),
-      startIndex = _c[0],
-      setStartIndex = _c[1];
+  var maxVisibleItems = Math.floor(containerWidth / 150); // 150 - min-width + gap
 
-  var _d = useState$2(0),
-      visibleItemsLength = _d[0],
-      setVisibleItemsLength = _d[1];
+  var hasOverflow = items.length > maxVisibleItems;
+  var visibleItemsCount = hasOverflow ? maxVisibleItems : items.length;
+  var showArrows = hasOverflow;
 
-  useEffect$1(function () {
-    var containerWidth = frameWidth - 60; // margins are extracted
-
-    var maxNumberOfItems = Math.floor(containerWidth / 150); // 150 - min-width + gap
+  var _b = useState$2(0),
+      startIndex = _b[0],
+      setStartIndex = _b[1]; // reset the active slide - ensure the first slide is active when resizing
 
-    setVisibleItemsLength(maxNumberOfItems);
-    setShowArrows(maxNumberOfItems < slideCount); // reset the active slide - ensure the first slide is active when resizing
 
-    reset(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect$1(function () {
+    return showItemsStartingAtIndex(0);
   }, [frameWidth]);
   useEffect$1(function () {
     if (!autoplay || !showArrows) {
       return;
-    } // ensure first paging button is marked as active when first slide becomes active again
-
+    } // update the visible paging buttons when currentSlide's paging button is outside the visible area
 
-    if (currentSlide === 0 && startIndex > 0) {
-      reset();
-      return;
-    } // update the visible paging buttons when currenSlide has the corresponding paging button outside of the visible area
 
-
-    if (currentSlide === startIndex + visibleItemsLength) {
-      handleVisiblePagingItems(startIndex + visibleItemsLength);
+    if (currentSlide === startIndex + visibleItemsCount) {
+      showItemsStartingAtIndex(startIndex + visibleItemsCount);
     }
-  }, [currentSlide, autoplay, showArrows]);
-  var pagingItems = items.map(function (i) {
-    return {
-      title: getTitle(i.item, user, formatMessage),
-      id: i.item.id
-    };
-  });
+  }, [currentSlide, autoplay]);
   var pagingColor = items[currentSlide].item.bannerInfo ? palette.white : palette.black;
   var currentSlideId = items[currentSlide].item.id;
   return jsxs(PagingHost, __assign$g({
     className: className
   }, {
-    children: [showArrows && startIndex >= visibleItemsLength && jsx$1(PagingArrow, {
+    children: [showArrows && jsx$1(PagingArrow, {
       iconProps: {
         iconName: 'ChevronLeft',
         style: {
@@ -134046,24 +134026,23 @@ var HeroPaging = function HeroPaging(_a) {
         }
       },
       onClick: function () {
-        return handleVisiblePagingItems(startIndex - visibleItemsLength);
+        return showItemsStartingAtIndex(startIndex - visibleItemsCount);
       },
       color: pagingColor,
       "data-paging-back": true
     }, void 0), jsx$1(Paging, {
-      children: pagingItems.map(function (item, index) {
+      children: getItems().map(function (item) {
         var isActive = currentSlideId === item.id;
-        var isVisible = index >= startIndex && index < startIndex + visibleItemsLength;
         return jsx$1(PagingItem, __assign$g({
           className: classNames({
             'paging-item--active': isActive,
-            'paging-item--visible': isVisible
+            'paging-item--visible': true
           }),
-          visibleItemsLength: showArrows ? visibleItemsLength : null
+          visibleItemsLength: showArrows ? visibleItemsCount : null
         }, {
           children: jsx$1(PagingButton, __assign$g({
             onClick: function () {
-              return goToSlide(index);
+              return goToSlide(item.allItemsIndex);
             },
             color: pagingColor
           }, {
@@ -134071,7 +134050,7 @@ var HeroPaging = function HeroPaging(_a) {
           }), void 0)
         }), item.id);
       })
-    }, void 0), showArrows && startIndex < slideCount - visibleItemsLength && jsx$1(PagingArrow, {
+    }, void 0), showArrows && jsx$1(PagingArrow, {
       iconProps: {
         iconName: 'ChevronRight',
         style: {
@@ -134079,23 +134058,41 @@ var HeroPaging = function HeroPaging(_a) {
         }
       },
       onClick: function () {
-        return handleVisiblePagingItems(startIndex + visibleItemsLength);
+        return showItemsStartingAtIndex(startIndex + visibleItemsCount);
       },
       color: pagingColor,
       "data-paging-next": true
     }, void 0)]
   }), void 0);
 
-  function handleVisiblePagingItems(index) {
-    setStartIndex(index);
-    goToSlide(index);
+  function showItemsStartingAtIndex(newFirstVisibleItemIndex) {
+    setStartIndex(newFirstVisibleItemIndex);
+    goToSlide(getWrappedIndex(newFirstVisibleItemIndex, items.length));
   }
 
-  function reset() {
-    handleVisiblePagingItems(0);
+  function getItems() {
+    var displayedItems = [];
+
+    for (var count = 0; count < visibleItemsCount; count++) {
+      var itemsIndex = getWrappedIndex(startIndex + count, items.length);
+      var heroItem = items[itemsIndex];
+      displayedItems.push({
+        title: getTitle(heroItem.item, user, formatMessage),
+        id: heroItem.item.id,
+        allItemsIndex: itemsIndex
+      });
+    }
+
+    return displayedItems;
   }
 };
 
+function getWrappedIndex(index, max) {
+  // returns a number which is always between 0 and `max`, mimicking a circular array
+  // the two-part modulo accounts for negative numbers as well as positive.
+  return (index % max + max) % max;
+}
+
 var PagingHost = _styled.div.withConfig({
   displayName: "HeroPaging__PagingHost",
   componentId: "sc-1y3j8qb-0"

package/index.umd.js

@@ -87327,9 +87327,9 @@
 	  }), void 0);
 	};
 
-	var version$1 = "0.4.0-preview.225";
-	var buildId = "98680";
-	var commitId = "be8e899c8ca58314f4e81278a19e5a941f5463ba";
+	var version$1 = "0.4.0-preview.226";
+	var buildId = "98723";
+	var commitId = "d4ffc6f3cefd0299aae5b9ab8b63fad6ff105570";
 	var isCustomerBuild = false;
 	var buildInfo = {
 		version: version$1,
@@ -133856,63 +133856,43 @@
 	      goToSlide = _a.goToSlide,
 	      currentSlide = _a.currentSlide,
 	      frameWidth = _a.frameWidth,
-	      slideCount = _a.slideCount,
 	      autoplay = _a.autoplay,
 	      className = _a.className;
 	  var user = useCurrentUserContext().user;
 	  var formatMessage = useIntl().formatMessage;
 	  var palette = React$d.useContext(ThemeContext$1).theme.palette;
+	  var containerWidth = frameWidth - 60; // margins are extracted
 
-	  var _b = React$d.useState(false),
-	      showArrows = _b[0],
-	      setShowArrows = _b[1];
-
-	  var _c = React$d.useState(0),
-	      startIndex = _c[0],
-	      setStartIndex = _c[1];
+	  var maxVisibleItems = Math.floor(containerWidth / 150); // 150 - min-width + gap
 
-	  var _d = React$d.useState(0),
-	      visibleItemsLength = _d[0],
-	      setVisibleItemsLength = _d[1];
+	  var hasOverflow = items.length > maxVisibleItems;
+	  var visibleItemsCount = hasOverflow ? maxVisibleItems : items.length;
+	  var showArrows = hasOverflow;
 
-	  React$d.useEffect(function () {
-	    var containerWidth = frameWidth - 60; // margins are extracted
-
-	    var maxNumberOfItems = Math.floor(containerWidth / 150); // 150 - min-width + gap
+	  var _b = React$d.useState(0),
+	      startIndex = _b[0],
+	      setStartIndex = _b[1]; // reset the active slide - ensure the first slide is active when resizing
 
-	    setVisibleItemsLength(maxNumberOfItems);
-	    setShowArrows(maxNumberOfItems < slideCount); // reset the active slide - ensure the first slide is active when resizing
 
-	    reset(); // eslint-disable-next-line react-hooks/exhaustive-deps
+	  React$d.useEffect(function () {
+	    return showItemsStartingAtIndex(0);
 	  }, [frameWidth]);
 	  React$d.useEffect(function () {
 	    if (!autoplay || !showArrows) {
 	      return;
-	    } // ensure first paging button is marked as active when first slide becomes active again
-
+	    } // update the visible paging buttons when currentSlide's paging button is outside the visible area
 
-	    if (currentSlide === 0 && startIndex > 0) {
-	      reset();
-	      return;
-	    } // update the visible paging buttons when currenSlide has the corresponding paging button outside of the visible area
 
-
-	    if (currentSlide === startIndex + visibleItemsLength) {
-	      handleVisiblePagingItems(startIndex + visibleItemsLength);
+	    if (currentSlide === startIndex + visibleItemsCount) {
+	      showItemsStartingAtIndex(startIndex + visibleItemsCount);
 	    }
-	  }, [currentSlide, autoplay, showArrows]);
-	  var pagingItems = items.map(function (i) {
-	    return {
-	      title: getTitle(i.item, user, formatMessage),
-	      id: i.item.id
-	    };
-	  });
+	  }, [currentSlide, autoplay]);
 	  var pagingColor = items[currentSlide].item.bannerInfo ? palette.white : palette.black;
 	  var currentSlideId = items[currentSlide].item.id;
 	  return jsxRuntime.jsxs(PagingHost, __assign$g({
 	    className: className
 	  }, {
-	    children: [showArrows && startIndex >= visibleItemsLength && jsxRuntime.jsx(PagingArrow, {
+	    children: [showArrows && jsxRuntime.jsx(PagingArrow, {
 	      iconProps: {
 	        iconName: 'ChevronLeft',
 	        style: {
@@ -133920,24 +133900,23 @@
 	        }
 	      },
 	      onClick: function () {
-	        return handleVisiblePagingItems(startIndex - visibleItemsLength);
+	        return showItemsStartingAtIndex(startIndex - visibleItemsCount);
 	      },
 	      color: pagingColor,
 	      "data-paging-back": true
 	    }, void 0), jsxRuntime.jsx(Paging, {
-	      children: pagingItems.map(function (item, index) {
+	      children: getItems().map(function (item) {
 	        var isActive = currentSlideId === item.id;
-	        var isVisible = index >= startIndex && index < startIndex + visibleItemsLength;
 	        return jsxRuntime.jsx(PagingItem, __assign$g({
 	          className: classNames({
 	            'paging-item--active': isActive,
-	            'paging-item--visible': isVisible
+	            'paging-item--visible': true
 	          }),
-	          visibleItemsLength: showArrows ? visibleItemsLength : null
+	          visibleItemsLength: showArrows ? visibleItemsCount : null
 	        }, {
 	          children: jsxRuntime.jsx(PagingButton, __assign$g({
 	            onClick: function () {
-	              return goToSlide(index);
+	              return goToSlide(item.allItemsIndex);
 	            },
 	            color: pagingColor
 	          }, {
@@ -133945,7 +133924,7 @@
 	          }), void 0)
 	        }), item.id);
 	      })
-	    }, void 0), showArrows && startIndex < slideCount - visibleItemsLength && jsxRuntime.jsx(PagingArrow, {
+	    }, void 0), showArrows && jsxRuntime.jsx(PagingArrow, {
 	      iconProps: {
 	        iconName: 'ChevronRight',
 	        style: {
@@ -133953,23 +133932,41 @@
 	        }
 	      },
 	      onClick: function () {
-	        return handleVisiblePagingItems(startIndex + visibleItemsLength);
+	        return showItemsStartingAtIndex(startIndex + visibleItemsCount);
 	      },
 	      color: pagingColor,
 	      "data-paging-next": true
 	    }, void 0)]
 	  }), void 0);
 
-	  function handleVisiblePagingItems(index) {
-	    setStartIndex(index);
-	    goToSlide(index);
+	  function showItemsStartingAtIndex(newFirstVisibleItemIndex) {
+	    setStartIndex(newFirstVisibleItemIndex);
+	    goToSlide(getWrappedIndex(newFirstVisibleItemIndex, items.length));
 	  }
 
-	  function reset() {
-	    handleVisiblePagingItems(0);
+	  function getItems() {
+	    var displayedItems = [];
+
+	    for (var count = 0; count < visibleItemsCount; count++) {
+	      var itemsIndex = getWrappedIndex(startIndex + count, items.length);
+	      var heroItem = items[itemsIndex];
+	      displayedItems.push({
+	        title: getTitle(heroItem.item, user, formatMessage),
+	        id: heroItem.item.id,
+	        allItemsIndex: itemsIndex
+	      });
+	    }
+
+	    return displayedItems;
 	  }
 	};
 
+	function getWrappedIndex(index, max) {
+	  // returns a number which is always between 0 and `max`, mimicking a circular array
+	  // the two-part modulo accounts for negative numbers as well as positive.
+	  return (index % max + max) % max;
+	}
+
 	var PagingHost = _styled__default["default"].div.withConfig({
 	  displayName: "HeroPaging__PagingHost",
 	  componentId: "sc-1y3j8qb-0"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livetiles/reach-components-react",
   "description": "Provides React components to consume LiveTiles Reach data",
-  "version": "0.4.0-preview.225",
+  "version": "0.4.0-preview.226",
   "peerDependencies": {
     "react": "^16.14.0 || ^17",
     "react-dom": "^16.14.0 || ^17",