@rpg-engine/long-bow 0.4.6 → 0.4.7

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 (164) 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 +1158 -1130
  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 +1235 -1207
  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/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 +180 -180
  33. package/src/components/DropdownSelectorContainer.tsx +42 -42
  34. package/src/components/Equipment/EquipmentSet.tsx +199 -199
  35. package/src/components/HistoryDialog.tsx +104 -104
  36. package/src/components/Input.tsx +15 -15
  37. package/src/components/InputRadio.tsx +41 -41
  38. package/src/components/Item/Cards/ItemInfo.tsx +298 -298
  39. package/src/components/Item/Cards/ItemInfoDisplay.tsx +135 -135
  40. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  41. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  42. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  43. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  44. package/src/components/Item/Inventory/ItemContainer.tsx +231 -231
  45. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  46. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  47. package/src/components/Item/Inventory/ItemSlot.tsx +580 -580
  48. package/src/components/Item/Inventory/itemContainerHelper.ts +175 -175
  49. package/src/components/ListMenu.tsx +63 -63
  50. package/src/components/Marketplace/Marketplace.tsx +132 -132
  51. package/src/components/Marketplace/MarketplaceRows.tsx +171 -171
  52. package/src/components/Marketplace/__mocks__/index.tsx +65 -65
  53. package/src/components/Multitab/Tab.tsx +66 -66
  54. package/src/components/Multitab/TabBody.tsx +13 -13
  55. package/src/components/Multitab/TabsContainer.tsx +97 -97
  56. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  57. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  58. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  59. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  60. package/src/components/ProgressBar.tsx +95 -95
  61. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  62. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  63. package/src/components/QuestList.tsx +135 -135
  64. package/src/components/RPGUIContainer.tsx +47 -47
  65. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  66. package/src/components/RPGUIRoot.tsx +14 -14
  67. package/src/components/RadioButton.tsx +53 -53
  68. package/src/components/RadioInput/RadioButton.tsx +96 -96
  69. package/src/components/RadioInput/RadioInput.tsx +102 -102
  70. package/src/components/RadioInput/instruments.ts +15 -15
  71. package/src/components/RangeSlider.tsx +78 -78
  72. package/src/components/RelativeListMenu.tsx +90 -90
  73. package/src/components/ScrollList.tsx +79 -79
  74. package/src/components/Shortcuts/Shortcuts.tsx +193 -193
  75. package/src/components/Shortcuts/ShortcutsSetter.tsx +139 -139
  76. package/src/components/Shortcuts/SingleShortcut.ts +82 -82
  77. package/src/components/Shortcuts/useShortcutCooldown.ts +23 -23
  78. package/src/components/SimpleProgressBar.tsx +62 -62
  79. package/src/components/SkillProgressBar.tsx +198 -133
  80. package/src/components/SkillsContainer.tsx +213 -212
  81. package/src/components/Spellbook/Spell.tsx +236 -236
  82. package/src/components/Spellbook/Spellbook.tsx +161 -161
  83. package/src/components/Spellbook/cards/MobileSpellTooltip.tsx +137 -137
  84. package/src/components/Spellbook/cards/SpellInfo.tsx +134 -134
  85. package/src/components/Spellbook/cards/SpellInfoDisplay.tsx +31 -31
  86. package/src/components/Spellbook/cards/SpellInfoWrapper.tsx +48 -48
  87. package/src/components/Spellbook/cards/SpellTooltip.tsx +70 -70
  88. package/src/components/Spellbook/constants.ts +7 -7
  89. package/src/components/Spellbook/mockSpells.ts +84 -84
  90. package/src/components/StaticBook/StaticBook.tsx +103 -103
  91. package/src/components/TextArea.tsx +11 -11
  92. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  93. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  94. package/src/components/TradingMenu/TradingItemRow.tsx +199 -199
  95. package/src/components/TradingMenu/TradingMenu.tsx +219 -219
  96. package/src/components/TradingMenu/items.mock.ts +48 -48
  97. package/src/components/Truncate.tsx +25 -25
  98. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  99. package/src/components/shared/Column.tsx +16 -16
  100. package/src/components/shared/Ellipsis.tsx +68 -68
  101. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  102. package/src/components/typography/DynamicText.tsx +49 -49
  103. package/src/constants/uiColors.ts +20 -20
  104. package/src/constants/uiDevices.ts +3 -3
  105. package/src/constants/uiFonts.ts +12 -12
  106. package/src/hooks/useEventListener.ts +21 -21
  107. package/src/hooks/useOutsideAlerter.ts +25 -25
  108. package/src/index.tsx +42 -42
  109. package/src/libs/CastingTypeHelper.ts +7 -7
  110. package/src/libs/StringHelpers.ts +3 -3
  111. package/src/libs/itemCounter.ts +21 -21
  112. package/src/mocks/atlas/entities/entities.json +20215 -20215
  113. package/src/mocks/atlas/icons/icons.json +735 -735
  114. package/src/mocks/atlas/items/items.json +12086 -12086
  115. package/src/mocks/equipmentSet.mocks.ts +391 -391
  116. package/src/mocks/itemContainer.mocks.ts +605 -605
  117. package/src/mocks/skills.mocks.ts +130 -128
  118. package/src/stories/Arrow.stories.tsx +26 -26
  119. package/src/stories/Button.stories.tsx +36 -36
  120. package/src/stories/CharacterSelection.stories.tsx +44 -44
  121. package/src/stories/CharacterStatus.stories.tsx +29 -29
  122. package/src/stories/Chat.stories.tsx +187 -187
  123. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  124. package/src/stories/CheckButton.stories.tsx +48 -48
  125. package/src/stories/CircullarController.stories.tsx +37 -37
  126. package/src/stories/CraftBook.stories.tsx +42 -42
  127. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  128. package/src/stories/DraggableContainer.stories.tsx +28 -28
  129. package/src/stories/Dropdown.stories.tsx +46 -46
  130. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  131. package/src/stories/EquipmentSet.stories.tsx +65 -65
  132. package/src/stories/HistoryDialog.stories.tsx +61 -61
  133. package/src/stories/ItemContainer.stories.tsx +201 -201
  134. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  135. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  136. package/src/stories/ItemSelector.stories.tsx +77 -77
  137. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  138. package/src/stories/ListMenu.stories.tsx +56 -56
  139. package/src/stories/Marketplace.stories.tsx +42 -42
  140. package/src/stories/MarketplaceRows.stories.tsx +28 -28
  141. package/src/stories/Multitab.stories.tsx +51 -51
  142. package/src/stories/NPCDialog.stories.tsx +130 -130
  143. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  144. package/src/stories/ProgressBar.stories.tsx +23 -23
  145. package/src/stories/PropertySelect.stories.tsx +40 -40
  146. package/src/stories/QuestInfo.stories.tsx +107 -107
  147. package/src/stories/QuestList.stories.tsx +82 -82
  148. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  149. package/src/stories/RadioButton.stories.tsx +49 -49
  150. package/src/stories/RadioInput.stories.tsx +34 -34
  151. package/src/stories/RangeSlider.stories.tsx +64 -64
  152. package/src/stories/ScrollList.stories.tsx +85 -85
  153. package/src/stories/Shortcuts.stories.tsx +39 -39
  154. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  155. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  156. package/src/stories/SkillsContainer.stories.tsx +35 -35
  157. package/src/stories/SpellInfoDisplay.stories.tsx +27 -27
  158. package/src/stories/Spellbook.stories.tsx +104 -104
  159. package/src/stories/StaticBook.stories.tsx +32 -32
  160. package/src/stories/Text.stories.tsx +42 -42
  161. package/src/stories/TimeWidget.stories.tsx +27 -27
  162. package/src/stories/TradingMenu.stories.tsx +47 -47
  163. package/src/types/eventTypes.ts +4 -4
  164. 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
+ `;