@rpg-engine/long-bow 0.3.47 → 0.3.49

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