lu-lowcode-package-form 0.11.64 → 0.11.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.11.64",
+  "version": "0.11.66",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",

package/src/components/field/table/drag-head.jsx

@@ -20,6 +20,31 @@ const DragHead = ({ childrenDesc, initialWidth, changeWidth, showAction, showLab
         }
     },[initialWidth])
 
+    useEffect(() => {
+        // 创建CSS变量
+        document.documentElement.style.setProperty('--drag-position', '0px');
+        
+        // 创建指示线DOM元素
+        const indicator = document.createElement('div');
+        indicator.id = 'column-drag-indicator';
+        indicator.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: var(--drag-position);
+            width: 2px;
+            height: 100vh;
+            background-color: #1290ff;
+            pointer-events: none;
+            z-index: 9999;
+            display: none;
+        `;
+        document.body.appendChild(indicator);
+        
+        return () => {
+            document.body.removeChild(indicator);
+        };
+    }, []);
+
     const getColumnWidth = (index) => {
         return headWidths[index] || 150
     }
@@ -27,11 +52,12 @@ const DragHead = ({ childrenDesc, initialWidth, changeWidth, showAction, showLab
     // 处理拖动开始
     const onResizeStart = (index) => {
         return (e, data) => {
-            e.stopPropagation()
-            setIsDragging(true)
-            setResizingColumn(index)
-            setDragPosition(e.clientX)
-            startPositionRef.current = e.clientX
+            e.stopPropagation();
+            document.getElementById('column-drag-indicator').style.display = 'block';
+            // setIsDragging(true);
+            // setResizingColumn(index);
+            document.documentElement.style.setProperty('--drag-position', `${e.clientX}px`);
+            startPositionRef.current = e.clientX;
         }
     }
 
@@ -39,49 +65,36 @@ const DragHead = ({ childrenDesc, initialWidth, changeWidth, showAction, showLab
     const onResize = (index) => {
         return (e, { size }) => {
             e.stopPropagation()
-            // 只在拖动过程中更新虚拟指示线位置
-            setDragPosition(e.clientX)
+            requestAnimationFrame(() => {
+                // // 只在拖动过程中更新虚拟指示线位置
+                // setDragPosition(e.clientX)
+                document.documentElement.style.setProperty('--drag-position', `${e.clientX}px`);
+            });
         }
     }
 
     // 处理拖动结束
     const onResizeStop = (index) => {
         return (e, { size }) => {
+            document.getElementById('column-drag-indicator').style.display = 'none';
+            
             // 更新列宽
-            const newHeadWidths = [...headWidthsRef.current]
-            const delta = e.clientX - startPositionRef.current
-            const oldWidth = headWidths[index] || 150
-            const newWidth = Math.max(50, oldWidth + delta)
-            newHeadWidths[index] = newWidth
-            headWidthsRef.current = newHeadWidths
-            setHeadWidths(newHeadWidths)
-            typeof changeWidth === 'function' && changeWidth(newHeadWidths)
+            const newHeadWidths = [...headWidthsRef.current];
+            const delta = e.clientX - startPositionRef.current;
+            const oldWidth = headWidths[index] || 150;
+            const newWidth = Math.max(50, oldWidth + delta);
+            newHeadWidths[index] = newWidth;
+            headWidthsRef.current = newHeadWidths;
+            setHeadWidths(newHeadWidths);
+            typeof changeWidth === 'function' && changeWidth(newHeadWidths);
+            
             // 重置拖动状态
-            setIsDragging(false)
-            setResizingColumn(null)
+            // setIsDragging(false);
+            // setResizingColumn(null);
         }
     }
 
-    // 虚拟指示线组件
-    const DragIndicator = () => {
-        if (!isDragging) return null
 
-        const style = {
-            position: 'fixed',
-            top: 0,
-            left: `${dragPosition}px`,
-            width: '2px',
-            height: '100vh',
-            backgroundColor: '#1890ff',
-            pointerEvents: 'none',
-            zIndex: 9999
-        }
-
-        return createPortal(
-            <div style={style}></div>,
-            document.body
-        )
-    }
 
     return <><div className="fflex flex-nowrap fmin-w-full fabsolute">
         {childrenDesc.map((child, childIndex) => {
@@ -122,7 +135,8 @@ const DragHead = ({ childrenDesc, initialWidth, changeWidth, showAction, showLab
         })}
         {showAction && <div className="fsticky fright-0 fborder-b" style={{ boxShadow: "rgba(50, 50, 50, 0.15) -6px 0px 6px -6px", flex: "0 0 50px", width: "50px" }}></div>}
     </div>
-        <DragIndicator /></>
+        {/* <DragIndicator /> */}
+        </>
 }
 
 export default DragHead

package/src/components/field/table/index.jsx

@@ -81,16 +81,18 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
             setHeadWidths(props?.columnsWidth)
             setInitialWidth(props?.columnsWidth)
         }
-    }, [props])
+    }, [props?.columnsWidth])
 
     useEffect(()=>{
        console.log("Table headWidths", headWidths)
     },[headWidths])
 
     useEffect(()=>{
-        const childrenDesc = React.Children.map(children, (child) => {
-            return {id:child.props.componentId || child.props.__id,label:child.props.label}
+        let childrenDesc = React.Children.map(children, (child) => {
+            const hidden = (child?.props?.calcHidden || !getDependencyMapShow(child?.props?.componentId || child?.props?.__id)) && mode != "desgin";
+            return {id:child.props.componentId || child.props.__id,label:child.props.label, hidden }
         })
+        childrenDesc = childrenDesc.filter(item=>!item.hidden)
         console.log("Emit Table childrenDesc", childrenDesc)
         eventEmitter.emit("tableChildrenDesc", childrenDesc)
         setChildrenDesc(childrenDesc)