From a0f3169a23e185ac9356ba8053d7c9bcf8d70323 Mon Sep 17 00:00:00 2001 From: ChaoGPT Date: Tue, 21 Jan 2025 11:39:08 +0800 Subject: [PATCH] fix(antd): fix antd/next render error at React 19 (#4262) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(antd,next): 🩹 replace defaultProps by default parameters Form 组件 component 无法获取到 form, 造成渲染失败 * fix(antd): 🩹 fix next portalId and antd typo --- packages/antd/src/__builtins__/portal.tsx | 12 +- packages/antd/src/array-collapse/index.tsx | 254 +++++++++--------- packages/antd/src/form-button-group/index.tsx | 12 +- packages/antd/src/form-grid/index.tsx | 6 +- packages/antd/src/form-layout/index.tsx | 13 +- packages/antd/src/form/index.tsx | 6 +- packages/antd/src/select-table/index.tsx | 15 +- packages/antd/src/transfer/index.tsx | 7 +- packages/next/src/__builtins__/portal.tsx | 12 +- packages/next/src/array-collapse/index.tsx | 5 +- packages/next/src/form-button-group/index.tsx | 12 +- packages/next/src/form-grid/index.tsx | 6 +- packages/next/src/form-item/index.tsx | 6 +- packages/next/src/form-layout/index.tsx | 6 +- packages/next/src/form/index.tsx | 6 +- packages/next/src/select-table/index.tsx | 15 +- packages/next/src/space/index.tsx | 9 +- 17 files changed, 170 insertions(+), 232 deletions(-) diff --git a/packages/antd/src/__builtins__/portal.tsx b/packages/antd/src/__builtins__/portal.tsx index 99a274b80ee..3c12187fa2d 100644 --- a/packages/antd/src/__builtins__/portal.tsx +++ b/packages/antd/src/__builtins__/portal.tsx @@ -11,8 +11,9 @@ const PortalMap = observable(new Map()) export const createPortalProvider = (id: string | symbol) => { const Portal = (props: React.PropsWithChildren) => { - 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 ( @@ -20,8 +21,8 @@ export const createPortalProvider = (id: string | symbol) => { {props.children} {() => { - 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 }} @@ -29,9 +30,6 @@ export const createPortalProvider = (id: string | symbol) => { ) } - Portal.defaultProps = { - id, - } return Portal } diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx index 8816f52aa52..6ffa912fc8c 100644 --- 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() - const dataSource = Array.isArray(field.value) ? field.value : [] - const [activeKeys, setActiveKeys] = useState( - 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() + const dataSource = Array.isArray(field.value) ? field.value : [] + const [activeKeys, setActiveKeys] = useState( + 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 + } + return addition + }, null) + } + const renderEmpty = () => { + if (dataSource.length) return + return ( + + + ) } - }, [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 - } - return addition - }, null) - } - const renderEmpty = () => { - if (dataSource.length) return - return ( - - - - ) - } - const renderItems = () => { - return ( - 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 ( - field.value?.[index]}> + const renderItems = () => { + return ( + 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 ( + field.value?.[index]} + > + { + if (!isIndexComponent(schema)) return false + return true + }} + onlyRenderProperties + /> + {errors.length ? ( + + {header} + + ) : ( + header + )} + + ) + } + + const extra = ( + { - if (!isIndexComponent(schema)) return false + if (!isOperationComponent(schema)) return false return true }} onlyRenderProperties /> - {errors.length ? ( - - {header} - - ) : ( - header - )} + {panelProps?.extra} ) - } - const extra = ( - + const content = ( { - if (!isOperationComponent(schema)) return false + if (isIndexComponent(schema)) return false + if (isOperationComponent(schema)) return false return true }} - onlyRenderProperties /> - {panelProps?.extra} - - ) - - const content = ( - { - if (isIndexComponent(schema)) return false - if (isOperationComponent(schema)) return false - return true - }} - /> - ) - return ( - - - {content} - - - ) - })} - + ) + return ( + + + {content} + + + ) + })} + + ) + } + return ( + { + onAdd?.(index) + setActiveKeys(insertActiveKeys(activeKeys, index)) + }} + onCopy={onCopy} + onRemove={onRemove} + onMoveUp={onMoveUp} + onMoveDown={onMoveDown} + > + {renderEmpty()} + {renderItems()} + {renderAddition()} + ) } - return ( - { - onAdd?.(index) - setActiveKeys(insertActiveKeys(activeKeys, index)) - }} - onCopy={onCopy} - onRemove={onRemove} - onMoveUp={onMoveUp} - onMoveDown={onMoveDown} - > - {renderEmpty()} - {renderItems()} - {renderAddition()} - - ) -}) +) const CollapsePanel: React.FC> = ({ children, @@ -233,9 +238,6 @@ const CollapsePanel: React.FC> = ({ 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 index b667f0678c9..3cac5c329fd 100644 --- 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 ( { ) } -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 index 1f9c3fbd35c..13b54cb3bb5 100644 --- a/packages/antd/src/form-grid/index.tsx +++ b/packages/antd/src/form-grid/index.tsx @@ -101,7 +101,7 @@ export const FormGrid: ComposedFormGrid = observer( ) as any export const GridColumn: React.FC> = - observer(({ gridSpan, children, ...props }) => { + observer(({ gridSpan = 1, children, ...props }) => { return (
{children} @@ -109,10 +109,6 @@ export const GridColumn: React.FC> = ) }) -GridColumn.defaultProps = { - gridSpan: 1, -} - FormGrid.createFormGrid = createFormGrid FormGrid.useGridSpan = useGridSpan FormGrid.useGridColumn = useGridColumn diff --git a/packages/antd/src/form-layout/index.tsx b/packages/antd/src/form-layout/index.tsx index a558fbc0a5b..5bcbc9ec583 100644 --- a/packages/antd/src/form-layout/index.tsx +++ b/packages/antd/src/form-layout/index.tsx @@ -66,7 +66,14 @@ export const FormLayout: React.FC> & { useFormLayout: () => IFormLayoutContext useFormDeepLayout: () => IFormLayoutContext useFormShallowLayout: () => IFormLayoutContext -} = ({ shallow, children, prefixCls, className, style, ...otherProps }) => { +} = ({ + shallow = true, + children, + prefixCls, + className, + style, + ...otherProps +}) => { const { ref, props } = useResponsiveFormLayout(otherProps) const deepLayout = useFormDeepLayout() const formPrefixCls = usePrefixCls('form', { prefixCls }) @@ -109,10 +116,6 @@ export const FormLayout: React.FC> & { ) } -FormLayout.defaultProps = { - shallow: true, -} - FormLayout.useFormDeepLayout = useFormDeepLayout FormLayout.useFormShallowLayout = useFormShallowLayout FormLayout.useFormLayout = useFormLayout diff --git a/packages/antd/src/form/index.tsx b/packages/antd/src/form/index.tsx index 86bb28ac049..e27b5b0d8da 100644 --- a/packages/antd/src/form/index.tsx +++ b/packages/antd/src/form/index.tsx @@ -13,7 +13,7 @@ export interface FormProps extends IFormLayoutProps { export const Form: React.FC> = ({ form, - component, + component = 'form', onAutoSubmit, onAutoSubmitFailed, previewTextPlaceholder, @@ -43,8 +43,4 @@ export const Form: React.FC> = ({ return renderContent(top) } -Form.defaultProps = { - component: 'form', -} - export default Form diff --git a/packages/antd/src/select-table/index.tsx b/packages/antd/src/select-table/index.tsx index f85de3bd7b1..3a818eef6d6 100644 --- a/packages/antd/src/select-table/index.tsx +++ b/packages/antd/src/select-table/index.tsx @@ -142,11 +142,11 @@ const addPrimaryKey = (dataSource, rowKey, primaryKey) => export const SelectTable: ComposedSelectTable = observer((props) => { const { - mode, + mode = 'multiple', dataSource: propsDataSource, optionAsValue, - valueType, - showSearch, + valueType = 'all', + showSearch = false, filterOption, filterSort, onSearch, @@ -155,7 +155,7 @@ export const SelectTable: ComposedSelectTable = observer((props) => { value, onChange, rowSelection, - primaryKey: rowKey, + primaryKey: rowKey = 'key', ...otherTableProps } = props const prefixCls = usePrefixCls('formily-select-table', props) @@ -409,11 +409,4 @@ const TableColumn: React.FC< SelectTable.Column = TableColumn -SelectTable.defaultProps = { - showSearch: false, - valueType: 'all', - primaryKey: 'key', - mode: 'multiple', -} - export default SelectTable diff --git a/packages/antd/src/transfer/index.tsx b/packages/antd/src/transfer/index.tsx index 02ed9f4fb4b..e685be9a81a 100644 --- a/packages/antd/src/transfer/index.tsx +++ b/packages/antd/src/transfer/index.tsx @@ -2,6 +2,8 @@ import { connect, mapProps } from '@formily/react' import { Transfer as AntdTransfer } from 'antd' import { isVoidField } from '@formily/core' +const renderTitle = (item: any) => item.title + export const Transfer = connect( AntdTransfer, mapProps( @@ -12,6 +14,7 @@ export const Transfer = connect( if (isVoidField(field)) return props return { ...props, + render: props.render || renderTitle, dataSource: field.dataSource?.map((item) => { return { @@ -25,8 +28,4 @@ export const Transfer = connect( ) ) -Transfer.defaultProps = { - render: (item) => item.title, -} - export default Transfer diff --git a/packages/next/src/__builtins__/portal.tsx b/packages/next/src/__builtins__/portal.tsx index 99a274b80ee..3c12187fa2d 100644 --- a/packages/next/src/__builtins__/portal.tsx +++ b/packages/next/src/__builtins__/portal.tsx @@ -11,8 +11,9 @@ const PortalMap = observable(new Map()) export const createPortalProvider = (id: string | symbol) => { const Portal = (props: React.PropsWithChildren) => { - 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 ( @@ -20,8 +21,8 @@ export const createPortalProvider = (id: string | symbol) => { {props.children} {() => { - 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 }} @@ -29,9 +30,6 @@ export const createPortalProvider = (id: string | symbol) => { ) } - Portal.defaultProps = { - id, - } return Portal } diff --git a/packages/next/src/array-collapse/index.tsx b/packages/next/src/array-collapse/index.tsx index 3d8fadc3832..df929a5d017 100644 --- a/packages/next/src/array-collapse/index.tsx +++ b/packages/next/src/array-collapse/index.tsx @@ -73,7 +73,7 @@ const insertExpandedKeys = (expandedKeys: number[], index: number) => { } export const ArrayCollapse: ComposedArrayCollapse = observer( - ({ defaultOpenPanelCount, ...props }) => { + ({ defaultOpenPanelCount = 5, ...props }) => { const field = useField() const dataSource = Array.isArray(field.value) ? field.value : [] @@ -233,9 +233,6 @@ const CollapsePanel: React.FC> = ({ CollapsePanel.displayName = 'CollapsePanel' -ArrayCollapse.defaultProps = { - defaultOpenPanelCount: 5, -} ArrayCollapse.displayName = 'ArrayCollapse' ArrayCollapse.CollapsePanel = CollapsePanel diff --git a/packages/next/src/form-button-group/index.tsx b/packages/next/src/form-button-group/index.tsx index c7ee77340cc..a5db132d27c 100644 --- a/packages/next/src/form-button-group/index.tsx +++ b/packages/next/src/form-button-group/index.tsx @@ -56,7 +56,7 @@ function getDefaultBackground() { } export const FormButtonGroup: ComposedButtonGroup = ({ - align, + align = 'left', gutter, ...props }) => { @@ -82,10 +82,6 @@ export const FormButtonGroup: ComposedButtonGroup = ({ ) } -FormButtonGroup.defaultProps = { - align: 'left', -} - FormButtonGroup.FormItem = ({ gutter, ...props }) => { return ( { ) } -FormButtonGroup.Sticky = ({ align, ...props }) => { +FormButtonGroup.Sticky = ({ align = 'left', ...props }) => { const ref = useRef() const [color, setColor] = useState('transparent') const prefixCls = usePrefixCls('formily-button-group') @@ -150,8 +146,4 @@ FormButtonGroup.Sticky = ({ align, ...props }) => { ) } -FormButtonGroup.Sticky.defaultProps = { - align: 'left', -} - export default FormButtonGroup diff --git a/packages/next/src/form-grid/index.tsx b/packages/next/src/form-grid/index.tsx index b1eac7ac53c..1243cd37e36 100644 --- a/packages/next/src/form-grid/index.tsx +++ b/packages/next/src/form-grid/index.tsx @@ -100,7 +100,7 @@ export const FormGrid: ComposedFormGrid = observer( ) as any export const GridColumn: React.FC> = - observer(({ gridSpan, children, ...props }) => { + observer(({ gridSpan = 1, children, ...props }) => { return (
{children} @@ -108,10 +108,6 @@ export const GridColumn: React.FC> = ) }) -GridColumn.defaultProps = { - gridSpan: 1, -} - FormGrid.createFormGrid = createFormGrid FormGrid.useFormGrid = useFormGrid FormGrid.useGridSpan = useGridSpan diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx index d35a19e797d..3ccff93034c 100644 --- a/packages/next/src/form-item/index.tsx +++ b/packages/next/src/form-item/index.tsx @@ -144,7 +144,7 @@ export const BaseItem: React.FC> = ( feedbackStatus, extra, feedbackText, - fullness, + fullness = true, feedbackLayout, feedbackIcon, inset, @@ -421,10 +421,6 @@ export const FormItem: ComposeFormItem = connect( }) ) -FormItem.defaultProps = { - fullness: true, -} - FormItem.BaseItem = BaseItem export default FormItem diff --git a/packages/next/src/form-layout/index.tsx b/packages/next/src/form-layout/index.tsx index a7557f2493d..597c654dffc 100644 --- a/packages/next/src/form-layout/index.tsx +++ b/packages/next/src/form-layout/index.tsx @@ -65,7 +65,7 @@ export const FormLayout: React.FC> & { useFormLayout: () => IFormLayoutContext useFormDeepLayout: () => IFormLayoutContext useFormShallowLayout: () => IFormLayoutContext -} = ({ shallow, children, prefix, className, style, ...otherProps }) => { +} = ({ shallow = true, children, prefix, className, style, ...otherProps }) => { const { ref, props } = useResponsiveFormLayout(otherProps) const deepLayout = useFormDeepLayout() const formPrefixCls = usePrefixCls('form', { prefix }) @@ -108,10 +108,6 @@ export const FormLayout: React.FC> & { ) } -FormLayout.defaultProps = { - shallow: true, -} - FormLayout.useFormDeepLayout = useFormDeepLayout FormLayout.useFormShallowLayout = useFormShallowLayout FormLayout.useFormLayout = useFormLayout diff --git a/packages/next/src/form/index.tsx b/packages/next/src/form/index.tsx index 0e94ea7ad75..dfbc9c6ecce 100644 --- a/packages/next/src/form/index.tsx +++ b/packages/next/src/form/index.tsx @@ -20,7 +20,7 @@ export interface FormProps extends IFormLayoutProps { export const Form: React.FC> = ({ form, - component, + component = 'form', onAutoSubmit, onAutoSubmitFailed, previewTextPlaceholder, @@ -58,8 +58,4 @@ export const Form: React.FC> = ({ return renderContent(top) } -Form.defaultProps = { - component: 'form', -} - export default Form diff --git a/packages/next/src/select-table/index.tsx b/packages/next/src/select-table/index.tsx index b40449d58f3..c56e88e9878 100644 --- a/packages/next/src/select-table/index.tsx +++ b/packages/next/src/select-table/index.tsx @@ -144,11 +144,11 @@ const addPrimaryKey = (dataSource, rowKey, primaryKey) => export const SelectTable: ComposedSelectTable = observer((props) => { const { - mode, + mode = 'multiple', dataSource: propsDataSource, optionAsValue, - valueType, - showSearch, + valueType = 'all', + showSearch = false, filterOption, filterSort, onSearch, @@ -157,7 +157,7 @@ export const SelectTable: ComposedSelectTable = observer((props) => { value, onChange, rowSelection, - primaryKey: rowKey, + primaryKey: rowKey = 'key', ...otherTableProps } = props const prefixCls = usePrefixCls('formily-select-table', props) @@ -394,11 +394,4 @@ const TableColumn: React.FC< SelectTable.Column = TableColumn -SelectTable.defaultProps = { - showSearch: false, - valueType: 'all', - primaryKey: 'key', - mode: 'multiple', -} - export default SelectTable diff --git a/packages/next/src/space/index.tsx b/packages/next/src/space/index.tsx index e2f270ab8cd..9e3a7437bc0 100644 --- a/packages/next/src/space/index.tsx +++ b/packages/next/src/space/index.tsx @@ -21,9 +21,9 @@ const spaceSize = { } export const Space: React.FC> = ({ - direction, + direction = 'horizontal', size, - align, + align = 'start', ...props }) => { const layout = useFormLayout() @@ -67,9 +67,4 @@ export const Space: React.FC> = ({ ) } -Space.defaultProps = { - direction: 'horizontal', - align: 'start', -} - export default Space