fix(antd): fix antd/next render error at React 19 (#4262)

* fix(antd,next): 🩹 replace defaultProps by default parameters Form 组件 component 无法获取到 form, 造成渲染失败 * fix(antd): 🩹 fix next portalId and antd typo
alibaba · Jan 21, 2025 · a0f3169 · a0f3169
1 parent 30167e1
commit a0f3169
Show file tree

Hide file tree

Showing 17 changed files with 170 additions and 232 deletions.
diff --git a/packages/antd/src/__builtins__/portal.tsx b/packages/antd/src/__builtins__/portal.tsx
@@ -11,27 +11,25 @@ const PortalMap = observable(new Map<string | symbol, React.ReactNode>())
 
 export const createPortalProvider = (id: string | symbol) => {
   const Portal = (props: React.PropsWithChildren<IPortalProps>) => {
-    if (props.id && !PortalMap.has(props.id)) {
-      PortalMap.set(props.id, null)
+    const portalId = props.id ?? id
+    if (portalId && !PortalMap.has(portalId)) {
+      PortalMap.set(portalId, null)
     }
 
     return (
       <Fragment>
         {props.children}
         <Observer>
           {() => {
-            if (!props.id) return null
-            const portal = PortalMap.get(props.id)
+            if (!portalId) return null
+            const portal = PortalMap.get(portalId)
             if (portal) return createPortal(portal, document.body)
             return null
           }}
         </Observer>
       </Fragment>
     )
   }
-  Portal.defaultProps = {
-    id,
-  }
   return Portal
 }
 

diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx
@@ -78,152 +78,157 @@ const insertActiveKeys = (activeKeys: number[], index: number) => {
   }, [])
 }
 
-export const ArrayCollapse: ComposedArrayCollapse = observer((props) => {
-  const field = useField<ArrayField>()
-  const dataSource = Array.isArray(field.value) ? field.value : []
-  const [activeKeys, setActiveKeys] = useState<number[]>(
-    takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount)
-  )
-  const schema = useFieldSchema()
-  const prefixCls = usePrefixCls('formily-array-collapse', props)
-  useEffect(() => {
-    if (!field.modified && dataSource.length) {
-      setActiveKeys(
-        takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount)
+export const ArrayCollapse: ComposedArrayCollapse = observer(
+  ({ defaultOpenPanelCount = 5, ...props }) => {
+    const field = useField<ArrayField>()
+    const dataSource = Array.isArray(field.value) ? field.value : []
+    const [activeKeys, setActiveKeys] = useState<number[]>(
+      takeDefaultActiveKeys(dataSource.length, defaultOpenPanelCount)
+    )
+    const schema = useFieldSchema()
+    const prefixCls = usePrefixCls('formily-array-collapse', props)
+    useEffect(() => {
+      if (!field.modified && dataSource.length) {
+        setActiveKeys(
+          takeDefaultActiveKeys(dataSource.length, defaultOpenPanelCount)
+        )
+      }
+    }, [dataSource.length, field])
+    if (!schema) throw new Error('can not found schema object')
+    const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props
+
+    const renderAddition = () => {
+      return schema.reduceProperties((addition, schema, key) => {
+        if (isAdditionComponent(schema)) {
+          return <RecursionField schema={schema} name={key} />
+        }
+        return addition
+      }, null)
+    }
+    const renderEmpty = () => {
+      if (dataSource.length) return
+      return (
+        <Card className={cls(`${prefixCls}-item`, props.className)}>
+          <Empty />
+        </Card>
       )
     }
-  }, [dataSource.length, field])
-  if (!schema) throw new Error('can not found schema object')
-  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props
-
-  const renderAddition = () => {
-    return schema.reduceProperties((addition, schema, key) => {
-      if (isAdditionComponent(schema)) {
-        return <RecursionField schema={schema} name={key} />
-      }
-      return addition
-    }, null)
-  }
-  const renderEmpty = () => {
-    if (dataSource.length) return
-    return (
-      <Card className={cls(`${prefixCls}-item`, props.className)}>
-        <Empty />
-      </Card>
-    )
-  }
 
-  const renderItems = () => {
-    return (
-      <Collapse
-        {...props}
-        activeKey={activeKeys}
-        onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))}
-        className={cls(`${prefixCls}-item`, props.className)}
-      >
-        {dataSource.map((item, index) => {
-          const items = Array.isArray(schema.items)
-            ? schema.items[index] || schema.items[0]
-            : schema.items
-
-          const panelProps = field
-            .query(`${field.address}.${index}`)
-            .get('componentProps')
-          const props: CollapsePanelProps = items['x-component-props']
-          const header = () => {
-            const header = panelProps?.header || props.header || field.title
-            const path = field.address.concat(index)
-            const errors = field.form.queryFeedbacks({
-              type: 'error',
-              address: `${path}.**`,
-            })
-            return (
-              <ArrayBase.Item index={index} record={() => field.value?.[index]}>
+    const renderItems = () => {
+      return (
+        <Collapse
+          {...props}
+          activeKey={activeKeys}
+          onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))}
+          className={cls(`${prefixCls}-item`, props.className)}
+        >
+          {dataSource.map((item, index) => {
+            const items = Array.isArray(schema.items)
+              ? schema.items[index] || schema.items[0]
+              : schema.items
+
+            const panelProps = field
+              .query(`${field.address}.${index}`)
+              .get('componentProps')
+            const props: CollapsePanelProps = items['x-component-props']
+            const header = () => {
+              const header = panelProps?.header || props.header || field.title
+              const path = field.address.concat(index)
+              const errors = field.form.queryFeedbacks({
+                type: 'error',
+                address: `${path}.**`,
+              })
+              return (
+                <ArrayBase.Item
+                  index={index}
+                  record={() => field.value?.[index]}
+                >
+                  <RecursionField
+                    schema={items}
+                    name={index}
+                    filterProperties={(schema) => {
+                      if (!isIndexComponent(schema)) return false
+                      return true
+                    }}
+                    onlyRenderProperties
+                  />
+                  {errors.length ? (
+                    <Badge
+                      size="small"
+                      className="errors-badge"
+                      count={errors.length}
+                    >
+                      {header}
+                    </Badge>
+                  ) : (
+                    header
+                  )}
+                </ArrayBase.Item>
+              )
+            }
+
+            const extra = (
+              <ArrayBase.Item index={index} record={item}>
                 <RecursionField
                   schema={items}
                   name={index}
                   filterProperties={(schema) => {
-                    if (!isIndexComponent(schema)) return false
+                    if (!isOperationComponent(schema)) return false
                     return true
                   }}
                   onlyRenderProperties
                 />
-                {errors.length ? (
-                  <Badge
-                    size="small"
-                    className="errors-badge"
-                    count={errors.length}
-                  >
-                    {header}
-                  </Badge>
-                ) : (
-                  header
-                )}
+                {panelProps?.extra}
               </ArrayBase.Item>
             )
-          }
 
-          const extra = (
-            <ArrayBase.Item index={index} record={item}>
+            const content = (
               <RecursionField
                 schema={items}
                 name={index}
                 filterProperties={(schema) => {
-                  if (!isOperationComponent(schema)) return false
+                  if (isIndexComponent(schema)) return false
+                  if (isOperationComponent(schema)) return false
                   return true
                 }}
-                onlyRenderProperties
               />
-              {panelProps?.extra}
-            </ArrayBase.Item>
-          )
-
-          const content = (
-            <RecursionField
-              schema={items}
-              name={index}
-              filterProperties={(schema) => {
-                if (isIndexComponent(schema)) return false
-                if (isOperationComponent(schema)) return false
-                return true
-              }}
-            />
-          )
-          return (
-            <Collapse.Panel
-              {...props}
-              {...panelProps}
-              forceRender
-              key={index}
-              header={header()}
-              extra={extra}
-            >
-              <ArrayBase.Item index={index} key={index} record={item}>
-                {content}
-              </ArrayBase.Item>
-            </Collapse.Panel>
-          )
-        })}
-      </Collapse>
+            )
+            return (
+              <Collapse.Panel
+                {...props}
+                {...panelProps}
+                forceRender
+                key={index}
+                header={header()}
+                extra={extra}
+              >
+                <ArrayBase.Item index={index} key={index} record={item}>
+                  {content}
+                </ArrayBase.Item>
+              </Collapse.Panel>
+            )
+          })}
+        </Collapse>
+      )
+    }
+    return (
+      <ArrayBase
+        onAdd={(index) => {
+          onAdd?.(index)
+          setActiveKeys(insertActiveKeys(activeKeys, index))
+        }}
+        onCopy={onCopy}
+        onRemove={onRemove}
+        onMoveUp={onMoveUp}
+        onMoveDown={onMoveDown}
+      >
+        {renderEmpty()}
+        {renderItems()}
+        {renderAddition()}
+      </ArrayBase>
     )
   }
-  return (
-    <ArrayBase
-      onAdd={(index) => {
-        onAdd?.(index)
-        setActiveKeys(insertActiveKeys(activeKeys, index))
-      }}
-      onCopy={onCopy}
-      onRemove={onRemove}
-      onMoveUp={onMoveUp}
-      onMoveDown={onMoveDown}
-    >
-      {renderEmpty()}
-      {renderItems()}
-      {renderAddition()}
-    </ArrayBase>
-  )
-})
+)
 
 const CollapsePanel: React.FC<React.PropsWithChildren<CollapsePanelProps>> = ({
   children,
@@ -233,9 +238,6 @@ const CollapsePanel: React.FC<React.PropsWithChildren<CollapsePanelProps>> = ({
 
 CollapsePanel.displayName = 'CollapsePanel'
 
-ArrayCollapse.defaultProps = {
-  defaultOpenPanelCount: 5,
-}
 ArrayCollapse.displayName = 'ArrayCollapse'
 ArrayCollapse.CollapsePanel = CollapsePanel
 

diff --git a/packages/antd/src/form-button-group/index.tsx b/packages/antd/src/form-button-group/index.tsx
@@ -57,7 +57,7 @@ function getDefaultBackground() {
 }
 
 export const FormButtonGroup: ComposedButtonGroup = ({
-  align,
+  align = 'left',
   gutter,
   ...props
 }) => {
@@ -83,10 +83,6 @@ export const FormButtonGroup: ComposedButtonGroup = ({
   )
 }
 
-FormButtonGroup.defaultProps = {
-  align: 'left',
-}
-
 FormButtonGroup.FormItem = ({ gutter, ...props }) => {
   return (
     <BaseItem
@@ -109,7 +105,7 @@ FormButtonGroup.FormItem = ({ gutter, ...props }) => {
   )
 }
 
-FormButtonGroup.Sticky = ({ align, ...props }) => {
+FormButtonGroup.Sticky = ({ align = 'left', ...props }) => {
   const ref = useRef()
   const [color, setColor] = useState('transparent')
   const prefixCls = usePrefixCls('formily-button-group')
@@ -151,8 +147,4 @@ FormButtonGroup.Sticky = ({ align, ...props }) => {
   )
 }
 
-FormButtonGroup.Sticky.defaultProps = {
-  align: 'left',
-}
-
 export default FormButtonGroup
diff --git a/packages/antd/src/form-grid/index.tsx b/packages/antd/src/form-grid/index.tsx
@@ -101,18 +101,14 @@ export const FormGrid: ComposedFormGrid = observer(
 ) as any
 
 export const GridColumn: React.FC<React.PropsWithChildren<IGridColumnProps>> =
-  observer(({ gridSpan, children, ...props }) => {
+  observer(({ gridSpan = 1, children, ...props }) => {
     return (
       <div {...props} style={props.style} data-grid-span={gridSpan}>
         {children}
       </div>
     )
   })
 
-GridColumn.defaultProps = {
-  gridSpan: 1,
-}
-
 FormGrid.createFormGrid = createFormGrid
 FormGrid.useGridSpan = useGridSpan
 FormGrid.useGridColumn = useGridColumn