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