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.
Files changed (133) hide show
  1. package/lib/components/Button/Button.d.ts +2 -2
  2. package/lib/components/Button/types.d.ts +17 -0
  3. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  4. package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
  5. package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
  6. package/lib/components/ChooseFile/types.d.ts +68 -0
  7. package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
  8. package/lib/components/ConnectingBranch/data.d.ts +19 -33
  9. package/lib/components/ConnectingBranch/types.d.ts +10 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
  11. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  12. package/lib/components/LabelEditTextField/types.d.ts +2 -0
  13. package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
  14. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  15. package/lib/components/Select/Select.stories.d.ts +0 -1
  16. package/lib/components/Select/types.d.ts +1 -1
  17. package/lib/components/StatusCard/types.d.ts +2 -0
  18. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  19. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  20. package/lib/components/TableTree/data.d.ts +74 -0
  21. package/lib/components/TableTree/types.d.ts +4 -0
  22. package/lib/components/TextArea/Textarea.d.ts +1 -1
  23. package/lib/components/TextArea/Types.d.ts +1 -0
  24. package/lib/index.d.ts +174 -63
  25. package/lib/index.esm.js +474 -286
  26. package/lib/index.esm.js.map +1 -1
  27. package/lib/index.js +474 -285
  28. package/lib/index.js.map +1 -1
  29. package/lib/tsconfig.tsbuildinfo +1 -1
  30. package/lib/utils/validateFile/validateFile.d.ts +2 -0
  31. package/package.json +1 -1
  32. package/src/assets/Themes/BaseTheme.scss +1 -0
  33. package/src/assets/Themes/BlueTheme.scss +44 -44
  34. package/src/assets/Themes/DarkTheme.scss +1 -0
  35. package/src/assets/icons/approval_pending.svg +8 -8
  36. package/src/assets/icons/configuration.svg +3 -3
  37. package/src/assets/icons/defects.svg +8 -8
  38. package/src/assets/icons/element.svg +4 -4
  39. package/src/assets/icons/failed_status_icon.svg +1 -1
  40. package/src/assets/icons/flaky_status_icon.svg +1 -1
  41. package/src/assets/icons/project_element.svg +4 -4
  42. package/src/assets/icons/settings.svg +3 -0
  43. package/src/assets/icons/skipped_status_icon.svg +1 -1
  44. package/src/assets/icons/step_group.svg +10 -10
  45. package/src/assets/icons/variable.svg +3 -3
  46. package/src/assets/icons/warning_status_icon.svg +1 -1
  47. package/src/assets/icons/web_service_icon.svg +3 -3
  48. package/src/components/Button/Button.scss +12 -0
  49. package/src/components/Button/Button.tsx +29 -11
  50. package/src/components/Button/types.ts +21 -0
  51. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
  52. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
  53. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
  54. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  55. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
  56. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
  57. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
  58. package/src/components/Charts/MultiRadialChart/types.ts +4 -1
  59. package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
  60. package/src/components/ChooseFile/ChooseFile.tsx +46 -0
  61. package/src/components/ChooseFile/types.ts +78 -0
  62. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
  63. package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
  64. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
  65. package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
  66. package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
  67. package/src/components/ConnectingBranch/types.ts +21 -0
  68. package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
  69. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
  70. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
  71. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
  72. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
  73. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
  74. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
  75. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
  76. package/src/components/Icon/iconList.ts +2 -0
  77. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
  78. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
  79. package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
  80. package/src/components/LabelEditTextField/types.ts +2 -0
  81. package/src/components/MachineInputField/MachineInputField.tsx +67 -70
  82. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
  83. package/src/components/Select/Select.tsx +4 -4
  84. package/src/components/Select/types.ts +1 -1
  85. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
  86. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
  87. package/src/components/StatusCard/StatusCard.scss +2 -1
  88. package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
  89. package/src/components/StatusCard/StatusCard.tsx +10 -2
  90. package/src/components/StatusCard/types.ts +2 -0
  91. package/src/components/TableTree/Components/TableBody.tsx +19 -15
  92. package/src/components/TableTree/Components/TableCell.tsx +47 -31
  93. package/src/components/TableTree/Components/TableRow.tsx +4 -0
  94. package/src/components/TableTree/TableTree.scss +122 -109
  95. package/src/components/TableTree/data.ts +16 -1
  96. package/src/components/TableTree/types.ts +4 -0
  97. package/src/components/TextArea/Textarea.tsx +2 -0
  98. package/src/components/TextArea/Types.ts +3 -0
  99. package/src/index.ts +3 -0
  100. package/src/utils/validateFile/validateFile.stories.tsx +49 -0
  101. package/src/utils/validateFile/validateFile.ts +39 -0
  102. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  103. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  104. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  105. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  106. package/lib/components/AddButton/AddButton.d.ts +0 -5
  107. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  108. package/lib/components/AddButton/index.d.ts +0 -1
  109. package/lib/components/AddButton/types.d.ts +0 -4
  110. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  111. package/lib/components/AddVariables/index.d.ts +0 -1
  112. package/lib/components/AddVariables/types.d.ts +0 -35
  113. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  114. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  115. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  116. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  117. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  118. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  119. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  120. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  121. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  122. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  123. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  124. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  125. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  126. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  127. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
  128. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
  129. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
  130. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
  131. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
  132. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
  133. /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 ? 'toggled' : ''
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(({ node, level }) => {
18
- return (
19
- <TableRow
20
- key={node.id}
21
- node={node}
22
- level={level}
23
- columnsData={columnsData}
24
- selected={selected}
25
- select={select}
26
- onRowClick={onRowClick}
27
- onToggleExpand={onToggleExpand}
28
- onCheckBoxChange={onCheckBoxChange}
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 = (level: number) =>
9
- Array.from({ length: level }).map((_, i) => (
10
- <span key={i} className="tree-table-space-block" />
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
- {col.isTree && (
26
- <span
27
- className={`tree-table-space-block last-block ${
28
- node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
29
- } ${node.folder ? '' : 'no-folder'}`}
30
- onClick={() => onToggleExpand(node)}
31
- >
32
- {node.folder && <Arrow />}
33
- </span>
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
- {col.isTree && select === 'radio' && (
43
- <RadioButton
44
- name={node.title}
45
- checked={selected.includes(node.id)}
46
- value={node.id}
47
- onChange={() => onCheckBoxChange('radio', node)}
48
- />
49
- )}
50
- {prepareData(node, col)}
51
- </span>
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
- &.expand {
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
- text-align: left;
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
- white-space: nowrap;
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: 7px;
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
- .tree-row-collapsed {
201
- svg {
202
- transform: rotate(-90deg);
203
- transition: all;
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 {