pixel-react 1.6.9 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +112 -59
- package/lib/index.esm.js +1251 -662
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1252 -662
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
- package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +9 -0
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -2
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/index.ts +0 -1
@@ -1,185 +1,12 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { useCallback, memo } from 'react';
|
2
2
|
import './TableTree.scss';
|
3
|
-
import {
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import
|
8
|
-
|
9
|
-
TableCellProps,
|
10
|
-
TableHeadProps,
|
11
|
-
TableRowProps,
|
12
|
-
TreeTableProps,
|
13
|
-
} from './types';
|
3
|
+
import { TreeTableProps } from './types';
|
4
|
+
import TableHead from './Components/TableHead';
|
5
|
+
import TableBody from './Components/TableBody';
|
6
|
+
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
|
7
|
+
import getAllChildIds from './Utils/getAllChildIds';
|
8
|
+
import functionCheck from '../../utils/functionCheck/functionCheck';
|
14
9
|
|
15
|
-
// Helper to render spaces for levels
|
16
|
-
const renderSpaces = (level: number) =>
|
17
|
-
Array.from({ length: level }).map((_, i) => (
|
18
|
-
<span key={i} className="tree-table-space-block" />
|
19
|
-
));
|
20
|
-
|
21
|
-
// Recursive function to get all child node IDs (including nested children)
|
22
|
-
const getAllChildIds = (nodeId: string, data: any[]): string[] => {
|
23
|
-
let result = [nodeId];
|
24
|
-
|
25
|
-
// Traverse the tree and find children based on parentId
|
26
|
-
data.forEach(({ node }) => {
|
27
|
-
if (node.parentId === nodeId) {
|
28
|
-
result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
|
29
|
-
}
|
30
|
-
});
|
31
|
-
|
32
|
-
return result;
|
33
|
-
};
|
34
|
-
|
35
|
-
// Component: TableCell
|
36
|
-
const TableCell = React.memo(
|
37
|
-
({
|
38
|
-
col,
|
39
|
-
node,
|
40
|
-
level,
|
41
|
-
selected,
|
42
|
-
select,
|
43
|
-
onCheckBoxChange,
|
44
|
-
onToggleExpand,
|
45
|
-
}: TableCellProps) => (
|
46
|
-
<td>
|
47
|
-
{col.isTree && renderSpaces(level + 1)}
|
48
|
-
{col.isTree && (
|
49
|
-
<span
|
50
|
-
className={`tree-table-space-block last-block ${
|
51
|
-
node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
|
52
|
-
} ${node.folder ? '' : 'no-folder'}`}
|
53
|
-
onClick={() => onToggleExpand(node)}
|
54
|
-
>
|
55
|
-
{node.folder && <Arrow />}
|
56
|
-
</span>
|
57
|
-
)}
|
58
|
-
<span className="tree-table-td-content">
|
59
|
-
{col.isTree && select === 'checkbox' && (
|
60
|
-
<Checkbox
|
61
|
-
checked={selected.includes(node.id)}
|
62
|
-
onChange={() => onCheckBoxChange('checkbox', node)}
|
63
|
-
/>
|
64
|
-
)}
|
65
|
-
{col.isTree && select === 'radio' && (
|
66
|
-
<RadioButton
|
67
|
-
name={node.title}
|
68
|
-
checked={selected.includes(node.id)}
|
69
|
-
value={node.id}
|
70
|
-
onChange={() => onCheckBoxChange('radio', node)}
|
71
|
-
/>
|
72
|
-
)}
|
73
|
-
{prepareData(node, col)}
|
74
|
-
</span>
|
75
|
-
{col.actions && (
|
76
|
-
<div className="table-tree-row-action">{col.actions(node)}</div>
|
77
|
-
)}
|
78
|
-
</td>
|
79
|
-
)
|
80
|
-
);
|
81
|
-
|
82
|
-
// Component: TableRow
|
83
|
-
const TableRow = React.memo(
|
84
|
-
({
|
85
|
-
node,
|
86
|
-
level,
|
87
|
-
columnsData,
|
88
|
-
selected,
|
89
|
-
select,
|
90
|
-
onRowClick,
|
91
|
-
onToggleExpand,
|
92
|
-
onCheckBoxChange,
|
93
|
-
}: TableRowProps) => (
|
94
|
-
<tr
|
95
|
-
data-level={level}
|
96
|
-
className="show"
|
97
|
-
onClick={(e) => onRowClick(e, node)}
|
98
|
-
>
|
99
|
-
{columnsData.map((col) => (
|
100
|
-
<TableCell
|
101
|
-
key={col.name}
|
102
|
-
col={col}
|
103
|
-
node={node}
|
104
|
-
level={level}
|
105
|
-
selected={selected}
|
106
|
-
select={select}
|
107
|
-
onCheckBoxChange={onCheckBoxChange}
|
108
|
-
onToggleExpand={onToggleExpand}
|
109
|
-
/>
|
110
|
-
))}
|
111
|
-
</tr>
|
112
|
-
)
|
113
|
-
);
|
114
|
-
|
115
|
-
// Component: TableHead
|
116
|
-
const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
|
117
|
-
const hasDefaultValues = useMemo(
|
118
|
-
() => columnsData.some(({ defaultValue }) => !!defaultValue),
|
119
|
-
[columnsData]
|
120
|
-
);
|
121
|
-
|
122
|
-
return (
|
123
|
-
<thead>
|
124
|
-
<tr>
|
125
|
-
{columnsData.map(({ name }) => (
|
126
|
-
<th key={name}>{name}</th>
|
127
|
-
))}
|
128
|
-
</tr>
|
129
|
-
{hasDefaultValues && (
|
130
|
-
<tr>
|
131
|
-
{columnsData.map(({ defaultValue, defaultActions }, index) => (
|
132
|
-
<td key={index}>
|
133
|
-
{defaultValue && (
|
134
|
-
<span className="">
|
135
|
-
{defaultValue}
|
136
|
-
{defaultActions && (
|
137
|
-
<div className="table-tree-row-action">
|
138
|
-
{defaultActions()}
|
139
|
-
</div>
|
140
|
-
)}
|
141
|
-
</span>
|
142
|
-
)}
|
143
|
-
</td>
|
144
|
-
))}
|
145
|
-
</tr>
|
146
|
-
)}
|
147
|
-
</thead>
|
148
|
-
);
|
149
|
-
});
|
150
|
-
|
151
|
-
// Component: TableBody
|
152
|
-
const TableBody = React.memo(
|
153
|
-
({
|
154
|
-
flattenedTreeData,
|
155
|
-
columnsData,
|
156
|
-
selected,
|
157
|
-
select,
|
158
|
-
onRowClick,
|
159
|
-
onToggleExpand,
|
160
|
-
onCheckBoxChange,
|
161
|
-
}: TableBodyProps) => (
|
162
|
-
<tbody>
|
163
|
-
{flattenedTreeData.map(({ node, level }) => {
|
164
|
-
return (
|
165
|
-
<TableRow
|
166
|
-
key={node.id}
|
167
|
-
node={node}
|
168
|
-
level={level}
|
169
|
-
columnsData={columnsData}
|
170
|
-
selected={selected}
|
171
|
-
select={select}
|
172
|
-
onRowClick={onRowClick}
|
173
|
-
onToggleExpand={onToggleExpand}
|
174
|
-
onCheckBoxChange={onCheckBoxChange}
|
175
|
-
/>
|
176
|
-
);
|
177
|
-
})}
|
178
|
-
</tbody>
|
179
|
-
)
|
180
|
-
);
|
181
|
-
|
182
|
-
// Component: TreeTable
|
183
10
|
const TreeTable: React.FC<TreeTableProps> = ({
|
184
11
|
treeData,
|
185
12
|
columnsData,
|
@@ -188,7 +15,26 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
188
15
|
onChange,
|
189
16
|
onClick,
|
190
17
|
onExpand,
|
18
|
+
loadMore = () => {},
|
191
19
|
}) => {
|
20
|
+
useIntersectionObserver(['ff-table-tree-last-node'], {
|
21
|
+
root: null,
|
22
|
+
rootMargin: '0px',
|
23
|
+
threshold: 0.1,
|
24
|
+
onIntersect: (entry) => {
|
25
|
+
if (entry.isIntersecting) {
|
26
|
+
if (functionCheck(loadMore)) {
|
27
|
+
let direction = 'up';
|
28
|
+
if (entry.target.id === 'ff-table-tree-last-node') {
|
29
|
+
direction = 'down';
|
30
|
+
}
|
31
|
+
loadMore(direction);
|
32
|
+
}
|
33
|
+
console.log('Element in view:', entry.target.id);
|
34
|
+
}
|
35
|
+
},
|
36
|
+
});
|
37
|
+
|
192
38
|
const handleToggleExpand = useCallback(
|
193
39
|
(node: any) => onExpand?.(true, node?.id),
|
194
40
|
[onExpand]
|
@@ -242,4 +88,4 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
242
88
|
);
|
243
89
|
};
|
244
90
|
|
245
|
-
export default TreeTable;
|
91
|
+
export default memo(TreeTable);
|
@@ -74,6 +74,51 @@ const data = [
|
|
74
74
|
},
|
75
75
|
level: 1,
|
76
76
|
},
|
77
|
+
{
|
78
|
+
node: {
|
79
|
+
subModuleCount: 10,
|
80
|
+
title: 'Home',
|
81
|
+
scriptCount: 0,
|
82
|
+
path: '/Root/Home',
|
83
|
+
expanded: true,
|
84
|
+
modifiedOn: '19-12-2023 15:43',
|
85
|
+
folder: true,
|
86
|
+
children: false,
|
87
|
+
parentId: 'MOD100', // Parent is '/Root'
|
88
|
+
id: 'MOD10030', // Unique ID
|
89
|
+
},
|
90
|
+
level: 1,
|
91
|
+
},
|
92
|
+
{
|
93
|
+
node: {
|
94
|
+
subModuleCount: 10,
|
95
|
+
title: 'Home',
|
96
|
+
scriptCount: 0,
|
97
|
+
path: '/Root/Home',
|
98
|
+
expanded: true,
|
99
|
+
modifiedOn: '19-12-2023 15:43',
|
100
|
+
folder: true,
|
101
|
+
children: false,
|
102
|
+
parentId: 'MOD1001', // Parent is '/Root'
|
103
|
+
id: 'MOD100301', // Unique ID
|
104
|
+
},
|
105
|
+
level: 1,
|
106
|
+
},
|
107
|
+
{
|
108
|
+
node: {
|
109
|
+
subModuleCount: 10,
|
110
|
+
title: 'Home',
|
111
|
+
scriptCount: 0,
|
112
|
+
path: '/Root/Home',
|
113
|
+
expanded: true,
|
114
|
+
modifiedOn: '19-12-2023 15:43',
|
115
|
+
folder: true,
|
116
|
+
children: false,
|
117
|
+
parentId: 'MOD1001', // Parent is '/Root'
|
118
|
+
id: 'MOD100302', // Unique ID
|
119
|
+
},
|
120
|
+
level: 1,
|
121
|
+
},
|
77
122
|
{
|
78
123
|
node: {
|
79
124
|
ver: 1,
|
@@ -49,11 +49,11 @@ export interface Column {
|
|
49
49
|
accessor: string;
|
50
50
|
width: string;
|
51
51
|
isClickable?: boolean;
|
52
|
-
cell?: (row: any) => JSX
|
53
|
-
actions?: (row: any) => JSX
|
52
|
+
cell?: (row: any) => JSX;
|
53
|
+
actions?: (row: any) => JSX;
|
54
54
|
isTree?: boolean;
|
55
55
|
defaultValue?: string;
|
56
|
-
defaultActions?: () => JSX
|
56
|
+
defaultActions?: () => JSX;
|
57
57
|
}
|
58
58
|
|
59
59
|
export interface TreeTableProps {
|
@@ -64,5 +64,5 @@ export interface TreeTableProps {
|
|
64
64
|
onChange?: (e: any, node: string[]) => void;
|
65
65
|
onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
|
66
66
|
onExpand?: (_isExpanded: boolean, node: string) => void;
|
67
|
-
|
67
|
+
loadMore?: (_direction?: string) => void;
|
68
68
|
}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
2
|
+
|
3
|
+
interface UseIntersectionObserverOptions {
|
4
|
+
root?: Element | null;
|
5
|
+
rootMargin?: string;
|
6
|
+
threshold?: number | number[];
|
7
|
+
onIntersect: (
|
8
|
+
entry: IntersectionObserverEntry,
|
9
|
+
observer: IntersectionObserver
|
10
|
+
) => void;
|
11
|
+
}
|
12
|
+
|
13
|
+
export function useIntersectionObserver(
|
14
|
+
elements: (Element | string)[] | null, // Accepts Element or id strings
|
15
|
+
options: UseIntersectionObserverOptions
|
16
|
+
): void {
|
17
|
+
const observerRef = useRef<IntersectionObserver | null>(null);
|
18
|
+
|
19
|
+
useEffect(() => {
|
20
|
+
if (!elements || elements.length === 0) return;
|
21
|
+
|
22
|
+
const {
|
23
|
+
root = null,
|
24
|
+
rootMargin = '0px',
|
25
|
+
threshold = 0,
|
26
|
+
onIntersect,
|
27
|
+
} = options;
|
28
|
+
|
29
|
+
// Resolve elements: convert ids to DOM elements
|
30
|
+
const resolvedElements = elements
|
31
|
+
.map((element) =>
|
32
|
+
typeof element === 'string' ? document.getElementById(element) : element
|
33
|
+
)
|
34
|
+
.filter((el): el is Element => el !== null); // Ensure valid elements
|
35
|
+
|
36
|
+
if (resolvedElements.length === 0) {
|
37
|
+
console.warn('No valid elements to observe.');
|
38
|
+
return;
|
39
|
+
}
|
40
|
+
|
41
|
+
observerRef.current = new IntersectionObserver(
|
42
|
+
(entries, observer) => {
|
43
|
+
entries.forEach((entry) => onIntersect(entry, observer));
|
44
|
+
},
|
45
|
+
{ root, rootMargin, threshold }
|
46
|
+
);
|
47
|
+
|
48
|
+
resolvedElements.forEach((element) =>
|
49
|
+
observerRef.current?.observe(element)
|
50
|
+
);
|
51
|
+
|
52
|
+
return () => {
|
53
|
+
observerRef.current?.disconnect();
|
54
|
+
};
|
55
|
+
}, [elements, options]);
|
56
|
+
}
|
package/src/index.ts
CHANGED
@@ -70,6 +70,7 @@ import DownloadClient from './components/DownloadClient/DownloadClient';
|
|
70
70
|
import FieldSet from './components/FieldSet';
|
71
71
|
import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
|
72
72
|
import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
|
73
|
+
import ProgressBar from './components/ProgressBar';
|
73
74
|
|
74
75
|
// Utils imports
|
75
76
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
@@ -96,7 +97,7 @@ import Comments from './components/Comment/Comments';
|
|
96
97
|
import useFileDropzone from './hooks/useFileDropzone';
|
97
98
|
import PopUpModal from './components/PopUpModal/PopUpModal';
|
98
99
|
import FormatString from './utils/FormatString/FormatString';
|
99
|
-
import
|
100
|
+
import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
|
100
101
|
import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
|
101
102
|
import PhoneInputField from './components/PhoneInput';
|
102
103
|
|
@@ -179,9 +180,10 @@ export {
|
|
179
180
|
Comments,
|
180
181
|
PopUpModal,
|
181
182
|
CreateVariableSlider,
|
182
|
-
|
183
|
+
ConditionalDropdown,
|
183
184
|
PhoneInputField,
|
184
185
|
TableWithAccordion,
|
186
|
+
ProgressBar,
|
185
187
|
// utils exports
|
186
188
|
checkEmpty,
|
187
189
|
getExtension,
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './AddVariables';
|