@rpg-engine/long-bow 0.3.62 → 0.3.63

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