pixel-react 1.10.4 → 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/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 +109 -12
- package/lib/index.esm.js +877 -437
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +878 -437
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +2 -1
- package/src/assets/Themes/BaseTheme.scss +1 -2
- package/src/assets/Themes/DarkTheme.scss +0 -1
- package/src/assets/styles/_mixins.scss +19 -0
- package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
- package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
- package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
- package/src/components/AddResourceButton/index.ts +1 -1
- package/src/components/AddResourceButton/type.ts +2 -0
- package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
- package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
- package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
- package/src/components/BrowserTabs/index.ts +1 -0
- package/src/components/BrowserTabs/types.ts +73 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
- package/src/components/ConnectingBranch/data.tsx +207 -213
- package/src/components/ConnectingBranch/types.ts +26 -17
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
- package/src/components/Excel/ExcelFile.stories.tsx +10 -2
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
- package/src/components/Excel/Types.ts +1 -0
- package/src/components/Excel/dataConversion.ts +17 -19
- package/src/components/MenuOption/MenuOption.tsx +4 -0
- package/src/components/MenuOption/types.ts +1 -0
- package/src/components/MiniModal/MiniModal.scss +8 -0
- package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
- package/src/components/MiniModal/types.ts +2 -1
- package/src/components/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
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/Button/Button.stories.d.ts +0 -12
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -7
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -6
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -7
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -6
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -15
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -9
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -9
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -8
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -13
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -15
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/Table/Table.stories.d.ts +0 -11
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -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."
|