@rpg-engine/long-bow 0.5.8 → 0.5.10

package/dist/long-bow.esm.js

@@ -15578,6 +15578,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     isDepotSystem = _ref.isDepotSystem,
     onPositionChangeEnd = _ref.onPositionChangeEnd,
     onPositionChangeStart = _ref.onPositionChangeStart;
+  var MAX_SLOTS_PER_PAGE = 20;
   var _useState = useState({
       isOpen: false,
       maxQuantity: 1,
@@ -15588,6 +15589,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   var _useState2 = useState(-1),
     settingShortcutIndex = _useState2[0],
     setSettingShortcutIndex = _useState2[1];
+  var _useState3 = 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 === ItemType.Consumable || item.type === ItemType.Tool) {
       setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
@@ -15595,7 +15600,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.createElement(ItemSlot, {
         isContextMenuDisabled: disableContextMenu,
@@ -15647,6 +15654,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.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
@@ -15663,7 +15680,23 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+  }, onRenderSlots()), totalPages > 1 && React.createElement(ArrowContainer$1, null, React.createElement(SelectArrow, {
+    className: 'arrow .arrow-up',
+    direction: "left",
+    onPointerDown: function onPointerDown() {
+      if (currentPage > 1) {
+        goToPreviousPage();
+      }
+    }
+  }), React.createElement(SelectArrow, {
+    className: 'arrow .arrow-down',
+    direction: "right",
+    onPointerDown: function onPointerDown() {
+      if (currentPage < totalPages) {
+        goToNextPage();
+      }
+    }
+  }))), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
     onConfirm: function onConfirm(quantity) {
       quantitySelect.callback(quantity);
@@ -15691,6 +15724,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,
@@ -15738,33 +15775,35 @@ var TableRowValue = /*#__PURE__*/styled.td.withConfig({
   componentId: "sc-kk017f-1"
 })(["padding:0 20px;"]);
 
-var rankTypeOptions = /*#__PURE__*/['Level', 'Class', 'Skill'].map(function (itemType, index) {
-  return {
-    id: index + 1,
-    value: itemType,
-    option: itemType
-  };
-});
-var classTypeOptions = /*#__PURE__*/Object.keys(CharacterClass).map(function (itemType, index) {
-  return {
-    id: index + 1,
-    value: itemType,
-    option: itemType
-  };
-});
 var Leaderboard = function Leaderboard(props) {
   var items = props.items,
     onChangeRankType = props.onChangeRankType,
     onChangeClassType = props.onChangeClassType,
     rankType = props.rankType,
-    skills = props.skills,
-    onChangeSkillType = props.onChangeSkillType;
+    skillOptions = props.skillOptions,
+    onChangeSkillType = props.onChangeSkillType,
+    classOptions = props.classOptions,
+    rankOptions = props.rankOptions;
   var itemsContainer = useRef(null);
   useEffect(function () {
     var _itemsContainer$curre;
     (_itemsContainer$curre = itemsContainer.current) == null ? void 0 : _itemsContainer$curre.scrollTo(0, 0);
   }, []);
-  var skillTypeOptions = skills.map(function (itemType, index) {
+  var rankTypeOptions = rankOptions.map(function (itemType, index) {
+    return {
+      id: index + 1,
+      value: itemType,
+      option: itemType
+    };
+  });
+  var skillTypeOptions = skillOptions.map(function (itemType, index) {
+    return {
+      id: index + 1,
+      value: itemType,
+      option: itemType
+    };
+  });
+  var classTypeOptions = classOptions.map(function (itemType, index) {
     return {
       id: index + 1,
       value: itemType,