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