pixel-react 1.7.8 → 1.7.9
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/components/Button/Button.d.ts +2 -2
- package/lib/components/Button/types.d.ts +17 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
- package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
- package/lib/components/ChooseFile/types.d.ts +68 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
- package/lib/components/ConnectingBranch/data.d.ts +19 -33
- package/lib/components/ConnectingBranch/types.d.ts +10 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/LabelEditTextField/types.d.ts +2 -0
- package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/Select/types.d.ts +1 -1
- package/lib/components/StatusCard/types.d.ts +2 -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/data.d.ts +74 -0
- package/lib/components/TableTree/types.d.ts +4 -0
- package/lib/components/TextArea/Textarea.d.ts +1 -1
- package/lib/components/TextArea/Types.d.ts +1 -0
- package/lib/index.d.ts +174 -63
- package/lib/index.esm.js +474 -286
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +474 -285
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/validateFile/validateFile.d.ts +2 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +1 -0
- package/src/assets/Themes/BlueTheme.scss +44 -44
- package/src/assets/Themes/DarkTheme.scss +1 -0
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/failed_status_icon.svg +1 -1
- package/src/assets/icons/flaky_status_icon.svg +1 -1
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/settings.svg +3 -0
- package/src/assets/icons/skipped_status_icon.svg +1 -1
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/warning_status_icon.svg +1 -1
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Button/Button.scss +12 -0
- package/src/components/Button/Button.tsx +29 -11
- package/src/components/Button/types.ts +21 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
- package/src/components/Charts/MultiRadialChart/types.ts +4 -1
- package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
- package/src/components/ChooseFile/ChooseFile.tsx +46 -0
- package/src/components/ChooseFile/types.ts +78 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
- package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
- package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
- package/src/components/ConnectingBranch/types.ts +21 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
- package/src/components/LabelEditTextField/types.ts +2 -0
- package/src/components/MachineInputField/MachineInputField.tsx +67 -70
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
- package/src/components/Select/Select.tsx +4 -4
- package/src/components/Select/types.ts +1 -1
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
- package/src/components/StatusCard/StatusCard.scss +2 -1
- package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
- package/src/components/StatusCard/StatusCard.tsx +10 -2
- package/src/components/StatusCard/types.ts +2 -0
- package/src/components/TableTree/Components/TableBody.tsx +19 -15
- package/src/components/TableTree/Components/TableCell.tsx +47 -31
- package/src/components/TableTree/Components/TableRow.tsx +4 -0
- package/src/components/TableTree/TableTree.scss +122 -109
- package/src/components/TableTree/data.ts +16 -1
- package/src/components/TableTree/types.ts +4 -0
- package/src/components/TextArea/Textarea.tsx +2 -0
- package/src/components/TextArea/Types.ts +3 -0
- package/src/index.ts +3 -0
- package/src/utils/validateFile/validateFile.stories.tsx +49 -0
- package/src/utils/validateFile/validateFile.ts +39 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -1,6 +1,8 @@
|
|
1
|
+
import React, { useState } from 'react';
|
1
2
|
import { Meta, StoryObj } from '@storybook/react';
|
2
3
|
import Card from './StatusCard';
|
3
4
|
import { CardProps } from './types';
|
5
|
+
import StatusCard from './StatusCard';
|
4
6
|
|
5
7
|
const meta: Meta<typeof Card> = {
|
6
8
|
title: 'Components/Card',
|
@@ -18,7 +20,7 @@ export const Passed: Story = {
|
|
18
20
|
status: 'Passed',
|
19
21
|
count: 66,
|
20
22
|
text: 'Scripts were passed all the time.',
|
21
|
-
style:{width:'200px'},
|
23
|
+
style: { width: '200px' },
|
22
24
|
},
|
23
25
|
};
|
24
26
|
|
@@ -57,3 +59,59 @@ export const Flaky: Story = {
|
|
57
59
|
text: 'Scripts were flaky in their behavior.',
|
58
60
|
},
|
59
61
|
};
|
62
|
+
|
63
|
+
export const AllCards: Story = {
|
64
|
+
render: () => {
|
65
|
+
const [toggledCard, setToggledCard] = useState<number | null>(null);
|
66
|
+
|
67
|
+
const data = [
|
68
|
+
{
|
69
|
+
name: 'Passed',
|
70
|
+
count: 6,
|
71
|
+
text: 'Scripts were Passed all the time',
|
72
|
+
},
|
73
|
+
{
|
74
|
+
name: 'Failed',
|
75
|
+
count: 6,
|
76
|
+
text: 'Scripts were Failed all the time',
|
77
|
+
},
|
78
|
+
{
|
79
|
+
name: 'Warning',
|
80
|
+
count: 6,
|
81
|
+
text: 'Scripts were Warning all the time',
|
82
|
+
},
|
83
|
+
{
|
84
|
+
name: 'Skipped',
|
85
|
+
count: 6,
|
86
|
+
text: 'Scripts were Skip all the time',
|
87
|
+
},
|
88
|
+
{
|
89
|
+
name: 'Flaky',
|
90
|
+
count: 6,
|
91
|
+
text: 'Scripts were Flaky all the time',
|
92
|
+
},
|
93
|
+
];
|
94
|
+
|
95
|
+
const onHandleStatus = (status: string, index: number) => {
|
96
|
+
setToggledCard(index);
|
97
|
+
console.log(`Selected status: ${status}`);
|
98
|
+
};
|
99
|
+
|
100
|
+
return (
|
101
|
+
<div style={{ display: 'flex', gap: '8px' }}>
|
102
|
+
{data.map((row, index) => (
|
103
|
+
<div key={index}>
|
104
|
+
<StatusCard
|
105
|
+
count={row?.count}
|
106
|
+
icon={`${row.name.toLowerCase()}_status_icon`}
|
107
|
+
status={row?.name as any}
|
108
|
+
text={row.text}
|
109
|
+
onSelectedStatus={(status) => onHandleStatus(status, index)}
|
110
|
+
resetToggle={toggledCard !== index}
|
111
|
+
/>
|
112
|
+
</div>
|
113
|
+
))}
|
114
|
+
</div>
|
115
|
+
);
|
116
|
+
},
|
117
|
+
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useState } from 'react';
|
1
|
+
import React, { useEffect, useState } from 'react';
|
2
2
|
import './StatusCard.scss';
|
3
3
|
import { CardProps } from './types';
|
4
4
|
import Typography from '../Typography';
|
@@ -10,6 +10,7 @@ const StatusCard: React.FC<CardProps> = ({
|
|
10
10
|
count,
|
11
11
|
text,
|
12
12
|
style = { width: '196.4px' },
|
13
|
+
resetToggle,
|
13
14
|
onSelectedStatus = (_status) => {},
|
14
15
|
}) => {
|
15
16
|
const [isToggled, setIsToggled] = useState<boolean>(false);
|
@@ -18,10 +19,17 @@ const StatusCard: React.FC<CardProps> = ({
|
|
18
19
|
setIsToggled(true);
|
19
20
|
onSelectedStatus(status);
|
20
21
|
};
|
22
|
+
|
23
|
+
useEffect(() => {
|
24
|
+
if (resetToggle) {
|
25
|
+
setIsToggled(false);
|
26
|
+
}
|
27
|
+
}, [resetToggle]);
|
28
|
+
|
21
29
|
return (
|
22
30
|
<div
|
23
31
|
className={`ff-card-container ${status.toLowerCase()} ${
|
24
|
-
isToggled ?
|
32
|
+
isToggled ? `toggled` : ''
|
25
33
|
}`}
|
26
34
|
style={style}
|
27
35
|
onClick={() => handleSelectStatus(status)}
|
@@ -11,6 +11,8 @@ export interface CardProps {
|
|
11
11
|
style?: React.CSSProperties;
|
12
12
|
/** toggle update */
|
13
13
|
handleToggleStatus?: (_status: boolean) => void;
|
14
|
+
/** make Card Select false */
|
15
|
+
resetToggle?: boolean;
|
14
16
|
/** call back */
|
15
17
|
onSelectedStatus?: (_status: string) => void;
|
16
18
|
}
|
@@ -14,21 +14,25 @@ const TableBody = React.memo(
|
|
14
14
|
}: TableBodyProps) => (
|
15
15
|
<tbody>
|
16
16
|
<tr id="ff-table-tree-first-node" />
|
17
|
-
{flattenedTreeData?.map(
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
17
|
+
{flattenedTreeData?.map(
|
18
|
+
({ node, level, lines = level + 1, isLast = false }) => {
|
19
|
+
return (
|
20
|
+
<TableRow
|
21
|
+
key={node.id}
|
22
|
+
node={node}
|
23
|
+
level={level}
|
24
|
+
columnsData={columnsData}
|
25
|
+
selected={selected}
|
26
|
+
select={select}
|
27
|
+
onRowClick={onRowClick}
|
28
|
+
onToggleExpand={onToggleExpand}
|
29
|
+
onCheckBoxChange={onCheckBoxChange}
|
30
|
+
lines={lines}
|
31
|
+
isLast={isLast}
|
32
|
+
/>
|
33
|
+
);
|
34
|
+
}
|
35
|
+
)}
|
32
36
|
<tr id="ff-table-tree-last-node" />
|
33
37
|
</tbody>
|
34
38
|
)
|
@@ -5,10 +5,22 @@ import { TableCellProps } from '../types';
|
|
5
5
|
import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
|
6
6
|
import React from 'react';
|
7
7
|
|
8
|
-
const renderSpaces = (
|
9
|
-
|
10
|
-
|
11
|
-
|
8
|
+
const renderSpaces = (
|
9
|
+
level: number,
|
10
|
+
lines: number,
|
11
|
+
isLast?: boolean | undefined
|
12
|
+
) => (
|
13
|
+
<div className="tree-table-space-container">
|
14
|
+
{Array.from({ length: level }).map((_, i) => (
|
15
|
+
<span
|
16
|
+
key={i}
|
17
|
+
className={`tree-table-space-block ${i >= lines ? 'no-lines' : ''} ${
|
18
|
+
isLast && i === 0 ? 'last-node' : ''
|
19
|
+
}`}
|
20
|
+
/>
|
21
|
+
))}
|
22
|
+
</div>
|
23
|
+
);
|
12
24
|
|
13
25
|
const TableCell = React.memo(
|
14
26
|
({
|
@@ -19,36 +31,40 @@ const TableCell = React.memo(
|
|
19
31
|
select,
|
20
32
|
onCheckBoxChange,
|
21
33
|
onToggleExpand,
|
34
|
+
lines,
|
35
|
+
isLast,
|
22
36
|
}: TableCellProps) => (
|
23
37
|
<td>
|
24
|
-
{col.isTree && renderSpaces(level + 1)}
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
<span className="tree-table-td-content">
|
36
|
-
{col.isTree && select === 'checkbox' && (
|
37
|
-
<Checkbox
|
38
|
-
checked={selected.includes(node.id)}
|
39
|
-
onChange={() => onCheckBoxChange('checkbox', node)}
|
40
|
-
/>
|
38
|
+
{col.isTree && renderSpaces(level + 1, lines, isLast)}
|
39
|
+
<div className='tree-title-container'>
|
40
|
+
{col.isTree && (
|
41
|
+
<span
|
42
|
+
className={`tree-table-space-block last-block ${
|
43
|
+
node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
|
44
|
+
} ${node.folder ? '' : 'no-folder'}`}
|
45
|
+
onClick={() => onToggleExpand(node)}
|
46
|
+
>
|
47
|
+
{node.folder && <Arrow />}
|
48
|
+
</span>
|
41
49
|
)}
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
50
|
+
<span className="tree-table-td-content">
|
51
|
+
{col.isTree && select === 'checkbox' && (
|
52
|
+
<Checkbox
|
53
|
+
checked={selected.includes(node.id)}
|
54
|
+
onChange={() => onCheckBoxChange('checkbox', node)}
|
55
|
+
/>
|
56
|
+
)}
|
57
|
+
{col.isTree && select === 'radio' && (
|
58
|
+
<RadioButton
|
59
|
+
name={node.title}
|
60
|
+
checked={selected.includes(node.id)}
|
61
|
+
value={node.id}
|
62
|
+
onChange={() => onCheckBoxChange('radio', node)}
|
63
|
+
/>
|
64
|
+
)}
|
65
|
+
{prepareData(node, col)}
|
66
|
+
</span>
|
67
|
+
</div>
|
52
68
|
{col.actions && (
|
53
69
|
<div className="table-tree-row-action">{col.actions(node)}</div>
|
54
70
|
)}
|
@@ -12,6 +12,8 @@ const TableRow = React.memo(
|
|
12
12
|
onRowClick,
|
13
13
|
onToggleExpand,
|
14
14
|
onCheckBoxChange,
|
15
|
+
lines,
|
16
|
+
isLast,
|
15
17
|
}: TableRowProps) => (
|
16
18
|
<tr
|
17
19
|
data-level={level}
|
@@ -28,6 +30,8 @@ const TableRow = React.memo(
|
|
28
30
|
select={select}
|
29
31
|
onCheckBoxChange={onCheckBoxChange}
|
30
32
|
onToggleExpand={onToggleExpand}
|
33
|
+
lines={lines}
|
34
|
+
isLast={isLast}
|
31
35
|
/>
|
32
36
|
))}
|
33
37
|
</tr>
|
@@ -1,6 +1,73 @@
|
|
1
1
|
.tree-table-space-block {
|
2
2
|
display: inline-block;
|
3
3
|
width: 20px;
|
4
|
+
height: 16px;
|
5
|
+
text-align: center;
|
6
|
+
line-height: 16px;
|
7
|
+
vertical-align: top;
|
8
|
+
font-size: 19px;
|
9
|
+
position: relative;
|
10
|
+
box-sizing: border-box;
|
11
|
+
// margin-top: 7px;
|
12
|
+
border-radius: 50%;
|
13
|
+
|
14
|
+
&.btn-toggle {
|
15
|
+
position: relative;
|
16
|
+
cursor: pointer;
|
17
|
+
width: 22px;
|
18
|
+
height: 18px;
|
19
|
+
z-index: 12;
|
20
|
+
|
21
|
+
&::before {
|
22
|
+
display: none;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
&.last-block::after,
|
27
|
+
&.no-folder::after {
|
28
|
+
position: absolute;
|
29
|
+
content: '';
|
30
|
+
height: 1px;
|
31
|
+
background: var(--tree-connecting-lines-color);
|
32
|
+
top: 50%;
|
33
|
+
margin-top: -1px;
|
34
|
+
}
|
35
|
+
|
36
|
+
&.last-block::after {
|
37
|
+
width: 12px;
|
38
|
+
left: -10px;
|
39
|
+
}
|
40
|
+
|
41
|
+
&.no-folder {
|
42
|
+
width: 8px;
|
43
|
+
|
44
|
+
&::after {
|
45
|
+
width: 18px;
|
46
|
+
left: -10px;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
&:not(.last-block, .no-lines, .last-node)::before {
|
51
|
+
position: absolute;
|
52
|
+
content: '';
|
53
|
+
width: 1px;
|
54
|
+
height: 40px;
|
55
|
+
background: var(--tree-connecting-lines-color);
|
56
|
+
left: 50%;
|
57
|
+
top: -4px;
|
58
|
+
z-index: 99;
|
59
|
+
}
|
60
|
+
|
61
|
+
&.last-node::before {
|
62
|
+
position: absolute;
|
63
|
+
content: '';
|
64
|
+
width: 1px;
|
65
|
+
height: 12px;
|
66
|
+
background: var(--tree-connecting-lines-color);
|
67
|
+
left: 50%;
|
68
|
+
top: -4px;
|
69
|
+
z-index: -1;
|
70
|
+
}
|
4
71
|
}
|
5
72
|
|
6
73
|
.hidden {
|
@@ -9,12 +76,11 @@
|
|
9
76
|
|
10
77
|
.show {
|
11
78
|
display: table-row;
|
79
|
+
visibility: visible;
|
12
80
|
}
|
13
81
|
|
14
82
|
.btn-toggle {
|
15
|
-
|
16
|
-
cursor: pointer;
|
17
|
-
}
|
83
|
+
cursor: pointer;
|
18
84
|
|
19
85
|
&.is-close {
|
20
86
|
background: #f1f1f1;
|
@@ -22,10 +88,7 @@
|
|
22
88
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
23
89
|
}
|
24
90
|
|
25
|
-
&::before
|
26
|
-
display: none;
|
27
|
-
}
|
28
|
-
|
91
|
+
&::before,
|
29
92
|
&::after {
|
30
93
|
display: none;
|
31
94
|
}
|
@@ -34,13 +97,10 @@
|
|
34
97
|
.tree-table-wrap {
|
35
98
|
width: 100%;
|
36
99
|
}
|
37
|
-
thead{
|
38
|
-
position: sticky;
|
39
|
-
top: 12px;
|
40
|
-
}
|
41
100
|
|
42
|
-
tbody{
|
101
|
+
tbody {
|
43
102
|
overflow: scroll;
|
103
|
+
height: 300px;
|
44
104
|
}
|
45
105
|
|
46
106
|
.tree-table {
|
@@ -49,29 +109,49 @@ tbody{
|
|
49
109
|
width: 100%;
|
50
110
|
border-collapse: collapse;
|
51
111
|
overflow: scroll;
|
112
|
+
|
52
113
|
tr {
|
53
114
|
.table-tree-row-action {
|
54
115
|
display: none;
|
55
116
|
}
|
117
|
+
|
56
118
|
&:hover {
|
57
119
|
background-color: var(--hover-color);
|
120
|
+
td {
|
121
|
+
&:first-child {
|
122
|
+
background-color: var(--hover-color);
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
58
126
|
.table-tree-row-action {
|
59
127
|
display: inline-flex;
|
60
128
|
align-items: center;
|
61
129
|
}
|
62
130
|
}
|
131
|
+
|
132
|
+
&::after {
|
133
|
+
content: '';
|
134
|
+
display: block;
|
135
|
+
visibility: hidden;
|
136
|
+
clear: both;
|
137
|
+
}
|
138
|
+
}
|
139
|
+
|
140
|
+
th,
|
141
|
+
td {
|
142
|
+
text-align: left;
|
143
|
+
white-space: nowrap;
|
144
|
+
text-overflow: ellipsis;
|
145
|
+
overflow: hidden;
|
63
146
|
}
|
64
147
|
|
65
148
|
th {
|
66
149
|
color: var(--brand-color);
|
67
|
-
text-align: center;
|
68
|
-
padding: 10px 0;
|
69
150
|
background: var(--slider-table-color);
|
70
151
|
font-size: 13px;
|
71
152
|
width: 400px;
|
72
|
-
|
153
|
+
|
73
154
|
&:first-child {
|
74
|
-
width: 400px;
|
75
155
|
position: sticky;
|
76
156
|
left: 0;
|
77
157
|
}
|
@@ -80,126 +160,59 @@ tbody{
|
|
80
160
|
td {
|
81
161
|
font-size: 14px;
|
82
162
|
color: var(--brand-color);
|
83
|
-
|
84
|
-
text-overflow: ellipsis;
|
85
|
-
overflow: hidden;
|
86
|
-
text-align: left;
|
87
|
-
height: 32px;
|
163
|
+
height: 18px;
|
88
164
|
|
89
165
|
&:first-child {
|
90
166
|
overflow: initial;
|
91
|
-
width: 400px;
|
92
167
|
position: sticky;
|
93
168
|
left: 0;
|
94
169
|
background-color: white;
|
170
|
+
|
95
171
|
&:hover {
|
96
172
|
background-color: var(--hover-color);
|
97
173
|
}
|
98
174
|
}
|
99
|
-
|
100
|
-
.tree-table-space-block {
|
101
|
-
border: 1px solid transparent;
|
102
|
-
display: inline-block;
|
103
|
-
width: 20px;
|
104
|
-
height: 20px;
|
105
|
-
line-height: 16px;
|
106
|
-
text-align: center;
|
107
|
-
vertical-align: top;
|
108
|
-
font-size: 19px;
|
109
|
-
position: relative;
|
110
|
-
box-sizing: border-box;
|
111
|
-
margin-top: 7px;
|
112
|
-
border-radius: 50%;
|
113
|
-
|
114
|
-
&:first-child {
|
115
|
-
margin-left: 7px;
|
116
|
-
}
|
117
|
-
|
118
|
-
&.btn-toggle {
|
119
|
-
// border: 1px solid var(--brand-color);
|
120
|
-
position: relative;
|
121
|
-
cursor: pointer;
|
122
|
-
width: 22px;
|
123
|
-
height: 22px;
|
124
|
-
z-index: 12;
|
125
|
-
|
126
|
-
&::before {
|
127
|
-
display: none;
|
128
|
-
}
|
129
|
-
}
|
130
|
-
|
131
|
-
&.last-block {
|
132
|
-
&::before {
|
133
|
-
display: none;
|
134
|
-
}
|
135
|
-
|
136
|
-
&::after {
|
137
|
-
position: absolute;
|
138
|
-
content: '';
|
139
|
-
width: 12px;
|
140
|
-
height: 1px;
|
141
|
-
background: var(--tree-connecting-lines-color);
|
142
|
-
top: 50%;
|
143
|
-
margin-top: -1px;
|
144
|
-
left: -10px;
|
145
|
-
}
|
146
|
-
}
|
147
|
-
&.no-folder {
|
148
|
-
width: 8px;
|
149
|
-
&::after {
|
150
|
-
position: absolute;
|
151
|
-
content: '';
|
152
|
-
width: 18px;
|
153
|
-
height: 1px;
|
154
|
-
background: var(--tree-connecting-lines-color);
|
155
|
-
top: 50%;
|
156
|
-
margin-top: -1px;
|
157
|
-
left: -10px;
|
158
|
-
}
|
159
|
-
}
|
160
|
-
|
161
|
-
&:not(.last-block)::before {
|
162
|
-
position: absolute;
|
163
|
-
content: '';
|
164
|
-
width: 1px;
|
165
|
-
height: 40px;
|
166
|
-
background: var(--tree-connecting-lines-color);
|
167
|
-
left: 50%;
|
168
|
-
top: -12px;
|
169
|
-
z-index: -1;
|
170
|
-
}
|
171
|
-
}
|
172
175
|
}
|
173
176
|
}
|
174
177
|
|
175
178
|
.tree-table-td-content {
|
176
179
|
display: inline-flex;
|
177
180
|
align-items: center;
|
178
|
-
padding:
|
181
|
+
padding-left: 8px;
|
179
182
|
font-size: 12px;
|
180
|
-
font-family: 'Poppins';
|
183
|
+
font-family: 'Poppins', sans-serif;
|
181
184
|
}
|
182
185
|
|
183
|
-
.hidden {
|
184
|
-
display: none;
|
185
|
-
}
|
186
|
-
|
187
|
-
.show {
|
188
|
-
visibility: visible;
|
189
|
-
}
|
190
186
|
.tree-row-expanded,
|
191
187
|
.tree-row-collapsed {
|
192
188
|
svg {
|
193
189
|
height: 12px;
|
194
190
|
width: 12px;
|
191
|
+
|
195
192
|
path {
|
196
193
|
fill: var(--brand-color);
|
197
194
|
}
|
198
195
|
}
|
199
196
|
}
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
197
|
+
|
198
|
+
.tree-row-collapsed svg {
|
199
|
+
transform: rotate(-90deg);
|
200
|
+
transition: transform 0.3s ease;
|
201
|
+
}
|
202
|
+
|
203
|
+
tr:after {
|
204
|
+
content: ' ';
|
205
|
+
display: block;
|
206
|
+
visibility: hidden;
|
207
|
+
clear: both;
|
208
|
+
}
|
209
|
+
|
210
|
+
.tree-table-space-container {
|
211
|
+
display: inline-flex;
|
212
|
+
flex-direction: row-reverse;
|
213
|
+
}
|
214
|
+
|
215
|
+
.tree-title-container {
|
216
|
+
display: inline-flex;
|
217
|
+
align-items: center;
|
205
218
|
}
|
@@ -28,6 +28,8 @@ const data = [
|
|
28
28
|
id: 'MOD1001', // Unique ID
|
29
29
|
},
|
30
30
|
level: 0,
|
31
|
+
lines: 1,
|
32
|
+
isLast: true,
|
31
33
|
},
|
32
34
|
{
|
33
35
|
node: {
|
@@ -58,6 +60,7 @@ const data = [
|
|
58
60
|
id: 'MOD1002', // Unique ID
|
59
61
|
},
|
60
62
|
level: 1,
|
63
|
+
lines: 1,
|
61
64
|
},
|
62
65
|
{
|
63
66
|
node: {
|
@@ -73,6 +76,8 @@ const data = [
|
|
73
76
|
id: 'MOD1003', // Unique ID
|
74
77
|
},
|
75
78
|
level: 1,
|
79
|
+
lines: 1,
|
80
|
+
isLast: true,
|
76
81
|
},
|
77
82
|
{
|
78
83
|
node: {
|
@@ -104,6 +109,7 @@ const data = [
|
|
104
109
|
id: 'MOD1004', // Unique ID
|
105
110
|
},
|
106
111
|
level: 2,
|
112
|
+
lines: 1,
|
107
113
|
},
|
108
114
|
{
|
109
115
|
node: {
|
@@ -134,6 +140,7 @@ const data = [
|
|
134
140
|
id: 'MOD1101', // Unique ID
|
135
141
|
},
|
136
142
|
level: 3,
|
143
|
+
lines: 2,
|
137
144
|
},
|
138
145
|
{
|
139
146
|
node: {
|
@@ -164,6 +171,7 @@ const data = [
|
|
164
171
|
id: 'MOD1102', // Unique ID
|
165
172
|
},
|
166
173
|
level: 3,
|
174
|
+
lines: 2,
|
167
175
|
},
|
168
176
|
{
|
169
177
|
node: {
|
@@ -194,6 +202,8 @@ const data = [
|
|
194
202
|
id: 'MOD1103', // Unique ID
|
195
203
|
},
|
196
204
|
level: 3,
|
205
|
+
lines: 2,
|
206
|
+
isLast: true,
|
197
207
|
},
|
198
208
|
{
|
199
209
|
node: {
|
@@ -225,6 +235,8 @@ const data = [
|
|
225
235
|
id: 'MOD1005', // Unique ID
|
226
236
|
},
|
227
237
|
level: 2,
|
238
|
+
lines: 1,
|
239
|
+
isLast: true,
|
228
240
|
},
|
229
241
|
{
|
230
242
|
node: {
|
@@ -255,6 +267,7 @@ const data = [
|
|
255
267
|
id: 'MOD1201', // Unique ID
|
256
268
|
},
|
257
269
|
level: 3,
|
270
|
+
lines: 1,
|
258
271
|
},
|
259
272
|
{
|
260
273
|
node: {
|
@@ -285,6 +298,7 @@ const data = [
|
|
285
298
|
id: 'MOD1202', // Unique ID
|
286
299
|
},
|
287
300
|
level: 3,
|
301
|
+
lines: 1,
|
288
302
|
},
|
289
303
|
{
|
290
304
|
node: {
|
@@ -315,8 +329,9 @@ const data = [
|
|
315
329
|
id: 'MOD1203', // Unique ID
|
316
330
|
},
|
317
331
|
level: 3,
|
332
|
+
lines: 1,
|
333
|
+
isLast: true,
|
318
334
|
},
|
319
335
|
];
|
320
336
|
|
321
|
-
|
322
337
|
export default data;
|
@@ -17,6 +17,8 @@ export interface TableCellProps {
|
|
17
17
|
select: string | null;
|
18
18
|
onCheckBoxChange: (type: string, node: any) => void;
|
19
19
|
onToggleExpand: (node: any) => void;
|
20
|
+
lines: number;
|
21
|
+
isLast: boolean | undefined;
|
20
22
|
}
|
21
23
|
|
22
24
|
export interface TableHeadProps {
|
@@ -42,6 +44,8 @@ export interface TableRowProps {
|
|
42
44
|
onRowClick: (e: any, node: any) => void;
|
43
45
|
onToggleExpand: (node: any) => void;
|
44
46
|
onCheckBoxChange: (type: string, node: any) => void;
|
47
|
+
lines: number;
|
48
|
+
isLast: boolean | undefined;
|
45
49
|
}
|
46
50
|
|
47
51
|
export interface Column {
|