@rpg-engine/long-bow 0.5.9 → 0.5.10

package/dist/long-bow.cjs.development.js

@@ -15580,6 +15580,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     isDepotSystem = _ref.isDepotSystem,
     onPositionChangeEnd = _ref.onPositionChangeEnd,
     onPositionChangeStart = _ref.onPositionChangeStart;
+  var MAX_SLOTS_PER_PAGE = 20;
   var _useState = React.useState({
       isOpen: false,
       maxQuantity: 1,
@@ -15590,6 +15591,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   var _useState2 = React.useState(-1),
     settingShortcutIndex = _useState2[0],
     setSettingShortcutIndex = _useState2[1];
+  var _useState3 = React.useState(1),
+    currentPage = _useState3[0],
+    setCurrentPage = _useState3[1];
+  var totalPages = Math.ceil(itemContainer.slotQty / MAX_SLOTS_PER_PAGE);
   var handleSetShortcut = function handleSetShortcut(item, index) {
     if (item.type === shared.ItemType.Consumable || item.type === shared.ItemType.Tool) {
       setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
@@ -15597,7 +15602,9 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   };
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
-    for (var i = 0; i < itemContainer.slotQty; i++) {
+    var start = (currentPage - 1) * MAX_SLOTS_PER_PAGE;
+    var end = start + MAX_SLOTS_PER_PAGE;
+    for (var i = start; i < end && i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
       slots.push(React__default.createElement(ItemSlot, {
         isContextMenuDisabled: disableContextMenu,
@@ -15649,6 +15656,16 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     }
     return slots;
   };
+  var goToNextPage = function goToNextPage() {
+    setCurrentPage(function (current) {
+      return Math.min(current + 1, totalPages);
+    });
+  };
+  var goToPreviousPage = function goToPreviousPage() {
+    setCurrentPage(function (current) {
+      return Math.max(current - 1, 1);
+    });
+  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
@@ -15665,7 +15682,23 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React__default.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ModalPortal, null, React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
+  }, onRenderSlots()), totalPages > 1 && React__default.createElement(ArrowContainer$1, null, React__default.createElement(SelectArrow, {
+    className: 'arrow .arrow-up',
+    direction: "left",
+    onPointerDown: function onPointerDown() {
+      if (currentPage > 1) {
+        goToPreviousPage();
+      }
+    }
+  }), React__default.createElement(SelectArrow, {
+    className: 'arrow .arrow-down',
+    direction: "right",
+    onPointerDown: function onPointerDown() {
+      if (currentPage < totalPages) {
+        goToNextPage();
+      }
+    }
+  }))), quantitySelect.isOpen && React__default.createElement(ModalPortal, null, React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
     onConfirm: function onConfirm(quantity) {
       quantitySelect.callback(quantity);
@@ -15693,6 +15726,10 @@ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__QuantitySelectorContainer",
   componentId: "sc-15y5p9l-1"
 })(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
+var ArrowContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemContainer__ArrowContainer",
+  componentId: "sc-15y5p9l-2"
+})(["margin-top:10px;margin-bottom:30px;span:first-child{margin-left:20px;}span:last-child{margin-right:20px;}"]);
 
 var LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,