feat(core): support ArrayBase component

packages/antd/src/array-base/index.tsx

@@ -10,6 +10,7 @@ import {
 import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
 import { ButtonProps } from 'antd/lib/button'
 import { useField } from '@formily/react'
+import { isValid } from '@formily/shared'
 import { useSchema } from '@formily/react-schema-field'
 import { Schema } from 'packages/json-schema'
 import { SortableHandle } from 'react-sortable-hoc'
@@ -61,6 +62,20 @@ const useIndex = () => {
   return useContext(ItemContext)?.index
 }
 
+const getDefaultValue = (defaultValue: any, schema: Schema) => {
+  if (isValid(defaultValue)) return defaultValue
+  if (Array.isArray(schema?.items))
+    return getDefaultValue(defaultValue, schema.items[0])
+  if (schema?.items?.type === 'array') return []
+  if (schema?.items?.type === 'boolean') return true
+  if (schema?.items?.type === 'date') return ''
+  if (schema?.items?.type === 'datetime') return ''
+  if (schema?.items?.type === 'number') return 0
+  if (schema?.items?.type === 'object') return {}
+  if (schema?.items?.type === 'string') return ''
+  return null
+}
+
 export const ArrayBase: ComposedArrayBase = (props) => {
   const field = useField<Formily.Core.Models.ArrayField>()
   const schema = useSchema()
@@ -93,7 +108,7 @@ ArrayBase.Index = () => {
 
 ArrayBase.Addition = (props) => {
   const self = useField()
-  const base = useArray()
+  const array = useArray()
   const prefixCls = usePrefixCls('formily-array-base')
   return (
     <Button
@@ -102,10 +117,11 @@ ArrayBase.Addition = (props) => {
       {...props}
       className={cls(`${prefixCls}-addition`, props.className)}
       onClick={(e) => {
+        const defaultValue = getDefaultValue(props.defaultValue, array.schema)
         if (props.method === 'unshift') {
-          base?.field?.unshift({})
+          array?.field?.unshift(defaultValue)
         } else {
-          base?.field?.push({})
+          array?.field?.push(defaultValue)
         }
       }}
       icon={<PlusOutlined />}

packages/next/src/array-base/index.tsx

@@ -7,6 +7,7 @@ import {
   PlusOutlined,
   MenuOutlined,
 } from '@ant-design/icons'
+import { isValid } from '@formily/shared'
 import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
 import { ButtonProps } from '@alifd/next/lib/button'
 import { useField } from '@formily/react'
@@ -19,6 +20,7 @@ import cls from 'classnames'
 interface IAdditionProps extends ButtonProps {
   title?: string
   method?: 'push' | 'unshift'
+  defaultValue?: any
 }
 
 interface IContext {
@@ -61,6 +63,20 @@ const useIndex = () => {
   return useContext(ItemContext)?.index
 }
 
+const getDefaultValue = (defaultValue: any, schema: Schema) => {
+  if (isValid(defaultValue)) return defaultValue
+  if (Array.isArray(schema?.items))
+    return getDefaultValue(defaultValue, schema.items[0])
+  if (schema?.items?.type === 'array') return []
+  if (schema?.items?.type === 'boolean') return true
+  if (schema?.items?.type === 'date') return ''
+  if (schema?.items?.type === 'datetime') return ''
+  if (schema?.items?.type === 'number') return 0
+  if (schema?.items?.type === 'object') return {}
+  if (schema?.items?.type === 'string') return ''
+  return null
+}
+
 export const ArrayBase: ComposedArrayBase = (props) => {
   const field = useField<Formily.Core.Models.ArrayField>()
   const schema = useSchema()
@@ -101,10 +117,11 @@ ArrayBase.Addition = (props) => {
       className={cls(`${prefixCls}-addition`, props.className)}
       style={{ display: 'block', width: '100%', ...props.style }}
       onClick={() => {
+        const defaultValue = getDefaultValue(props.defaultValue, array.schema)
         if (props.method === 'unshift') {
-          array?.field?.unshift(null)
+          array?.field?.unshift(defaultValue)
         } else {
-          array?.field?.push(null)
+          array?.field?.push(defaultValue)
         }
       }}
     >

packages/next/src/array-base/main.scss

@@ -7,7 +7,7 @@ $array-base-prefix-cls: $css-prefix+"formily-array-base";
   transition: all .25s ease-in-out;
   color: $color-text1-3;
   font-size: 16px;
-  margin-right: 10px;
+  margin-right: 6px;
 
   &:hover {
     color: $color-text1-1;
@@ -22,7 +22,7 @@ $array-base-prefix-cls: $css-prefix+"formily-array-base";
   transition: all .25s ease-in-out;
   color: $color-text1-3;
   font-size: 16px;
-  margin-right: 10px;
+  margin-right: 6px;
 
   &:hover {
     color: $color-text1-1;
@@ -33,7 +33,7 @@ $array-base-prefix-cls: $css-prefix+"formily-array-base";
   transition: all .25s ease-in-out;
   color: $color-text1-3;
   font-size: 16px;
-  margin-right: 10px;
+  margin-right: 6px;
 
   &:hover {
     color: $color-text1-1;

packages/next/src/array-items/index.tsx

@@ -101,4 +101,6 @@ ArrayItems.Item = (props) => {
   )
 }
 
+ArrayBase.mixin(ArrayItems)
+
 export default ArrayItems

packages/next/src/index.tsx

@@ -1,4 +1,5 @@
 import './style'
+export * from './array-base'
 export * from './array-table'
 export * from './array-cards'
 export * from './array-items'

packages/next/src/style.ts

@@ -10,6 +10,7 @@ import './switch/style'
 import './time-picker/style'
 import './transfer/style'
 import './tree-select/style'
+import './array-base/style'
 import './array-cards/style'
 import './array-items/style'
 import './array-table/style'