feat(next/antd/vue): add useResponsiveFormLayout fault tolerance and …

…FormItem useOverflow update (#2707)
alibaba · Dec 30, 2021 · 98a544a · 98a544a
1 parent 88915bc
commit 98a544a
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
@@ -90,6 +90,8 @@ function useOverflow<
   const [overflow, setOverflow] = useState(false)
   const containerRef = useRef<Container>()
   const contentRef = useRef<Content>()
+  const layout = useFormLayout()
+  const labelCol = JSON.stringify(layout.labelCol)
 
   useEffect(() => {
     if (containerRef.current && contentRef.current) {
@@ -101,7 +103,7 @@ function useOverflow<
         if (overflow) setOverflow(false)
       }
     }
-  }, [])
+  }, [labelCol])
 
   return {
     overflow,

diff --git a/packages/antd/src/form-layout/useResponsiveFormLayout.ts b/packages/antd/src/form-layout/useResponsiveFormLayout.ts
@@ -82,7 +82,9 @@ export const useResponsiveFormLayout: IUseResponsiveFormLayout = (props) => {
   const [layoutProps, setLayout] = useState<any>(props)
 
   const updateUI = () => {
-    setLayout(calculateProps(ref.current, props))
+    if (ref.current) {
+      setLayout(calculateProps(ref.current, props))
+    }
   }
 
   useEffect(() => {

diff --git a/packages/element/src/form-layout/useResponsiveFormLayout.ts b/packages/element/src/form-layout/useResponsiveFormLayout.ts
@@ -89,7 +89,9 @@ export const useResponsiveFormLayout: IUseResponsiveFormLayout = (
   const layoutProps = ref<IProps>(props)
 
   const updateUI = () => {
-    layoutProps.value = calculateProps(root.value, props)
+    if (root.value) {
+      layoutProps.value = calculateProps(root.value, props)
+    }
   }
 
   onMounted(() => {

diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
@@ -90,6 +90,8 @@ function useOverflow<
   const [overflow, setOverflow] = useState(false)
   const containerRef = useRef<Container>()
   const contentRef = useRef<Content>()
+  const layout = useFormLayout()
+  const labelCol = JSON.stringify(layout.labelCol)
 
   useEffect(() => {
     if (containerRef.current && contentRef.current) {
@@ -101,7 +103,7 @@ function useOverflow<
         if (overflow) setOverflow(false)
       }
     }
-  }, [])
+  }, [labelCol])
 
   return {
     overflow,

diff --git a/packages/next/src/form-layout/useResponsiveFormLayout.ts b/packages/next/src/form-layout/useResponsiveFormLayout.ts
@@ -82,7 +82,9 @@ export const useResponsiveFormLayout: IUseResponsiveFormLayout = (props) => {
   const [layoutProps, setLayout] = useState<IProps>(props)
 
   const updateUI = () => {
-    setLayout(calculateProps(ref.current, props))
+    if (ref.current) {
+      setLayout(calculateProps(ref.current, props))
+    }
   }
 
   useEffect(() => {