@rpg-engine/long-bow 0.4.82 → 0.4.84

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 (169) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/SkillProgressBar.d.ts +1 -0
  4. package/dist/long-bow.cjs.development.js +1065 -1054
  5. package/dist/long-bow.cjs.development.js.map +1 -1
  6. package/dist/long-bow.cjs.production.min.js +1 -1
  7. package/dist/long-bow.cjs.production.min.js.map +1 -1
  8. package/dist/long-bow.esm.js +1067 -1056
  9. package/dist/long-bow.esm.js.map +1 -1
  10. package/package.json +100 -100
  11. package/src/components/Abstractions/ModalPortal.tsx +22 -22
  12. package/src/components/Abstractions/SlotsContainer.tsx +62 -62
  13. package/src/components/Arrow/SelectArrow.tsx +69 -69
  14. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  15. package/src/components/Arrow/img/arrow01-left.png +0 -0
  16. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  17. package/src/components/Arrow/img/arrow01-right.png +0 -0
  18. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  19. package/src/components/Arrow/img/arrow02-left.png +0 -0
  20. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  21. package/src/components/Arrow/img/arrow02-right.png +0 -0
  22. package/src/components/Button.tsx +40 -40
  23. package/src/components/Character/CharacterSelection.tsx +98 -98
  24. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  25. package/src/components/Chat/Chat.tsx +196 -196
  26. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  27. package/src/components/CheckButton.tsx +65 -65
  28. package/src/components/CircularController/CircularController.tsx +282 -282
  29. package/src/components/ConfirmModal.tsx +87 -87
  30. package/src/components/CraftBook/CraftBook.tsx +286 -286
  31. package/src/components/CraftBook/CraftingRecipe.tsx +161 -161
  32. package/src/components/CraftBook/MockItems.ts +101 -101
  33. package/src/components/DraggableContainer.tsx +183 -183
  34. package/src/components/Dropdown.tsx +114 -114
  35. package/src/components/DropdownSelectorContainer.tsx +42 -42
  36. package/src/components/Equipment/EquipmentSet.tsx +199 -199
  37. package/src/components/HistoryDialog.tsx +104 -104
  38. package/src/components/Input.tsx +15 -15
  39. package/src/components/InputRadio.tsx +41 -41
  40. package/src/components/Item/Cards/ItemInfo.tsx +298 -298
  41. package/src/components/Item/Cards/ItemInfoDisplay.tsx +135 -135
  42. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  43. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  44. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  45. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  46. package/src/components/Item/Inventory/ItemContainer.tsx +231 -231
  47. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  48. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  49. package/src/components/Item/Inventory/ItemSlot.tsx +595 -595
  50. package/src/components/Item/Inventory/itemContainerHelper.ts +175 -175
  51. package/src/components/ListMenu.tsx +63 -63
  52. package/src/components/Marketplace/BuyPanel.tsx +304 -304
  53. package/src/components/Marketplace/ManagmentPanel.tsx +255 -255
  54. package/src/components/Marketplace/Marketplace.tsx +106 -106
  55. package/src/components/Marketplace/MarketplaceRows.tsx +177 -177
  56. package/src/components/Marketplace/filters/index.tsx +67 -67
  57. package/src/components/Multitab/Tab.tsx +66 -66
  58. package/src/components/Multitab/TabBody.tsx +13 -13
  59. package/src/components/Multitab/TabsContainer.tsx +97 -97
  60. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  61. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  62. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  63. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  64. package/src/components/Pager.tsx +94 -94
  65. package/src/components/ProgressBar.tsx +102 -102
  66. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  67. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  68. package/src/components/QuestList.tsx +135 -135
  69. package/src/components/RPGUIContainer.tsx +47 -47
  70. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  71. package/src/components/RPGUIRoot.tsx +14 -14
  72. package/src/components/RadioButton.tsx +53 -53
  73. package/src/components/RadioInput/RadioButton.tsx +96 -96
  74. package/src/components/RadioInput/RadioInput.tsx +102 -102
  75. package/src/components/RadioInput/instruments.ts +15 -15
  76. package/src/components/RangeSlider.tsx +78 -78
  77. package/src/components/RelativeListMenu.tsx +90 -90
  78. package/src/components/ScrollList.tsx +79 -79
  79. package/src/components/Shortcuts/Shortcuts.tsx +193 -193
  80. package/src/components/Shortcuts/ShortcutsSetter.tsx +139 -139
  81. package/src/components/Shortcuts/SingleShortcut.ts +82 -82
  82. package/src/components/Shortcuts/useShortcutCooldown.ts +23 -23
  83. package/src/components/SimpleProgressBar.tsx +62 -62
  84. package/src/components/SkillProgressBar.tsx +196 -206
  85. package/src/components/SkillsContainer.tsx +242 -213
  86. package/src/components/Spellbook/Spell.tsx +235 -235
  87. package/src/components/Spellbook/Spellbook.tsx +145 -145
  88. package/src/components/Spellbook/cards/MobileSpellTooltip.tsx +137 -137
  89. package/src/components/Spellbook/cards/SpellInfo.tsx +134 -134
  90. package/src/components/Spellbook/cards/SpellInfoDisplay.tsx +31 -31
  91. package/src/components/Spellbook/cards/SpellInfoWrapper.tsx +48 -48
  92. package/src/components/Spellbook/cards/SpellTooltip.tsx +70 -70
  93. package/src/components/Spellbook/constants.ts +7 -7
  94. package/src/components/Spellbook/mockSpells.ts +84 -84
  95. package/src/components/StaticBook/StaticBook.tsx +103 -103
  96. package/src/components/TextArea.tsx +11 -11
  97. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  98. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  99. package/src/components/TradingMenu/TradingItemRow.tsx +199 -199
  100. package/src/components/TradingMenu/TradingMenu.tsx +219 -219
  101. package/src/components/TradingMenu/items.mock.ts +48 -48
  102. package/src/components/Truncate.tsx +25 -25
  103. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  104. package/src/components/shared/Column.tsx +16 -16
  105. package/src/components/shared/Ellipsis.tsx +76 -76
  106. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  107. package/src/components/typography/DynamicText.tsx +49 -49
  108. package/src/constants/uiColors.ts +20 -20
  109. package/src/constants/uiDevices.ts +3 -3
  110. package/src/constants/uiFonts.ts +12 -12
  111. package/src/hooks/useEventListener.ts +21 -21
  112. package/src/hooks/useOutsideAlerter.ts +25 -25
  113. package/src/index.tsx +42 -42
  114. package/src/libs/CastingTypeHelper.ts +7 -7
  115. package/src/libs/StringHelpers.ts +3 -3
  116. package/src/libs/itemCounter.ts +21 -21
  117. package/src/mocks/atlas/entities/entities.json +20215 -20215
  118. package/src/mocks/atlas/icons/icons.json +735 -735
  119. package/src/mocks/atlas/items/items.json +12086 -12086
  120. package/src/mocks/equipmentSet.mocks.ts +391 -391
  121. package/src/mocks/itemContainer.mocks.ts +605 -605
  122. package/src/mocks/skills.mocks.ts +130 -130
  123. package/src/stories/Arrow.stories.tsx +26 -26
  124. package/src/stories/Button.stories.tsx +36 -36
  125. package/src/stories/CharacterSelection.stories.tsx +44 -44
  126. package/src/stories/CharacterStatus.stories.tsx +29 -29
  127. package/src/stories/Chat.stories.tsx +187 -187
  128. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  129. package/src/stories/CheckButton.stories.tsx +48 -48
  130. package/src/stories/CircullarController.stories.tsx +37 -37
  131. package/src/stories/CraftBook.stories.tsx +42 -42
  132. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  133. package/src/stories/DraggableContainer.stories.tsx +28 -28
  134. package/src/stories/Dropdown.stories.tsx +46 -46
  135. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  136. package/src/stories/EquipmentSet.stories.tsx +65 -65
  137. package/src/stories/HistoryDialog.stories.tsx +61 -61
  138. package/src/stories/ItemContainer.stories.tsx +201 -201
  139. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  140. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  141. package/src/stories/ItemSelector.stories.tsx +77 -77
  142. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  143. package/src/stories/ListMenu.stories.tsx +56 -56
  144. package/src/stories/Marketplace.stories.tsx +57 -57
  145. package/src/stories/MarketplaceRows.stories.tsx +27 -27
  146. package/src/stories/Multitab.stories.tsx +51 -51
  147. package/src/stories/NPCDialog.stories.tsx +130 -130
  148. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  149. package/src/stories/ProgressBar.stories.tsx +24 -24
  150. package/src/stories/PropertySelect.stories.tsx +40 -40
  151. package/src/stories/QuestInfo.stories.tsx +107 -107
  152. package/src/stories/QuestList.stories.tsx +82 -82
  153. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  154. package/src/stories/RadioButton.stories.tsx +49 -49
  155. package/src/stories/RadioInput.stories.tsx +34 -34
  156. package/src/stories/RangeSlider.stories.tsx +64 -64
  157. package/src/stories/ScrollList.stories.tsx +85 -85
  158. package/src/stories/Shortcuts.stories.tsx +39 -39
  159. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  160. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  161. package/src/stories/SkillsContainer.stories.tsx +35 -35
  162. package/src/stories/SpellInfoDisplay.stories.tsx +27 -27
  163. package/src/stories/Spellbook.stories.tsx +104 -104
  164. package/src/stories/StaticBook.stories.tsx +32 -32
  165. package/src/stories/Text.stories.tsx +42 -42
  166. package/src/stories/TimeWidget.stories.tsx +27 -27
  167. package/src/stories/TradingMenu.stories.tsx +47 -47
  168. package/src/types/eventTypes.ts +4 -4
  169. package/src/types/index.d.ts +2 -2
@@ -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
+ `;