pixel-react 1.10.4 → 1.10.6
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/lib/ComponentProps/TreeNodeProps.d.ts +2 -1
- package/lib/components/AddResourceButton/AddResourceButton.d.ts +4 -0
- package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
- package/lib/components/AddResourceButton/index.d.ts +1 -1
- package/lib/components/AddResourceButton/type.d.ts +2 -0
- package/lib/components/BrowserTabs/BrowserTabs.d.ts +5 -0
- package/lib/components/BrowserTabs/index.d.ts +1 -0
- package/lib/components/BrowserTabs/types.d.ts +64 -0
- package/lib/components/ConnectingBranch/data.d.ts +62 -64
- package/lib/components/ConnectingBranch/types.d.ts +28 -7
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +6 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +15 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
- package/lib/components/Excel/Types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +1 -0
- package/lib/components/MiniModal/types.d.ts +2 -1
- package/lib/components/Select/components/types.d.ts +6 -1
- package/lib/components/Select/types.d.ts +17 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/Types.d.ts +1 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/types.d.ts +4 -3
- package/lib/index.d.ts +127 -13
- package/lib/index.esm.js +992 -462
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +993 -462
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +2 -1
- package/src/assets/Themes/BaseTheme.scss +1 -2
- package/src/assets/Themes/DarkTheme.scss +0 -1
- package/src/assets/styles/_mixins.scss +19 -0
- package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
- package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
- package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
- package/src/components/AddResourceButton/index.ts +1 -1
- package/src/components/AddResourceButton/type.ts +2 -0
- package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
- package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
- package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
- package/src/components/BrowserTabs/index.ts +1 -0
- package/src/components/BrowserTabs/types.ts +73 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
- package/src/components/ConnectingBranch/data.tsx +207 -213
- package/src/components/ConnectingBranch/types.ts +26 -17
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
- package/src/components/Excel/ExcelFile.stories.tsx +10 -2
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
- package/src/components/Excel/Types.ts +1 -0
- package/src/components/Excel/dataConversion.ts +17 -19
- package/src/components/MenuOption/MenuOption.tsx +4 -0
- package/src/components/MenuOption/types.ts +1 -0
- package/src/components/MiniModal/MiniModal.scss +8 -0
- package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
- package/src/components/MiniModal/types.ts +2 -1
- package/src/components/Select/Select.stories.tsx +43 -1
- package/src/components/Select/Select.tsx +16 -1
- package/src/components/Select/components/Dropdown.scss +41 -1
- package/src/components/Select/components/Dropdown.tsx +52 -6
- package/src/components/Select/components/types.ts +7 -2
- package/src/components/Select/types.ts +22 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
- package/src/components/Table/Table.stories.tsx +1 -1
- package/src/components/Table/Table.tsx +55 -4
- package/src/components/Table/Types.ts +4 -1
- package/src/components/TableTree/Components/TableCell.tsx +25 -10
- package/src/components/TableTree/Components/TableHead.tsx +5 -5
- package/src/components/TableTree/Components/TableRow.tsx +27 -24
- package/src/components/TableTree/TableTree.scss +89 -69
- package/src/components/TableTree/TableTree.stories.tsx +66 -2
- package/src/components/TableTree/types.ts +4 -3
- package/src/index.ts +2 -0
- package/src/utils/getTreeDetails/getTreeDetails.ts +8 -7
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/Button/Button.stories.d.ts +0 -12
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -7
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -6
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -7
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -6
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -15
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -9
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -9
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -8
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -13
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -15
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/Table/Table.stories.d.ts +0 -11
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -10,7 +10,8 @@ import { AddModule } from './AddModule/AddModule';
|
|
10
10
|
const renderSpaces = (
|
11
11
|
level: number,
|
12
12
|
parentSiblings: boolean[] = [],
|
13
|
-
isLast?: boolean | undefined
|
13
|
+
isLast?: boolean | undefined,
|
14
|
+
isContainer?: boolean | undefined
|
14
15
|
) => {
|
15
16
|
let siblingsArray = parentSiblings;
|
16
17
|
let isLastNode = isLast;
|
@@ -27,8 +28,10 @@ const renderSpaces = (
|
|
27
28
|
{siblingsArray?.reverse()?.map((line, i) => (
|
28
29
|
<span
|
29
30
|
key={i}
|
30
|
-
className={`tree-table-space-block
|
31
|
-
|
31
|
+
className={`tree-table-space-block tree-table-space-block-${i} ${
|
32
|
+
!line ? 'no-lines' : ''
|
33
|
+
} ${isLastNode && i === level - 1 ? 'last-node' : ''} ${
|
34
|
+
isContainer ? 'folder' : ''
|
32
35
|
}`}
|
33
36
|
/>
|
34
37
|
))}
|
@@ -38,19 +41,28 @@ const renderSpaces = (
|
|
38
41
|
|
39
42
|
const TableCell = React.memo(
|
40
43
|
({
|
44
|
+
treeRowRef,
|
41
45
|
col,
|
42
46
|
node,
|
43
47
|
selected,
|
44
48
|
select,
|
45
49
|
onCheckBoxChange,
|
46
50
|
onToggleExpand,
|
47
|
-
index,
|
48
51
|
onAddConfirm,
|
49
52
|
onAddCancel,
|
50
53
|
}: TableCellProps) => (
|
51
|
-
<td
|
54
|
+
<td
|
55
|
+
className={`ff-table-tree-td ${
|
56
|
+
col.isTree && node.container ? 'folder' : ''
|
57
|
+
}`}
|
58
|
+
>
|
52
59
|
{col.isTree &&
|
53
|
-
renderSpaces(
|
60
|
+
renderSpaces(
|
61
|
+
node.hierarchy + 1,
|
62
|
+
node.parentSiblings,
|
63
|
+
node.lastResource,
|
64
|
+
node.container
|
65
|
+
)}
|
54
66
|
<div className="tree-title-container">
|
55
67
|
{col.isTree && (
|
56
68
|
<span
|
@@ -70,7 +82,7 @@ const TableCell = React.memo(
|
|
70
82
|
)}
|
71
83
|
<span
|
72
84
|
className={`tree-table-td-content ${
|
73
|
-
col.isTree && node.
|
85
|
+
col.isTree && node.container ? 'folder' : ''
|
74
86
|
}`}
|
75
87
|
>
|
76
88
|
{!node?.isNewNode && (
|
@@ -106,9 +118,12 @@ const TableCell = React.memo(
|
|
106
118
|
)}
|
107
119
|
</span>
|
108
120
|
</div>
|
109
|
-
|
110
|
-
|
111
|
-
|
121
|
+
{col.actions && (
|
122
|
+
<div className={`table-tree-row-action`}>
|
123
|
+
{(() => {
|
124
|
+
return col.actions(node, treeRowRef);
|
125
|
+
})()}
|
126
|
+
</div>
|
112
127
|
)}
|
113
128
|
</td>
|
114
129
|
)
|
@@ -8,18 +8,18 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
|
|
8
8
|
);
|
9
9
|
|
10
10
|
return (
|
11
|
-
<thead>
|
12
|
-
<tr>
|
11
|
+
<thead className="ff-table-tree-head">
|
12
|
+
<tr className="ff-table-tree-row">
|
13
13
|
{columnsData.map(({ name, width }) => (
|
14
|
-
<th key={name} style={{ width: width }}>
|
14
|
+
<th className="ff-table-tree-th" key={name} style={{ width: width }}>
|
15
15
|
{name}
|
16
16
|
</th>
|
17
17
|
))}
|
18
18
|
</tr>
|
19
19
|
{hasDefaultValues && (
|
20
|
-
<tr>
|
20
|
+
<tr className="ff-table-tree-row">
|
21
21
|
{columnsData.map(({ defaultValue, defaultActions }, index) => (
|
22
|
-
<td key={index}>
|
22
|
+
<td className="ff-table-tree-td" key={index}>
|
23
23
|
{defaultValue && (
|
24
24
|
<span className="tree-table-default-content">
|
25
25
|
{defaultValue}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { useRef } from 'react';
|
2
2
|
import { TableRowProps } from '../types';
|
3
3
|
import TableCell from './TableCell';
|
4
4
|
|
@@ -11,31 +11,34 @@ const TableRow = React.memo(
|
|
11
11
|
onRowClick,
|
12
12
|
onToggleExpand,
|
13
13
|
onCheckBoxChange,
|
14
|
-
index,
|
15
14
|
onAddConfirm,
|
16
15
|
onAddCancel,
|
17
|
-
}: TableRowProps) =>
|
18
|
-
<
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
16
|
+
}: TableRowProps) => {
|
17
|
+
const treeRowRef = useRef<HTMLTableRowElement | null>(null);
|
18
|
+
return (
|
19
|
+
<tr
|
20
|
+
data-level={node.hierarchy}
|
21
|
+
ref={treeRowRef}
|
22
|
+
className="ff-table-tree-row show"
|
23
|
+
onClick={(e) => onRowClick(e, node)}
|
24
|
+
>
|
25
|
+
{columnsData.map((col) => (
|
26
|
+
<TableCell
|
27
|
+
treeRowRef={treeRowRef}
|
28
|
+
key={col.name}
|
29
|
+
col={col}
|
30
|
+
node={node}
|
31
|
+
selected={selected}
|
32
|
+
select={select}
|
33
|
+
onCheckBoxChange={onCheckBoxChange}
|
34
|
+
onToggleExpand={onToggleExpand}
|
35
|
+
onAddConfirm={onAddConfirm}
|
36
|
+
onAddCancel={onAddCancel}
|
37
|
+
/>
|
38
|
+
))}
|
39
|
+
</tr>
|
40
|
+
);
|
41
|
+
}
|
39
42
|
);
|
40
43
|
|
41
44
|
export default TableRow;
|
@@ -45,7 +45,7 @@
|
|
45
45
|
width: 8px;
|
46
46
|
|
47
47
|
&::after {
|
48
|
-
width:
|
48
|
+
width: 22px;
|
49
49
|
left: -10px;
|
50
50
|
}
|
51
51
|
}
|
@@ -71,6 +71,18 @@
|
|
71
71
|
top: -4px;
|
72
72
|
z-index: -1;
|
73
73
|
}
|
74
|
+
|
75
|
+
&.folder {
|
76
|
+
&.last-node::before {
|
77
|
+
height: 13px;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
.tree-title-container {
|
83
|
+
.tree-table-space-block {
|
84
|
+
width: 16px;
|
85
|
+
}
|
74
86
|
}
|
75
87
|
|
76
88
|
.hidden {
|
@@ -105,7 +117,8 @@
|
|
105
117
|
}
|
106
118
|
|
107
119
|
.table-scrollable {
|
108
|
-
height: var(--table-height);
|
120
|
+
height: var(--table-height);
|
121
|
+
/* Adjust height as needed */
|
109
122
|
overflow-y: auto;
|
110
123
|
position: relative;
|
111
124
|
}
|
@@ -114,12 +127,6 @@
|
|
114
127
|
overflow: scroll;
|
115
128
|
}
|
116
129
|
|
117
|
-
tr {
|
118
|
-
&:hover {
|
119
|
-
background-color: var(--hover-color);
|
120
|
-
}
|
121
|
-
}
|
122
|
-
|
123
130
|
.tree-table {
|
124
131
|
// border: 1px solid #f1f1f1;
|
125
132
|
table-layout: fixed;
|
@@ -127,92 +134,105 @@ tr {
|
|
127
134
|
border-collapse: collapse;
|
128
135
|
overflow: scroll;
|
129
136
|
|
130
|
-
|
137
|
+
.ff-table-tree-head {
|
131
138
|
position: sticky;
|
132
139
|
top: 0;
|
133
140
|
z-index: 2;
|
134
141
|
}
|
135
142
|
|
136
|
-
|
143
|
+
.ff-table-tree-row {
|
137
144
|
background-color: var(--base-bg-color);
|
145
|
+
|
138
146
|
.table-tree-row-action {
|
139
147
|
display: none;
|
140
148
|
}
|
141
149
|
|
142
|
-
|
143
|
-
// background-color: var(--hover-color);
|
144
|
-
// td {
|
145
|
-
// &:first-child {
|
146
|
-
// background-color: var(--hover-color);
|
147
|
-
// }
|
148
|
-
// }
|
149
|
-
|
150
|
-
.table-tree-row-action {
|
150
|
+
.table-row-add-button {
|
151
151
|
display: inline-flex;
|
152
|
-
|
152
|
+
z-index: 9999;
|
153
153
|
}
|
154
|
-
|
154
|
+
&:hover {
|
155
|
+
background-color: var(--hover-color);
|
155
156
|
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
}
|
162
|
-
}
|
157
|
+
.ff-table-tree-td {
|
158
|
+
&:first-child {
|
159
|
+
background-color: var(--hover-color);
|
160
|
+
}
|
161
|
+
}
|
163
162
|
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
overflow: hidden;
|
170
|
-
}
|
163
|
+
.table-tree-row-action {
|
164
|
+
display: inline-flex;
|
165
|
+
align-items: center;
|
166
|
+
}
|
167
|
+
}
|
171
168
|
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
169
|
+
&::after {
|
170
|
+
content: '';
|
171
|
+
display: block;
|
172
|
+
visibility: hidden;
|
173
|
+
clear: both;
|
174
|
+
}
|
175
|
+
}
|
179
176
|
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
177
|
+
.ff-table-tree-th,
|
178
|
+
.ff-table-tree-td {
|
179
|
+
text-align: left;
|
180
|
+
white-space: nowrap;
|
181
|
+
text-overflow: ellipsis;
|
182
|
+
overflow: hidden;
|
184
183
|
}
|
185
|
-
}
|
186
184
|
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
185
|
+
.ff-table-tree-th {
|
186
|
+
color: var(--table-header-text-color);
|
187
|
+
background: var(--border-color);
|
188
|
+
font-size: 12px;
|
189
|
+
font-weight: 600;
|
190
|
+
width: 400px;
|
191
|
+
height: 32px;
|
192
|
+
box-sizing: border-box;
|
193
|
+
|
194
|
+
&:first-child {
|
195
|
+
width: 400px !important;
|
196
|
+
position: sticky;
|
197
|
+
left: 0;
|
198
|
+
padding-left: 8px;
|
199
|
+
}
|
200
|
+
}
|
191
201
|
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
background-color: white;
|
202
|
+
.ff-table-tree-td {
|
203
|
+
font-size: 12px;
|
204
|
+
color: var(--nlp-color);
|
205
|
+
height: 18px;
|
197
206
|
|
198
|
-
&:
|
199
|
-
|
200
|
-
|
207
|
+
&:first-child {
|
208
|
+
overflow: initial;
|
209
|
+
position: sticky;
|
210
|
+
left: 0;
|
211
|
+
background-color: white;
|
201
212
|
|
202
|
-
|
203
|
-
|
204
|
-
|
213
|
+
// &:hover {
|
214
|
+
// background-color: var(--hover-color);
|
215
|
+
// }
|
216
|
+
|
217
|
+
.tree-table-default-content {
|
218
|
+
margin-left: 8px;
|
219
|
+
}
|
205
220
|
|
206
|
-
|
207
|
-
|
221
|
+
.tree-table-td-content {
|
222
|
+
padding-left: 4px;
|
208
223
|
|
209
|
-
|
210
|
-
|
224
|
+
.tree-table-td-content-text {
|
225
|
+
margin-left: 4px;
|
226
|
+
}
|
227
|
+
}
|
228
|
+
.tree-table-default-content {
|
229
|
+
font-weight: 700;
|
211
230
|
}
|
212
231
|
}
|
213
|
-
|
214
|
-
|
215
|
-
|
232
|
+
|
233
|
+
&.folder {
|
234
|
+
height: 28px;
|
235
|
+
}
|
216
236
|
}
|
217
237
|
}
|
218
238
|
|
@@ -5,6 +5,7 @@ import treeData from './data';
|
|
5
5
|
import Icon from '../Icon/Icon';
|
6
6
|
import './TableTreeStories.scss';
|
7
7
|
import React, { useState } from 'react';
|
8
|
+
import AddResourceButton from '../AddResourceButton/AddResourceButton';
|
8
9
|
|
9
10
|
const meta: Meta<typeof TableTree> = {
|
10
11
|
title: 'Components/Table tree',
|
@@ -20,13 +21,76 @@ const colData = [
|
|
20
21
|
accessor: 'name',
|
21
22
|
width: '400px',
|
22
23
|
isClickable: true,
|
23
|
-
actions: (row) => {
|
24
|
-
console.log('🚀 ~ row:', row);
|
24
|
+
actions: (row, treeRowRef) => {
|
25
|
+
console.log('🚀 ~ row:', row, treeRowRef);
|
26
|
+
|
25
27
|
return [
|
26
28
|
<Icon hoverEffect name="file" />,
|
27
29
|
<Icon hoverEffect name="manage_apps" />,
|
28
30
|
<Icon hoverEffect name="dropzone_icon" />,
|
29
31
|
<Icon hoverEffect name="more" />,
|
32
|
+
<AddResourceButton
|
33
|
+
treeRowRef={treeRowRef}
|
34
|
+
directionalArrow={[
|
35
|
+
{
|
36
|
+
direction: 'top',
|
37
|
+
menuOptions: [
|
38
|
+
{
|
39
|
+
label: 'Module',
|
40
|
+
value: 'add_module',
|
41
|
+
icon: 'module_icon',
|
42
|
+
disable: false,
|
43
|
+
},
|
44
|
+
],
|
45
|
+
},
|
46
|
+
{
|
47
|
+
direction: 'right',
|
48
|
+
menuOptions: [
|
49
|
+
{
|
50
|
+
label: 'Sub Module',
|
51
|
+
value: 'add_module',
|
52
|
+
icon: 'module_icon',
|
53
|
+
disable: false,
|
54
|
+
},
|
55
|
+
{
|
56
|
+
label: 'Automation Script',
|
57
|
+
value: 'add_module',
|
58
|
+
icon: 'module_icon',
|
59
|
+
disable: false,
|
60
|
+
},
|
61
|
+
{
|
62
|
+
label: 'Manual Test Case',
|
63
|
+
value: 'add_module',
|
64
|
+
icon: 'module_icon',
|
65
|
+
disable: false,
|
66
|
+
},
|
67
|
+
{
|
68
|
+
label: 'Pre / Post Condition',
|
69
|
+
value: 'add_module',
|
70
|
+
icon: 'module_icon',
|
71
|
+
disable: false,
|
72
|
+
},
|
73
|
+
{
|
74
|
+
label: 'Authorization',
|
75
|
+
value: 'add_module',
|
76
|
+
icon: 'module_icon',
|
77
|
+
disable: false,
|
78
|
+
},
|
79
|
+
],
|
80
|
+
},
|
81
|
+
{
|
82
|
+
direction: 'down',
|
83
|
+
menuOptions: [
|
84
|
+
{
|
85
|
+
label: 'Sub Module',
|
86
|
+
value: 'sub_module',
|
87
|
+
icon: 'module_icon',
|
88
|
+
disable: false,
|
89
|
+
},
|
90
|
+
],
|
91
|
+
},
|
92
|
+
]}
|
93
|
+
/>,
|
30
94
|
];
|
31
95
|
},
|
32
96
|
isTree: true,
|
@@ -4,13 +4,14 @@ import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
|
|
4
4
|
declare type JSX = ReactNode | JSX.Element[] | string | null;
|
5
5
|
|
6
6
|
export interface TableCellProps {
|
7
|
+
treeRowRef?: React.RefObject<any | null>;
|
7
8
|
col: any;
|
8
9
|
node: any;
|
9
10
|
selected: string[];
|
10
11
|
select: string | null;
|
11
12
|
onCheckBoxChange: (e: any, node: string[] | any) => void;
|
12
13
|
onToggleExpand: (node: any) => void;
|
13
|
-
index
|
14
|
+
index?: number;
|
14
15
|
onAddConfirm?: (_name: string) => void;
|
15
16
|
onAddCancel?: () => void;
|
16
17
|
}
|
@@ -45,7 +46,7 @@ export interface TableRowProps {
|
|
45
46
|
onRowClick: (e: any, node: any) => void;
|
46
47
|
onToggleExpand: (node: TreeNode) => void;
|
47
48
|
onCheckBoxChange: (e: any, node: string[] | any) => void;
|
48
|
-
index
|
49
|
+
index?: number;
|
49
50
|
onAddConfirm?: (_name: string) => void;
|
50
51
|
onAddCancel?: () => void;
|
51
52
|
}
|
@@ -56,7 +57,7 @@ export interface Column {
|
|
56
57
|
width: string;
|
57
58
|
isClickable?: boolean;
|
58
59
|
cell?: (row: any) => JSX;
|
59
|
-
actions?: (row: any) => JSX;
|
60
|
+
actions?: (row: any, treeRowRef?: React.RefObject<any | null>) => JSX;
|
60
61
|
isTree?: boolean;
|
61
62
|
defaultValue?: string;
|
62
63
|
defaultActions?: () => JSX;
|
package/src/index.ts
CHANGED
@@ -32,6 +32,7 @@ import RadioGroup from './components/RadioGroup';
|
|
32
32
|
import MiniModal from './components/MiniModal';
|
33
33
|
import TableTree from './components/TableTree';
|
34
34
|
import Tabs from './components/Tabs';
|
35
|
+
import BrowserTabs from './components/BrowserTabs';
|
35
36
|
import HighlightText from './components/HighlightText';
|
36
37
|
import Checkbox from './components/Checkbox';
|
37
38
|
import Search from './components/Search/Search';
|
@@ -211,6 +212,7 @@ export {
|
|
211
212
|
HighlightText,
|
212
213
|
TableTree,
|
213
214
|
Tabs,
|
215
|
+
BrowserTabs,
|
214
216
|
Checkbox,
|
215
217
|
Search,
|
216
218
|
DatePicker,
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
|
2
|
+
import { checkEmpty } from '../checkEmpty/checkEmpty';
|
2
3
|
|
3
4
|
export interface TreeDetailsResult {
|
4
5
|
treeDataList: TreeNode[];
|
@@ -28,7 +29,7 @@ export const getTreeDetails = (
|
|
28
29
|
case 'expand':
|
29
30
|
case 'collapse':
|
30
31
|
if (typeof index === 'number') {
|
31
|
-
treeDataList = [...oldData.slice(0, index
|
32
|
+
treeDataList = [...oldData.slice(0, index), ...newData];
|
32
33
|
} else {
|
33
34
|
throw new Error(
|
34
35
|
"Index is required for 'expand' or 'collapse' actions."
|
@@ -36,7 +37,7 @@ export const getTreeDetails = (
|
|
36
37
|
}
|
37
38
|
break;
|
38
39
|
case 'start':
|
39
|
-
if (newData
|
40
|
+
if (!checkEmpty(newData)) {
|
40
41
|
root = newData[0];
|
41
42
|
treeDataList = newData.slice(1);
|
42
43
|
} else {
|
@@ -47,7 +48,7 @@ export const getTreeDetails = (
|
|
47
48
|
throw new Error(`Invalid action: ${action}`);
|
48
49
|
}
|
49
50
|
|
50
|
-
if (treeDataList
|
51
|
+
if (checkEmpty(treeDataList) && action !== 'start') {
|
51
52
|
throw new Error('Tree data list is empty.');
|
52
53
|
}
|
53
54
|
|
@@ -56,10 +57,10 @@ export const getTreeDetails = (
|
|
56
57
|
|
57
58
|
return {
|
58
59
|
treeDataList,
|
59
|
-
next: !lastNode
|
60
|
-
previous: !firstNode
|
61
|
-
startId: firstNode
|
62
|
-
endId: lastNode
|
60
|
+
next: !lastNode?.lastResource,
|
61
|
+
previous: !firstNode?.lastResource,
|
62
|
+
startId: firstNode?.key,
|
63
|
+
endId: lastNode?.key,
|
63
64
|
root,
|
64
65
|
};
|
65
66
|
};
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import AddButton from './AddButton';
|
3
|
-
declare const meta: Meta<typeof AddButton>;
|
4
|
-
type Story = StoryObj<typeof AddButton>;
|
5
|
-
export declare const Default: Story;
|
6
|
-
export declare const TwoArrowsButtons: Story;
|
7
|
-
export declare const ThreeArrowsButton: Story;
|
8
|
-
export default meta;
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import Button from './Button';
|
3
|
-
declare const meta: Meta<typeof Button>;
|
4
|
-
type Story = StoryObj<typeof Button>;
|
5
|
-
export declare const Primary: Story;
|
6
|
-
export declare const Secondary: Story;
|
7
|
-
export declare const Tertiary: Story;
|
8
|
-
export declare const Delete: Story;
|
9
|
-
export declare const PrimaryWithIcon: Story;
|
10
|
-
export declare const SecondaryWithIcon: Story;
|
11
|
-
export declare const TertiaryWithIcon: Story;
|
12
|
-
export default meta;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import Checkbox from './Checkbox';
|
3
|
-
declare const meta: Meta<typeof Checkbox>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof meta>;
|
6
|
-
export declare const Default: Story;
|
7
|
-
export declare const Partial: Story;
|
8
|
-
export declare const Controlled: Story;
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import Chip from './Chip';
|
3
|
-
import '../../assets/styles/_colors.scss';
|
4
|
-
import './Chip.scss';
|
5
|
-
declare const meta: Meta<typeof Chip>;
|
6
|
-
type Story = StoryObj<typeof Chip>;
|
7
|
-
export declare const Primary: Story;
|
8
|
-
export declare const withoutExpand: Story;
|
9
|
-
export declare const Group: Story;
|
10
|
-
export declare const CustomChip: Story;
|
11
|
-
export declare const Success: Story;
|
12
|
-
export declare const Errors: Story;
|
13
|
-
export declare const Warning: Story;
|
14
|
-
export default meta;
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import CustomDatePicker from './DatePicker';
|
3
|
-
declare const meta: Meta<typeof CustomDatePicker>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof CustomDatePicker>;
|
6
|
-
export declare const Default: Story;
|
7
|
-
export declare const StartDateFilter: Story;
|
8
|
-
export declare const EndDateInput: Story;
|
9
|
-
export declare const ScheduleDateInput: Story;
|