@teambit/component.ui.version-dropdown 0.0.907 → 0.0.908
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.
- package/dist/{preview-1756496771585.js → preview-1757355919290.js} +2 -2
- package/dist/version-dropdown-placeholder.module.scss +1 -1
- package/dist/version-dropdown.d.ts +3 -3
- package/dist/version-dropdown.js +18 -23
- package/dist/version-dropdown.js.map +1 -1
- package/dist/version-dropdown.module.scss +7 -21
- package/dist/version-info/version-info.module.scss +0 -1
- package/package.json +3 -3
- package/version-dropdown-placeholder.module.scss +1 -1
- package/version-dropdown.module.scss +7 -21
- package/version-dropdown.tsx +29 -35
- package/version-info/version-info.module.scss +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_ui_version-dropdown@0.0.
|
|
2
|
-
import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_ui_version-dropdown@0.0.
|
|
1
|
+
import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_ui_version-dropdown@0.0.908/dist/version-dropdown.composition.js';
|
|
2
|
+
import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_ui_version-dropdown@0.0.908/dist/version-dropdown.docs.js';
|
|
3
3
|
|
|
4
4
|
export const compositions = [compositions_0];
|
|
5
5
|
export const overview = [overview_0];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { type ComponentType, type HTMLAttributes } from 'react';
|
|
2
2
|
import type { LegacyComponentLog } from '@teambit/legacy-component-log';
|
|
3
3
|
import type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
|
|
4
4
|
import type { VersionProps } from './version-dropdown-placeholder';
|
|
@@ -36,8 +36,8 @@ export type VersionDropdownProps = {
|
|
|
36
36
|
menuClassName?: string;
|
|
37
37
|
showVersionDetails?: boolean;
|
|
38
38
|
disabled?: boolean;
|
|
39
|
-
PlaceholderComponent?:
|
|
40
|
-
} &
|
|
39
|
+
PlaceholderComponent?: ComponentType<VersionProps>;
|
|
40
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
41
41
|
export declare const VersionDropdown: React.MemoExoticComponent<typeof _VersionDropdown>;
|
|
42
42
|
declare function _VersionDropdown({ currentVersion, latestVersion, localVersion, useCurrentVersionLog, hasMoreVersions, loading, overrideVersionHref, className, placeholderClassName, getActiveTabIndex, dropdownClassName, menuClassName, showVersionDetails, disabled, PlaceholderComponent: _PlaceholderComponent, currentLane, useComponentVersions, lanes, ...rest }: VersionDropdownProps): React.JSX.Element;
|
|
43
43
|
export type VersionMenuTab = {
|
package/dist/version-dropdown.js
CHANGED
|
@@ -50,14 +50,14 @@ const version_info_1 = require("./version-info");
|
|
|
50
50
|
const lane_info_1 = require("./lane-info");
|
|
51
51
|
const version_dropdown_placeholder_1 = require("./version-dropdown-placeholder");
|
|
52
52
|
exports.LOCAL_VERSION = 'workspace';
|
|
53
|
-
exports.VersionDropdown = react_1.
|
|
54
|
-
const VersionMenu = react_1.
|
|
53
|
+
exports.VersionDropdown = (0, react_1.memo)(_VersionDropdown);
|
|
54
|
+
const VersionMenu = (0, react_1.memo)(_VersionMenu);
|
|
55
55
|
function _VersionDropdown(_a) {
|
|
56
56
|
var { currentVersion, latestVersion, localVersion, useCurrentVersionLog, hasMoreVersions, loading, overrideVersionHref, className, placeholderClassName, getActiveTabIndex, dropdownClassName, menuClassName, showVersionDetails = true, disabled, PlaceholderComponent: _PlaceholderComponent, currentLane, useComponentVersions, lanes } = _a, rest = __rest(_a, ["currentVersion", "latestVersion", "localVersion", "useCurrentVersionLog", "hasMoreVersions", "loading", "overrideVersionHref", "className", "placeholderClassName", "getActiveTabIndex", "dropdownClassName", "menuClassName", "showVersionDetails", "disabled", "PlaceholderComponent", "currentLane", "useComponentVersions", "lanes"]);
|
|
57
57
|
const [key, setKey] = (0, react_1.useState)(0);
|
|
58
58
|
const singleVersion = !hasMoreVersions;
|
|
59
59
|
const [open, setOpen] = (0, react_1.useState)(false);
|
|
60
|
-
react_1.
|
|
60
|
+
(0, react_1.useEffect)(() => {
|
|
61
61
|
if (loading && open) {
|
|
62
62
|
setOpen(false);
|
|
63
63
|
}
|
|
@@ -88,11 +88,11 @@ const defaultActiveTabIndex = (currentVersion, tabs = [], tags, snaps) => {
|
|
|
88
88
|
};
|
|
89
89
|
const VERSION_TAB_NAMES = ['TAG', 'SNAP', 'LANE'];
|
|
90
90
|
function _VersionMenu(_a) {
|
|
91
|
-
var _b
|
|
91
|
+
var _b;
|
|
92
92
|
var { currentVersion, localVersion, latestVersion, overrideVersionHref, showVersionDetails, useVersions, currentLane, lanes, getActiveTabIndex = defaultActiveTabIndex, loading: loadingFromProps, open, onVersionClicked } = _a, rest = __rest(_a, ["currentVersion", "localVersion", "latestVersion", "overrideVersionHref", "showVersionDetails", "useVersions", "currentLane", "lanes", "getActiveTabIndex", "loading", "open", "onVersionClicked"]);
|
|
93
93
|
const { snaps, tags, loading: loadingVersions } = (useVersions === null || useVersions === void 0 ? void 0 : useVersions()) || {};
|
|
94
94
|
const loading = loadingFromProps || loadingVersions;
|
|
95
|
-
const tabs = react_1.
|
|
95
|
+
const tabs = (0, react_1.useMemo)(() => VERSION_TAB_NAMES.map((name) => {
|
|
96
96
|
switch (name) {
|
|
97
97
|
case 'SNAP':
|
|
98
98
|
return { name, payload: snaps || [] };
|
|
@@ -102,9 +102,9 @@ function _VersionMenu(_a) {
|
|
|
102
102
|
return { name, payload: tags || [] };
|
|
103
103
|
}
|
|
104
104
|
}).filter((tab) => tab.payload.length > 0), [snaps === null || snaps === void 0 ? void 0 : snaps.length, tags === null || tags === void 0 ? void 0 : tags.length, lanes === null || lanes === void 0 ? void 0 : lanes.length, loading]);
|
|
105
|
-
const [activeTabIndex, setActiveTab] = react_1.
|
|
106
|
-
const activeTab = react_1.
|
|
107
|
-
react_1.
|
|
105
|
+
const [activeTabIndex, setActiveTab] = (0, react_1.useState)(getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane));
|
|
106
|
+
const activeTab = (0, react_1.useMemo)(() => (activeTabIndex !== undefined ? tabs[activeTabIndex] : undefined), [activeTabIndex, tabs]);
|
|
107
|
+
(0, react_1.useEffect)(() => {
|
|
108
108
|
if (!currentLane)
|
|
109
109
|
return;
|
|
110
110
|
if (tabs.length === 0)
|
|
@@ -114,11 +114,8 @@ function _VersionMenu(_a) {
|
|
|
114
114
|
setActiveTab(_activeTabIndex);
|
|
115
115
|
}, [currentLane, tabs.length, tags === null || tags === void 0 ? void 0 : tags.length, snaps === null || snaps === void 0 ? void 0 : snaps.length, currentVersion, loading]);
|
|
116
116
|
const multipleTabs = tabs.length > 1;
|
|
117
|
-
const
|
|
118
|
-
|
|
119
|
-
: `Switch between ${(_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.name.toLocaleLowerCase()}s`;
|
|
120
|
-
const showTab = activeTabIndex !== undefined && ((_c = tabs[activeTabIndex]) === null || _c === void 0 ? void 0 : _c.payload.length) > 0;
|
|
121
|
-
const _rowRenderer = react_1.default.useCallback(function VersionRowRenderer({ index }) {
|
|
117
|
+
const showTab = activeTabIndex !== undefined && ((_b = tabs[activeTabIndex]) === null || _b === void 0 ? void 0 : _b.payload.length) > 0;
|
|
118
|
+
const _rowRenderer = (0, react_1.useCallback)(function VersionRowRenderer({ index }) {
|
|
122
119
|
const { name, payload = [] } = activeTab || {};
|
|
123
120
|
const item = payload[index];
|
|
124
121
|
if (!item)
|
|
@@ -130,20 +127,18 @@ function _VersionMenu(_a) {
|
|
|
130
127
|
const version = item;
|
|
131
128
|
return (react_1.default.createElement(version_info_1.VersionInfo, Object.assign({ key: version.version, currentVersion: currentVersion, latestVersion: latestVersion, overrideVersionHref: overrideVersionHref, showDetails: showVersionDetails, onVersionClicked: onVersionClicked }, version)));
|
|
132
129
|
}, [activeTab, currentVersion, latestVersion, showVersionDetails, currentLane === null || currentLane === void 0 ? void 0 : currentLane.id.toString(), showTab]);
|
|
133
|
-
const rowRenderer = react_1.
|
|
134
|
-
const ActiveTab = react_1.
|
|
130
|
+
const rowRenderer = (0, react_1.useMemo)(() => (showTab && activeTab ? _rowRenderer : () => null), [showTab, activeTab, _rowRenderer]);
|
|
131
|
+
const ActiveTab = (0, react_1.useMemo)(() => {
|
|
135
132
|
return activeTab === null || activeTab === void 0 ? void 0 : activeTab.payload.map((payload, index) => {
|
|
136
133
|
return rowRenderer({ index });
|
|
137
134
|
});
|
|
138
135
|
}, [activeTab]);
|
|
139
|
-
return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionMenuContainer, !open && version_dropdown_module_scss_1.default.hide) }),
|
|
140
|
-
react_1.default.createElement(
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
react_1.default.createElement("
|
|
145
|
-
react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: {}, className: version_dropdown_module_scss_1.default.versionUserAvatar }),
|
|
146
|
-
react_1.default.createElement("span", { className: version_dropdown_module_scss_1.default.versionName }, exports.LOCAL_VERSION))))),
|
|
136
|
+
return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionMenuContainer, loading && version_dropdown_module_scss_1.default.loading, !open && version_dropdown_module_scss_1.default.hide) }),
|
|
137
|
+
loading && react_1.default.createElement(base_ui_loaders_skeleton_1.LineSkeleton, { count: 6, className: version_dropdown_module_scss_1.default.loader }),
|
|
138
|
+
!loading && localVersion && (react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { href: '?', active: currentVersion === exports.LOCAL_VERSION, className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionRow, version_dropdown_module_scss_1.default.localVersion), onClick: onVersionClicked },
|
|
139
|
+
react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.version },
|
|
140
|
+
react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: {}, className: version_dropdown_module_scss_1.default.versionUserAvatar }),
|
|
141
|
+
react_1.default.createElement("span", { className: version_dropdown_module_scss_1.default.versionName }, exports.LOCAL_VERSION)))),
|
|
147
142
|
react_1.default.createElement("div", { className: (0, classnames_1.default)(multipleTabs && version_dropdown_module_scss_1.default.tabs) }, multipleTabs &&
|
|
148
143
|
tabs.map(({ name }, index) => {
|
|
149
144
|
return (react_1.default.createElement(ui_foundation_ui_use_box_tab_1.Tab, { className: version_dropdown_module_scss_1.default.tab, key: name, isActive: activeTabIndex === index, onClick: () => setActiveTab(index) }, name));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version-dropdown.js","sourceRoot":"","sources":["../version-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"version-dropdown.js","sourceRoot":"","sources":["../version-dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,39 +1,19 @@
|
|
|
1
1
|
@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
|
|
2
2
|
|
|
3
3
|
.versionDropdown {
|
|
4
|
-
height: 100%;
|
|
5
|
-
|
|
6
|
-
> div {
|
|
7
|
-
height: 100%;
|
|
8
|
-
display: flex;
|
|
9
|
-
align-items: center;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
4
|
.menu {
|
|
13
5
|
padding: 0;
|
|
14
6
|
right: 0;
|
|
15
|
-
// top: 43px;
|
|
16
7
|
font-size: var(--bit-p-xs);
|
|
17
|
-
border-radius:
|
|
8
|
+
border-radius: 8px;
|
|
18
9
|
z-index: $modal-z-index;
|
|
19
10
|
border: 1px solid var(--border-medium-color, #ededed);
|
|
20
11
|
}
|
|
21
12
|
}
|
|
22
13
|
|
|
23
|
-
.title {
|
|
24
|
-
padding: 16px;
|
|
25
|
-
padding-bottom: 12px;
|
|
26
|
-
border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.titleContainer {
|
|
30
|
-
margin-bottom: 2px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
14
|
.versionContainerRoot {
|
|
34
15
|
max-height: 240px;
|
|
35
16
|
overflow-y: scroll;
|
|
36
|
-
padding-bottom: 8px;
|
|
37
17
|
position: relative;
|
|
38
18
|
}
|
|
39
19
|
|
|
@@ -75,6 +55,7 @@
|
|
|
75
55
|
.versionName {
|
|
76
56
|
padding: 0px 8px;
|
|
77
57
|
min-width: fit-content;
|
|
58
|
+
text-transform: capitalize;
|
|
78
59
|
}
|
|
79
60
|
}
|
|
80
61
|
|
|
@@ -135,6 +116,11 @@
|
|
|
135
116
|
|
|
136
117
|
.versionMenuContainer {
|
|
137
118
|
display: initial;
|
|
119
|
+
padding: 0 8px;
|
|
120
|
+
|
|
121
|
+
&.loading {
|
|
122
|
+
padding: 0;
|
|
123
|
+
}
|
|
138
124
|
|
|
139
125
|
&.hide {
|
|
140
126
|
display: none;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/component.ui.version-dropdown",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.908",
|
|
4
4
|
"homepage": "https://bit.cloud/teambit/component/ui/version-dropdown",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "teambit.component",
|
|
8
8
|
"name": "ui/version-dropdown",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.908"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"classnames": "2.2.6",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@teambit/legacy-component-log": "0.0.410",
|
|
24
24
|
"@teambit/ui-foundation.ui.use-box.tab": "0.0.122",
|
|
25
25
|
"@teambit/component.ui.version-label": "0.0.509",
|
|
26
|
-
"@teambit/design.ui.avatar": "1.1.
|
|
26
|
+
"@teambit/design.ui.avatar": "1.1.22"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/classnames": "2.2.11",
|
|
@@ -1,39 +1,19 @@
|
|
|
1
1
|
@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
|
|
2
2
|
|
|
3
3
|
.versionDropdown {
|
|
4
|
-
height: 100%;
|
|
5
|
-
|
|
6
|
-
> div {
|
|
7
|
-
height: 100%;
|
|
8
|
-
display: flex;
|
|
9
|
-
align-items: center;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
4
|
.menu {
|
|
13
5
|
padding: 0;
|
|
14
6
|
right: 0;
|
|
15
|
-
// top: 43px;
|
|
16
7
|
font-size: var(--bit-p-xs);
|
|
17
|
-
border-radius:
|
|
8
|
+
border-radius: 8px;
|
|
18
9
|
z-index: $modal-z-index;
|
|
19
10
|
border: 1px solid var(--border-medium-color, #ededed);
|
|
20
11
|
}
|
|
21
12
|
}
|
|
22
13
|
|
|
23
|
-
.title {
|
|
24
|
-
padding: 16px;
|
|
25
|
-
padding-bottom: 12px;
|
|
26
|
-
border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.titleContainer {
|
|
30
|
-
margin-bottom: 2px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
14
|
.versionContainerRoot {
|
|
34
15
|
max-height: 240px;
|
|
35
16
|
overflow-y: scroll;
|
|
36
|
-
padding-bottom: 8px;
|
|
37
17
|
position: relative;
|
|
38
18
|
}
|
|
39
19
|
|
|
@@ -75,6 +55,7 @@
|
|
|
75
55
|
.versionName {
|
|
76
56
|
padding: 0px 8px;
|
|
77
57
|
min-width: fit-content;
|
|
58
|
+
text-transform: capitalize;
|
|
78
59
|
}
|
|
79
60
|
}
|
|
80
61
|
|
|
@@ -135,6 +116,11 @@
|
|
|
135
116
|
|
|
136
117
|
.versionMenuContainer {
|
|
137
118
|
display: initial;
|
|
119
|
+
padding: 0 8px;
|
|
120
|
+
|
|
121
|
+
&.loading {
|
|
122
|
+
padding: 0;
|
|
123
|
+
}
|
|
138
124
|
|
|
139
125
|
&.hide {
|
|
140
126
|
display: none;
|
package/version-dropdown.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useState, useEffect, useCallback, useMemo, memo, type ComponentType, type HTMLAttributes } from 'react';
|
|
2
2
|
import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
|
|
3
3
|
import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
|
|
4
4
|
import { Tab } from '@teambit/ui-foundation.ui.use-box.tab';
|
|
@@ -52,11 +52,11 @@ export type VersionDropdownProps = {
|
|
|
52
52
|
menuClassName?: string;
|
|
53
53
|
showVersionDetails?: boolean;
|
|
54
54
|
disabled?: boolean;
|
|
55
|
-
PlaceholderComponent?:
|
|
56
|
-
} &
|
|
55
|
+
PlaceholderComponent?: ComponentType<VersionProps>;
|
|
56
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
57
57
|
|
|
58
|
-
export const VersionDropdown =
|
|
59
|
-
const VersionMenu =
|
|
58
|
+
export const VersionDropdown = memo(_VersionDropdown);
|
|
59
|
+
const VersionMenu = memo(_VersionMenu);
|
|
60
60
|
function _VersionDropdown({
|
|
61
61
|
currentVersion,
|
|
62
62
|
latestVersion,
|
|
@@ -82,7 +82,7 @@ function _VersionDropdown({
|
|
|
82
82
|
const singleVersion = !hasMoreVersions;
|
|
83
83
|
const [open, setOpen] = useState(false);
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
useEffect(() => {
|
|
86
86
|
if (loading && open) {
|
|
87
87
|
setOpen(false);
|
|
88
88
|
}
|
|
@@ -176,7 +176,7 @@ type VersionMenuProps = {
|
|
|
176
176
|
getActiveTabIndex?: GetActiveTabIndex;
|
|
177
177
|
open?: boolean;
|
|
178
178
|
onVersionClicked?: () => void;
|
|
179
|
-
} &
|
|
179
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
180
180
|
|
|
181
181
|
export type VersionMenuTab =
|
|
182
182
|
| {
|
|
@@ -217,7 +217,7 @@ function _VersionMenu({
|
|
|
217
217
|
const { snaps, tags, loading: loadingVersions } = useVersions?.() || {};
|
|
218
218
|
const loading = loadingFromProps || loadingVersions;
|
|
219
219
|
|
|
220
|
-
const tabs =
|
|
220
|
+
const tabs = useMemo(
|
|
221
221
|
() =>
|
|
222
222
|
VERSION_TAB_NAMES.map((name) => {
|
|
223
223
|
switch (name) {
|
|
@@ -232,16 +232,16 @@ function _VersionMenu({
|
|
|
232
232
|
[snaps?.length, tags?.length, lanes?.length, loading]
|
|
233
233
|
);
|
|
234
234
|
|
|
235
|
-
const [activeTabIndex, setActiveTab] =
|
|
235
|
+
const [activeTabIndex, setActiveTab] = useState<number | undefined>(
|
|
236
236
|
getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane)
|
|
237
237
|
);
|
|
238
238
|
|
|
239
|
-
const activeTab =
|
|
239
|
+
const activeTab = useMemo(
|
|
240
240
|
() => (activeTabIndex !== undefined ? tabs[activeTabIndex] : undefined),
|
|
241
241
|
[activeTabIndex, tabs]
|
|
242
242
|
);
|
|
243
243
|
|
|
244
|
-
|
|
244
|
+
useEffect(() => {
|
|
245
245
|
if (!currentLane) return;
|
|
246
246
|
if (tabs.length === 0) return;
|
|
247
247
|
const _activeTabIndex = getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane);
|
|
@@ -249,13 +249,10 @@ function _VersionMenu({
|
|
|
249
249
|
}, [currentLane, tabs.length, tags?.length, snaps?.length, currentVersion, loading]);
|
|
250
250
|
|
|
251
251
|
const multipleTabs = tabs.length > 1;
|
|
252
|
-
const message = multipleTabs
|
|
253
|
-
? 'Switch to view tags, snaps, or lanes'
|
|
254
|
-
: `Switch between ${tabs[0]?.name.toLocaleLowerCase()}s`;
|
|
255
252
|
|
|
256
253
|
const showTab = activeTabIndex !== undefined && tabs[activeTabIndex]?.payload.length > 0;
|
|
257
254
|
|
|
258
|
-
const _rowRenderer =
|
|
255
|
+
const _rowRenderer = useCallback(
|
|
259
256
|
function VersionRowRenderer({ index }) {
|
|
260
257
|
const { name, payload = [] } = activeTab || {};
|
|
261
258
|
const item = payload[index];
|
|
@@ -280,36 +277,33 @@ function _VersionMenu({
|
|
|
280
277
|
[activeTab, currentVersion, latestVersion, showVersionDetails, currentLane?.id.toString(), showTab]
|
|
281
278
|
);
|
|
282
279
|
|
|
283
|
-
const rowRenderer =
|
|
280
|
+
const rowRenderer = useMemo(
|
|
284
281
|
() => (showTab && activeTab ? _rowRenderer : () => null),
|
|
285
282
|
[showTab, activeTab, _rowRenderer]
|
|
286
283
|
);
|
|
287
284
|
|
|
288
|
-
const ActiveTab =
|
|
285
|
+
const ActiveTab = useMemo(() => {
|
|
289
286
|
return activeTab?.payload.map((payload, index) => {
|
|
290
287
|
return rowRenderer({ index });
|
|
291
288
|
});
|
|
292
289
|
}, [activeTab]);
|
|
293
290
|
|
|
294
291
|
return (
|
|
295
|
-
<div {...rest} className={classNames(styles.versionMenuContainer, !open && styles.hide)}>
|
|
296
|
-
<
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
<
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
</MenuLinkItem>
|
|
311
|
-
)}
|
|
312
|
-
</div>
|
|
292
|
+
<div {...rest} className={classNames(styles.versionMenuContainer, loading && styles.loading, !open && styles.hide)}>
|
|
293
|
+
{loading && <LineSkeleton count={6} className={styles.loader} />}
|
|
294
|
+
{!loading && localVersion && (
|
|
295
|
+
<MenuLinkItem
|
|
296
|
+
href={'?'}
|
|
297
|
+
active={currentVersion === LOCAL_VERSION}
|
|
298
|
+
className={classNames(styles.versionRow, styles.localVersion)}
|
|
299
|
+
onClick={onVersionClicked}
|
|
300
|
+
>
|
|
301
|
+
<div className={styles.version}>
|
|
302
|
+
<UserAvatar size={24} account={{}} className={styles.versionUserAvatar} />
|
|
303
|
+
<span className={styles.versionName}>{LOCAL_VERSION}</span>
|
|
304
|
+
</div>
|
|
305
|
+
</MenuLinkItem>
|
|
306
|
+
)}
|
|
313
307
|
<div className={classNames(multipleTabs && styles.tabs)}>
|
|
314
308
|
{multipleTabs &&
|
|
315
309
|
tabs.map(({ name }, index) => {
|