diff --git a/packages/antd/docs/components/ArrayCollapse.md b/packages/antd/docs/components/ArrayCollapse.md index 78dc312828d..842fc090636 100644 --- 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, + }} > { title="添加条目" /> + + + + + + + + + + 提交 @@ -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 index 32a9af2db53..8183ca85afa 100644 --- 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 & + +export interface IArrayCollapseProps extends CollapseProps { + defaultOpenPanelCount?: number +} +type ComposedArrayCollapse = React.FC & ArrayBaseMixins & { CollapsePanel?: React.FC } @@ -51,7 +55,7 @@ const isOperationComponent = (schema: ISchema) => { ) } export const ArrayCollapse: ComposedArrayCollapse = observer( - (props: CollapseProps) => { + (props: IArrayCollapseProps) => { const field = useField() const schema = useFieldSchema() @@ -77,11 +81,16 @@ export const ArrayCollapse: ComposedArrayCollapse = observer( ) } + const [activeKeys, setActiveKeys] = useState>( + Array.from({ length: props?.defaultOpenPanelCount || 1 }).map((_, i) => i) + ) + const renderItems = () => { return ( {}} + 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 ( - + setActiveKeys(activeKeys.concat(index))}> {renderEmpty()} {renderItems()} {renderAddition()} diff --git a/packages/json-schema/src/types.ts b/packages/json-schema/src/types.ts index 1f7a1b59c91..e3611e17aa7 100644 --- a/packages/json-schema/src/types.ts +++ b/packages/json-schema/src/types.ts @@ -129,7 +129,10 @@ export interface ISchemaTransformerOptions extends ISchemaFieldFactoryOptions { } export type Stringify

= { - [key in keyof P]?: P[key] | string + /** + * Use `string & {}` instead of string to keep Literal Type for ISchema#component and ISchema#decorator + */ + [key in keyof P]?: P[key] | (string & {}) } export type ISchema< diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 395c980ab06..a7c37ec8336 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -144,7 +144,7 @@ export type ReactComponentPropsByPathValue< ? Rest extends ReactComponentPath ? ReactComponentPropsByPathValue : never - : never + : React.ComponentProps : P extends keyof T ? React.ComponentProps : never