@rpg-engine/long-bow 0.3.94 → 0.3.96

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