@rpg-engine/long-bow 0.4.2 → 0.4.3

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