@rpg-engine/long-bow 0.6.66 → 0.6.68

package/dist/components/Friends/FriendList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ICharacter } from '@rpg-engine/shared';
 export declare type IFriend = Pick<ICharacter, 'name' | '_id' | 'isOnline'>;
 interface IFriendListProps {
@@ -16,5 +16,5 @@ interface IFriendListProps {
     onAcceptRequest: (character: IFriend) => void;
     onRejectRequest: (character: IFriend) => void;
 }
-export declare const FriendList: (props: IFriendListProps) => JSX.Element;
+export declare const FriendList: React.FC<IFriendListProps>;
 export {};

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,5 @@
+export declare const Table: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const TableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const TableHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const TableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const ActionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/index.d.ts

@@ -52,4 +52,5 @@ export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
 export * from './components/Tutorial/TutorialStepper';
 export * from './components/typography/DynamicText';
+export * from './components/Table/Table';
 export { useEventListener } from './hooks/useEventListener';

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

@@ -28787,6 +28787,27 @@ var EquipmentColumn = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-1wuddg2-1"
 })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
+var Table = /*#__PURE__*/styled__default.table.withConfig({
+  displayName: "Table",
+  componentId: "sc-1c24pcj-0"
+})(["width:100%;border-collapse:collapse;margin-top:1rem;"]);
+var TableRow = /*#__PURE__*/styled__default.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__default.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__default.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__default.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,
@@ -28877,32 +28898,22 @@ var AcceptRejectButtonContainer = /*#__PURE__*/styled__default.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;
   var _useState = React.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__default.createElement(DraggableContainer, {
-    type: exports.RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "800px",
-    cancelDrag: "#FriendListContainer, .rpgui-dropdown-imp, input, .empty-slot, button",
-    scale: scale
-  }, isAddFriendUI ? React__default.createElement(SearchFriend, {
+  return React__default.createElement(ListWrapper, null, isAddFriendUI ? React__default.createElement(SearchFriend, {
     searchedCharacters: searchedCharacters,
     onSendFriendRequest: onSendFriendRequest,
     onAcceptRequest: onAcceptRequest,
@@ -28911,58 +28922,58 @@ var FriendList = function FriendList(props) {
     onSearch: onSearch,
     onBlur: onBlur,
     onFocus: onFocus
-  }) : React__default.createElement(ListContainer$2, null, React__default.createElement(FriendsTitle, null, "Friends"), friends.map(function (friend) {
-    return React__default.createElement(ListElement$4, {
+  }) : React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollableArea, null, React__default.createElement(Table, null, React__default.createElement("thead", null, React__default.createElement(TableRow, null, React__default.createElement(TableHeader, null, "Online"), React__default.createElement(TableHeader, null, "Name"), React__default.createElement(TableHeader, null, "Actions"))), React__default.createElement("tbody", null, friends.map(function (friend) {
+    return React__default.createElement(TableRow, {
       key: friend._id
-    }, React__default.createElement("div", null, React__default.createElement(IsOnlineBadge, {
+    }, React__default.createElement(TableCell, null, React__default.createElement(IsOnlineBadge, {
       "$isOnline": friend.isOnline
-    }), friend.name), React__default.createElement(MessageAndDeleteContainer, null, React__default.createElement(Button, {
-      buttonType: exports.ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
+    })), React__default.createElement(TableCell, null, friend.name), React__default.createElement(TableCell, null, React__default.createElement(ActionButtons, null, React__default.createElement(UserAction, {
+      color: uiColors.yellow,
+      onClick: function onClick() {
         return onOpenPrivateMessage(friend);
       }
-    }, "Message"), React__default.createElement(Button, {
-      buttonType: exports.ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
+    }, "Chat"), React__default.createElement(UserAction, {
+      color: uiColors.red,
+      onClick: function onClick() {
         return onRemoveFriend(friend);
       }
-    }, "Remove")));
-  })), React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
+    }, "Remove"))));
+  }))))), React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
     buttonType: exports.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__default.h2.withConfig({
-  displayName: "FriendList__FriendsTitle",
+// Styled components for FriendList UI
+var ListWrapper = /*#__PURE__*/styled__default.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__default.ul.withConfig({
-  displayName: "FriendList__ListContainer",
+})(["margin-top:1rem;max-height:350px;display:flex;flex-direction:column;"]);
+var ScrollableArea = /*#__PURE__*/styled__default.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__default.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__default.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__default.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__default.div.withConfig({
-  displayName: "FriendList__MessageAndDeleteContainer",
-  componentId: "sc-3jf9vt-5"
-})(["display:flex;justify-content:space-between;gap:0.5rem;"]);
+var UserAction = /*#__PURE__*/styled__default.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__*/shared.isMobileOrTablet();
 
@@ -30475,7 +30486,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$5, {
+    return React__default.createElement(ListElement$4, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -30491,7 +30502,7 @@ var Container$l = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$5 = /*#__PURE__*/styled__default.li.withConfig({
+var ListElement$4 = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -33428,6 +33439,7 @@ var LessonContainer = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
+exports.ActionButtons = ActionButtons;
 exports.AsyncDropdown = AsyncDropdown;
 exports.Button = Button;
 exports.CharacterSelection = CharacterSelection;
@@ -33482,6 +33494,10 @@ exports.Spellbook = Spellbook;
 exports.SpriteFromAtlas = SpriteFromAtlas;
 exports.Stepper = Stepper;
 exports.TabBody = TabBody;
+exports.Table = Table;
+exports.TableCell = TableCell;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
 exports.TableTab = TableTab;
 exports.TabsContainer = TabsContainer;
 exports.TextArea = TextArea;