react-table-edit 1.4.17 → 1.4.18

package/dist/index.mjs

@@ -19269,6 +19269,77 @@ const FindNodeByPath = (tree, path) => {
     }
     return { parent: current, lastIndex: levels.at(-1), firstIndex: levels.length === 1 ? levels[0] : -1, node };
 };
+/**
+ * Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
+ * - Tạo header dạng nhiều cấp (header theo chiều dọc)
+ * - Chuyển cột thành dạng phẳng để render nội dung
+ * - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
+ *
+ * @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
+ * @returns {
+ *   levels: IHeaderColumnTable[][]       // Các hàng header theo cấp
+ *   flat: IColumnVirtualizedTable[]      // Danh sách cột phẳng
+ *   objWidthFixLeft: Record<number, number>      // Offset trái cho cột fixed left
+ *   objWidthFixRight: Record<number, number>     // Offset phải cho cột fixed right
+ *   lastObjWidthFixLeft: number          // Chỉ số cột cuối cùng fixed left
+ *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
+ * }
+ */
+const calculateTableStructure = (columns) => {
+    const levels = [];
+    const flat = [];
+    const objWidthFixLeft = {};
+    const objWidthFixRight = {};
+    let maxDepth = 0;
+    // Tính depth tối đa
+    const calculateDepth = (cols, depth = 1) => (Math.max(...cols.map(col => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth))));
+    maxDepth = calculateDepth(columns);
+    let leftTotal = 0;
+    let rightTotal = 0;
+    const traverse = (cols, level = 0) => {
+        levels[level] = levels[level] || [];
+        return cols.reduce((colspanSum, col) => {
+            const hasChildren = (col.columns?.length ?? 0) > 0;
+            const colspan = hasChildren ? traverse(col.columns, level + 1) : 1;
+            const cell = {
+                ...col,
+                columns: col.columns ?? [],
+                colspan,
+                rowspan: hasChildren ? 1 : maxDepth - level
+            };
+            levels[level].push(cell);
+            if (!hasChildren) {
+                const visible = col.visible !== false;
+                const index = flat.length;
+                const width = col.width ?? 40;
+                cell.index = index;
+                flat.push(cell);
+                if (col.fixedType === 'left' && visible) {
+                    objWidthFixLeft[index] = leftTotal;
+                    leftTotal += width;
+                }
+                if (col.fixedType === 'right' && visible) {
+                    objWidthFixRight[index] = rightTotal;
+                    rightTotal += width;
+                }
+            }
+            return colspanSum + colspan;
+        }, 0);
+    };
+    traverse(columns);
+    const flatVisble = flat.filter((e) => e.visible !== false);
+    const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
+    const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
+    return {
+        levels,
+        flat,
+        flatVisble,
+        objWidthFixLeft,
+        objWidthFixRight,
+        lastObjWidthFixLeft,
+        fisrtObjWidthFixRight
+    };
+};
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -23037,7 +23108,6 @@ const EditForm = forwardRef((props, ref) => {
     const { innerWidth } = window;
     const inputRef = useRef(null);
     const editFormRef = useRef(null);
-    const buttonRef = useRef(null);
     const [dropdownOpen, setDropdownOpen] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
     const [itemsField, setItemsField] = useState([]);
@@ -23223,7 +23293,7 @@ const EditForm = forwardRef((props, ref) => {
                         }, children: jsxs(DropdownItem$1, { className: 'p-0', style: { borderRadius: '6px' }, tag: 'div', header: true, children: [jsx("div", { onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), className: 'p-1', style: {
                                         maxHeight: menuHeight ? menuHeight : 300,
                                         overflow: "auto"
-                                    }, children: itemsField ? renderForm(itemsField) : '' }), jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsx(Button$1, { ref: buttonRef, className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
+                                    }, children: itemsField ? renderForm(itemsField) : '' }), jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsx(Button$1, { className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
                                                         itemsField.forEach((e) => {
                                                             if (e.type === 'numeric') {
                                                                 setValue(e.name, 0);
@@ -23236,7 +23306,7 @@ const EditForm = forwardRef((props, ref) => {
                                                         if (e.code === 'Tab') {
                                                             closeMenu();
                                                         }
-                                                    }, children: t('Clear') }), jsx(Button$1, { ref: buttonRef, color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
+                                                    }, children: t('Clear') }), jsx(Button$1, { color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
                                                         if (e.code === 'Tab') {
                                                             closeMenu();
                                                         }
@@ -23490,7 +23560,9 @@ const CommandElement = (props) => {
                     }), color: item.color ? item.color : '#000', onClick: (e) => {
                         handleCommandClick(item.id, rowData, indexRow);
                         if (indexRow === indexFocus) {
-                            setIndexFocus(-1);
+                            if (setIndexFocus) {
+                                setIndexFocus(-1);
+                            }
                         }
                         e.preventDefault();
                     }, children: [item.icon && jsx(IconCustom, { iconName: item.icon, size: 16 }), jsx(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? '') })] }, `command-${index}`));
@@ -42602,24 +42674,6 @@ const TableEdit = forwardRef((props, ref) => {
         setHeaderColumns(arrHeaderColumns);
         setContentColumns(arrContentColumns);
     }, [columns]);
-    useEffect(() => {
-        const arrHeaderColumns = [];
-        const arrContentColumns = [];
-        let headerLevelRow = 0;
-        if (levelCol) {
-            headerLevelRow = levelCol;
-        }
-        else {
-            headerLevelRow = stretchColumn(columns, 0);
-            setLevelCol(headerLevelRow);
-        }
-        for (let i = 0; i < headerLevelRow; i++) {
-            arrHeaderColumns.push([]);
-        }
-        getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
-        setHeaderColumns(arrHeaderColumns);
-        setContentColumns(arrContentColumns);
-    }, [columns]);
     const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
         array.forEach((item) => {
             const ele = { ...item, visible: item.visible, rowspan: 1, index: 0 };
@@ -65324,5 +65378,5 @@ const ImportExcelComponent = (props) => {
             ] }) }));
 };
 
-export { ExportExcelComponent, FindNodeByPath, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined$1 as isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
+export { ExportExcelComponent, FindNodeByPath, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined$1 as isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
 //# sourceMappingURL=index.mjs.map