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