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.
Files changed (173) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. 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
- onPagination: (node) => {
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
- onPagination={(direction) => {
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, { useMemo, useCallback } from 'react';
1
+ import React, { useCallback, memo } from 'react';
2
2
  import './TableTree.scss';
3
- import { prepareData } from '../../utils/TableCell/TableCell';
4
- import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
5
- import Checkbox from '../Checkbox';
6
- import RadioButton from '../RadioButton';
7
- import {
8
- TableBodyProps,
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);
@@ -10,3 +10,5 @@ const getAllChildIds = (nodeId: string, data: any[]): string[] => {
10
10
 
11
11
  return result;
12
12
  };
13
+
14
+ export default getAllChildIds;
@@ -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
- onPagination?: (_direction: string) => void;
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 AddVariables from './components/AddVariables/AddVariables';
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
- AddVariables,
183
+ ConditionalDropdown,
183
184
  PhoneInputField,
184
-
185
185
  TableWithAccordion,
186
+ ProgressBar,
186
187
  // utils exports
187
188
  checkEmpty,
188
189
  getExtension,
@@ -0,0 +1,8 @@
1
+ import { checkEmpty } from '../checkEmpty/checkEmpty';
2
+
3
+ const functionCheck = (functionToCheck: any) =>
4
+ !checkEmpty(functionToCheck) &&
5
+ functionToCheck &&
6
+ {}.toString.call(functionToCheck) === '[object Function]';
7
+
8
+ export default functionCheck;
@@ -2,6 +2,7 @@ export interface OperatingSystemInfo {
2
2
  osName: string;
3
3
  osVersion: string;
4
4
  hostName: string;
5
+ iconName: string;
5
6
  }
6
7
 
7
8
  export interface RunLevelExecutionDataSet {
@@ -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
- }