df-ae-forms-package 1.0.82 → 1.0.84
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 +24 -23
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +24 -23
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -7592,8 +7592,10 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7592
7592
|
};
|
|
7593
7593
|
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, shouldShowComponent }) => {
|
|
7594
7594
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
7595
|
-
//
|
|
7596
|
-
//
|
|
7595
|
+
// NOTE: Unlike the main website, the package does NOT have a cell initialization useEffect.
|
|
7596
|
+
// In the main website, onValueChange handles component structure updates (updating cells).
|
|
7597
|
+
// In the package, onValueChange maps to onFormValueChange which only handles simple form values.
|
|
7598
|
+
// The cells are already properly structured from the API and processed by the useMemo in DfFormPreview.
|
|
7597
7599
|
// Check if table has any components in any cells
|
|
7598
7600
|
const hasAnyComponents = properties.cells?.some((row) => {
|
|
7599
7601
|
if (Array.isArray(row)) {
|
|
@@ -7658,11 +7660,10 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7658
7660
|
const cellsWithIds = properties.cells && properties.cells.length > 0
|
|
7659
7661
|
? ensureTableCellComponentsHaveIds(properties.cells)
|
|
7660
7662
|
: [];
|
|
7661
|
-
//
|
|
7662
|
-
//
|
|
7663
|
-
//
|
|
7664
|
-
//
|
|
7665
|
-
// }, [])
|
|
7663
|
+
// NOTE: Unlike the main website, we do NOT sync cellsWithIds back via onValueChange.
|
|
7664
|
+
// In the package, onValueChange = onFormValueChange which handles simple form values,
|
|
7665
|
+
// not component structure updates. Syncing would corrupt the state.
|
|
7666
|
+
// cellsWithIds is used only for rendering.
|
|
7666
7667
|
// CRITICAL: Create a stable renderComponent that doesn't recreate on every render
|
|
7667
7668
|
// Match main app implementation - directly access formData from closure
|
|
7668
7669
|
const renderComponent = renderFormComponent || useCallback((field) => {
|
|
@@ -7770,22 +7771,22 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7770
7771
|
if (!hasAnyComponents && mode === 'preview') {
|
|
7771
7772
|
return null;
|
|
7772
7773
|
}
|
|
7773
|
-
return (jsxs("div", { className: `form-group df-form-table ${isSelected ? 'selected' : ''} ${mode === 'preview' ? 'preview-mode' : mode === 'test' ? 'test-mode' : ''} ${className}`, onClick: handleTableClick, style: tableStyle, children: [jsx("div", { className: "table-header", children: jsx("div", { className: "table-title", onClick: toggleCollapse, children: jsxs("div", { className: "title-content", children: [isCollapsed ? jsx(ChevronRight, { size: 16 }) : jsx(ChevronDown, { size: 16 }), jsx(Table, { size: 16 }), jsx("span", { className: "table-label", children: properties.basic?.label || 'Table' }), properties.validation?.required && (jsx("span", { className: "required-indicator", children: "*" }))] }) }) }), properties.basic?.description && !isCollapsed && (jsx("div", { className: "table-description", children: properties.basic.description })), !isCollapsed && (
|
|
7774
|
-
|
|
7775
|
-
|
|
7776
|
-
|
|
7777
|
-
|
|
7778
|
-
|
|
7779
|
-
|
|
7780
|
-
|
|
7781
|
-
|
|
7782
|
-
|
|
7783
|
-
|
|
7784
|
-
|
|
7785
|
-
|
|
7786
|
-
|
|
7787
|
-
|
|
7788
|
-
|
|
7774
|
+
return (jsxs("div", { className: `form-group df-form-table ${isSelected ? 'selected' : ''} ${mode === 'preview' ? 'preview-mode' : mode === 'test' ? 'test-mode' : ''} ${className}`, onClick: handleTableClick, style: tableStyle, children: [jsx("div", { className: "table-header", children: jsx("div", { className: "table-title", onClick: toggleCollapse, children: jsxs("div", { className: "title-content", children: [isCollapsed ? jsx(ChevronRight, { size: 16 }) : jsx(ChevronDown, { size: 16 }), jsx(Table, { size: 16 }), jsx("span", { className: "table-label", children: properties.basic?.label || 'Table' }), properties.validation?.required && (jsx("span", { className: "required-indicator", children: "*" }))] }) }) }), properties.basic?.description && !isCollapsed && (jsx("div", { className: "table-description", children: properties.basic.description })), !isCollapsed && (jsx("div", { className: "table-content", children: jsxs("table", { style: tableElementStyle, children: [properties.table?.displayAsTable && (mode === 'edit' || properties.table?.showColumns) && (jsx("thead", { children: jsx("tr", { className: "table-header-row", children: Array.from({ length: properties.table?.columns || properties.basic?.columns || 3 }, (_, colIndex) => {
|
|
7775
|
+
const columnNames = properties.table?.columnNames?.split(',').map((name) => name.trim()) || [];
|
|
7776
|
+
const columnName = columnNames[colIndex] || `Column ${colIndex + 1}`;
|
|
7777
|
+
return (jsx("th", { className: "table-header-cell", style: {
|
|
7778
|
+
backgroundColor: 'var(--df-color-fb-container)',
|
|
7779
|
+
color: properties.styles.headerTextColor || 'var(--df-color-text-dark)',
|
|
7780
|
+
padding: '12px',
|
|
7781
|
+
border: '1px solid var(--df-color-fb-border)',
|
|
7782
|
+
fontWeight: '600',
|
|
7783
|
+
fontSize: '14px',
|
|
7784
|
+
textAlign: 'center'
|
|
7785
|
+
}, children: columnName }, `header-${colIndex}`));
|
|
7786
|
+
}) }) })), jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => {
|
|
7787
|
+
const rowCells = Array.isArray(row) ? row : [row];
|
|
7788
|
+
return (jsx("tr", { className: "table-row", children: rowCells.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, shouldShowComponent: shouldShowComponent }, cell.id))) }, rowIndex));
|
|
7789
|
+
}) })] }) }))] }));
|
|
7789
7790
|
};
|
|
7790
7791
|
|
|
7791
7792
|
var dfFormTable = /*#__PURE__*/Object.freeze({
|