pixel-react 1.9.5 → 1.9.7
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/.yarn/install-state.gz +0 -0
- package/lib/ComponentProps/TreeNodeProps.d.ts +31 -0
- package/lib/components/ConditionalDropdown/types.d.ts +4 -3
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
- package/lib/components/Input/types.d.ts +2 -0
- package/lib/components/MobileSkin/MobileSkinInterface.d.ts +2 -2
- package/lib/components/MobileSkin/types.d.ts +9 -8
- package/lib/components/Select/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/types.d.ts +8 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +17 -4
- package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
- package/lib/components/TableTree/types.d.ts +5 -32
- package/lib/index.d.ts +46 -75
- package/lib/index.esm.js +292 -98
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +292 -98
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getSequentialPayload/types.d.ts +6 -0
- package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -29
- package/lib/utils/handleTreeNodeSelect/handleTreeNodeSelect.d.ts +1 -30
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +31 -0
- package/src/assets/Themes/BaseTheme.scss +3 -0
- package/src/assets/Themes/DarkTheme.scss +3 -0
- package/src/assets/styles/_colors.scss +5 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +149 -30
- package/src/components/ConditionalDropdown/types.ts +27 -25
- package/src/components/Drawer/Drawer.scss +1 -1
- package/src/components/Drawer/Drawer.tsx +1 -1
- package/src/components/Editor/VariableDropdown.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +39 -8
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +0 -4
- package/src/components/Input/Input.tsx +4 -0
- package/src/components/Input/types.ts +5 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -0
- package/src/components/MobileSkin/MobileSkin.scss +0 -8
- package/src/components/MobileSkin/MobileSkin.stories.tsx +10 -9
- package/src/components/MobileSkin/MobileSkin.tsx +16 -31
- package/src/components/MobileSkin/MobileSkinInterface.ts +2 -2
- package/src/components/MobileSkin/types.ts +9 -8
- package/src/components/RadioButton/RadioButton.tsx +5 -1
- package/src/components/Select/Select.stories.tsx +2 -0
- package/src/components/Select/Select.tsx +4 -1
- package/src/components/Select/components/Dropdown.tsx +1 -2
- package/src/components/Select/types.ts +6 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +35 -28
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +58 -14
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -20
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +41 -0
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/types.ts +9 -0
- package/src/components/SequentialConnectingBranch/types.ts +19 -5
- package/src/components/TableTree/Components/TableBody.tsx +22 -20
- package/src/components/TableTree/Components/TableCell.tsx +18 -6
- package/src/components/TableTree/Components/TableHead.tsx +5 -3
- package/src/components/TableTree/Components/TableRow.tsx +0 -3
- package/src/components/TableTree/TableTree.scss +88 -51
- package/src/components/TableTree/TableTree.stories.tsx +8 -7
- package/src/components/TableTree/TableTree.tsx +7 -2
- package/src/components/TableTree/data.ts +1 -1
- package/src/components/TableTree/types.ts +5 -33
- package/src/components/Tabs/Tabs.scss +1 -1
- package/src/index.ts +7 -0
- package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +1 -0
- package/src/utils/getSequentialPayload/getSequentialPayload.ts +1 -1
- package/src/utils/getSequentialPayload/types.ts +6 -0
- package/src/utils/getTreeDetails/getTreeDetails.ts +1 -29
- package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts +1 -30
@@ -10,6 +10,8 @@ import Typography from '../../../Typography';
|
|
10
10
|
import Button from '../../../Button';
|
11
11
|
import './Branches.scss';
|
12
12
|
import { MachineType } from '../../../MachineInputField/types';
|
13
|
+
import Tooltip from '../../../Tooltip';
|
14
|
+
import DataSetTooltip from '../DatasetTooltip/DataSetTooltip';
|
13
15
|
|
14
16
|
const Branches = ({
|
15
17
|
machineInstances,
|
@@ -163,13 +165,17 @@ const Branches = ({
|
|
163
165
|
</div>
|
164
166
|
{machineInstances?.map((machineInstance, index) => {
|
165
167
|
const {
|
166
|
-
|
167
|
-
? machineInstance.
|
168
|
+
runCount = 'runCount' in machineInstance
|
169
|
+
? machineInstance.runCount
|
168
170
|
: 0,
|
171
|
+
numberOfRuns = 0,
|
169
172
|
machineInstanceId = '',
|
170
173
|
peVariableSetId = '',
|
171
174
|
globalVariableSetId = '',
|
172
175
|
testDataSetId = '',
|
176
|
+
testDataSetName = '',
|
177
|
+
peVariableSetName = '',
|
178
|
+
globalVariableSetName = '',
|
173
179
|
} = machineInstance as ExecutionContext;
|
174
180
|
return (
|
175
181
|
<Fragment key={ffid()}>
|
@@ -184,7 +190,7 @@ const Branches = ({
|
|
184
190
|
></div>
|
185
191
|
<MachineInputField
|
186
192
|
width={`${machineColumnWidth}px`}
|
187
|
-
runCount={
|
193
|
+
runCount={runCount}
|
188
194
|
key={ffid()}
|
189
195
|
options={
|
190
196
|
getMachineLabelOptionList(
|
@@ -193,9 +199,7 @@ const Branches = ({
|
|
193
199
|
) as MachineType[]
|
194
200
|
}
|
195
201
|
contentReverse={!evenRow}
|
196
|
-
modalId={`${machineInstanceId}-runCount-${
|
197
|
-
numberOfRuns - 1
|
198
|
-
}`}
|
202
|
+
modalId={`${machineInstanceId}-runCount-${runCount - 1}`}
|
199
203
|
onClick={() =>
|
200
204
|
onUpdateAddBrowserInstance(
|
201
205
|
`${machineInstanceId}-runCount-0`,
|
@@ -214,15 +218,18 @@ const Branches = ({
|
|
214
218
|
{hideDataSet && (
|
215
219
|
<>
|
216
220
|
<div
|
217
|
-
id={`ff-sequential-branch-dataset-${machineInstanceId}-${
|
221
|
+
id={`ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`}
|
218
222
|
className="ff-dataset-list-branch"
|
219
223
|
onClick={() =>
|
220
224
|
onUpdateDataSetList(
|
221
|
-
`ff-sequential-branch-dataset-${machineInstanceId}-${
|
225
|
+
`ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`,
|
222
226
|
{
|
223
227
|
peVariableSetId: peVariableSetId,
|
224
228
|
globalVariableSetId: globalVariableSetId,
|
225
229
|
testDataSetId: testDataSetId,
|
230
|
+
testDataSetName: testDataSetName,
|
231
|
+
globalVariableSetName: globalVariableSetName,
|
232
|
+
peVariableSetName: peVariableSetName,
|
226
233
|
},
|
227
234
|
true,
|
228
235
|
numberOfRuns,
|
@@ -230,10 +237,24 @@ const Branches = ({
|
|
230
237
|
)
|
231
238
|
}
|
232
239
|
>
|
233
|
-
<
|
234
|
-
|
235
|
-
|
236
|
-
|
240
|
+
<Tooltip
|
241
|
+
placement="bottom"
|
242
|
+
title={
|
243
|
+
<DataSetTooltip
|
244
|
+
datSetToolTip={{
|
245
|
+
peVariableSetName,
|
246
|
+
globalVariableSetName,
|
247
|
+
testDataSetName,
|
248
|
+
}}
|
249
|
+
/>
|
250
|
+
}
|
251
|
+
>
|
252
|
+
<Icon
|
253
|
+
name="datalist_icon"
|
254
|
+
className="ff-connecting-icon"
|
255
|
+
hoverEffect
|
256
|
+
/>
|
257
|
+
</Tooltip>
|
237
258
|
<Typography
|
238
259
|
className="ff-connecting-text"
|
239
260
|
color="var(--ff-connecting-branch-color)"
|
@@ -247,6 +268,7 @@ const Branches = ({
|
|
247
268
|
className="ff-connecting-icon"
|
248
269
|
onClick={() => onAddRunBrowser(machineInstanceId)}
|
249
270
|
color="var(--ff-connecting-branch-color)"
|
271
|
+
hoverEffect
|
250
272
|
/>
|
251
273
|
<Typography
|
252
274
|
className="ff-connecting-text"
|
@@ -256,14 +278,17 @@ const Branches = ({
|
|
256
278
|
</Typography>
|
257
279
|
</>
|
258
280
|
)}
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
281
|
+
{!readOnly && (
|
282
|
+
<Icon
|
283
|
+
name="delete"
|
284
|
+
className="ff-connecting-delete-icon"
|
285
|
+
onClick={() =>
|
286
|
+
onDeleteBrowser(machineInstanceId, runCount)
|
287
|
+
}
|
288
|
+
color="var(--ff-connecting-branch-delete-color)"
|
289
|
+
hoverEffect
|
290
|
+
/>
|
291
|
+
)}
|
267
292
|
</div>
|
268
293
|
)}
|
269
294
|
</div>
|
package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx
ADDED
@@ -0,0 +1,41 @@
|
|
1
|
+
import { FC } from 'react';
|
2
|
+
import Tooltip from '../../../Tooltip';
|
3
|
+
import Typography from '../../../Typography';
|
4
|
+
import { DataSetTooltipProps } from './types';
|
5
|
+
|
6
|
+
const DataSetTooltip: FC<DataSetTooltipProps> = ({
|
7
|
+
datSetToolTip: {
|
8
|
+
globalVariableSetName = '',
|
9
|
+
peVariableSetName = '',
|
10
|
+
testDataSetName = '',
|
11
|
+
},
|
12
|
+
}) => {
|
13
|
+
const toolTipTitleValue = {
|
14
|
+
'Test Data Set': testDataSetName,
|
15
|
+
'Global Variable Set': globalVariableSetName,
|
16
|
+
'Project Environment Set': peVariableSetName,
|
17
|
+
};
|
18
|
+
|
19
|
+
return (
|
20
|
+
<>
|
21
|
+
<Tooltip placement="bottom">
|
22
|
+
{Object.entries(toolTipTitleValue).map(([key, value], index) => (
|
23
|
+
<div key={index}>
|
24
|
+
<Typography
|
25
|
+
as="div"
|
26
|
+
fontSize={10}
|
27
|
+
lineHeight="15px"
|
28
|
+
>
|
29
|
+
{key}
|
30
|
+
</Typography>
|
31
|
+
<Typography as="div" lineHeight="18px">
|
32
|
+
{value}
|
33
|
+
</Typography>
|
34
|
+
</div>
|
35
|
+
))}
|
36
|
+
</Tooltip>
|
37
|
+
</>
|
38
|
+
);
|
39
|
+
};
|
40
|
+
|
41
|
+
export default DataSetTooltip;
|
@@ -1,32 +1,38 @@
|
|
1
1
|
import { Option } from '../Select/types';
|
2
2
|
|
3
3
|
export interface SequentialConnectingBranchProps {
|
4
|
-
machineInstances
|
4
|
+
machineInstances: ExecutionContext[] | {}[];
|
5
5
|
machineColumnWidth?: number;
|
6
6
|
machineColumnCount?: number;
|
7
7
|
selectedMachine?: Option;
|
8
8
|
machineOptionsList?: Option[];
|
9
9
|
onHandleSelect?: (option: Option) => void;
|
10
10
|
onAddBrowserInstance?: (modalId: string) => void;
|
11
|
-
onUpdateAddBrowserInstance
|
11
|
+
onUpdateAddBrowserInstance?: (
|
12
12
|
modalId: string,
|
13
13
|
machineInstance: ExecutionContext
|
14
14
|
) => void;
|
15
15
|
onDeleteBrowserInstance?: (id: string, runCount: number) => void;
|
16
16
|
onAddRunBrowserInstance?: (machineInstanceId: string) => void;
|
17
17
|
onDeleteMachineInstance?: () => void;
|
18
|
-
onUpdateDataSetList
|
18
|
+
onUpdateDataSetList?: (
|
19
19
|
id: string,
|
20
|
-
dataSetObject
|
20
|
+
dataSetObject?: dataSetValues,
|
21
21
|
isInstance?: boolean,
|
22
22
|
noOfRuns?: number,
|
23
23
|
machineInstanceId?: string
|
24
24
|
) => void;
|
25
|
-
dataSetValues
|
25
|
+
dataSetValues?: dataSetValues;
|
26
26
|
addInstanceLabel?: string;
|
27
27
|
scriptType?: string;
|
28
28
|
projectType?: string;
|
29
29
|
readOnly?: boolean;
|
30
|
+
integrationInstance?: IntegrationInstance
|
31
|
+
}
|
32
|
+
|
33
|
+
export interface IntegrationInstance {
|
34
|
+
usename: string,
|
35
|
+
accessKey: string
|
30
36
|
}
|
31
37
|
|
32
38
|
// Type for machine information
|
@@ -47,6 +53,7 @@ export interface ExecutionContext {
|
|
47
53
|
machineInstanceId: string;
|
48
54
|
clientId: string;
|
49
55
|
numberOfRuns: number;
|
56
|
+
runCount: number;
|
50
57
|
executionEnv?: 'Local'; // Change to specific enum if more environments exist
|
51
58
|
browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
|
52
59
|
browserVersion: string;
|
@@ -55,12 +62,19 @@ export interface ExecutionContext {
|
|
55
62
|
deviceInfo: DeviceInfo[];
|
56
63
|
headless: boolean;
|
57
64
|
peVariableSetId: string;
|
65
|
+
testDataSetName: string;
|
66
|
+
globalVariableSetName: string;
|
67
|
+
peVariableSetName: string;
|
58
68
|
globalVariableSetId: string;
|
59
69
|
testDataSetId: string;
|
70
|
+
integrationInstance: IntegrationInstance;
|
60
71
|
}
|
61
72
|
|
62
73
|
export interface dataSetValues {
|
63
74
|
peVariableSetId: string;
|
64
75
|
globalVariableSetId: string;
|
65
76
|
testDataSetId: string;
|
77
|
+
testDataSetName: string;
|
78
|
+
globalVariableSetName: string;
|
79
|
+
peVariableSetName: string;
|
66
80
|
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { TableBodyProps } from '../types';
|
3
3
|
import TableRow from './TableRow';
|
4
|
+
import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
|
4
5
|
|
5
6
|
const TableBody = React.memo(
|
6
7
|
({
|
@@ -11,26 +12,27 @@ const TableBody = React.memo(
|
|
11
12
|
onRowClick,
|
12
13
|
onToggleExpand,
|
13
14
|
onCheckBoxChange,
|
14
|
-
}: TableBodyProps) =>
|
15
|
-
|
16
|
-
<
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
15
|
+
}: TableBodyProps) =>
|
16
|
+
checkEmpty(flattenedTreeData) ? null : (
|
17
|
+
<tbody className="ff-table-tree-body">
|
18
|
+
<tr id="ff-table-tree-first-node" />
|
19
|
+
{flattenedTreeData?.map((node, index) => {
|
20
|
+
return (
|
21
|
+
<TableRow
|
22
|
+
key={node.searchKey}
|
23
|
+
node={node}
|
24
|
+
columnsData={columnsData}
|
25
|
+
selected={selected}
|
26
|
+
select={select}
|
27
|
+
onRowClick={onRowClick}
|
28
|
+
onToggleExpand={(node) => onToggleExpand(node, index)}
|
29
|
+
onCheckBoxChange={onCheckBoxChange}
|
30
|
+
/>
|
31
|
+
);
|
32
|
+
})}
|
33
|
+
<tr id="ff-table-tree-last-node" />
|
34
|
+
</tbody>
|
35
|
+
)
|
34
36
|
);
|
35
37
|
|
36
38
|
export default TableBody;
|
@@ -44,21 +44,31 @@ const TableCell = React.memo(
|
|
44
44
|
onCheckBoxChange,
|
45
45
|
onToggleExpand,
|
46
46
|
}: TableCellProps) => (
|
47
|
-
<td>
|
47
|
+
<td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
|
48
48
|
{col.isTree &&
|
49
49
|
renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
|
50
50
|
<div className="tree-title-container">
|
51
51
|
{col.isTree && (
|
52
52
|
<span
|
53
53
|
className={`tree-table-space-block last-block ${
|
54
|
-
node.
|
55
|
-
} ${node.
|
54
|
+
node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'
|
55
|
+
} ${node.container ? '' : 'no-folder'}`}
|
56
56
|
onClick={() => onToggleExpand(node)}
|
57
57
|
>
|
58
|
-
{node.
|
58
|
+
{node.container &&
|
59
|
+
node?.resourceCount + node?.subContainerCount > 0 && (
|
60
|
+
<span onClick={() => onToggleExpand(node)}>
|
61
|
+
{' '}
|
62
|
+
<Arrow />
|
63
|
+
</span>
|
64
|
+
)}
|
59
65
|
</span>
|
60
66
|
)}
|
61
|
-
<span
|
67
|
+
<span
|
68
|
+
className={`tree-table-td-content ${
|
69
|
+
col.isTree && node.folder ? 'folder' : ''
|
70
|
+
}`}
|
71
|
+
>
|
62
72
|
{col.isTree && select === 'checkbox' && (
|
63
73
|
<Checkbox
|
64
74
|
checked={selected.includes(node.id)}
|
@@ -73,7 +83,9 @@ const TableCell = React.memo(
|
|
73
83
|
onChange={(e) => onCheckBoxChange(e, node)}
|
74
84
|
/>
|
75
85
|
)}
|
76
|
-
|
86
|
+
<span className="tree-table-td-content-text">
|
87
|
+
{prepareData(node, col)}
|
88
|
+
</span>
|
77
89
|
</span>
|
78
90
|
</div>
|
79
91
|
{col.actions && (
|
@@ -10,8 +10,10 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
|
|
10
10
|
return (
|
11
11
|
<thead>
|
12
12
|
<tr>
|
13
|
-
{columnsData.map(({ name }) => (
|
14
|
-
<th key={name}
|
13
|
+
{columnsData.map(({ name, width }) => (
|
14
|
+
<th key={name} style={{ width: width }}>
|
15
|
+
{name}
|
16
|
+
</th>
|
15
17
|
))}
|
16
18
|
</tr>
|
17
19
|
{hasDefaultValues && (
|
@@ -19,7 +21,7 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
|
|
19
21
|
{columnsData.map(({ defaultValue, defaultActions }, index) => (
|
20
22
|
<td key={index}>
|
21
23
|
{defaultValue && (
|
22
|
-
<span className="">
|
24
|
+
<span className="tree-table-default-content">
|
23
25
|
{defaultValue}
|
24
26
|
{defaultActions && (
|
25
27
|
<div className="table-tree-row-action">
|
@@ -5,15 +5,12 @@ import TableCell from './TableCell';
|
|
5
5
|
const TableRow = React.memo(
|
6
6
|
({
|
7
7
|
node,
|
8
|
-
// level,
|
9
8
|
columnsData,
|
10
9
|
selected,
|
11
10
|
select,
|
12
11
|
onRowClick,
|
13
12
|
onToggleExpand,
|
14
13
|
onCheckBoxChange,
|
15
|
-
// parentSiblings,
|
16
|
-
// isLast,
|
17
14
|
}: TableRowProps) => (
|
18
15
|
<tr
|
19
16
|
data-level={node.hierarchy}
|
@@ -99,107 +99,144 @@
|
|
99
99
|
|
100
100
|
.tree-table-wrap {
|
101
101
|
width: 100%;
|
102
|
+
padding-left: 4px; // padding size need to check
|
102
103
|
overflow: hidden;
|
103
104
|
overflow-x: auto;
|
104
105
|
}
|
105
106
|
|
106
107
|
.table-scrollable {
|
107
|
-
|
108
|
+
height: var(--table-height); /* Adjust height as needed */
|
108
109
|
overflow-y: auto;
|
110
|
+
position: relative;
|
109
111
|
}
|
110
112
|
|
111
113
|
.ff-table-tree-body {
|
112
114
|
overflow: scroll;
|
113
115
|
}
|
114
116
|
|
117
|
+
tr {
|
118
|
+
&:hover {
|
119
|
+
background-color: var(--hover-color);
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
115
123
|
.tree-table {
|
116
|
-
border: 1px solid #f1f1f1;
|
124
|
+
// border: 1px solid #f1f1f1;
|
117
125
|
table-layout: fixed;
|
118
126
|
width: 100%;
|
119
127
|
border-collapse: collapse;
|
120
128
|
overflow: scroll;
|
121
129
|
|
130
|
+
thead {
|
131
|
+
position: sticky;
|
132
|
+
top: 0;
|
133
|
+
z-index: 2;
|
134
|
+
}
|
135
|
+
|
122
136
|
tr {
|
137
|
+
background-color: var(--base-bg-color);
|
123
138
|
.table-tree-row-action {
|
124
139
|
display: none;
|
125
140
|
}
|
126
141
|
|
127
|
-
&:hover {
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
142
|
+
// &:hover {
|
143
|
+
// background-color: var(--hover-color);
|
144
|
+
// td {
|
145
|
+
// &:first-child {
|
146
|
+
// background-color: var(--hover-color);
|
147
|
+
// }
|
148
|
+
// }
|
134
149
|
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
}
|
150
|
+
.table-tree-row-action {
|
151
|
+
display: inline-flex;
|
152
|
+
align-items: center;
|
139
153
|
}
|
154
|
+
}
|
140
155
|
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
}
|
156
|
+
&::after {
|
157
|
+
content: '';
|
158
|
+
display: block;
|
159
|
+
visibility: hidden;
|
160
|
+
clear: both;
|
147
161
|
}
|
162
|
+
}
|
148
163
|
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
164
|
+
th,
|
165
|
+
td {
|
166
|
+
text-align: left;
|
167
|
+
white-space: nowrap;
|
168
|
+
text-overflow: ellipsis;
|
169
|
+
overflow: hidden;
|
170
|
+
}
|
171
|
+
|
172
|
+
th {
|
173
|
+
color: var(--brand-color);
|
174
|
+
background: var(--slider-table-color);
|
175
|
+
font-size: 13px;
|
176
|
+
width: 400px;
|
177
|
+
height: 32px;
|
178
|
+
box-sizing: border-box;
|
179
|
+
|
180
|
+
&:first-child {
|
181
|
+
width: 400px !important;
|
182
|
+
position: sticky;
|
183
|
+
left: 0;
|
155
184
|
}
|
185
|
+
}
|
156
186
|
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
width: 400px;
|
187
|
+
td {
|
188
|
+
font-size: 14px;
|
189
|
+
color: var(--brand-color);
|
190
|
+
height: 18px;
|
162
191
|
|
163
|
-
|
164
|
-
|
165
|
-
|
192
|
+
&:first-child {
|
193
|
+
overflow: initial;
|
194
|
+
position: sticky;
|
195
|
+
left: 0;
|
196
|
+
background-color: white;
|
197
|
+
|
198
|
+
&:hover {
|
199
|
+
background-color: var(--hover-color);
|
166
200
|
}
|
167
|
-
}
|
168
201
|
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
height: 18px;
|
202
|
+
.tree-table-default-content {
|
203
|
+
margin-left: 8px;
|
204
|
+
}
|
173
205
|
|
174
|
-
|
175
|
-
|
176
|
-
position: sticky;
|
177
|
-
left: 0;
|
178
|
-
background-color: white;
|
206
|
+
.tree-table-td-content {
|
207
|
+
padding-left: 4px;
|
179
208
|
|
180
|
-
|
181
|
-
|
209
|
+
.tree-table-td-content-text {
|
210
|
+
margin-left: 4px;
|
182
211
|
}
|
183
212
|
}
|
184
213
|
}
|
214
|
+
&.folder {
|
215
|
+
height: 28px;
|
216
|
+
}
|
185
217
|
}
|
186
218
|
|
187
219
|
.tree-table-td-content {
|
188
220
|
display: inline-flex;
|
189
221
|
align-items: center;
|
190
|
-
padding-left: 8px;
|
191
222
|
font-size: 12px;
|
192
223
|
font-family: 'Poppins', sans-serif;
|
224
|
+
|
225
|
+
&.folder {
|
226
|
+
font-weight: 600;
|
227
|
+
}
|
193
228
|
}
|
194
229
|
|
195
230
|
.tree-row-expanded,
|
196
231
|
.tree-row-collapsed {
|
197
|
-
|
198
|
-
|
199
|
-
|
232
|
+
span {
|
233
|
+
svg {
|
234
|
+
height: 12px;
|
235
|
+
width: 12px;
|
200
236
|
|
201
|
-
|
202
|
-
|
237
|
+
path {
|
238
|
+
fill: var(--brand-color);
|
239
|
+
}
|
203
240
|
}
|
204
241
|
}
|
205
242
|
}
|
@@ -37,7 +37,7 @@ const colData = [
|
|
37
37
|
{
|
38
38
|
name: 'Module Path',
|
39
39
|
accessor: 'createdBy',
|
40
|
-
width: '
|
40
|
+
width: '300px',
|
41
41
|
isClickable: true,
|
42
42
|
},
|
43
43
|
|
@@ -109,8 +109,8 @@ export const Default: Story = {
|
|
109
109
|
loadMore: (node) => {
|
110
110
|
console.log(node);
|
111
111
|
},
|
112
|
-
onExpand: (
|
113
|
-
console.log(
|
112
|
+
onExpand: (node, index) => {
|
113
|
+
console.log(node, index);
|
114
114
|
},
|
115
115
|
select: 'checkbox',
|
116
116
|
onChange: (node: string[]) => {
|
@@ -130,8 +130,8 @@ export const ControlledCheckBox: Story = {
|
|
130
130
|
const [selected, setSelected] = useState<string[]>([]);
|
131
131
|
return (
|
132
132
|
<TableTree
|
133
|
-
onExpand={(
|
134
|
-
console.log(
|
133
|
+
onExpand={(node, index) => {
|
134
|
+
console.log(node, index);
|
135
135
|
}}
|
136
136
|
select="checkbox"
|
137
137
|
onChange={(e, nodes: string[]) => {
|
@@ -146,6 +146,7 @@ export const ControlledCheckBox: Story = {
|
|
146
146
|
loadMore={(direction) => {
|
147
147
|
console.log(direction, '-------------------');
|
148
148
|
}}
|
149
|
+
tableBorder="1px solid #f1f1f1"
|
149
150
|
/>
|
150
151
|
);
|
151
152
|
},
|
@@ -155,8 +156,8 @@ export const ControlledRadio: Story = {
|
|
155
156
|
const [selected, setSelected] = useState<string[]>([]);
|
156
157
|
return (
|
157
158
|
<TableTree
|
158
|
-
onExpand={(
|
159
|
-
console.log(
|
159
|
+
onExpand={(node, index) => {
|
160
|
+
console.log(node, index);
|
160
161
|
}}
|
161
162
|
select="radio"
|
162
163
|
onChange={(nodes: string[]) => {
|