@rpg-engine/long-bow 0.3.97 → 0.3.99

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