@rpg-engine/long-bow 0.3.45 → 0.3.47

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 (139) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/long-bow.cjs.development.js +705 -709
  4. package/dist/long-bow.cjs.development.js.map +1 -1
  5. package/dist/long-bow.cjs.production.min.js +1 -1
  6. package/dist/long-bow.cjs.production.min.js.map +1 -1
  7. package/dist/long-bow.esm.js +708 -712
  8. package/dist/long-bow.esm.js.map +1 -1
  9. package/package.json +100 -101
  10. package/src/components/Abstractions/SlotsContainer.tsx +45 -45
  11. package/src/components/Arrow/SelectArrow.tsx +65 -65
  12. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  13. package/src/components/Arrow/img/arrow01-left.png +0 -0
  14. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  15. package/src/components/Arrow/img/arrow01-right.png +0 -0
  16. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  17. package/src/components/Arrow/img/arrow02-left.png +0 -0
  18. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  19. package/src/components/Arrow/img/arrow02-right.png +0 -0
  20. package/src/components/Button.tsx +41 -41
  21. package/src/components/Character/CharacterSelection.tsx +96 -96
  22. package/src/components/Chat/Chat.tsx +194 -194
  23. package/src/components/Chatdeprecated/ChatDeprecated.tsx +200 -200
  24. package/src/components/CheckButton.tsx +65 -65
  25. package/src/components/CircularController/CircularController.tsx +162 -162
  26. package/src/components/CraftBook/CraftBook.tsx +230 -230
  27. package/src/components/CraftBook/MockItems.ts +46 -46
  28. package/src/components/DraggableContainer.tsx +154 -154
  29. package/src/components/Dropdown.tsx +96 -96
  30. package/src/components/DropdownSelectorContainer.tsx +42 -42
  31. package/src/components/Equipment/EquipmentSet.tsx +190 -190
  32. package/src/components/HistoryDialog.tsx +104 -104
  33. package/src/components/Input.tsx +15 -15
  34. package/src/components/Item/Cards/ItemTooltip.tsx +33 -33
  35. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  36. package/src/components/Item/Inventory/ItemContainer.tsx +175 -175
  37. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  38. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +142 -142
  39. package/src/components/Item/Inventory/ItemSlot.tsx +465 -466
  40. package/src/components/Item/Inventory/itemContainerHelper.ts +156 -156
  41. package/src/components/ListMenu.tsx +63 -63
  42. package/src/components/Multitab/Tab.tsx +57 -57
  43. package/src/components/Multitab/TabBody.tsx +13 -13
  44. package/src/components/Multitab/TabsContainer.tsx +97 -97
  45. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  46. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  47. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  48. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  49. package/src/components/ProgressBar.tsx +92 -92
  50. package/src/components/PropertySelect/PropertySelect.tsx +114 -114
  51. package/src/components/QuestInfo/QuestInfo.tsx +232 -232
  52. package/src/components/QuestList.tsx +129 -129
  53. package/src/components/RPGUIContainer.tsx +47 -47
  54. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  55. package/src/components/RPGUIRoot.tsx +14 -14
  56. package/src/components/RadioButton.tsx +53 -53
  57. package/src/components/RadioInput/RadioButton.tsx +98 -98
  58. package/src/components/RadioInput/RadioInput.tsx +98 -98
  59. package/src/components/RadioInput/instruments.ts +15 -15
  60. package/src/components/RangeSlider.tsx +78 -78
  61. package/src/components/RelativeListMenu.tsx +83 -83
  62. package/src/components/ScrollList.tsx +79 -79
  63. package/src/components/SimpleProgressBar.tsx +62 -62
  64. package/src/components/SkillProgressBar.tsx +133 -133
  65. package/src/components/SkillsContainer.tsx +167 -167
  66. package/src/components/Spellbook/QuickSpells.tsx +120 -120
  67. package/src/components/Spellbook/Spell.tsx +201 -201
  68. package/src/components/Spellbook/Spellbook.tsx +144 -144
  69. package/src/components/Spellbook/SpellbookShortcuts.tsx +77 -77
  70. package/src/components/Spellbook/constants.ts +12 -12
  71. package/src/components/Spellbook/mockSpells.ts +60 -60
  72. package/src/components/StaticBook/StaticBook.tsx +105 -105
  73. package/src/components/TextArea.tsx +11 -11
  74. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  75. package/src/components/TimeWidget/TimeWidget.tsx +63 -63
  76. package/src/components/TradingMenu/TradingItemRow.tsx +197 -197
  77. package/src/components/TradingMenu/TradingMenu.tsx +203 -203
  78. package/src/components/TradingMenu/items.mock.ts +36 -36
  79. package/src/components/Truncate.tsx +25 -25
  80. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  81. package/src/components/shared/Column.tsx +16 -16
  82. package/src/components/shared/Ellipsis.tsx +65 -65
  83. package/src/components/shared/SpriteFromAtlas.tsx +102 -102
  84. package/src/components/typography/DynamicText.tsx +49 -49
  85. package/src/constants/uiColors.ts +20 -20
  86. package/src/constants/uiDevices.ts +3 -5
  87. package/src/constants/uiFonts.ts +12 -12
  88. package/src/hooks/useEventListener.ts +21 -21
  89. package/src/hooks/useOutsideAlerter.ts +25 -25
  90. package/src/index.tsx +40 -40
  91. package/src/libs/StringHelpers.ts +3 -3
  92. package/src/mocks/atlas/entities/entities.json +20215 -20215
  93. package/src/mocks/atlas/icons/icons.json +735 -735
  94. package/src/mocks/atlas/items/items.json +12086 -12086
  95. package/src/mocks/equipmentSet.mocks.ts +393 -393
  96. package/src/mocks/itemContainer.mocks.ts +560 -560
  97. package/src/mocks/skills.mocks.ts +128 -128
  98. package/src/stories/Arrow.stories.tsx +26 -26
  99. package/src/stories/Button.stories.tsx +36 -36
  100. package/src/stories/CharacterSelection.stories.tsx +45 -45
  101. package/src/stories/Chat.stories.tsx +187 -187
  102. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  103. package/src/stories/CheckButton.stories.tsx +48 -48
  104. package/src/stories/CircullarController.stories.tsx +33 -33
  105. package/src/stories/CraftBook.stories.tsx +40 -40
  106. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  107. package/src/stories/DraggableContainer.stories.tsx +28 -28
  108. package/src/stories/Dropdown.stories.tsx +46 -46
  109. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  110. package/src/stories/EquipmentSet.stories.tsx +65 -65
  111. package/src/stories/HistoryDialog.stories.tsx +61 -61
  112. package/src/stories/ItemContainer.stories.tsx +124 -124
  113. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  114. package/src/stories/ItemSelector.stories.tsx +77 -77
  115. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  116. package/src/stories/ListMenu.stories.tsx +56 -56
  117. package/src/stories/Multitab.stories.tsx +51 -51
  118. package/src/stories/NPCDialog.stories.tsx +130 -130
  119. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  120. package/src/stories/ProgressBar.stories.tsx +23 -23
  121. package/src/stories/PropertySelect.stories.tsx +40 -40
  122. package/src/stories/QuestInfo.stories.tsx +107 -107
  123. package/src/stories/QuestList.stories.tsx +82 -82
  124. package/src/stories/QuickSpells.stories.tsx +38 -38
  125. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  126. package/src/stories/RadioButton.stories.tsx +49 -49
  127. package/src/stories/RadioInput.stories.tsx +34 -34
  128. package/src/stories/RangeSlider.stories.tsx +64 -64
  129. package/src/stories/ScrollList.stories.tsx +85 -85
  130. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  131. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  132. package/src/stories/SkillsContainer.stories.tsx +35 -35
  133. package/src/stories/Spellbook.stories.tsx +107 -107
  134. package/src/stories/StaticBook.stories.tsx +32 -32
  135. package/src/stories/Text.stories.tsx +42 -42
  136. package/src/stories/TimeWidget.stories.tsx +27 -27
  137. package/src/stories/TradingMenu.stories.tsx +45 -45
  138. package/src/types/eventTypes.ts +4 -4
  139. 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
- onClick={() => {
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
+ onClick={() => {
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,57 +1,57 @@
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
- onClick: () => void;
9
- type: MultitabType;
10
- }
11
-
12
- export const Tab: React.FC<ISingleTab> = ({ active, label, onClick, type }) => {
13
- return (
14
- <CustomTab activeTab={active} onClick={onClick} className={type}>
15
- <p>{label}</p>
16
- </CustomTab>
17
- );
18
- };
19
-
20
- interface ICustomTab {
21
- activeTab: boolean;
22
- }
23
-
24
- const CustomTab = styled.div<ICustomTab>`
25
- width: 120px;
26
- color: white;
27
- font-size: 0.8rem;
28
-
29
- &.gray {
30
- border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
31
- border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
32
- border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
33
- background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
34
- }
35
-
36
- &.brown {
37
- border-left: 0.25rem solid #996d55;
38
- border-right: 0.25rem solid #996d55;
39
- border-top: 0.25rem solid #996d55;
40
- background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
41
- }
42
-
43
- margin-right: 10px;
44
- p {
45
- text-align: center;
46
- font-size: 0.6rem;
47
-
48
- opacity: ${props => (props.activeTab ? '1' : '0.5')};
49
- }
50
-
51
- border-radius: 5px 5px 0 0;
52
-
53
- z-index: ${props => (props.activeTab ? 1 : -1)};
54
-
55
- position: relative;
56
- top: 0.3rem;
57
- `;
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
+ onClick: () => void;
9
+ type: MultitabType;
10
+ }
11
+
12
+ export const Tab: React.FC<ISingleTab> = ({ active, label, onClick, type }) => {
13
+ return (
14
+ <CustomTab activeTab={active} onClick={onClick} className={type}>
15
+ <p>{label}</p>
16
+ </CustomTab>
17
+ );
18
+ };
19
+
20
+ interface ICustomTab {
21
+ activeTab: boolean;
22
+ }
23
+
24
+ const CustomTab = styled.div<ICustomTab>`
25
+ width: 120px;
26
+ color: white;
27
+ font-size: 0.8rem;
28
+
29
+ &.gray {
30
+ border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
31
+ border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
32
+ border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
33
+ background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
34
+ }
35
+
36
+ &.brown {
37
+ border-left: 0.25rem solid #996d55;
38
+ border-right: 0.25rem solid #996d55;
39
+ border-top: 0.25rem solid #996d55;
40
+ background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
41
+ }
42
+
43
+ margin-right: 10px;
44
+ p {
45
+ text-align: center;
46
+ font-size: 0.6rem;
47
+
48
+ opacity: ${props => (props.activeTab ? '1' : '0.5')};
49
+ }
50
+
51
+ border-radius: 5px 5px 0 0;
52
+
53
+ z-index: ${props => (props.activeTab ? 1 : -1)};
54
+
55
+ position: relative;
56
+ top: 0.3rem;
57
+ `;
@@ -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``;