@rpg-engine/long-bow 0.4.81 → 0.4.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (176) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/Marketplace/BuyPanel.d.ts +1 -0
  4. package/dist/components/Marketplace/ManagmentPanel.d.ts +1 -0
  5. package/dist/long-bow.cjs.development.js +1297 -1256
  6. package/dist/long-bow.cjs.development.js.map +1 -1
  7. package/dist/long-bow.cjs.production.min.js +1 -1
  8. package/dist/long-bow.cjs.production.min.js.map +1 -1
  9. package/dist/long-bow.esm.js +1187 -1146
  10. package/dist/long-bow.esm.js.map +1 -1
  11. package/package.json +100 -100
  12. package/src/components/Abstractions/ModalPortal.tsx +22 -22
  13. package/src/components/Abstractions/SlotsContainer.tsx +62 -62
  14. package/src/components/Arrow/SelectArrow.tsx +69 -69
  15. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  16. package/src/components/Arrow/img/arrow01-left.png +0 -0
  17. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  18. package/src/components/Arrow/img/arrow01-right.png +0 -0
  19. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  20. package/src/components/Arrow/img/arrow02-left.png +0 -0
  21. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  22. package/src/components/Arrow/img/arrow02-right.png +0 -0
  23. package/src/components/Button.tsx +40 -40
  24. package/src/components/Character/CharacterSelection.tsx +98 -98
  25. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  26. package/src/components/Chat/Chat.tsx +196 -196
  27. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  28. package/src/components/CheckButton.tsx +65 -65
  29. package/src/components/CircularController/CircularController.tsx +282 -282
  30. package/src/components/ConfirmModal.tsx +87 -87
  31. package/src/components/CraftBook/CraftBook.tsx +286 -286
  32. package/src/components/CraftBook/CraftingRecipe.tsx +161 -161
  33. package/src/components/CraftBook/MockItems.ts +101 -101
  34. package/src/components/DraggableContainer.tsx +183 -183
  35. package/src/components/Dropdown.tsx +114 -114
  36. package/src/components/DropdownSelectorContainer.tsx +42 -42
  37. package/src/components/Equipment/EquipmentSet.tsx +199 -199
  38. package/src/components/HistoryDialog.tsx +104 -104
  39. package/src/components/Input.tsx +15 -15
  40. package/src/components/InputRadio.tsx +41 -41
  41. package/src/components/Item/Cards/ItemInfo.tsx +298 -298
  42. package/src/components/Item/Cards/ItemInfoDisplay.tsx +135 -135
  43. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  44. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  45. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  46. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  47. package/src/components/Item/Inventory/ItemContainer.tsx +231 -231
  48. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  49. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  50. package/src/components/Item/Inventory/ItemSlot.tsx +595 -595
  51. package/src/components/Item/Inventory/itemContainerHelper.ts +175 -175
  52. package/src/components/ListMenu.tsx +63 -63
  53. package/src/components/Marketplace/BuyPanel.tsx +304 -296
  54. package/src/components/Marketplace/ManagmentPanel.tsx +255 -247
  55. package/src/components/Marketplace/Marketplace.tsx +106 -106
  56. package/src/components/Marketplace/MarketplaceRows.tsx +177 -161
  57. package/src/components/Marketplace/filters/index.tsx +67 -67
  58. package/src/components/Multitab/Tab.tsx +66 -66
  59. package/src/components/Multitab/TabBody.tsx +13 -13
  60. package/src/components/Multitab/TabsContainer.tsx +97 -97
  61. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  62. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  63. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  64. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  65. package/src/components/Pager.tsx +94 -94
  66. package/src/components/ProgressBar.tsx +102 -102
  67. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  68. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  69. package/src/components/QuestList.tsx +135 -135
  70. package/src/components/RPGUIContainer.tsx +47 -47
  71. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  72. package/src/components/RPGUIRoot.tsx +14 -14
  73. package/src/components/RadioButton.tsx +53 -53
  74. package/src/components/RadioInput/RadioButton.tsx +96 -96
  75. package/src/components/RadioInput/RadioInput.tsx +102 -102
  76. package/src/components/RadioInput/instruments.ts +15 -15
  77. package/src/components/RangeSlider.tsx +78 -78
  78. package/src/components/RelativeListMenu.tsx +90 -90
  79. package/src/components/ScrollList.tsx +79 -79
  80. package/src/components/Shortcuts/Shortcuts.tsx +193 -193
  81. package/src/components/Shortcuts/ShortcutsSetter.tsx +139 -139
  82. package/src/components/Shortcuts/SingleShortcut.ts +82 -82
  83. package/src/components/Shortcuts/useShortcutCooldown.ts +23 -23
  84. package/src/components/SimpleProgressBar.tsx +62 -62
  85. package/src/components/SkillProgressBar.tsx +206 -198
  86. package/src/components/SkillsContainer.tsx +213 -213
  87. package/src/components/Spellbook/Spell.tsx +235 -235
  88. package/src/components/Spellbook/Spellbook.tsx +145 -145
  89. package/src/components/Spellbook/cards/MobileSpellTooltip.tsx +137 -137
  90. package/src/components/Spellbook/cards/SpellInfo.tsx +134 -134
  91. package/src/components/Spellbook/cards/SpellInfoDisplay.tsx +31 -31
  92. package/src/components/Spellbook/cards/SpellInfoWrapper.tsx +48 -48
  93. package/src/components/Spellbook/cards/SpellTooltip.tsx +70 -70
  94. package/src/components/Spellbook/constants.ts +7 -7
  95. package/src/components/Spellbook/mockSpells.ts +84 -84
  96. package/src/components/StaticBook/StaticBook.tsx +103 -103
  97. package/src/components/TextArea.tsx +11 -11
  98. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  99. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  100. package/src/components/TradingMenu/TradingItemRow.tsx +199 -199
  101. package/src/components/TradingMenu/TradingMenu.tsx +219 -219
  102. package/src/components/TradingMenu/items.mock.ts +48 -48
  103. package/src/components/Truncate.tsx +25 -25
  104. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  105. package/src/components/shared/Column.tsx +16 -16
  106. package/src/components/shared/Ellipsis.tsx +76 -76
  107. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  108. package/src/components/typography/DynamicText.tsx +49 -49
  109. package/src/constants/uiColors.ts +20 -20
  110. package/src/constants/uiDevices.ts +3 -3
  111. package/src/constants/uiFonts.ts +12 -12
  112. package/src/hooks/useEventListener.ts +21 -21
  113. package/src/hooks/useOutsideAlerter.ts +25 -25
  114. package/src/index.tsx +42 -42
  115. package/src/libs/CastingTypeHelper.ts +7 -7
  116. package/src/libs/StringHelpers.ts +3 -3
  117. package/src/libs/itemCounter.ts +21 -21
  118. package/src/mocks/atlas/entities/entities.json +20215 -20215
  119. package/src/mocks/atlas/icons/icons.json +735 -735
  120. package/src/mocks/atlas/items/items.json +12086 -12086
  121. package/src/mocks/equipmentSet.mocks.ts +391 -391
  122. package/src/mocks/itemContainer.mocks.ts +605 -605
  123. package/src/mocks/skills.mocks.ts +130 -130
  124. package/src/stories/Arrow.stories.tsx +26 -26
  125. package/src/stories/Button.stories.tsx +36 -36
  126. package/src/stories/CharacterSelection.stories.tsx +44 -44
  127. package/src/stories/CharacterStatus.stories.tsx +29 -29
  128. package/src/stories/Chat.stories.tsx +187 -187
  129. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  130. package/src/stories/CheckButton.stories.tsx +48 -48
  131. package/src/stories/CircullarController.stories.tsx +37 -37
  132. package/src/stories/CraftBook.stories.tsx +42 -42
  133. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  134. package/src/stories/DraggableContainer.stories.tsx +28 -28
  135. package/src/stories/Dropdown.stories.tsx +46 -46
  136. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  137. package/src/stories/EquipmentSet.stories.tsx +65 -65
  138. package/src/stories/HistoryDialog.stories.tsx +61 -61
  139. package/src/stories/ItemContainer.stories.tsx +201 -201
  140. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  141. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  142. package/src/stories/ItemSelector.stories.tsx +77 -77
  143. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  144. package/src/stories/ListMenu.stories.tsx +56 -56
  145. package/src/stories/Marketplace.stories.tsx +57 -53
  146. package/src/stories/MarketplaceRows.stories.tsx +27 -27
  147. package/src/stories/Multitab.stories.tsx +51 -51
  148. package/src/stories/NPCDialog.stories.tsx +130 -130
  149. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  150. package/src/stories/ProgressBar.stories.tsx +24 -24
  151. package/src/stories/PropertySelect.stories.tsx +40 -40
  152. package/src/stories/QuestInfo.stories.tsx +107 -107
  153. package/src/stories/QuestList.stories.tsx +82 -82
  154. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  155. package/src/stories/RadioButton.stories.tsx +49 -49
  156. package/src/stories/RadioInput.stories.tsx +34 -34
  157. package/src/stories/RangeSlider.stories.tsx +64 -64
  158. package/src/stories/ScrollList.stories.tsx +85 -85
  159. package/src/stories/Shortcuts.stories.tsx +39 -39
  160. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  161. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  162. package/src/stories/SkillsContainer.stories.tsx +35 -35
  163. package/src/stories/SpellInfoDisplay.stories.tsx +27 -27
  164. package/src/stories/Spellbook.stories.tsx +104 -104
  165. package/src/stories/StaticBook.stories.tsx +32 -32
  166. package/src/stories/Text.stories.tsx +42 -42
  167. package/src/stories/TimeWidget.stories.tsx +27 -27
  168. package/src/stories/TradingMenu.stories.tsx +47 -47
  169. package/src/types/eventTypes.ts +4 -4
  170. package/src/types/index.d.ts +2 -2
  171. package/src/.DS_Store +0 -0
  172. package/src/components/.DS_Store +0 -0
  173. package/src/components/NPCDialog/.DS_Store +0 -0
  174. package/src/components/NPCDialog/img/.DS_Store +0 -0
  175. package/src/mocks/.DS_Store +0 -0
  176. package/src/mocks/atlas/.DS_Store +0 -0
@@ -1,175 +1,175 @@
1
- import {
2
- ActionsForEquipmentSet,
3
- ActionsForInventory,
4
- ActionsForLoot,
5
- ActionsForMapContainer,
6
- DepotSocketEvents,
7
- IItem,
8
- ItemContainerType,
9
- ItemSocketEvents,
10
- ItemSocketEventsDisplayLabels,
11
- ItemType,
12
- } from '@rpg-engine/shared';
13
-
14
- export interface IContextMenuItem {
15
- id: string;
16
- text: string;
17
- }
18
-
19
- const generateContextMenuListOptions = (actionsByTypeList: any) => {
20
- const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
21
- (action: string) => {
22
- return { id: action, text: ItemSocketEventsDisplayLabels[action] };
23
- }
24
- );
25
- return contextMenu;
26
- };
27
-
28
- export const generateContextMenu = (
29
- item: IItem,
30
- itemContainerType: ItemContainerType | null,
31
- isDepotSystem?: boolean
32
- ) => {
33
- let contextActionMenu: IContextMenuItem[] = [];
34
-
35
- if (itemContainerType === ItemContainerType.Inventory) {
36
- switch (item.type) {
37
- case ItemType.Weapon:
38
- case ItemType.Armor:
39
- case ItemType.Accessory:
40
- case ItemType.Jewelry:
41
- contextActionMenu = generateContextMenuListOptions(
42
- ActionsForInventory.Equipment
43
- );
44
- break;
45
- case ItemType.Container:
46
- contextActionMenu = generateContextMenuListOptions(
47
- ActionsForInventory.Container
48
- );
49
- break;
50
- case ItemType.Consumable:
51
- contextActionMenu = generateContextMenuListOptions(
52
- ActionsForInventory.Consumable
53
- );
54
- break;
55
- case ItemType.CraftingResource:
56
- contextActionMenu = generateContextMenuListOptions(
57
- ActionsForInventory.CraftingResource
58
- );
59
- break;
60
- case ItemType.Tool:
61
- contextActionMenu = generateContextMenuListOptions(
62
- ActionsForInventory.Tool
63
- );
64
- break;
65
-
66
- default:
67
- contextActionMenu = generateContextMenuListOptions(
68
- ActionsForInventory.Other
69
- );
70
- break;
71
- }
72
-
73
- if (isDepotSystem) {
74
- contextActionMenu.push({
75
- id: DepotSocketEvents.Deposit,
76
- text: 'Deposit',
77
- });
78
- }
79
- }
80
- if (itemContainerType === ItemContainerType.Equipment) {
81
- switch (item.type) {
82
- case ItemType.Container:
83
- contextActionMenu = generateContextMenuListOptions(
84
- ActionsForEquipmentSet.Container
85
- );
86
-
87
- break;
88
- default:
89
- contextActionMenu = generateContextMenuListOptions(
90
- ActionsForEquipmentSet.Equipment
91
- );
92
- }
93
- }
94
- if (itemContainerType === ItemContainerType.Loot) {
95
- switch (item.type) {
96
- case ItemType.Weapon:
97
- case ItemType.Armor:
98
- case ItemType.Accessory:
99
- case ItemType.Jewelry:
100
- contextActionMenu = generateContextMenuListOptions(
101
- ActionsForLoot.Equipment
102
- );
103
- break;
104
- case ItemType.Consumable:
105
- contextActionMenu = generateContextMenuListOptions(
106
- ActionsForLoot.Consumable
107
- );
108
- break;
109
- case ItemType.CraftingResource:
110
- contextActionMenu = generateContextMenuListOptions(
111
- ActionsForLoot.CraftingResource
112
- );
113
- break;
114
- case ItemType.Tool:
115
- contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
116
- break;
117
- default:
118
- contextActionMenu = generateContextMenuListOptions(
119
- ActionsForLoot.Other
120
- );
121
- break;
122
- }
123
- }
124
- if (itemContainerType === ItemContainerType.MapContainer) {
125
- switch (item.type) {
126
- case ItemType.Weapon:
127
- case ItemType.Armor:
128
- case ItemType.Accessory:
129
- case ItemType.Jewelry:
130
- contextActionMenu = generateContextMenuListOptions(
131
- ActionsForMapContainer.Equipment
132
- );
133
- break;
134
- case ItemType.Consumable:
135
- contextActionMenu = generateContextMenuListOptions(
136
- ActionsForMapContainer.Consumable
137
- );
138
- break;
139
- case ItemType.CraftingResource:
140
- contextActionMenu = generateContextMenuListOptions(
141
- ActionsForMapContainer.CraftingResource
142
- );
143
- break;
144
- case ItemType.Tool:
145
- contextActionMenu = generateContextMenuListOptions(
146
- ActionsForMapContainer.Tool
147
- );
148
- break;
149
- default:
150
- contextActionMenu = generateContextMenuListOptions(
151
- ActionsForMapContainer.Other
152
- );
153
- break;
154
- }
155
-
156
- const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
157
- action.text.toLowerCase().includes('use with')
158
- );
159
-
160
- if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
161
- contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
162
- }
163
- }
164
- if (itemContainerType === ItemContainerType.Depot) {
165
- contextActionMenu = [
166
- {
167
- id: ItemSocketEvents.GetItemInfo,
168
- text: ItemSocketEventsDisplayLabels.GetItemInfo,
169
- },
170
- { id: DepotSocketEvents.Withdraw, text: 'Withdraw' },
171
- ];
172
- }
173
-
174
- return contextActionMenu;
175
- };
1
+ import {
2
+ ActionsForEquipmentSet,
3
+ ActionsForInventory,
4
+ ActionsForLoot,
5
+ ActionsForMapContainer,
6
+ DepotSocketEvents,
7
+ IItem,
8
+ ItemContainerType,
9
+ ItemSocketEvents,
10
+ ItemSocketEventsDisplayLabels,
11
+ ItemType,
12
+ } from '@rpg-engine/shared';
13
+
14
+ export interface IContextMenuItem {
15
+ id: string;
16
+ text: string;
17
+ }
18
+
19
+ const generateContextMenuListOptions = (actionsByTypeList: any) => {
20
+ const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
21
+ (action: string) => {
22
+ return { id: action, text: ItemSocketEventsDisplayLabels[action] };
23
+ }
24
+ );
25
+ return contextMenu;
26
+ };
27
+
28
+ export const generateContextMenu = (
29
+ item: IItem,
30
+ itemContainerType: ItemContainerType | null,
31
+ isDepotSystem?: boolean
32
+ ) => {
33
+ let contextActionMenu: IContextMenuItem[] = [];
34
+
35
+ if (itemContainerType === ItemContainerType.Inventory) {
36
+ switch (item.type) {
37
+ case ItemType.Weapon:
38
+ case ItemType.Armor:
39
+ case ItemType.Accessory:
40
+ case ItemType.Jewelry:
41
+ contextActionMenu = generateContextMenuListOptions(
42
+ ActionsForInventory.Equipment
43
+ );
44
+ break;
45
+ case ItemType.Container:
46
+ contextActionMenu = generateContextMenuListOptions(
47
+ ActionsForInventory.Container
48
+ );
49
+ break;
50
+ case ItemType.Consumable:
51
+ contextActionMenu = generateContextMenuListOptions(
52
+ ActionsForInventory.Consumable
53
+ );
54
+ break;
55
+ case ItemType.CraftingResource:
56
+ contextActionMenu = generateContextMenuListOptions(
57
+ ActionsForInventory.CraftingResource
58
+ );
59
+ break;
60
+ case ItemType.Tool:
61
+ contextActionMenu = generateContextMenuListOptions(
62
+ ActionsForInventory.Tool
63
+ );
64
+ break;
65
+
66
+ default:
67
+ contextActionMenu = generateContextMenuListOptions(
68
+ ActionsForInventory.Other
69
+ );
70
+ break;
71
+ }
72
+
73
+ if (isDepotSystem) {
74
+ contextActionMenu.push({
75
+ id: DepotSocketEvents.Deposit,
76
+ text: 'Deposit',
77
+ });
78
+ }
79
+ }
80
+ if (itemContainerType === ItemContainerType.Equipment) {
81
+ switch (item.type) {
82
+ case ItemType.Container:
83
+ contextActionMenu = generateContextMenuListOptions(
84
+ ActionsForEquipmentSet.Container
85
+ );
86
+
87
+ break;
88
+ default:
89
+ contextActionMenu = generateContextMenuListOptions(
90
+ ActionsForEquipmentSet.Equipment
91
+ );
92
+ }
93
+ }
94
+ if (itemContainerType === ItemContainerType.Loot) {
95
+ switch (item.type) {
96
+ case ItemType.Weapon:
97
+ case ItemType.Armor:
98
+ case ItemType.Accessory:
99
+ case ItemType.Jewelry:
100
+ contextActionMenu = generateContextMenuListOptions(
101
+ ActionsForLoot.Equipment
102
+ );
103
+ break;
104
+ case ItemType.Consumable:
105
+ contextActionMenu = generateContextMenuListOptions(
106
+ ActionsForLoot.Consumable
107
+ );
108
+ break;
109
+ case ItemType.CraftingResource:
110
+ contextActionMenu = generateContextMenuListOptions(
111
+ ActionsForLoot.CraftingResource
112
+ );
113
+ break;
114
+ case ItemType.Tool:
115
+ contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
116
+ break;
117
+ default:
118
+ contextActionMenu = generateContextMenuListOptions(
119
+ ActionsForLoot.Other
120
+ );
121
+ break;
122
+ }
123
+ }
124
+ if (itemContainerType === ItemContainerType.MapContainer) {
125
+ switch (item.type) {
126
+ case ItemType.Weapon:
127
+ case ItemType.Armor:
128
+ case ItemType.Accessory:
129
+ case ItemType.Jewelry:
130
+ contextActionMenu = generateContextMenuListOptions(
131
+ ActionsForMapContainer.Equipment
132
+ );
133
+ break;
134
+ case ItemType.Consumable:
135
+ contextActionMenu = generateContextMenuListOptions(
136
+ ActionsForMapContainer.Consumable
137
+ );
138
+ break;
139
+ case ItemType.CraftingResource:
140
+ contextActionMenu = generateContextMenuListOptions(
141
+ ActionsForMapContainer.CraftingResource
142
+ );
143
+ break;
144
+ case ItemType.Tool:
145
+ contextActionMenu = generateContextMenuListOptions(
146
+ ActionsForMapContainer.Tool
147
+ );
148
+ break;
149
+ default:
150
+ contextActionMenu = generateContextMenuListOptions(
151
+ ActionsForMapContainer.Other
152
+ );
153
+ break;
154
+ }
155
+
156
+ const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
157
+ action.text.toLowerCase().includes('use with')
158
+ );
159
+
160
+ if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
161
+ contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
162
+ }
163
+ }
164
+ if (itemContainerType === ItemContainerType.Depot) {
165
+ contextActionMenu = [
166
+ {
167
+ id: ItemSocketEvents.GetItemInfo,
168
+ text: ItemSocketEventsDisplayLabels.GetItemInfo,
169
+ },
170
+ { id: DepotSocketEvents.Withdraw, text: 'Withdraw' },
171
+ ];
172
+ }
173
+
174
+ return contextActionMenu;
175
+ };
@@ -1,63 +1,63 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { uiFonts } from '../constants/uiFonts';
4
-
5
- interface IListMenuOption {
6
- id: string;
7
- text: string;
8
- }
9
-
10
- export interface IListMenuProps {
11
- x: number;
12
- y: number;
13
- options: IListMenuOption[];
14
- onSelected: (selectedOptionId: string) => void;
15
- }
16
-
17
- export const ListMenu: React.FC<IListMenuProps> = ({
18
- options,
19
- onSelected,
20
- x,
21
- y,
22
- }) => {
23
- return (
24
- <Container x={x} y={y}>
25
- <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
26
- {options.map((params, index) => (
27
- <ListElement
28
- key={params?.id || index}
29
- onPointerDown={() => {
30
- onSelected(params?.id);
31
- }}
32
- >
33
- {params?.text || 'No text'}
34
- </ListElement>
35
- ))}
36
- </ul>
37
- </Container>
38
- );
39
- };
40
-
41
- interface IContainerProps {
42
- x?: number;
43
- y?: number;
44
- }
45
-
46
- const Container = styled.div<IContainerProps>`
47
- display: flex;
48
- flex-direction: column;
49
- width: 100%;
50
- justify-content: start;
51
- align-items: flex-start;
52
- position: absolute;
53
- top: ${props => props.y || 0}px;
54
- left: ${props => props.x || 0}px;
55
-
56
- li {
57
- font-size: ${uiFonts.size.xsmall};
58
- }
59
- `;
60
-
61
- const ListElement = styled.li`
62
- margin-right: 0.5rem;
63
- `;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import { uiFonts } from '../constants/uiFonts';
4
+
5
+ interface IListMenuOption {
6
+ id: string;
7
+ text: string;
8
+ }
9
+
10
+ export interface IListMenuProps {
11
+ x: number;
12
+ y: number;
13
+ options: IListMenuOption[];
14
+ onSelected: (selectedOptionId: string) => void;
15
+ }
16
+
17
+ export const ListMenu: React.FC<IListMenuProps> = ({
18
+ options,
19
+ onSelected,
20
+ x,
21
+ y,
22
+ }) => {
23
+ return (
24
+ <Container x={x} y={y}>
25
+ <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
26
+ {options.map((params, index) => (
27
+ <ListElement
28
+ key={params?.id || index}
29
+ onPointerDown={() => {
30
+ onSelected(params?.id);
31
+ }}
32
+ >
33
+ {params?.text || 'No text'}
34
+ </ListElement>
35
+ ))}
36
+ </ul>
37
+ </Container>
38
+ );
39
+ };
40
+
41
+ interface IContainerProps {
42
+ x?: number;
43
+ y?: number;
44
+ }
45
+
46
+ const Container = styled.div<IContainerProps>`
47
+ display: flex;
48
+ flex-direction: column;
49
+ width: 100%;
50
+ justify-content: start;
51
+ align-items: flex-start;
52
+ position: absolute;
53
+ top: ${props => props.y || 0}px;
54
+ left: ${props => props.x || 0}px;
55
+
56
+ li {
57
+ font-size: ${uiFonts.size.xsmall};
58
+ }
59
+ `;
60
+
61
+ const ListElement = styled.li`
62
+ margin-right: 0.5rem;
63
+ `;