@rpg-engine/long-bow 0.4.82 → 0.4.83

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