react-table-edit 1.5.1 → 1.5.2

package/dist/component/edit-form/index.d.ts

@@ -14,6 +14,7 @@ type Props = {
     rowData: any;
     indexRow: any;
     defaultValues?: any;
+    component?: string | HTMLElement | React.RefObject<HTMLElement> | undefined;
     schema?: InferType<any>;
     onKeyDown?: (e: React.KeyboardEvent<any>) => void | any;
     onFormOpen?: (rowData: any, itemsField: FromItemsField[], setItemsField: Dispatch<SetStateAction<FromItemsField[]>>) => void;

package/dist/index.js

@@ -23935,7 +23935,7 @@ const SelectTableBox$1 = (props) => {
 
 const defaultWidth = 200;
 const EditForm = React$5.forwardRef((props, ref) => {
-    const { id, field, displayValue, menuHeight, menuWidth, rowData, invalid, onChange, onChangeField, onKeyDown, defaultValues, placeholder, textAlign, schema, onFormOpen, onFormSubmit, footerTemplate, template, minWidth, onPaste, openOnFocus, isClearable, indexRow, labelSize = 'label-small' } = props;
+    const { id, field, displayValue, menuHeight, menuWidth, rowData, invalid, onChange, onChangeField, onKeyDown, defaultValues, placeholder, textAlign, schema, onFormOpen, onFormSubmit, footerTemplate, template, minWidth, onPaste, openOnFocus, isClearable, indexRow, component, labelSize = 'label-small' } = props;
     const { innerWidth } = window;
     const inputRef = React$5.useRef(null);
     const editFormRef = React$5.useRef(null);
@@ -24117,12 +24117,13 @@ const EditForm = React$5.forwardRef((props, ref) => {
                                         padding: template ? 0 : 'auto',
                                         backgroundColor: '$white',
                                         textAlign: textAlign ?? 'left'
-                                    }, placeholder: placeholder, innerRef: inputRef, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true })] }) }), jsxRuntime.jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: {
+                                    }, placeholder: placeholder, innerRef: inputRef, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true })] }) }), jsxRuntime.jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', container: component, style: {
+                            position: 'fixed',
                             minWidth: minWidth ? minWidth : defaultWidth,
                             width: menuWidth ? menuWidth : 'min-content',
                             maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
                             borderRadius: 8,
-                            zIndex: 1056
+                            zIndex: 9999
                         }, children: jsxRuntime.jsxs(DropdownItem$1, { className: 'p-0', style: { borderRadius: '6px' }, tag: 'div', header: true, children: [jsxRuntime.jsx("div", { onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), className: 'p-1', style: {
                                         maxHeight: menuHeight ? menuHeight : 300,
                                         overflow: "auto"
@@ -41203,7 +41204,7 @@ const RenderEditCellComponent = (props) => {
                         }
                     } }, `col-${indexRow}-${indexCol}`) }));
         case "form":
-            return (jsxRuntime.jsx(EditForm, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : "", placeholder: col.placeholder ? t(col.placeholder) : "", rowData: row, indexRow: indexRow, onChange: (val) => {
+            return (jsxRuntime.jsx(EditForm, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, component: gridRef, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : "", placeholder: col.placeholder ? t(col.placeholder) : "", rowData: row, indexRow: indexRow, onChange: (val) => {
                     Object.assign(row, val);
                     handleDataChange(row, col, indexRow);
                 }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, template: col.template, onKeyDown: (e) => {
@@ -41491,38 +41492,46 @@ const CellComponent = React__default["default"].memo((props) => {
     const isActiveCell = col.field !== '#' && selectedCell && indexRow >= selectedCell.minRow && indexRow <= selectedCell.maxRow && indexCol >= selectedCell.minCol && indexCol <= selectedCell.maxCol;
     const isActiveRow = col.field === '#' && selectedCell && indexRow >= selectedCell.minRow && indexRow <= selectedCell.maxRow;
     React$5.useEffect(() => {
-        if (!containerRef?.current)
+        if (!containerRef?.current) {
             return;
+        }
         const rafId = { current: 0 }; // hoặc useRef<number | null>(null)
         const handleMouseMove = (e) => {
-            if (!typeDragging.current)
+            if (!typeDragging.current) {
                 return;
+            }
             const container = containerRef.current;
             const rect = container.getBoundingClientRect();
             const scrollStepVert = 50;
             const scrollStepHor = 100;
             let newTop = container.scrollTop;
             let newLeft = container.scrollLeft;
-            if (e.clientY < rect.top + 30)
+            if (e.clientY < rect.top + 30) {
                 newTop -= scrollStepVert;
-            else if (e.clientY > rect.bottom - 30)
+            }
+            else if (e.clientY > rect.bottom - 30) {
                 newTop += scrollStepVert;
-            if (e.clientX < rect.left + 30)
+            }
+            if (e.clientX < rect.left + 30) {
                 newLeft -= scrollStepHor;
-            else if (e.clientX > rect.right - 30)
+            }
+            else if (e.clientX > rect.right - 30) {
                 newLeft += scrollStepHor;
+            }
             // Scroll smooth, chỉ khi cần
             if (newTop !== container.scrollTop || newLeft !== container.scrollLeft) {
-                if (rafId.current)
+                if (rafId.current) {
                     cancelAnimationFrame(rafId.current);
+                }
                 rafId.current = requestAnimationFrame(() => {
                     container.scrollTo({ top: newTop, left: newLeft, behavior: "smooth" });
                 });
             }
         };
         const handleMouseUp = () => {
-            if (!typeDragging.current)
+            if (!typeDragging.current) {
                 return;
+            }
             document.body.style.userSelect = "";
             typeDragging.current = 0;
             isCopying.current = false;
@@ -41532,8 +41541,9 @@ const CellComponent = React__default["default"].memo((props) => {
         return () => {
             window.removeEventListener("mousemove", handleMouseMove);
             window.removeEventListener("mouseup", handleMouseUp);
-            if (rafId.current)
+            if (rafId.current) {
                 cancelAnimationFrame(rafId.current);
+            }
         };
     }, [containerRef]);
     if (col.visible === false) {