df-ae-forms-package 1.0.77 → 1.0.79
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 +100 -44
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +100 -44
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -5144,7 +5144,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
|
|
|
5144
5144
|
whiteSpace: 'nowrap',
|
|
5145
5145
|
overflow: 'hidden',
|
|
5146
5146
|
textOverflow: 'ellipsis'
|
|
5147
|
-
}, children: component.basic?.label || `Column ${index + 1}` }, `header-${component.id}`))) })), dataEntries.length > 0 ? (dataEntries.map((entry, entryIndex) => (jsxs("div", { className: "table-row", style: {
|
|
5147
|
+
}, children: component.basic?.label || `Column ${index + 1}` }, `header-${component.id || index}`))) })), dataEntries.length > 0 ? (dataEntries.map((entry, entryIndex) => (jsxs("div", { className: "table-row", style: {
|
|
5148
5148
|
// Use flex column for column view, grid for row view
|
|
5149
5149
|
display: columnView ? 'flex' : 'grid',
|
|
5150
5150
|
flexDirection: columnView ? 'column' : 'row',
|
|
@@ -6990,13 +6990,25 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6990
6990
|
updatedComponent.children = updateComponentValues(updatedComponent.children);
|
|
6991
6991
|
}
|
|
6992
6992
|
if (updatedComponent.name === 'table' && updatedComponent.cells) {
|
|
6993
|
-
updatedComponent.cells = updatedComponent.cells.map((
|
|
6994
|
-
|
|
6995
|
-
|
|
6996
|
-
|
|
6993
|
+
updatedComponent.cells = updatedComponent.cells.map((rowOrCell) => {
|
|
6994
|
+
if (Array.isArray(rowOrCell)) {
|
|
6995
|
+
return rowOrCell.map((cell) => {
|
|
6996
|
+
const updatedCell = { ...cell };
|
|
6997
|
+
if (updatedCell.components) {
|
|
6998
|
+
updatedCell.components = updateComponentValues(updatedCell.components);
|
|
6999
|
+
}
|
|
7000
|
+
return updatedCell;
|
|
7001
|
+
});
|
|
6997
7002
|
}
|
|
6998
|
-
|
|
6999
|
-
|
|
7003
|
+
else {
|
|
7004
|
+
// 1D flat cell
|
|
7005
|
+
const updatedCell = { ...rowOrCell };
|
|
7006
|
+
if (updatedCell.components) {
|
|
7007
|
+
updatedCell.components = updateComponentValues(updatedCell.components);
|
|
7008
|
+
}
|
|
7009
|
+
return updatedCell;
|
|
7010
|
+
}
|
|
7011
|
+
});
|
|
7000
7012
|
}
|
|
7001
7013
|
if (updatedComponent.name === 'datagrid' && updatedComponent.entries) {
|
|
7002
7014
|
updatedComponent.entries = updatedComponent.entries.map((entry) => {
|
|
@@ -7177,24 +7189,35 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
7177
7189
|
// Handle notes change for table cell components
|
|
7178
7190
|
const updatedComponents = formComponents.map(comp => {
|
|
7179
7191
|
if (comp.id === component.id && comp.cells) {
|
|
7180
|
-
const updatedCells = comp.cells.map((
|
|
7181
|
-
if (
|
|
7182
|
-
|
|
7183
|
-
if (
|
|
7184
|
-
|
|
7185
|
-
|
|
7186
|
-
|
|
7187
|
-
...cellComp.basic,
|
|
7188
|
-
notes
|
|
7192
|
+
const updatedCells = comp.cells.map((rowOrCell) => {
|
|
7193
|
+
if (Array.isArray(rowOrCell)) {
|
|
7194
|
+
return rowOrCell.map((cell) => {
|
|
7195
|
+
if (cell.components) {
|
|
7196
|
+
const updatedCellComponents = cell.components.map((cellComp) => {
|
|
7197
|
+
if (cellComp.id === componentId) {
|
|
7198
|
+
return { ...cellComp, basic: { ...cellComp.basic, notes } };
|
|
7189
7199
|
}
|
|
7190
|
-
|
|
7200
|
+
return cellComp;
|
|
7201
|
+
});
|
|
7202
|
+
return { ...cell, components: updatedCellComponents };
|
|
7191
7203
|
}
|
|
7192
|
-
return
|
|
7204
|
+
return cell;
|
|
7193
7205
|
});
|
|
7194
|
-
return { ...cell, components: updatedCellComponents };
|
|
7195
7206
|
}
|
|
7196
|
-
|
|
7197
|
-
|
|
7207
|
+
else {
|
|
7208
|
+
const cell = rowOrCell;
|
|
7209
|
+
if (cell.components) {
|
|
7210
|
+
const updatedCellComponents = cell.components.map((cellComp) => {
|
|
7211
|
+
if (cellComp.id === componentId) {
|
|
7212
|
+
return { ...cellComp, basic: { ...cellComp.basic, notes } };
|
|
7213
|
+
}
|
|
7214
|
+
return cellComp;
|
|
7215
|
+
});
|
|
7216
|
+
return { ...cell, components: updatedCellComponents };
|
|
7217
|
+
}
|
|
7218
|
+
return cell;
|
|
7219
|
+
}
|
|
7220
|
+
});
|
|
7198
7221
|
return { ...comp, cells: updatedCells };
|
|
7199
7222
|
}
|
|
7200
7223
|
return comp;
|
|
@@ -7204,24 +7227,35 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
7204
7227
|
// Handle attachment change for table cell components
|
|
7205
7228
|
const updatedComponents = formComponents.map(comp => {
|
|
7206
7229
|
if (comp.id === component.id && comp.cells) {
|
|
7207
|
-
const updatedCells = comp.cells.map((
|
|
7208
|
-
if (
|
|
7209
|
-
|
|
7210
|
-
if (
|
|
7211
|
-
|
|
7212
|
-
|
|
7213
|
-
|
|
7214
|
-
...cellComp.basic,
|
|
7215
|
-
attachments: attachments || []
|
|
7230
|
+
const updatedCells = comp.cells.map((rowOrCell) => {
|
|
7231
|
+
if (Array.isArray(rowOrCell)) {
|
|
7232
|
+
return rowOrCell.map((cell) => {
|
|
7233
|
+
if (cell.components) {
|
|
7234
|
+
const updatedCellComponents = cell.components.map((cellComp) => {
|
|
7235
|
+
if (cellComp.id === componentId) {
|
|
7236
|
+
return { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } };
|
|
7216
7237
|
}
|
|
7217
|
-
|
|
7238
|
+
return cellComp;
|
|
7239
|
+
});
|
|
7240
|
+
return { ...cell, components: updatedCellComponents };
|
|
7218
7241
|
}
|
|
7219
|
-
return
|
|
7242
|
+
return cell;
|
|
7220
7243
|
});
|
|
7221
|
-
return { ...cell, components: updatedCellComponents };
|
|
7222
7244
|
}
|
|
7223
|
-
|
|
7224
|
-
|
|
7245
|
+
else {
|
|
7246
|
+
const cell = rowOrCell;
|
|
7247
|
+
if (cell.components) {
|
|
7248
|
+
const updatedCellComponents = cell.components.map((cellComp) => {
|
|
7249
|
+
if (cellComp.id === componentId) {
|
|
7250
|
+
return { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } };
|
|
7251
|
+
}
|
|
7252
|
+
return cellComp;
|
|
7253
|
+
});
|
|
7254
|
+
return { ...cell, components: updatedCellComponents };
|
|
7255
|
+
}
|
|
7256
|
+
return cell;
|
|
7257
|
+
}
|
|
7258
|
+
});
|
|
7225
7259
|
return { ...comp, cells: updatedCells };
|
|
7226
7260
|
}
|
|
7227
7261
|
return comp;
|
|
@@ -7615,8 +7649,29 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7615
7649
|
};
|
|
7616
7650
|
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 }) => {
|
|
7617
7651
|
const [isCollapsed, setIsCollapsed] = useState(false); // Always start expanded to show drop zones
|
|
7652
|
+
// Normalize cells: API may return a flat 1D array of cells (each with .row/.column)
|
|
7653
|
+
// or a proper 2D array of rows. Always convert to 2D for consistent rendering.
|
|
7654
|
+
const normalizedCells = useMemo(() => {
|
|
7655
|
+
const raw = properties.cells;
|
|
7656
|
+
if (!raw || !Array.isArray(raw) || raw.length === 0)
|
|
7657
|
+
return [];
|
|
7658
|
+
// Check if it's already a 2D array (first element is an array)
|
|
7659
|
+
if (Array.isArray(raw[0])) {
|
|
7660
|
+
return raw;
|
|
7661
|
+
}
|
|
7662
|
+
// It's a flat 1D array — reconstruct 2D using each cell's row/column
|
|
7663
|
+
const grid = [];
|
|
7664
|
+
raw.forEach((cell) => {
|
|
7665
|
+
const r = typeof cell.row === 'number' ? cell.row : 0;
|
|
7666
|
+
const c = typeof cell.column === 'number' ? cell.column : 0;
|
|
7667
|
+
if (!grid[r])
|
|
7668
|
+
grid[r] = [];
|
|
7669
|
+
grid[r][c] = cell;
|
|
7670
|
+
});
|
|
7671
|
+
return grid;
|
|
7672
|
+
}, [properties.cells]);
|
|
7618
7673
|
// Check if table has any components in any cells
|
|
7619
|
-
const hasAnyComponents =
|
|
7674
|
+
const hasAnyComponents = normalizedCells.some(row => Array.isArray(row) && row.some(cell => cell && cell.components && cell.components.length > 0)) || false;
|
|
7620
7675
|
// Initialize and update table cells when rows/columns change
|
|
7621
7676
|
// CRITICAL: Skip cell initialization updates to prevent flickering when user types
|
|
7622
7677
|
useEffect(() => {
|
|
@@ -7639,9 +7694,9 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7639
7694
|
const handleComponentDelete = useCallback((component, event) => {
|
|
7640
7695
|
event.stopPropagation();
|
|
7641
7696
|
// Find and remove the component from the table cell
|
|
7642
|
-
const updatedCells =
|
|
7643
|
-
if (cell.components && cell.components.some(comp => comp.id === component.id)) {
|
|
7644
|
-
const filteredComponents = cell.components.filter(comp => comp.id !== component.id);
|
|
7697
|
+
const updatedCells = normalizedCells.map(row => (Array.isArray(row) ? row : []).map(cell => {
|
|
7698
|
+
if (cell && cell.components && cell.components.some((comp) => comp.id === component.id)) {
|
|
7699
|
+
const filteredComponents = cell.components.filter((comp) => comp.id !== component.id);
|
|
7645
7700
|
return {
|
|
7646
7701
|
...cell,
|
|
7647
7702
|
components: filteredComponents
|
|
@@ -7661,12 +7716,13 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7661
7716
|
}, [onComponentDelete, properties, onValueChange, id]);
|
|
7662
7717
|
// CRITICAL FIX: Ensure all table cell components have proper IDs with table and cell position
|
|
7663
7718
|
// Use useMemo to prevent ID regeneration on every render
|
|
7719
|
+
// Uses normalizedCells so it works whether API returns 1D or 2D cell arrays
|
|
7664
7720
|
const cellsWithIds = useMemo(() => {
|
|
7665
|
-
if (!
|
|
7721
|
+
if (!normalizedCells || normalizedCells.length === 0)
|
|
7666
7722
|
return [];
|
|
7667
|
-
return
|
|
7723
|
+
return normalizedCells.map((row, rowIndex) => (Array.isArray(row) ? row : []).map((cell, cellIndex) => ({
|
|
7668
7724
|
...cell,
|
|
7669
|
-
components: (cell.components && Array.isArray(cell.components))
|
|
7725
|
+
components: (cell && cell.components && Array.isArray(cell.components))
|
|
7670
7726
|
? cell.components.map((comp, compIndex) => {
|
|
7671
7727
|
// CRITICAL: Only generate ID if it's missing - never regenerate existing IDs
|
|
7672
7728
|
// This prevents component remounting and losing input state
|
|
@@ -7684,7 +7740,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7684
7740
|
})
|
|
7685
7741
|
: []
|
|
7686
7742
|
})));
|
|
7687
|
-
}, [
|
|
7743
|
+
}, [normalizedCells, id]); // Only recalculate if cells or table ID changes
|
|
7688
7744
|
// CRITICAL FIX: Update the parent component with the cells that have proper IDs
|
|
7689
7745
|
// Skip this in package to prevent flickering - cells are managed by parent
|
|
7690
7746
|
// useEffect(() => {
|
|
@@ -7812,7 +7868,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7812
7868
|
fontSize: '14px',
|
|
7813
7869
|
textAlign: 'center'
|
|
7814
7870
|
}, children: columnName }, `header-${colIndex}`));
|
|
7815
|
-
}) }) })), 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))) })] })] }))] }));
|
|
7871
|
+
}) }) })), jsx("tbody", { children: cellsWithIds.filter(row => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.filter(cell => cell != null).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))) })] })] }))] }));
|
|
7816
7872
|
};
|
|
7817
7873
|
|
|
7818
7874
|
var dfFormTable = /*#__PURE__*/Object.freeze({
|