df-ae-forms-package 1.0.73 → 1.0.75
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/dist/index.esm.js +80 -245
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +80 -245
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -176,21 +176,9 @@ class ConditionalLogicService {
|
|
|
176
176
|
if (found)
|
|
177
177
|
return found;
|
|
178
178
|
}
|
|
179
|
-
if (comp.name === 'table' && comp.cells
|
|
180
|
-
for (const
|
|
181
|
-
|
|
182
|
-
if (Array.isArray(rowOrCell)) {
|
|
183
|
-
for (const cell of rowOrCell) {
|
|
184
|
-
if (cell.components) {
|
|
185
|
-
const found = this.findComponent(cell.components, componentId);
|
|
186
|
-
if (found)
|
|
187
|
-
return found;
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
// Handle 1D array structure (flat: cells[i]) - robust fallback
|
|
192
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
193
|
-
const cell = rowOrCell;
|
|
179
|
+
if (comp.name === 'table' && comp.cells) {
|
|
180
|
+
for (const row of comp.cells) {
|
|
181
|
+
for (const cell of row) {
|
|
194
182
|
if (cell.components) {
|
|
195
183
|
const found = this.findComponent(cell.components, componentId);
|
|
196
184
|
if (found)
|
|
@@ -232,18 +220,9 @@ class ConditionalLogicService {
|
|
|
232
220
|
traverse(item.children);
|
|
233
221
|
if (item.templateComponents)
|
|
234
222
|
traverse(item.templateComponents);
|
|
235
|
-
if (item.cells
|
|
236
|
-
for (const
|
|
237
|
-
|
|
238
|
-
if (Array.isArray(rowOrCell)) {
|
|
239
|
-
for (const cell of rowOrCell) {
|
|
240
|
-
if (cell.components)
|
|
241
|
-
traverse(cell.components);
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
// Handle 1D array structure (flat)
|
|
245
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
246
|
-
const cell = rowOrCell;
|
|
223
|
+
if (item.cells) {
|
|
224
|
+
for (const row of item.cells) {
|
|
225
|
+
for (const cell of row) {
|
|
247
226
|
if (cell.components)
|
|
248
227
|
traverse(cell.components);
|
|
249
228
|
}
|
|
@@ -6018,35 +5997,17 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6018
5997
|
values[component.id] = '';
|
|
6019
5998
|
}
|
|
6020
5999
|
}
|
|
6021
|
-
// CRITICAL: Also store by label and _id so conditional logic can find values.
|
|
6022
|
-
// condition.when stores the component LABEL (set in ConditionalLogicComponent.tsx line 163).
|
|
6023
|
-
// getComponentValue() checks formValues[label] first, so we must populate it here
|
|
6024
|
-
// to ensure show/hide logic evaluates correctly on initial load (before any user interaction).
|
|
6025
|
-
if (component.basic?.label) {
|
|
6026
|
-
values[component.basic.label] = values[component.id];
|
|
6027
|
-
}
|
|
6028
|
-
if (component._id) {
|
|
6029
|
-
values[component._id] = values[component.id];
|
|
6030
|
-
}
|
|
6031
6000
|
}
|
|
6032
6001
|
// Handle nested components in table cells
|
|
6033
6002
|
if (component.cells && Array.isArray(component.cells)) {
|
|
6034
|
-
component.cells.forEach((
|
|
6035
|
-
|
|
6036
|
-
|
|
6037
|
-
rowOrCell.forEach((cell, _cellIndex) => {
|
|
6003
|
+
component.cells.forEach((row, _rowIndex) => {
|
|
6004
|
+
if (Array.isArray(row)) {
|
|
6005
|
+
row.forEach((cell, _cellIndex) => {
|
|
6038
6006
|
if (cell && cell.components && Array.isArray(cell.components)) {
|
|
6039
6007
|
initializeComponentValues(cell.components, values);
|
|
6040
6008
|
}
|
|
6041
6009
|
});
|
|
6042
6010
|
}
|
|
6043
|
-
// Handle 1D array (flat)
|
|
6044
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
6045
|
-
const cell = rowOrCell;
|
|
6046
|
-
if (cell && cell.components && Array.isArray(cell.components)) {
|
|
6047
|
-
initializeComponentValues(cell.components, values);
|
|
6048
|
-
}
|
|
6049
|
-
}
|
|
6050
6011
|
});
|
|
6051
6012
|
}
|
|
6052
6013
|
// Handle nested components in datagrid entries
|
|
@@ -6107,23 +6068,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6107
6068
|
// Recurse
|
|
6108
6069
|
if (comp.children)
|
|
6109
6070
|
extractNotesAndAttachments(comp.children);
|
|
6110
|
-
if (comp.cells
|
|
6111
|
-
comp.cells.forEach((
|
|
6112
|
-
|
|
6113
|
-
|
|
6114
|
-
|
|
6115
|
-
if (cell.components)
|
|
6116
|
-
extractNotesAndAttachments(cell.components);
|
|
6117
|
-
});
|
|
6118
|
-
}
|
|
6119
|
-
// Handle 1D array
|
|
6120
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
6121
|
-
const cell = rowOrCell;
|
|
6122
|
-
if (cell.components)
|
|
6123
|
-
extractNotesAndAttachments(cell.components);
|
|
6124
|
-
}
|
|
6125
|
-
});
|
|
6126
|
-
}
|
|
6071
|
+
if (comp.cells)
|
|
6072
|
+
comp.cells.forEach((row) => row.forEach((cell) => {
|
|
6073
|
+
if (cell.components)
|
|
6074
|
+
extractNotesAndAttachments(cell.components);
|
|
6075
|
+
}));
|
|
6127
6076
|
if (comp.entries)
|
|
6128
6077
|
comp.entries.forEach((entry) => {
|
|
6129
6078
|
if (entry.components)
|
|
@@ -6160,10 +6109,9 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6160
6109
|
validatedComponent.children = getValidatedComponents(validatedComponent.children);
|
|
6161
6110
|
}
|
|
6162
6111
|
if (validatedComponent.cells && Array.isArray(validatedComponent.cells)) {
|
|
6163
|
-
validatedComponent.cells = validatedComponent.cells.map((
|
|
6164
|
-
|
|
6165
|
-
|
|
6166
|
-
return rowOrCell.map((cell) => {
|
|
6112
|
+
validatedComponent.cells = validatedComponent.cells.map((row) => {
|
|
6113
|
+
if (Array.isArray(row)) {
|
|
6114
|
+
return row.map((cell) => {
|
|
6167
6115
|
if (cell && cell.components && Array.isArray(cell.components)) {
|
|
6168
6116
|
return {
|
|
6169
6117
|
...cell,
|
|
@@ -6173,18 +6121,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6173
6121
|
return cell;
|
|
6174
6122
|
});
|
|
6175
6123
|
}
|
|
6176
|
-
|
|
6177
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
6178
|
-
const cell = rowOrCell;
|
|
6179
|
-
if (cell && cell.components && Array.isArray(cell.components)) {
|
|
6180
|
-
return {
|
|
6181
|
-
...cell,
|
|
6182
|
-
components: getValidatedComponents(cell.components)
|
|
6183
|
-
};
|
|
6184
|
-
}
|
|
6185
|
-
return cell;
|
|
6186
|
-
}
|
|
6187
|
-
return rowOrCell;
|
|
6124
|
+
return row;
|
|
6188
6125
|
});
|
|
6189
6126
|
}
|
|
6190
6127
|
if (validatedComponent.entries && Array.isArray(validatedComponent.entries)) {
|
|
@@ -6232,10 +6169,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6232
6169
|
// Initialize notes and attachments state
|
|
6233
6170
|
setComponentNotes(prev => ({ ...initialNotes, ...prev }));
|
|
6234
6171
|
setComponentAttachments(prev => ({ ...initialAttachments, ...prev }));
|
|
6235
|
-
// Evaluate initial conditional logic
|
|
6236
|
-
|
|
6237
|
-
// in the closure is still the old state at this point.
|
|
6238
|
-
evaluateConditionalLogic(initialValues, validatedFormComponents);
|
|
6172
|
+
// Evaluate initial conditional logic
|
|
6173
|
+
evaluateConditionalLogic();
|
|
6239
6174
|
}, [initialFormData, formComponents]);
|
|
6240
6175
|
// Synchronize component visibility whenever form values or components change
|
|
6241
6176
|
useEffect(() => {
|
|
@@ -6245,8 +6180,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6245
6180
|
const evaluateComponentConditionalLogic = (components, visibility, currentFormValues, fullSchema) => {
|
|
6246
6181
|
components.forEach(component => {
|
|
6247
6182
|
if (component.id) {
|
|
6248
|
-
//
|
|
6249
|
-
if (component.
|
|
6183
|
+
// Skip conditional logic for table and datagrid components - they are always visible
|
|
6184
|
+
if (component.name === 'table' || component.name === 'datagrid') {
|
|
6185
|
+
visibility[component.id] = true;
|
|
6186
|
+
}
|
|
6187
|
+
else if (component.conditional) {
|
|
6250
6188
|
// Use the proper conditional logic service
|
|
6251
6189
|
const result = conditionalLogicService.evaluateConditionalLogic(component.conditional, fullSchema, currentFormValues);
|
|
6252
6190
|
visibility[component.id] = result.shouldShow;
|
|
@@ -6263,32 +6201,15 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6263
6201
|
if (component.basic?.label)
|
|
6264
6202
|
visibility[component.basic.label] = true;
|
|
6265
6203
|
}
|
|
6266
|
-
// Process nested components in table and datagrid regardless of parent visibility
|
|
6267
|
-
if (component.name === 'table' || component.name === 'datagrid') {
|
|
6268
|
-
// Still add the parent to visibility map (as visible if no conditional logic)
|
|
6269
|
-
if (!component.conditional) {
|
|
6270
|
-
visibility[component.id] = true;
|
|
6271
|
-
}
|
|
6272
|
-
}
|
|
6273
6204
|
}
|
|
6274
6205
|
// Handle nested components in table cells
|
|
6275
6206
|
if (component.cells && Array.isArray(component.cells)) {
|
|
6276
|
-
component.cells.forEach((
|
|
6277
|
-
|
|
6278
|
-
if (Array.isArray(rowOrCell)) {
|
|
6279
|
-
rowOrCell.forEach((cell) => {
|
|
6280
|
-
if (cell.components && Array.isArray(cell.components)) {
|
|
6281
|
-
evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
|
|
6282
|
-
}
|
|
6283
|
-
});
|
|
6284
|
-
}
|
|
6285
|
-
// Handle 1D array (flat)
|
|
6286
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
6287
|
-
const cell = rowOrCell;
|
|
6207
|
+
component.cells.forEach((row) => {
|
|
6208
|
+
row.forEach((cell) => {
|
|
6288
6209
|
if (cell.components && Array.isArray(cell.components)) {
|
|
6289
6210
|
evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
|
|
6290
6211
|
}
|
|
6291
|
-
}
|
|
6212
|
+
});
|
|
6292
6213
|
});
|
|
6293
6214
|
}
|
|
6294
6215
|
// Handle nested components in datagrid entries
|
|
@@ -6323,25 +6244,19 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6323
6244
|
}, [formComponents, formValues]);
|
|
6324
6245
|
// Check if a component should be visible based on conditional logic
|
|
6325
6246
|
const shouldShowComponent = useCallback((componentId) => {
|
|
6326
|
-
//
|
|
6327
|
-
|
|
6328
|
-
return componentVisibility[componentId] === true;
|
|
6329
|
-
}
|
|
6330
|
-
// If not found by exact ID, try to find the component in formComponents
|
|
6331
|
-
// and check if it exists in visibility map by other identifiers (_id, label)
|
|
6247
|
+
// Recursive find to get the component to check its type and alternate ID
|
|
6248
|
+
// We need this because formComponents might only be top-level
|
|
6332
6249
|
const component = conditionalLogicService.findComponent(formComponents, componentId);
|
|
6333
|
-
|
|
6334
|
-
|
|
6335
|
-
|
|
6336
|
-
return componentVisibility[component._id] === true;
|
|
6337
|
-
}
|
|
6338
|
-
// Check visibility by label if available
|
|
6339
|
-
if (component.basic?.label && componentVisibility.hasOwnProperty(component.basic.label)) {
|
|
6340
|
-
return componentVisibility[component.basic.label] === true;
|
|
6341
|
-
}
|
|
6250
|
+
// Table and datagrid components are always visible at the root level (their contents handle logic)
|
|
6251
|
+
if (component && (component.name === 'table' || component.name === 'datagrid')) {
|
|
6252
|
+
return true;
|
|
6342
6253
|
}
|
|
6343
|
-
//
|
|
6344
|
-
|
|
6254
|
+
// Default to visible if not explicitly hidden
|
|
6255
|
+
// Check both id and _id for maximum resilience
|
|
6256
|
+
const isVisible = (componentVisibility[componentId] !== false) &&
|
|
6257
|
+
(!component?._id || componentVisibility[component._id] !== false) &&
|
|
6258
|
+
(!component?.id || componentVisibility[component.id] !== false);
|
|
6259
|
+
return isVisible;
|
|
6345
6260
|
}, [componentVisibility, formComponents]);
|
|
6346
6261
|
// Handle form value changes and re-evaluate conditional logic
|
|
6347
6262
|
const onFormValueChange = useCallback((change) => {
|
|
@@ -6418,28 +6333,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6418
6333
|
if (component.name === 'table' && component.cells) {
|
|
6419
6334
|
return {
|
|
6420
6335
|
...component,
|
|
6421
|
-
cells: component.cells.map((
|
|
6422
|
-
|
|
6423
|
-
if (
|
|
6424
|
-
|
|
6425
|
-
const updatedCell = { ...cell };
|
|
6426
|
-
if (updatedCell.components) {
|
|
6427
|
-
updatedCell.components = updateComponentValue(updatedCell.components);
|
|
6428
|
-
}
|
|
6429
|
-
return updatedCell;
|
|
6430
|
-
});
|
|
6336
|
+
cells: component.cells.map((row) => row.map((cell) => {
|
|
6337
|
+
const updatedCell = { ...cell };
|
|
6338
|
+
if (updatedCell.components) {
|
|
6339
|
+
updatedCell.components = updateComponentValue(updatedCell.components);
|
|
6431
6340
|
}
|
|
6432
|
-
|
|
6433
|
-
|
|
6434
|
-
const cell = rowOrCell;
|
|
6435
|
-
const updatedCell = { ...cell };
|
|
6436
|
-
if (updatedCell.components) {
|
|
6437
|
-
updatedCell.components = updateComponentValue(updatedCell.components);
|
|
6438
|
-
}
|
|
6439
|
-
return updatedCell;
|
|
6440
|
-
}
|
|
6441
|
-
return rowOrCell;
|
|
6442
|
-
})
|
|
6341
|
+
return updatedCell;
|
|
6342
|
+
}))
|
|
6443
6343
|
};
|
|
6444
6344
|
}
|
|
6445
6345
|
if (component.name === 'datagrid' && component.entries) {
|
|
@@ -6493,6 +6393,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6493
6393
|
validateField(change.id);
|
|
6494
6394
|
}, 150);
|
|
6495
6395
|
}
|
|
6396
|
+
// Re-evaluate immediately to ensure responsive UI
|
|
6397
|
+
evaluateConditionalLogic(newFormValues, updatedComponents);
|
|
6496
6398
|
}, [formComponents, formValues, validationErrors, onFormDataChange, evaluateConditionalLogic]);
|
|
6497
6399
|
// Recursive function to find a component by ID in nested structures
|
|
6498
6400
|
const findComponentById = useCallback((components, fieldId) => {
|
|
@@ -7666,18 +7568,8 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7666
7568
|
};
|
|
7667
7569
|
const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
|
|
7668
7570
|
const [isCollapsed, setIsCollapsed] = useState(false); // Always start expanded to show drop zones
|
|
7669
|
-
// Check if table has any components in any cells
|
|
7670
|
-
const hasAnyComponents = properties.cells?.some((
|
|
7671
|
-
// Handle 2D array structure (each row is an array of cells)
|
|
7672
|
-
if (Array.isArray(rowOrCell)) {
|
|
7673
|
-
return rowOrCell.some((cell) => cell.components && cell.components.length > 0);
|
|
7674
|
-
}
|
|
7675
|
-
// Handle 1D array structure (each element is a cell)
|
|
7676
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
7677
|
-
return rowOrCell.components && rowOrCell.components.length > 0;
|
|
7678
|
-
}
|
|
7679
|
-
return false;
|
|
7680
|
-
}) || false;
|
|
7571
|
+
// Check if table has any components in any cells
|
|
7572
|
+
const hasAnyComponents = properties.cells?.some(row => row.some(cell => cell.components && cell.components.length > 0)) || false;
|
|
7681
7573
|
// Initialize and update table cells when rows/columns change
|
|
7682
7574
|
// CRITICAL: Skip cell initialization updates to prevent flickering when user types
|
|
7683
7575
|
useEffect(() => {
|
|
@@ -7699,34 +7591,17 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7699
7591
|
};
|
|
7700
7592
|
const handleComponentDelete = useCallback((component, event) => {
|
|
7701
7593
|
event.stopPropagation();
|
|
7702
|
-
// Find and remove the component from the table cell
|
|
7703
|
-
const updatedCells = properties.cells.map((
|
|
7704
|
-
|
|
7705
|
-
|
|
7706
|
-
return
|
|
7707
|
-
|
|
7708
|
-
|
|
7709
|
-
|
|
7710
|
-
...cell,
|
|
7711
|
-
components: filteredComponents
|
|
7712
|
-
};
|
|
7713
|
-
}
|
|
7714
|
-
return cell;
|
|
7715
|
-
});
|
|
7716
|
-
}
|
|
7717
|
-
// Handle 1D array structure (each element is a cell)
|
|
7718
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
7719
|
-
if (rowOrCell.components && rowOrCell.components.some((comp) => comp.id === component.id)) {
|
|
7720
|
-
const filteredComponents = rowOrCell.components.filter((comp) => comp.id !== component.id);
|
|
7721
|
-
return {
|
|
7722
|
-
...rowOrCell,
|
|
7723
|
-
components: filteredComponents
|
|
7724
|
-
};
|
|
7725
|
-
}
|
|
7726
|
-
return rowOrCell;
|
|
7594
|
+
// Find and remove the component from the table cell
|
|
7595
|
+
const updatedCells = properties.cells.map(row => row.map(cell => {
|
|
7596
|
+
if (cell.components && cell.components.some(comp => comp.id === component.id)) {
|
|
7597
|
+
const filteredComponents = cell.components.filter(comp => comp.id !== component.id);
|
|
7598
|
+
return {
|
|
7599
|
+
...cell,
|
|
7600
|
+
components: filteredComponents
|
|
7601
|
+
};
|
|
7727
7602
|
}
|
|
7728
|
-
return
|
|
7729
|
-
});
|
|
7603
|
+
return cell;
|
|
7604
|
+
}));
|
|
7730
7605
|
// Update the table with the modified cells
|
|
7731
7606
|
if (onValueChange) {
|
|
7732
7607
|
onValueChange({
|
|
@@ -7742,56 +7617,26 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7742
7617
|
const cellsWithIds = useMemo(() => {
|
|
7743
7618
|
if (!properties.cells)
|
|
7744
7619
|
return [];
|
|
7745
|
-
return properties.cells.map((
|
|
7746
|
-
|
|
7747
|
-
|
|
7748
|
-
|
|
7749
|
-
|
|
7750
|
-
|
|
7751
|
-
|
|
7752
|
-
|
|
7753
|
-
|
|
7754
|
-
|
|
7755
|
-
|
|
7756
|
-
|
|
7757
|
-
|
|
7758
|
-
|
|
7759
|
-
|
|
7760
|
-
|
|
7761
|
-
|
|
7762
|
-
|
|
7763
|
-
|
|
7764
|
-
|
|
7765
|
-
})
|
|
7766
|
-
: []
|
|
7767
|
-
}));
|
|
7768
|
-
}
|
|
7769
|
-
// Handle 1D array structure (each element is a cell)
|
|
7770
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
7771
|
-
const cell = rowOrCell;
|
|
7772
|
-
return {
|
|
7773
|
-
...cell,
|
|
7774
|
-
components: (cell.components && Array.isArray(cell.components))
|
|
7775
|
-
? cell.components.map((comp, compIndex) => {
|
|
7776
|
-
// CRITICAL: Only generate ID if it's missing - never regenerate existing IDs
|
|
7777
|
-
// This prevents component remounting and losing input state
|
|
7778
|
-
if (comp.id && typeof comp.id === 'string' && comp.id.trim() !== '') {
|
|
7779
|
-
// ID already exists - keep it as is
|
|
7780
|
-
return comp;
|
|
7781
|
-
}
|
|
7782
|
-
// Generate unique ID that includes table ID, row, cell, and component index
|
|
7783
|
-
// This ensures no conflicts with other components
|
|
7784
|
-
const uniqueId = `${comp.name || 'component'}-table-${id}-row-${rowIndex}-cell-0-comp-${compIndex}`;
|
|
7785
|
-
return {
|
|
7786
|
-
...comp,
|
|
7787
|
-
id: uniqueId
|
|
7788
|
-
};
|
|
7789
|
-
})
|
|
7790
|
-
: []
|
|
7791
|
-
};
|
|
7792
|
-
}
|
|
7793
|
-
return [];
|
|
7794
|
-
});
|
|
7620
|
+
return properties.cells.map((row, rowIndex) => row.map((cell, cellIndex) => ({
|
|
7621
|
+
...cell,
|
|
7622
|
+
components: (cell.components && Array.isArray(cell.components))
|
|
7623
|
+
? cell.components.map((comp, compIndex) => {
|
|
7624
|
+
// CRITICAL: Only generate ID if it's missing - never regenerate existing IDs
|
|
7625
|
+
// This prevents component remounting and losing input state
|
|
7626
|
+
if (comp.id && typeof comp.id === 'string' && comp.id.trim() !== '') {
|
|
7627
|
+
// ID already exists - keep it as is
|
|
7628
|
+
return comp;
|
|
7629
|
+
}
|
|
7630
|
+
// Generate unique ID that includes table ID, row, cell, and component index
|
|
7631
|
+
// This ensures no conflicts with other components
|
|
7632
|
+
const uniqueId = `${comp.name || 'component'}-table-${id}-row-${rowIndex}-cell-${cellIndex}-comp-${compIndex}`;
|
|
7633
|
+
return {
|
|
7634
|
+
...comp,
|
|
7635
|
+
id: uniqueId
|
|
7636
|
+
};
|
|
7637
|
+
})
|
|
7638
|
+
: []
|
|
7639
|
+
})));
|
|
7795
7640
|
}, [properties.cells, id]); // Only recalculate if cells or table ID changes
|
|
7796
7641
|
// CRITICAL FIX: Update the parent component with the cells that have proper IDs
|
|
7797
7642
|
// Skip this in package to prevent flickering - cells are managed by parent
|
|
@@ -7920,17 +7765,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7920
7765
|
fontSize: '14px',
|
|
7921
7766
|
textAlign: 'center'
|
|
7922
7767
|
}, children: columnName }, `header-${colIndex}`));
|
|
7923
|
-
}) }) })), jsx("tbody", { children: cellsWithIds.map((
|
|
7924
|
-
// Handle 2D array structure (each row is an array of cells)
|
|
7925
|
-
if (Array.isArray(rowOrCell)) {
|
|
7926
|
-
return (jsx("tr", { className: "table-row", children: rowOrCell.map((cell) => (jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, cell.id))) }, rowIndex));
|
|
7927
|
-
}
|
|
7928
|
-
// Handle 1D array structure (each element is a cell)
|
|
7929
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
7930
|
-
return (jsx("tr", { className: "table-row", children: jsx(TableCellComponent, { cell: rowOrCell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, rowOrCell.id) }, rowIndex));
|
|
7931
|
-
}
|
|
7932
|
-
return null;
|
|
7933
|
-
}) })] })] }))] }));
|
|
7768
|
+
}) }) })), jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.map((cell) => (jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, cell.id))) }, rowIndex))) })] })] }))] }));
|
|
7934
7769
|
};
|
|
7935
7770
|
|
|
7936
7771
|
var dfFormTable = /*#__PURE__*/Object.freeze({
|