pixel-react 1.6.8 → 1.7.0
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/CreateVariable/types.d.ts +2 -2
- 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/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- 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/Modal/types.d.ts +1 -1
- 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/PopUpModal/types.d.ts +2 -1
- 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 +183 -65
- package/lib/index.esm.js +1281 -674
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1282 -674
- 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/add_file.svg +4 -4
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/authorization.svg +4 -4
- package/src/assets/icons/depends_on_script.svg +7 -7
- package/src/assets/icons/email_group.svg +3 -3
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/import_icon.svg +4 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/labels.svg +8 -8
- package/src/assets/icons/parameters.svg +3 -3
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/pre_post_condition.svg +8 -8
- package/src/assets/icons/program_element.svg +8 -8
- package/src/assets/icons/test_data.svg +5 -5
- package/src/assets/icons/test_data_set.svg +7 -7
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/icons/variable_set.svg +5 -5
- 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/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/ConditionalDropdown/types.ts +160 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
- package/src/components/CreateVariable/types.ts +2 -2
- 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 +12 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
- 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/Modal/types.ts +1 -1
- 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/PopUpModal/PopUpModal.stories.tsx +15 -10
- package/src/components/PopUpModal/PopUpModal.tsx +5 -4
- package/src/components/PopUpModal/types.ts +2 -1
- 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 -3
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
- package/src/components/AddVariables/AddVariables.tsx +0 -113
- package/src/components/AddVariables/index.ts +0 -1
- package/src/components/AddVariables/types.ts +0 -36
@@ -106,10 +106,9 @@ const colData = [
|
|
106
106
|
|
107
107
|
export const Default: Story = {
|
108
108
|
args: {
|
109
|
-
|
109
|
+
loadMore: (node) => {
|
110
110
|
console.log(node);
|
111
111
|
},
|
112
|
-
expandedNodes: ['MOD1102'],
|
113
112
|
onExpand: (isExpand, node) => {
|
114
113
|
console.log(isExpand, node);
|
115
114
|
},
|
@@ -131,12 +130,11 @@ export const ControlledCheckBox: Story = {
|
|
131
130
|
const [selected, setSelected] = useState<string[]>([]);
|
132
131
|
return (
|
133
132
|
<TableTree
|
134
|
-
expandedNodes={['MOD1102']}
|
135
133
|
onExpand={(isExpand, node) => {
|
136
134
|
console.log(isExpand, node);
|
137
135
|
}}
|
138
136
|
select="checkbox"
|
139
|
-
onChange={(nodes: string[]) => {
|
137
|
+
onChange={(e, nodes: string[]) => {
|
140
138
|
setSelected(nodes);
|
141
139
|
}}
|
142
140
|
selected={selected}
|
@@ -145,8 +143,8 @@ export const ControlledCheckBox: Story = {
|
|
145
143
|
onClick={(e, data) => {
|
146
144
|
console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
|
147
145
|
}}
|
148
|
-
|
149
|
-
console.log(direction,'-------------------');
|
146
|
+
loadMore={(direction) => {
|
147
|
+
console.log(direction, '-------------------');
|
150
148
|
}}
|
151
149
|
/>
|
152
150
|
);
|
@@ -157,7 +155,6 @@ export const ControlledRadio: Story = {
|
|
157
155
|
const [selected, setSelected] = useState<string[]>([]);
|
158
156
|
return (
|
159
157
|
<TableTree
|
160
|
-
expandedNodes={['MOD1102']}
|
161
158
|
onExpand={(isExpand, node) => {
|
162
159
|
console.log(isExpand, node);
|
163
160
|
}}
|
@@ -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,10 +180,10 @@ export {
|
|
179
180
|
Comments,
|
180
181
|
PopUpModal,
|
181
182
|
CreateVariableSlider,
|
182
|
-
|
183
|
+
ConditionalDropdown,
|
183
184
|
PhoneInputField,
|
184
|
-
|
185
185
|
TableWithAccordion,
|
186
|
+
ProgressBar,
|
186
187
|
// utils exports
|
187
188
|
checkEmpty,
|
188
189
|
getExtension,
|
@@ -1,44 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react';
|
2
|
-
import { Meta, StoryFn } from '@storybook/react';
|
3
|
-
import AddVariables from './AddVariables';
|
4
|
-
import { AddVariableProps } from './types';
|
5
|
-
import { variableList } from '../Editor/constants';
|
6
|
-
|
7
|
-
export default {
|
8
|
-
title: 'Components/AddVariables',
|
9
|
-
component: AddVariables,
|
10
|
-
args: {
|
11
|
-
label: 'Add Variables',
|
12
|
-
placeholder: 'Enter text',
|
13
|
-
variableList,
|
14
|
-
dropdownWidth: '138px',
|
15
|
-
},
|
16
|
-
parameters: {
|
17
|
-
layout: 'centered',
|
18
|
-
},
|
19
|
-
} as Meta<AddVariableProps>;
|
20
|
-
|
21
|
-
// Wrapper component to handle state inside Storybook stories
|
22
|
-
const Template: StoryFn<AddVariableProps> = (args) => {
|
23
|
-
const [inputValue, setInputValue] = useState<string>('');
|
24
|
-
|
25
|
-
return (
|
26
|
-
<AddVariables
|
27
|
-
{...args}
|
28
|
-
onChange={(value: string) => setInputValue(value)}
|
29
|
-
value={inputValue}
|
30
|
-
/>
|
31
|
-
);
|
32
|
-
};
|
33
|
-
|
34
|
-
export const Default = Template.bind({});
|
35
|
-
Default.args = {
|
36
|
-
onCreateVariableClick: () => alert('Create Variable clicked'),
|
37
|
-
};
|
38
|
-
|
39
|
-
// Customized story with pre-filled input value
|
40
|
-
export const WithInitialValue = Template.bind({});
|
41
|
-
WithInitialValue.args = {
|
42
|
-
inputValue: 'Initial Text with $',
|
43
|
-
onCreateVariableClick: () => alert('Create Variable clicked'),
|
44
|
-
};
|
@@ -1,113 +0,0 @@
|
|
1
|
-
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
2
|
-
import VariableDropdown from '../Editor/VariableDropdown';
|
3
|
-
import Icon from '../Icon';
|
4
|
-
import Input from '../Input';
|
5
|
-
import { AddVariableProps, dynamicObject } from './types';
|
6
|
-
import './AddVariables.scss';
|
7
|
-
import React, { useState, useRef, useEffect } from 'react';
|
8
|
-
|
9
|
-
const AddVariables: React.FC<AddVariableProps> = ({
|
10
|
-
label = '',
|
11
|
-
variableList = [],
|
12
|
-
placeholder = 'Enter text',
|
13
|
-
onChange,
|
14
|
-
onCreateVariableClick,
|
15
|
-
value = '',
|
16
|
-
dropdownWidth = 'inherit',
|
17
|
-
}) => {
|
18
|
-
const [showDropdown, setShowDropdown] = useState<boolean>(false);
|
19
|
-
const [cursorPosition, setCursorPosition] = useState<number | null>(null);
|
20
|
-
const [showCreateVariableIcon, setShowCreateVariableIcon] =
|
21
|
-
useState<boolean>(false);
|
22
|
-
const inputRef = useRef<HTMLInputElement>(null);
|
23
|
-
|
24
|
-
useEffect(() => {
|
25
|
-
if (cursorPosition !== null && inputRef.current) {
|
26
|
-
inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
|
27
|
-
inputRef.current.focus();
|
28
|
-
}
|
29
|
-
}, [cursorPosition]);
|
30
|
-
|
31
|
-
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
32
|
-
const value = event.target.value;
|
33
|
-
onChange?.(value);
|
34
|
-
|
35
|
-
// Show dropdown only if the last character typed is `$`
|
36
|
-
const cursorPos = inputRef.current?.selectionStart || 0;
|
37
|
-
const isDollarTyped = value[cursorPos - 1] === '$';
|
38
|
-
|
39
|
-
if (isDollarTyped) {
|
40
|
-
setShowDropdown(true);
|
41
|
-
} else {
|
42
|
-
setShowDropdown(false); // Close if it's a space or other characters
|
43
|
-
}
|
44
|
-
if (value?.includes('$')) {
|
45
|
-
setShowCreateVariableIcon(false);
|
46
|
-
} else {
|
47
|
-
setShowCreateVariableIcon(true);
|
48
|
-
}
|
49
|
-
};
|
50
|
-
|
51
|
-
const handleDropdownClick = (item: dynamicObject) => {
|
52
|
-
if (inputRef.current) {
|
53
|
-
const { selectionStart, selectionEnd } = inputRef.current;
|
54
|
-
const dollarSyntax = `{${
|
55
|
-
item.type === 'LOCAL'
|
56
|
-
? 'LV'
|
57
|
-
: item.type === 'GLOBAL'
|
58
|
-
? 'GV'
|
59
|
-
: item.type === 'GROUP'
|
60
|
-
? 'SG'
|
61
|
-
: 'PEV'
|
62
|
-
}_${item.name}}`;
|
63
|
-
|
64
|
-
const newValue =
|
65
|
-
value.slice(0, selectionStart || 0) +
|
66
|
-
dollarSyntax +
|
67
|
-
value.slice(selectionEnd || 0);
|
68
|
-
|
69
|
-
onChange(newValue);
|
70
|
-
setCursorPosition((selectionStart || 0) + dollarSyntax.length);
|
71
|
-
|
72
|
-
// Close the dropdown after inserting the variable
|
73
|
-
setShowDropdown(false);
|
74
|
-
onChange?.(newValue);
|
75
|
-
}
|
76
|
-
};
|
77
|
-
|
78
|
-
return (
|
79
|
-
<div className="ff-add-variable-container">
|
80
|
-
<div className="ff-add-variable-input">
|
81
|
-
<Input
|
82
|
-
name="add_variable"
|
83
|
-
ref={inputRef}
|
84
|
-
type="text"
|
85
|
-
value={value}
|
86
|
-
onChange={handleChange}
|
87
|
-
variant="primary"
|
88
|
-
label={label}
|
89
|
-
placeholder={placeholder}
|
90
|
-
/>
|
91
|
-
{!checkEmpty(value) && showCreateVariableIcon && (
|
92
|
-
<Icon
|
93
|
-
onClick={onCreateVariableClick}
|
94
|
-
name="add_variable"
|
95
|
-
width={24}
|
96
|
-
height={24}
|
97
|
-
hoverEffect
|
98
|
-
/>
|
99
|
-
)}
|
100
|
-
</div>
|
101
|
-
{showDropdown && (
|
102
|
-
<VariableDropdown
|
103
|
-
position="relative"
|
104
|
-
width={dropdownWidth}
|
105
|
-
optionsList={variableList}
|
106
|
-
onSelectVariable={handleDropdownClick}
|
107
|
-
/>
|
108
|
-
)}
|
109
|
-
</div>
|
110
|
-
);
|
111
|
-
};
|
112
|
-
|
113
|
-
export default AddVariables;
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './AddVariables';
|
@@ -1,36 +0,0 @@
|
|
1
|
-
export type dynamicObject = {
|
2
|
-
[key: string]: any;
|
3
|
-
};
|
4
|
-
|
5
|
-
export interface AddVariableProps {
|
6
|
-
/**
|
7
|
-
* Label for the field
|
8
|
-
*/
|
9
|
-
label?: string;
|
10
|
-
/**
|
11
|
-
* List of variables
|
12
|
-
*/
|
13
|
-
variableList?: dynamicObject[];
|
14
|
-
/**
|
15
|
-
* Place holder for the input field
|
16
|
-
*/
|
17
|
-
placeholder?: string;
|
18
|
-
/**
|
19
|
-
* Function to handle input change
|
20
|
-
* @param value
|
21
|
-
* @returns
|
22
|
-
*/
|
23
|
-
onChange: (value: string) => void;
|
24
|
-
/**
|
25
|
-
* Function to handle create variable icon click
|
26
|
-
*/
|
27
|
-
onCreateVariableClick?: () => void;
|
28
|
-
/**
|
29
|
-
* Value of the input field
|
30
|
-
*/
|
31
|
-
value: string;
|
32
|
-
/**
|
33
|
-
* Width of the dropdown
|
34
|
-
*/
|
35
|
-
dropdownWidth?: string;
|
36
|
-
}
|