ydb-ui-components 5.3.0 → 5.4.0
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.
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
flex-grow: 1;
|
|
33
33
|
display: flex;
|
|
34
34
|
align-items: center;
|
|
35
|
+
justify-content: space-between;
|
|
35
36
|
overflow: hidden;
|
|
36
37
|
}
|
|
37
38
|
.ydb-tree-view__icon {
|
|
@@ -46,8 +47,12 @@
|
|
|
46
47
|
.ydb-tree-view__icon svg {
|
|
47
48
|
display: block;
|
|
48
49
|
}
|
|
50
|
+
.ydb-tree-view__label {
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
min-width: 0;
|
|
54
|
+
}
|
|
49
55
|
.ydb-tree-view__text {
|
|
50
|
-
flex-grow: 1;
|
|
51
56
|
white-space: nowrap;
|
|
52
57
|
overflow: hidden;
|
|
53
58
|
text-overflow: ellipsis;
|
|
@@ -35,10 +35,12 @@ function TreeView({ children, name, title, icon, collapsed = true, active = fals
|
|
|
35
35
|
arrowClassName += ' tree-view_arrow-collapsed';
|
|
36
36
|
containerClassName += ' tree-view_children-collapsed';
|
|
37
37
|
}
|
|
38
|
+
const tooltipContent = title !== null && title !== void 0 ? title : (typeof name === 'string' ? name : '');
|
|
39
|
+
const isTooltipDisabled = tooltipContent.trim().length === 0;
|
|
38
40
|
return ((0, jsx_runtime_1.jsx)("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: (0, jsx_runtime_1.jsxs)("div", { className: "tree-view", children: [(0, jsx_runtime_1.jsxs)("div", { className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
|
|
39
41
|
collapsed,
|
|
40
42
|
hidden: !hasArrow,
|
|
41
|
-
})}`, disabled: !handleArrowClick, onClick: handleArrowClick }), (0, jsx_runtime_1.jsxs)("div", { className: b('content'), children: [icon && (0, jsx_runtime_1.jsx)("div", { className: b('icon'), children: icon }), (0, jsx_runtime_1.jsx)("div", { className: b('text'),
|
|
43
|
+
})}`, disabled: !handleArrowClick, onClick: handleArrowClick }), (0, jsx_runtime_1.jsxs)("div", { className: b('content'), children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { title: tooltipContent, disabled: isTooltipDisabled, children: (0, jsx_runtime_1.jsxs)("div", { className: b('label'), children: [icon && (0, jsx_runtime_1.jsx)("div", { className: b('icon'), children: icon }), (0, jsx_runtime_1.jsx)("div", { className: b('text'), children: name })] }) }), actions && actions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: b('actions'), children: [additionalNodeElements, (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { onOpenToggle: onActionsOpenToggle, defaultSwitcherProps: {
|
|
42
44
|
view: 'flat-secondary',
|
|
43
45
|
size: 's',
|
|
44
46
|
pin: 'brick-brick',
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
flex-grow: 1;
|
|
33
33
|
display: flex;
|
|
34
34
|
align-items: center;
|
|
35
|
+
justify-content: space-between;
|
|
35
36
|
overflow: hidden;
|
|
36
37
|
}
|
|
37
38
|
.ydb-tree-view__icon {
|
|
@@ -46,8 +47,12 @@
|
|
|
46
47
|
.ydb-tree-view__icon svg {
|
|
47
48
|
display: block;
|
|
48
49
|
}
|
|
50
|
+
.ydb-tree-view__label {
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
min-width: 0;
|
|
54
|
+
}
|
|
49
55
|
.ydb-tree-view__text {
|
|
50
|
-
flex-grow: 1;
|
|
51
56
|
white-space: nowrap;
|
|
52
57
|
overflow: hidden;
|
|
53
58
|
text-overflow: ellipsis;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { DropdownMenu } from '@gravity-ui/uikit';
|
|
3
|
+
import { ActionTooltip, DropdownMenu } from '@gravity-ui/uikit';
|
|
4
4
|
import { block } from '../../utils/cn';
|
|
5
5
|
import './TreeView.css';
|
|
6
6
|
const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
|
|
@@ -29,10 +29,12 @@ export function TreeView({ children, name, title, icon, collapsed = true, active
|
|
|
29
29
|
arrowClassName += ' tree-view_arrow-collapsed';
|
|
30
30
|
containerClassName += ' tree-view_children-collapsed';
|
|
31
31
|
}
|
|
32
|
+
const tooltipContent = title !== null && title !== void 0 ? title : (typeof name === 'string' ? name : '');
|
|
33
|
+
const isTooltipDisabled = tooltipContent.trim().length === 0;
|
|
32
34
|
return (_jsx("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: _jsxs("div", { className: "tree-view", children: [_jsxs("div", { className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [_jsx("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
|
|
33
35
|
collapsed,
|
|
34
36
|
hidden: !hasArrow,
|
|
35
|
-
})}`, disabled: !handleArrowClick, onClick: handleArrowClick }), _jsxs("div", { className: b('content'), children: [icon && _jsx("div", { className: b('icon'), children: icon }), _jsx("div", { className: b('text'),
|
|
37
|
+
})}`, disabled: !handleArrowClick, onClick: handleArrowClick }), _jsxs("div", { className: b('content'), children: [_jsx(ActionTooltip, { title: tooltipContent, disabled: isTooltipDisabled, children: _jsxs("div", { className: b('label'), children: [icon && _jsx("div", { className: b('icon'), children: icon }), _jsx("div", { className: b('text'), children: name })] }) }), actions && actions.length > 0 && (_jsxs("div", { className: b('actions'), children: [additionalNodeElements, _jsx(DropdownMenu, { onOpenToggle: onActionsOpenToggle, defaultSwitcherProps: {
|
|
36
38
|
view: 'flat-secondary',
|
|
37
39
|
size: 's',
|
|
38
40
|
pin: 'brick-brick',
|