@rpg-engine/long-bow 0.6.66 → 0.6.69

package/dist/long-bow.esm.js

@@ -28781,6 +28781,27 @@ var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1wuddg2-1"
 })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
+var Table = /*#__PURE__*/styled.table.withConfig({
+  displayName: "Table",
+  componentId: "sc-1c24pcj-0"
+})(["width:100%;border-collapse:collapse;margin-top:1rem;"]);
+var TableRow = /*#__PURE__*/styled.tr.withConfig({
+  displayName: "Table__TableRow",
+  componentId: "sc-1c24pcj-1"
+})(["&:nth-child(even){background-color:rgba(255,255,255,0.05) !important;}"]);
+var TableHeader = /*#__PURE__*/styled.th.withConfig({
+  displayName: "Table__TableHeader",
+  componentId: "sc-1c24pcj-2"
+})(["text-align:left;padding:0.5rem;color:", " !important;border-bottom:1px solid ", ";"], uiColors.yellow, uiColors.lightGray);
+var TableCell = /*#__PURE__*/styled.td.withConfig({
+  displayName: "Table__TableCell",
+  componentId: "sc-1c24pcj-3"
+})(["padding:0.5rem;color:", ";border-bottom:1px solid ", ";"], uiColors.white, uiColors.lightGray);
+var ActionButtons = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Table__ActionButtons",
+  componentId: "sc-1c24pcj-4"
+})(["display:flex;gap:10px;align-items:center;"]);
+
 var SearchFriend = function SearchFriend(props) {
   var searchedCharacters = props.searchedCharacters,
     friendRequests = props.friendRequests,
@@ -28871,32 +28892,31 @@ var AcceptRejectButtonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1lt1ols-5"
 })(["display:flex;justify-content:space-between;gap:0.5rem;"]);
 
-var FriendList = function FriendList(props) {
+var FriendList = function FriendList(_ref) {
+  var friends = _ref.friends,
+    friendRequests = _ref.friendRequests,
+    searchedCharacters = _ref.searchedCharacters,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onSearch = _ref.onSearch,
+    onAcceptRequest = _ref.onAcceptRequest,
+    onSendFriendRequest = _ref.onSendFriendRequest,
+    onRemoveFriend = _ref.onRemoveFriend,
+    onOpenPrivateMessage = _ref.onOpenPrivateMessage,
+    onRejectRequest = _ref.onRejectRequest,
+    onAddFriend = _ref.onAddFriend,
+    onBackFriendList = _ref.onBackFriendList;
   var _useState = useState(false),
     isAddFriendUI = _useState[0],
     setIsAddFriendUI = _useState[1];
-  var scale = props.scale,
-    friends = props.friends,
-    friendRequests = props.friendRequests,
-    searchedCharacters = props.searchedCharacters,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onClose = props.onClose,
-    onSearch = props.onSearch,
-    onAcceptRequest = props.onAcceptRequest,
-    onSendFriendRequest = props.onSendFriendRequest,
-    onRemoveFriend = props.onRemoveFriend,
-    onOpenPrivateMessage = props.onOpenPrivateMessage,
-    onRejectRequest = props.onRejectRequest;
-  return React.createElement(DraggableContainer, {
-    type: RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "800px",
-    cancelDrag: "#FriendListContainer, .rpgui-dropdown-imp, input, .empty-slot, button",
-    scale: scale
-  }, isAddFriendUI ? React.createElement(SearchFriend, {
+  useEffect(function () {
+    if (isAddFriendUI) {
+      onAddFriend == null ? void 0 : onAddFriend();
+    } else {
+      onBackFriendList == null ? void 0 : onBackFriendList();
+    }
+  }, [isAddFriendUI]);
+  return React.createElement(ListWrapper, null, isAddFriendUI ? React.createElement(SearchFriend, {
     searchedCharacters: searchedCharacters,
     onSendFriendRequest: onSendFriendRequest,
     onAcceptRequest: onAcceptRequest,
@@ -28905,58 +28925,58 @@ var FriendList = function FriendList(props) {
     onSearch: onSearch,
     onBlur: onBlur,
     onFocus: onFocus
-  }) : React.createElement(ListContainer$2, null, React.createElement(FriendsTitle, null, "Friends"), friends.map(function (friend) {
-    return React.createElement(ListElement$4, {
+  }) : React.createElement(React.Fragment, null, React.createElement(ScrollableArea, null, React.createElement(Table, null, React.createElement("thead", null, React.createElement(TableRow, null, React.createElement(TableHeader, null, "Online"), React.createElement(TableHeader, null, "Name"), React.createElement(TableHeader, null, "Actions"))), React.createElement("tbody", null, friends.map(function (friend) {
+    return React.createElement(TableRow, {
       key: friend._id
-    }, React.createElement("div", null, React.createElement(IsOnlineBadge, {
+    }, React.createElement(TableCell, null, React.createElement(IsOnlineBadge, {
       "$isOnline": friend.isOnline
-    }), friend.name), React.createElement(MessageAndDeleteContainer, null, React.createElement(Button, {
-      buttonType: ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
+    })), React.createElement(TableCell, null, friend.name), React.createElement(TableCell, null, React.createElement(ActionButtons, null, React.createElement(UserAction, {
+      color: uiColors.yellow,
+      onClick: function onClick() {
         return onOpenPrivateMessage(friend);
       }
-    }, "Message"), React.createElement(Button, {
-      buttonType: ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
+    }, "Chat"), React.createElement(UserAction, {
+      color: uiColors.red,
+      onClick: function onClick() {
         return onRemoveFriend(friend);
       }
-    }, "Remove")));
-  })), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
+    }, "Remove"))));
+  }))))), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onClick: function onClick() {
-      return setIsAddFriendUI(function (t) {
-        return !t;
+      return setIsAddFriendUI(function (prev) {
+        return !prev;
       });
     }
   }, isAddFriendUI ? 'Back' : 'Add New Friend')));
 };
-var FriendsTitle = /*#__PURE__*/styled.h2.withConfig({
-  displayName: "FriendList__FriendsTitle",
+// Styled components for FriendList UI
+var ListWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FriendList__ListWrapper",
   componentId: "sc-3jf9vt-0"
-})(["font-size:", ";margin:0;padding:0;text-align:center;"], uiFonts.size.medium);
-var ListContainer$2 = /*#__PURE__*/styled.ul.withConfig({
-  displayName: "FriendList__ListContainer",
+})(["margin-top:1rem;max-height:350px;display:flex;flex-direction:column;"]);
+var ScrollableArea = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FriendList__ScrollableArea",
   componentId: "sc-3jf9vt-1"
-})(["border:none;overflow-y:scroll;list-style:none;padding:0;width:100%;height:50vh;@media (max-width:768px){max-height:90wh;}"]);
-var ListElement$4 = /*#__PURE__*/styled.li.withConfig({
-  displayName: "FriendList__ListElement",
-  componentId: "sc-3jf9vt-2"
-})(["margin:0.5rem 0 !important;font-size:", ";padding:0.5rem 4px;display:flex;align-items:center;justify-content:space-between;border-radius:4px;& div{display:flex;align-items:center;}"], uiFonts.size.small);
+})(["overflow-y:auto;max-height:300px;"]);
 var IsOnlineBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "FriendList__IsOnlineBadge",
-  componentId: "sc-3jf9vt-3"
-})(["width:10px;height:10px;border-radius:50%;background-color:", ";margin-right:1rem;"], function (_ref) {
-  var $isOnline = _ref.$isOnline;
+  componentId: "sc-3jf9vt-2"
+})(["width:10px;height:10px;border-radius:50%;background-color:", ";margin-right:1rem;"], function (_ref2) {
+  var $isOnline = _ref2.$isOnline;
   return $isOnline ? uiColors.lightGreen : uiColors.red;
 });
 var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "FriendList__ButtonContainer",
-  componentId: "sc-3jf9vt-4"
+  componentId: "sc-3jf9vt-3"
 })(["display:flex;justify-content:center;align-items:center;width:100%;margin-top:1rem;"]);
-var MessageAndDeleteContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "FriendList__MessageAndDeleteContainer",
-  componentId: "sc-3jf9vt-5"
-})(["display:flex;justify-content:space-between;gap:0.5rem;"]);
+var UserAction = /*#__PURE__*/styled.span.withConfig({
+  displayName: "FriendList__UserAction",
+  componentId: "sc-3jf9vt-4"
+})(["color:", " !important;cursor:pointer;margin-right:0.5rem;&:hover{text-decoration:underline;}"], function (_ref3) {
+  var color = _ref3.color;
+  return color;
+});
 
 var IS_MOBILE_OR_TABLET = /*#__PURE__*/isMobileOrTablet();
 
@@ -30472,7 +30492,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React.createElement(ListElement$5, {
+    return React.createElement(ListElement$4, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -30488,7 +30508,7 @@ var Container$l = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$5 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$4 = /*#__PURE__*/styled.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -33426,5 +33446,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, TableTab, TabsContainer, TextArea, TimeWidget, TradingMenu, Truncate, TutorialStepper, _RPGUI, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TableTab, TabsContainer, TextArea, TimeWidget, TradingMenu, Truncate, TutorialStepper, _RPGUI, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map