@rpg-engine/long-bow 0.3.76 → 0.3.77

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