@rpg-engine/long-bow 0.3.69 → 0.3.71

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 (158) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/CraftBook/CraftBook.d.ts +2 -1
  4. package/dist/components/Item/Cards/ItemInfo.d.ts +10 -0
  5. package/dist/components/Item/Cards/ItemInfoDisplay.d.ts +9 -0
  6. package/dist/components/Item/Cards/ItemInfoWrapper.d.ts +11 -0
  7. package/dist/components/Item/Cards/ItemTooltip.d.ts +7 -4
  8. package/dist/components/Item/Inventory/ItemContainer.d.ts +2 -1
  9. package/dist/components/Item/Inventory/ItemSlot.d.ts +4 -1
  10. package/dist/components/TradingMenu/TradingItemRow.d.ts +2 -1
  11. package/dist/components/TradingMenu/TradingMenu.d.ts +4 -3
  12. package/dist/components/shared/SpriteFromAtlas.d.ts +1 -0
  13. package/dist/long-bow.cjs.development.js +1220 -949
  14. package/dist/long-bow.cjs.development.js.map +1 -1
  15. package/dist/long-bow.cjs.production.min.js +1 -1
  16. package/dist/long-bow.cjs.production.min.js.map +1 -1
  17. package/dist/long-bow.esm.js +1222 -953
  18. package/dist/long-bow.esm.js.map +1 -1
  19. package/dist/stories/ItemInfoDisplay.stories.d.ts +8 -0
  20. package/dist/stories/TradingMenu.stories.d.ts +2 -2
  21. package/package.json +100 -100
  22. package/src/components/Abstractions/SlotsContainer.tsx +45 -45
  23. package/src/components/Arrow/SelectArrow.tsx +69 -69
  24. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  25. package/src/components/Arrow/img/arrow01-left.png +0 -0
  26. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  27. package/src/components/Arrow/img/arrow01-right.png +0 -0
  28. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  29. package/src/components/Arrow/img/arrow02-left.png +0 -0
  30. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  31. package/src/components/Arrow/img/arrow02-right.png +0 -0
  32. package/src/components/Button.tsx +40 -40
  33. package/src/components/Character/CharacterSelection.tsx +96 -96
  34. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  35. package/src/components/Chat/Chat.tsx +195 -195
  36. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  37. package/src/components/CheckButton.tsx +65 -65
  38. package/src/components/CircularController/CircularController.tsx +248 -248
  39. package/src/components/CraftBook/CraftBook.tsx +237 -227
  40. package/src/components/CraftBook/MockItems.ts +41 -46
  41. package/src/components/DraggableContainer.tsx +153 -153
  42. package/src/components/Dropdown.tsx +90 -90
  43. package/src/components/DropdownSelectorContainer.tsx +42 -42
  44. package/src/components/Equipment/EquipmentSet.tsx +190 -190
  45. package/src/components/HistoryDialog.tsx +104 -104
  46. package/src/components/Input.tsx +15 -15
  47. package/src/components/Item/Cards/ItemInfo.tsx +248 -0
  48. package/src/components/Item/Cards/ItemInfoDisplay.tsx +120 -0
  49. package/src/components/Item/Cards/ItemInfoWrapper.tsx +39 -0
  50. package/src/components/Item/Cards/ItemTooltip.tsx +85 -33
  51. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  52. package/src/components/Item/Inventory/ItemContainer.tsx +214 -210
  53. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  54. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  55. package/src/components/Item/Inventory/ItemSlot.tsx +512 -501
  56. package/src/components/Item/Inventory/itemContainerHelper.ts +156 -156
  57. package/src/components/ListMenu.tsx +63 -63
  58. package/src/components/Multitab/Tab.tsx +66 -66
  59. package/src/components/Multitab/TabBody.tsx +13 -13
  60. package/src/components/Multitab/TabsContainer.tsx +97 -97
  61. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  62. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  63. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  64. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  65. package/src/components/ProgressBar.tsx +92 -92
  66. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  67. package/src/components/QuestInfo/QuestInfo.tsx +230 -230
  68. package/src/components/QuestList.tsx +129 -129
  69. package/src/components/RPGUIContainer.tsx +47 -47
  70. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  71. package/src/components/RPGUIRoot.tsx +14 -14
  72. package/src/components/RadioButton.tsx +53 -53
  73. package/src/components/RadioInput/RadioButton.tsx +96 -96
  74. package/src/components/RadioInput/RadioInput.tsx +102 -102
  75. package/src/components/RadioInput/instruments.ts +15 -15
  76. package/src/components/RangeSlider.tsx +78 -78
  77. package/src/components/RelativeListMenu.tsx +83 -83
  78. package/src/components/ScrollList.tsx +79 -79
  79. package/src/components/Shortcuts/Shortcuts.tsx +151 -151
  80. package/src/components/Shortcuts/ShortcutsSetter.tsx +132 -132
  81. package/src/components/Shortcuts/SingleShortcut.ts +62 -62
  82. package/src/components/SimpleProgressBar.tsx +62 -62
  83. package/src/components/SkillProgressBar.tsx +133 -133
  84. package/src/components/SkillsContainer.tsx +198 -198
  85. package/src/components/Spellbook/Spell.tsx +201 -201
  86. package/src/components/Spellbook/Spellbook.tsx +150 -150
  87. package/src/components/Spellbook/constants.ts +8 -8
  88. package/src/components/Spellbook/mockSpells.ts +60 -60
  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 +63 -63
  93. package/src/components/TradingMenu/TradingItemRow.tsx +195 -181
  94. package/src/components/TradingMenu/TradingMenu.tsx +211 -203
  95. package/src/components/TradingMenu/items.mock.ts +48 -96
  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 +65 -65
  100. package/src/components/shared/SpriteFromAtlas.tsx +104 -102
  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 +40 -40
  108. package/src/libs/StringHelpers.ts +3 -3
  109. package/src/mocks/atlas/entities/entities.json +20215 -20215
  110. package/src/mocks/atlas/icons/icons.json +735 -735
  111. package/src/mocks/atlas/items/items.json +12086 -12086
  112. package/src/mocks/equipmentSet.mocks.ts +391 -393
  113. package/src/mocks/itemContainer.mocks.ts +563 -562
  114. package/src/mocks/skills.mocks.ts +128 -128
  115. package/src/stories/Arrow.stories.tsx +26 -26
  116. package/src/stories/Button.stories.tsx +36 -36
  117. package/src/stories/CharacterSelection.stories.tsx +45 -45
  118. package/src/stories/CharacterStatus.stories.tsx +29 -29
  119. package/src/stories/Chat.stories.tsx +187 -187
  120. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  121. package/src/stories/CheckButton.stories.tsx +48 -48
  122. package/src/stories/CircullarController.stories.tsx +37 -37
  123. package/src/stories/CraftBook.stories.tsx +42 -40
  124. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  125. package/src/stories/DraggableContainer.stories.tsx +28 -28
  126. package/src/stories/Dropdown.stories.tsx +46 -46
  127. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  128. package/src/stories/EquipmentSet.stories.tsx +65 -65
  129. package/src/stories/HistoryDialog.stories.tsx +61 -61
  130. package/src/stories/ItemContainer.stories.tsx +200 -198
  131. package/src/stories/ItemInfoDisplay.stories.tsx +33 -0
  132. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  133. package/src/stories/ItemSelector.stories.tsx +77 -77
  134. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  135. package/src/stories/ListMenu.stories.tsx +56 -56
  136. package/src/stories/Multitab.stories.tsx +51 -51
  137. package/src/stories/NPCDialog.stories.tsx +130 -130
  138. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  139. package/src/stories/ProgressBar.stories.tsx +23 -23
  140. package/src/stories/PropertySelect.stories.tsx +40 -40
  141. package/src/stories/QuestInfo.stories.tsx +107 -107
  142. package/src/stories/QuestList.stories.tsx +82 -82
  143. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  144. package/src/stories/RadioButton.stories.tsx +49 -49
  145. package/src/stories/RadioInput.stories.tsx +34 -34
  146. package/src/stories/RangeSlider.stories.tsx +64 -64
  147. package/src/stories/ScrollList.stories.tsx +85 -85
  148. package/src/stories/Shortcuts.stories.tsx +39 -39
  149. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  150. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  151. package/src/stories/SkillsContainer.stories.tsx +35 -35
  152. package/src/stories/Spellbook.stories.tsx +104 -104
  153. package/src/stories/StaticBook.stories.tsx +32 -32
  154. package/src/stories/Text.stories.tsx +42 -42
  155. package/src/stories/TimeWidget.stories.tsx +27 -27
  156. package/src/stories/TradingMenu.stories.tsx +47 -45
  157. package/src/types/eventTypes.ts +4 -4
  158. package/src/types/index.d.ts +2 -2
@@ -1,156 +1,156 @@
1
- import {
2
- ActionsForEquipmentSet,
3
- ActionsForInventory,
4
- ActionsForLoot,
5
- ActionsForMapContainer,
6
- IItem,
7
- ItemContainerType,
8
- ItemSocketEventsDisplayLabels,
9
- ItemType,
10
- } from '@rpg-engine/shared';
11
-
12
- export interface IContextMenuItem {
13
- id: string;
14
- text: string;
15
- }
16
-
17
- const generateContextMenuListOptions = (actionsByTypeList: any) => {
18
- const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
19
- (action: string) => {
20
- return { id: action, text: ItemSocketEventsDisplayLabels[action] };
21
- }
22
- );
23
- return contextMenu;
24
- };
25
-
26
- export const generateContextMenu = (
27
- item: IItem,
28
- itemContainerType: ItemContainerType | null
29
- ) => {
30
- let contextActionMenu: IContextMenuItem[] = [];
31
-
32
- if (itemContainerType === ItemContainerType.Inventory) {
33
- switch (item.type) {
34
- case ItemType.Weapon:
35
- case ItemType.Armor:
36
- case ItemType.Accessory:
37
- case ItemType.Jewelry:
38
- contextActionMenu = generateContextMenuListOptions(
39
- ActionsForInventory.Equipment
40
- );
41
- break;
42
- case ItemType.Container:
43
- contextActionMenu = generateContextMenuListOptions(
44
- ActionsForInventory.Container
45
- );
46
- break;
47
- case ItemType.Consumable:
48
- contextActionMenu = generateContextMenuListOptions(
49
- ActionsForInventory.Consumable
50
- );
51
- break;
52
- case ItemType.CraftingResource:
53
- contextActionMenu = generateContextMenuListOptions(
54
- ActionsForInventory.CraftingResource
55
- );
56
- break;
57
- case ItemType.Tool:
58
- contextActionMenu = generateContextMenuListOptions(
59
- ActionsForInventory.Tool
60
- );
61
- break;
62
-
63
- default:
64
- contextActionMenu = generateContextMenuListOptions(
65
- ActionsForInventory.Other
66
- );
67
- break;
68
- }
69
- }
70
- if (itemContainerType === ItemContainerType.Equipment) {
71
- switch (item.type) {
72
- case ItemType.Container:
73
- contextActionMenu = generateContextMenuListOptions(
74
- ActionsForEquipmentSet.Container
75
- );
76
-
77
- break;
78
- default:
79
- contextActionMenu = generateContextMenuListOptions(
80
- ActionsForEquipmentSet.Equipment
81
- );
82
- }
83
- }
84
- if (itemContainerType === ItemContainerType.Loot) {
85
- switch (item.type) {
86
- case ItemType.Weapon:
87
- case ItemType.Armor:
88
- case ItemType.Accessory:
89
- case ItemType.Jewelry:
90
- contextActionMenu = generateContextMenuListOptions(
91
- ActionsForLoot.Equipment
92
- );
93
- break;
94
- case ItemType.Consumable:
95
- contextActionMenu = generateContextMenuListOptions(
96
- ActionsForLoot.Consumable
97
- );
98
- break;
99
- case ItemType.CraftingResource:
100
- contextActionMenu = generateContextMenuListOptions(
101
- ActionsForLoot.CraftingResource
102
- );
103
- break;
104
- case ItemType.Tool:
105
- contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
106
- break;
107
- default:
108
- contextActionMenu = generateContextMenuListOptions(
109
- ActionsForLoot.Other
110
- );
111
- break;
112
- }
113
- }
114
- if (itemContainerType === ItemContainerType.MapContainer) {
115
- switch (item.type) {
116
- case ItemType.Weapon:
117
- case ItemType.Armor:
118
- case ItemType.Accessory:
119
- case ItemType.Jewelry:
120
- contextActionMenu = generateContextMenuListOptions(
121
- ActionsForMapContainer.Equipment
122
- );
123
- break;
124
- case ItemType.Consumable:
125
- contextActionMenu = generateContextMenuListOptions(
126
- ActionsForMapContainer.Consumable
127
- );
128
- break;
129
- case ItemType.CraftingResource:
130
- contextActionMenu = generateContextMenuListOptions(
131
- ActionsForMapContainer.CraftingResource
132
- );
133
- break;
134
- case ItemType.Tool:
135
- contextActionMenu = generateContextMenuListOptions(
136
- ActionsForMapContainer.Tool
137
- );
138
- break;
139
- default:
140
- contextActionMenu = generateContextMenuListOptions(
141
- ActionsForMapContainer.Other
142
- );
143
- break;
144
- }
145
-
146
- const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
147
- action.text.toLowerCase().includes('use with')
148
- );
149
-
150
- if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
151
- contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
152
- }
153
- }
154
-
155
- return contextActionMenu;
156
- };
1
+ import {
2
+ ActionsForEquipmentSet,
3
+ ActionsForInventory,
4
+ ActionsForLoot,
5
+ ActionsForMapContainer,
6
+ IItem,
7
+ ItemContainerType,
8
+ ItemSocketEventsDisplayLabels,
9
+ ItemType,
10
+ } from '@rpg-engine/shared';
11
+
12
+ export interface IContextMenuItem {
13
+ id: string;
14
+ text: string;
15
+ }
16
+
17
+ const generateContextMenuListOptions = (actionsByTypeList: any) => {
18
+ const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
19
+ (action: string) => {
20
+ return { id: action, text: ItemSocketEventsDisplayLabels[action] };
21
+ }
22
+ );
23
+ return contextMenu;
24
+ };
25
+
26
+ export const generateContextMenu = (
27
+ item: IItem,
28
+ itemContainerType: ItemContainerType | null
29
+ ) => {
30
+ let contextActionMenu: IContextMenuItem[] = [];
31
+
32
+ if (itemContainerType === ItemContainerType.Inventory) {
33
+ switch (item.type) {
34
+ case ItemType.Weapon:
35
+ case ItemType.Armor:
36
+ case ItemType.Accessory:
37
+ case ItemType.Jewelry:
38
+ contextActionMenu = generateContextMenuListOptions(
39
+ ActionsForInventory.Equipment
40
+ );
41
+ break;
42
+ case ItemType.Container:
43
+ contextActionMenu = generateContextMenuListOptions(
44
+ ActionsForInventory.Container
45
+ );
46
+ break;
47
+ case ItemType.Consumable:
48
+ contextActionMenu = generateContextMenuListOptions(
49
+ ActionsForInventory.Consumable
50
+ );
51
+ break;
52
+ case ItemType.CraftingResource:
53
+ contextActionMenu = generateContextMenuListOptions(
54
+ ActionsForInventory.CraftingResource
55
+ );
56
+ break;
57
+ case ItemType.Tool:
58
+ contextActionMenu = generateContextMenuListOptions(
59
+ ActionsForInventory.Tool
60
+ );
61
+ break;
62
+
63
+ default:
64
+ contextActionMenu = generateContextMenuListOptions(
65
+ ActionsForInventory.Other
66
+ );
67
+ break;
68
+ }
69
+ }
70
+ if (itemContainerType === ItemContainerType.Equipment) {
71
+ switch (item.type) {
72
+ case ItemType.Container:
73
+ contextActionMenu = generateContextMenuListOptions(
74
+ ActionsForEquipmentSet.Container
75
+ );
76
+
77
+ break;
78
+ default:
79
+ contextActionMenu = generateContextMenuListOptions(
80
+ ActionsForEquipmentSet.Equipment
81
+ );
82
+ }
83
+ }
84
+ if (itemContainerType === ItemContainerType.Loot) {
85
+ switch (item.type) {
86
+ case ItemType.Weapon:
87
+ case ItemType.Armor:
88
+ case ItemType.Accessory:
89
+ case ItemType.Jewelry:
90
+ contextActionMenu = generateContextMenuListOptions(
91
+ ActionsForLoot.Equipment
92
+ );
93
+ break;
94
+ case ItemType.Consumable:
95
+ contextActionMenu = generateContextMenuListOptions(
96
+ ActionsForLoot.Consumable
97
+ );
98
+ break;
99
+ case ItemType.CraftingResource:
100
+ contextActionMenu = generateContextMenuListOptions(
101
+ ActionsForLoot.CraftingResource
102
+ );
103
+ break;
104
+ case ItemType.Tool:
105
+ contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
106
+ break;
107
+ default:
108
+ contextActionMenu = generateContextMenuListOptions(
109
+ ActionsForLoot.Other
110
+ );
111
+ break;
112
+ }
113
+ }
114
+ if (itemContainerType === ItemContainerType.MapContainer) {
115
+ switch (item.type) {
116
+ case ItemType.Weapon:
117
+ case ItemType.Armor:
118
+ case ItemType.Accessory:
119
+ case ItemType.Jewelry:
120
+ contextActionMenu = generateContextMenuListOptions(
121
+ ActionsForMapContainer.Equipment
122
+ );
123
+ break;
124
+ case ItemType.Consumable:
125
+ contextActionMenu = generateContextMenuListOptions(
126
+ ActionsForMapContainer.Consumable
127
+ );
128
+ break;
129
+ case ItemType.CraftingResource:
130
+ contextActionMenu = generateContextMenuListOptions(
131
+ ActionsForMapContainer.CraftingResource
132
+ );
133
+ break;
134
+ case ItemType.Tool:
135
+ contextActionMenu = generateContextMenuListOptions(
136
+ ActionsForMapContainer.Tool
137
+ );
138
+ break;
139
+ default:
140
+ contextActionMenu = generateContextMenuListOptions(
141
+ ActionsForMapContainer.Other
142
+ );
143
+ break;
144
+ }
145
+
146
+ const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
147
+ action.text.toLowerCase().includes('use with')
148
+ );
149
+
150
+ if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
151
+ contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
152
+ }
153
+ }
154
+
155
+ return contextActionMenu;
156
+ };
@@ -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
+ `;
@@ -1,66 +1,66 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { MultitabType } from './TabsContainer';
4
-
5
- export interface ISingleTab {
6
- active: boolean;
7
- label: string;
8
- onPointerDown: () => void;
9
- type: MultitabType;
10
- }
11
-
12
- export const Tab: React.FC<ISingleTab> = ({
13
- active,
14
- label,
15
- onPointerDown,
16
- type,
17
- }) => {
18
- return (
19
- <CustomTab
20
- activeTab={active}
21
- onPointerDown={onPointerDown}
22
- className={type}
23
- >
24
- <p>{label}</p>
25
- </CustomTab>
26
- );
27
- };
28
-
29
- interface ICustomTab {
30
- activeTab: boolean;
31
- }
32
-
33
- const CustomTab = styled.div<ICustomTab>`
34
- width: 120px;
35
- color: white;
36
- font-size: 0.8rem;
37
-
38
- &.gray {
39
- border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
40
- border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
41
- border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
42
- background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
43
- }
44
-
45
- &.brown {
46
- border-left: 0.25rem solid #996d55;
47
- border-right: 0.25rem solid #996d55;
48
- border-top: 0.25rem solid #996d55;
49
- background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
50
- }
51
-
52
- margin-right: 10px;
53
- p {
54
- text-align: center;
55
- font-size: 0.6rem;
56
-
57
- opacity: ${props => (props.activeTab ? '1' : '0.5')};
58
- }
59
-
60
- border-radius: 5px 5px 0 0;
61
-
62
- z-index: ${props => (props.activeTab ? 1 : -1)};
63
-
64
- position: relative;
65
- top: 0.3rem;
66
- `;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import { MultitabType } from './TabsContainer';
4
+
5
+ export interface ISingleTab {
6
+ active: boolean;
7
+ label: string;
8
+ onPointerDown: () => void;
9
+ type: MultitabType;
10
+ }
11
+
12
+ export const Tab: React.FC<ISingleTab> = ({
13
+ active,
14
+ label,
15
+ onPointerDown,
16
+ type,
17
+ }) => {
18
+ return (
19
+ <CustomTab
20
+ activeTab={active}
21
+ onPointerDown={onPointerDown}
22
+ className={type}
23
+ >
24
+ <p>{label}</p>
25
+ </CustomTab>
26
+ );
27
+ };
28
+
29
+ interface ICustomTab {
30
+ activeTab: boolean;
31
+ }
32
+
33
+ const CustomTab = styled.div<ICustomTab>`
34
+ width: 120px;
35
+ color: white;
36
+ font-size: 0.8rem;
37
+
38
+ &.gray {
39
+ border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
40
+ border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
41
+ border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
42
+ background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
43
+ }
44
+
45
+ &.brown {
46
+ border-left: 0.25rem solid #996d55;
47
+ border-right: 0.25rem solid #996d55;
48
+ border-top: 0.25rem solid #996d55;
49
+ background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
50
+ }
51
+
52
+ margin-right: 10px;
53
+ p {
54
+ text-align: center;
55
+ font-size: 0.6rem;
56
+
57
+ opacity: ${props => (props.activeTab ? '1' : '0.5')};
58
+ }
59
+
60
+ border-radius: 5px 5px 0 0;
61
+
62
+ z-index: ${props => (props.activeTab ? 1 : -1)};
63
+
64
+ position: relative;
65
+ top: 0.3rem;
66
+ `;
@@ -1,13 +1,13 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
-
4
- interface IProps {
5
- id: string;
6
- children: React.ReactNode;
7
- }
8
-
9
- export const TabBody: React.FC<IProps> = ({ id, children }) => {
10
- return <Container data-tab-id={id}>{children}</Container>;
11
- };
12
-
13
- const Container = styled.div``;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+
4
+ interface IProps {
5
+ id: string;
6
+ children: React.ReactNode;
7
+ }
8
+
9
+ export const TabBody: React.FC<IProps> = ({ id, children }) => {
10
+ return <Container data-tab-id={id}>{children}</Container>;
11
+ };
12
+
13
+ const Container = styled.div``;