fix(components): 🩹 replace defaultProps by default parameters (#49)

Form 组件 component 无法获取到 form, 造成渲染失败

Co-authored-by: xiaochao.yang <xiaochao.yang@relxtech.com>

Author: charlzyx

packages/components/src/__builtins__/portal.tsx

@@ -11,27 +11,26 @@ const PortalMap = observable(new Map<string | symbol, React.ReactNode>())
 
 export const createPortalProvider = (id: string | symbol) => {
   const Portal: ReactFC<IPortalProps> = (props) => {
-    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 <></>
-            const portal = PortalMap.get(props.id)
+            if (portalId!) return <></>
+            const portal = PortalMap.get(portalId)
             if (portal) return createPortal(portal, document.body)
             return <></>
           }}
         </Observer>
       </Fragment>
     )
   }
-  Portal.defaultProps = {
-    id,
-  }
+
   return Portal
 }
 

packages/components/src/array-collapse/index.tsx

@@ -79,10 +79,7 @@ const InternalArrayCollapse: ReactFC<IArrayCollapseProps> = observer(
     const field = useField<ArrayField>()
     const dataSource = Array.isArray(field.value) ? field.value : []
     const [activeKeys, setActiveKeys] = useState<number[]>(
-      takeDefaultActiveKeys(
-        dataSource.length,
-        props.defaultOpenPanelCount as number
-      )
+      takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount ?? 5)
     )
     const schema = useFieldSchema()
     const prefixCls = usePrefixCls('formily-array-collapse', props)
@@ -93,7 +90,7 @@ const InternalArrayCollapse: ReactFC<IArrayCollapseProps> = observer(
         setActiveKeys(
           takeDefaultActiveKeys(
             dataSource.length,
-            props.defaultOpenPanelCount as number
+            props.defaultOpenPanelCount ?? 5
           )
         )
       }
@@ -248,8 +245,4 @@ export const ArrayCollapse = Object.assign(
 )
 ArrayCollapse.displayName = 'ArrayCollapse'
 
-ArrayCollapse.defaultProps = {
-  defaultOpenPanelCount: 5,
-}
-
 export default ArrayCollapse

packages/components/src/form-button-group/index.tsx

@@ -59,7 +59,7 @@ function getDefaultBackground() {
 }
 
 export const FormButtonGroup: ComposedButtonGroup = ({
-  align,
+  align = 'left',
   gutter,
   ...props
 }) => {
@@ -85,10 +85,6 @@ export const FormButtonGroup: ComposedButtonGroup = ({
   )
 }
 
-FormButtonGroup.defaultProps = {
-  align: 'left',
-}
-
 FormButtonGroup.FormItem = ({ gutter, ...props }) => {
   return (
     <BaseItem
@@ -111,7 +107,7 @@ FormButtonGroup.FormItem = ({ gutter, ...props }) => {
   )
 }
 
-FormButtonGroup.Sticky = ({ align, ...props }) => {
+FormButtonGroup.Sticky = ({ align = 'left', ...props }) => {
   const ref = useRef(null)
   const [color, setColor] = useState('transparent')
   const prefixCls = usePrefixCls('formily-button-group')
@@ -154,8 +150,4 @@ FormButtonGroup.Sticky = ({ align, ...props }) => {
   )
 }
 
-FormButtonGroup.Sticky.defaultProps = {
-  align: 'left',
-}
-
 export default FormButtonGroup

packages/components/src/form-grid/index.tsx

@@ -81,18 +81,14 @@ const InternalFormGrid = observer(
 )
 
 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,
-}
-
 export const FormGrid = Object.assign(InternalFormGrid, {
   createFormGrid,
   useFormGrid,

packages/components/src/form-layout/index.tsx

@@ -65,7 +65,14 @@ export const FormLayout: React.FC<React.PropsWithChildren<IFormLayoutProps>> & {
   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 })
@@ -108,10 +115,6 @@ export const FormLayout: React.FC<React.PropsWithChildren<IFormLayoutProps>> & {
   )
 }
 
-FormLayout.defaultProps = {
-  shallow: true,
-}
-
 FormLayout.useFormDeepLayout = useFormDeepLayout
 FormLayout.useFormShallowLayout = useFormShallowLayout
 FormLayout.useFormLayout = useFormLayout

packages/components/src/form/index.tsx

@@ -23,7 +23,7 @@ export interface FormProps extends IFormLayoutProps {
 
 export const Form: React.FC<React.PropsWithChildren<FormProps>> = ({
   form,
-  component,
+  component = 'form',
   onAutoSubmit,
   onAutoSubmitFailed,
   previewTextPlaceholder,
@@ -55,8 +55,4 @@ export const Form: React.FC<React.PropsWithChildren<FormProps>> = ({
   return renderContent(top)
 }
 
-Form.defaultProps = {
-  component: 'form',
-}
-
 export default Form

packages/components/src/select-table/index.tsx

@@ -147,11 +147,11 @@ const addPrimaryKey = (dataSource, rowKey, primaryKey) =>
 
 const InternalSelectTable: ReactFC<ISelectTableProps> = observer((props) => {
   const {
-    mode,
+    mode = 'multiple',
     dataSource: propsDataSource,
     optionAsValue,
-    valueType,
-    showSearch,
+    valueType = 'all',
+    showSearch = false,
     filterOption,
     filterSort,
     onSearch,
@@ -160,7 +160,7 @@ const InternalSelectTable: ReactFC<ISelectTableProps> = observer((props) => {
     value,
     onChange,
     rowSelection,
-    primaryKey: rowKey,
+    primaryKey: rowKey = 'key',
     ...otherTableProps
   } = props
   const prefixCls = usePrefixCls('formily-select-table', props)
@@ -422,11 +422,4 @@ export const SelectTable = Object.assign(InternalSelectTable, {
   Column: TableColumn,
 })
 
-SelectTable.defaultProps = {
-  showSearch: false,
-  valueType: 'all',
-  primaryKey: 'key',
-  mode: 'multiple',
-}
-
 export default SelectTable

packages/components/src/transfer/index.tsx

@@ -2,6 +2,7 @@ import { isVoidField } from '@formily/core'
 import { connect, mapProps } from '@formily/react'
 import { Transfer as AntdTransfer } from 'antd'
 
+const renderTitle = (item) => item.title ?? null
 export const Transfer = connect(
   AntdTransfer,
   mapProps(
@@ -12,6 +13,7 @@ export const Transfer = connect(
       if (isVoidField(field)) return props
       return {
         ...props,
+        render: props.render || renderTitle,
         dataSource:
           field.dataSource?.map((item) => {
             return {
@@ -25,8 +27,4 @@ export const Transfer = connect(
   )
 )
 
-Transfer.defaultProps = {
-  render: (item) => item.title ?? null,
-}
-
 export default Transfer