feat(antd): support defaultOpenPanelCount for ArrayCollapse (#1505)

alibaba · May 25, 2021 · e9e3f74 · e9e3f74
1 parent ddd8fc9
commit e9e3f74
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 13 deletions.
diff --git a/packages/antd/docs/components/ArrayCollapse.md b/packages/antd/docs/components/ArrayCollapse.md
@@ -37,6 +37,9 @@ export default () => {
           maxItems={3}
           x-decorator="FormItem"
           x-component="ArrayCollapse"
+          x-component-props={{
+            defaultOpenPanelCount: 3,
+          }}
         >
           <SchemaField.Object
             x-component="ArrayCollapse.CollapsePanel"
@@ -90,6 +93,41 @@ export default () => {
             title="添加条目"
           />
         </SchemaField.Array>
+        <SchemaField.Array
+          name="string_array_unshift"
+          maxItems={3}
+          x-decorator="FormItem"
+          x-component="ArrayCollapse"
+          x-component-props={{
+            defaultOpenPanelCount: 3,
+          }}
+        >
+          <SchemaField.Object
+            x-component="ArrayCollapse.CollapsePanel"
+            x-component-props={{
+              header: '字符串数组',
+            }}
+          >
+            <SchemaField.Void x-component="ArrayCollapse.Index" />
+            <SchemaField.String
+              name="input"
+              x-decorator="FormItem"
+              title="Input"
+              required
+              x-component="Input"
+            />
+            <SchemaField.Void x-component="ArrayCollapse.Remove" />
+            <SchemaField.Void x-component="ArrayCollapse.MoveUp" />
+            <SchemaField.Void x-component="ArrayCollapse.MoveDown" />
+          </SchemaField.Object>
+          <SchemaField.Void
+            x-component="ArrayCollapse.Addition"
+            title="添加条目（unshift）"
+            x-component-props={{
+              method: 'unshift',
+            }}
+          />
+        </SchemaField.Array>
       </SchemaField>
       <FormButtonGroup>
         <Submit onSubmit={console.log}>提交</Submit>
@@ -216,6 +254,54 @@ const schema = {
         },
       },
     },
+    array_unshift: {
+      type: 'array',
+      'x-component': 'ArrayCollapse',
+      maxItems: 3,
+      'x-decorator': 'FormItem',
+      items: {
+        type: 'object',
+        'x-component': 'ArrayCollapse.CollapsePanel',
+        'x-component-props': {
+          header: '对象数组',
+        },
+        properties: {
+          index: {
+            type: 'void',
+            'x-component': 'ArrayCollapse.Index',
+          },
+          input: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            title: 'Input',
+            required: true,
+            'x-component': 'Input',
+          },
+          remove: {
+            type: 'void',
+            'x-component': 'ArrayCollapse.Remove',
+          },
+          moveUp: {
+            type: 'void',
+            'x-component': 'ArrayCollapse.MoveUp',
+          },
+          moveDown: {
+            type: 'void',
+            'x-component': 'ArrayCollapse.MoveDown',
+          },
+        },
+      },
+      properties: {
+        addition: {
+          type: 'void',
+          title: '添加条目(unshift)',
+          'x-component': 'ArrayCollapse.Addition',
+          'x-component-props': {
+            method: 'unshift',
+          },
+        },
+      },
+    },
   },
 }
 
@@ -451,11 +537,15 @@ export default () => {
 
 ## API
 
-### ArrayCards
+### ArrayCollapse
+
+参考 https://ant.design/components/collapse-cn/
+
+### ArrayCollapse.CollapsePanel
 
-参考 https://ant.design/components/card-cn/
+参考 https://ant.design/components/collapse-cn/
 
-### ArrayCards.Addition
+### ArrayCollapse.Addition
 
 > 添加按钮
 
@@ -470,7 +560,7 @@ export default () => {
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCards.Remove
+### ArrayCollapse.Remove
 
 > 删除按钮
 
@@ -482,7 +572,7 @@ export default () => {
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCards.MoveDown
+### ArrayCollapse.MoveDown
 
 > 下移按钮
 
@@ -494,7 +584,7 @@ export default () => {
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCards.MoveUp
+### ArrayCollapse.MoveUp
 
 > 上移按钮
 
@@ -506,12 +596,12 @@ export default () => {
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCards.Index
+### ArrayCollapse.Index
 
 > 索引渲染器
 
 无属性
 
-### ArrayItems.useIndex
+### ArrayCollapse.useIndex
 
 > 读取当前渲染行索引的 React Hook
diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx
@@ -13,11 +13,15 @@ import {
   observer,
   ISchema,
 } from '@formily/react'
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import ArrayBase, { ArrayBaseMixins } from '../array-base'
 import cls from 'classnames'
 import { usePrefixCls } from '../__builtins__'
-type ComposedArrayCollapse = React.FC<CollapseProps> &
+
+export interface IArrayCollapseProps extends CollapseProps {
+  defaultOpenPanelCount?: number
+}
+type ComposedArrayCollapse = React.FC<IArrayCollapseProps> &
   ArrayBaseMixins & {
     CollapsePanel?: React.FC<CollapsePanelProps>
   }
@@ -51,7 +55,7 @@ const isOperationComponent = (schema: ISchema) => {
   )
 }
 export const ArrayCollapse: ComposedArrayCollapse = observer(
-  (props: CollapseProps) => {
+  (props: IArrayCollapseProps) => {
     const field = useField<Formily.Core.Models.ArrayField>()
 
     const schema = useFieldSchema()
@@ -77,11 +81,16 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
       )
     }
 
+    const [activeKeys, setActiveKeys] = useState<Array<string | number>>(
+      Array.from({ length: props?.defaultOpenPanelCount || 1 }).map((_, i) => i)
+    )
+
     const renderItems = () => {
       return (
         <Collapse
           {...props}
-          onChange={() => {}}
+          activeKey={activeKeys}
+          onChange={(key: string[]) => setActiveKeys(key)}
           className={cls(`${prefixCls}-item`, props.className)}
         >
           {dataSource?.map((item, index) => {
@@ -168,7 +177,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
       )
     }
     return (
-      <ArrayBase>
+      <ArrayBase onAdd={(index) => setActiveKeys(activeKeys.concat(index))}>
         {renderEmpty()}
         {renderItems()}
         {renderAddition()}