pixel-react 1.10.3 → 1.10.5
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/InputWithDropdown/types.d.ts +3 -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/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 +112 -12
- package/lib/index.esm.js +504 -218
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +505 -218
- 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/InputWithDropdown/InputWithDropdown.tsx +6 -0
- package/src/components/InputWithDropdown/types.ts +7 -1
- 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/Table/Table.stories.tsx +1 -1
- package/src/components/Table/Table.tsx +8 -4
- 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 +1 -1
@@ -736,5 +736,65 @@ export const normalModalFollowedByIcon = () => {
|
|
736
736
|
</div>
|
737
737
|
);
|
738
738
|
};
|
739
|
+
export const NormalModalWithLoop = () => {
|
740
|
+
const { currentModal, openModal, closeModal } = useModal();
|
741
|
+
|
742
|
+
const modelItems = ['one', 'two', 'three', 'four'];
|
743
|
+
const structuredArray = modelItems.map((value, index) => ({
|
744
|
+
id: `${index + 1}`,
|
745
|
+
value: value,
|
746
|
+
}));
|
747
|
+
|
748
|
+
const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
|
749
|
+
|
750
|
+
const getButtonPosition = (index: number) => {
|
751
|
+
const button = buttonRefs.current[index];
|
752
|
+
if (button) {
|
753
|
+
const { top, left, height } = button.getBoundingClientRect();
|
754
|
+
return { top: top + height, left };
|
755
|
+
}
|
756
|
+
return { top: 0, left: 0 };
|
757
|
+
};
|
739
758
|
|
759
|
+
return (
|
760
|
+
<div className="ff-mini-modal-loop">
|
761
|
+
{structuredArray.map((data, index) => (
|
762
|
+
<div key={data.id} className="ff-mini-modal-loop-div">
|
763
|
+
<p>{data.value}</p>
|
764
|
+
<Button
|
765
|
+
variant="primary"
|
766
|
+
ref={(el) => (buttonRefs.current[index] = el)}
|
767
|
+
onClick={() => openModal(Number(data.id))}
|
768
|
+
id={data.id}
|
769
|
+
label={data.id}
|
770
|
+
/>
|
771
|
+
|
772
|
+
{currentModal === Number(data.id) && (
|
773
|
+
<MiniModal
|
774
|
+
id={data.id}
|
775
|
+
modalProperties={{
|
776
|
+
width: 168,
|
777
|
+
height: 108,
|
778
|
+
top: getButtonPosition(index).top,
|
779
|
+
left: getButtonPosition(index).left,
|
780
|
+
}}
|
781
|
+
overlay={{
|
782
|
+
isOverlay: true,
|
783
|
+
zIndexOverlay: 99,
|
784
|
+
}}
|
785
|
+
childContent={
|
786
|
+
<Typography as="p">
|
787
|
+
This is some content inside the modal for {data.value}.
|
788
|
+
</Typography>
|
789
|
+
}
|
790
|
+
isIconModel={true}
|
791
|
+
isAnimated={true}
|
792
|
+
outSideClick={closeModal}
|
793
|
+
/>
|
794
|
+
)}
|
795
|
+
</div>
|
796
|
+
))}
|
797
|
+
</div>
|
798
|
+
);
|
799
|
+
};
|
740
800
|
export default meta;
|
@@ -13,7 +13,8 @@ export interface MiniEditModalProps {
|
|
13
13
|
/**
|
14
14
|
* A reference to the button element that triggers the modal.
|
15
15
|
*/
|
16
|
-
anchorRef
|
16
|
+
anchorRef?: RefObject<HTMLButtonElement> | string;
|
17
|
+
id?: string | number;
|
17
18
|
/**
|
18
19
|
* Optional properties for configuring the modal header.
|
19
20
|
*/
|
@@ -394,7 +394,7 @@ export const DragAndDropTable: Story = {
|
|
394
394
|
tableDataTextColor: 'var(--brand-color)',
|
395
395
|
},
|
396
396
|
render: () => {
|
397
|
-
|
397
|
+
//! Important prerequisite: tableData should have a unique ID key, which should be either _id or id.
|
398
398
|
const [tableData, setTableData] = useState(
|
399
399
|
sampleData.map((data) => data.project)
|
400
400
|
);
|
@@ -43,7 +43,7 @@ const SortableRow = ({
|
|
43
43
|
<tr
|
44
44
|
ref={setNodeRef}
|
45
45
|
style={style}
|
46
|
-
key={row.id}
|
46
|
+
key={row._id || row.id}
|
47
47
|
className={classNames(tableBodyRowClass, {
|
48
48
|
'disabled-row': row.disabled,
|
49
49
|
})}
|
@@ -133,8 +133,12 @@ const Table = ({
|
|
133
133
|
const { active, over } = event;
|
134
134
|
if (!over || active.id === over.id) return;
|
135
135
|
|
136
|
-
const oldIndex = data.findIndex(
|
137
|
-
|
136
|
+
const oldIndex = data.findIndex(
|
137
|
+
(item: any) => item._id === active.id || item.id === active.id
|
138
|
+
);
|
139
|
+
const newIndex = data.findIndex(
|
140
|
+
(item: any) => item._id === over.id || item.id === over.id
|
141
|
+
);
|
138
142
|
|
139
143
|
if (oldIndex === -1 || newIndex === -1) return;
|
140
144
|
if (onDragEnd) onDragEnd(oldIndex, newIndex);
|
@@ -144,7 +148,7 @@ const Table = ({
|
|
144
148
|
<DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
|
145
149
|
<SortableContext
|
146
150
|
disabled={!draggable}
|
147
|
-
items={data?.map((row: any) => row.id)}
|
151
|
+
items={data?.map((row: any) => row._id || row.id)}
|
148
152
|
strategy={verticalListSortingStrategy}
|
149
153
|
>
|
150
154
|
<div
|
@@ -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,
|
@@ -28,7 +28,7 @@ export const getTreeDetails = (
|
|
28
28
|
case 'expand':
|
29
29
|
case 'collapse':
|
30
30
|
if (typeof index === 'number') {
|
31
|
-
treeDataList = [...oldData.slice(0, index
|
31
|
+
treeDataList = [...oldData.slice(0, index), ...newData];
|
32
32
|
} else {
|
33
33
|
throw new Error(
|
34
34
|
"Index is required for 'expand' or 'collapse' actions."
|