fix(antd/next): fix arrayCollapse will throw error in accordion mode

alibaba · Jun 12, 2021 · 4c88ca7 · 4c88ca7
1 parent 3ef2bab
commit 4c88ca7
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 2 deletions.
diff --git a/designable/antd/src/locales/zh-CN.ts b/designable/antd/src/locales/zh-CN.ts
@@ -292,6 +292,13 @@ const FormTabLocale = {
   ],
 }
 
+const FormCollapseLocale = {
+  accordion: '手风琴模式',
+  collapsible: { title: '可折叠区域', dataSource: ['头部', '禁用'] },
+  ghost: '幽灵模式',
+  header: '头部内容',
+}
+
 const ComponentLocale = {
   ...FormLayoutLocale,
   ...InputLocale,
@@ -311,6 +318,7 @@ const ComponentLocale = {
   ...FormGridLocale,
   ...SpaceLocale,
   ...FormTabLocale,
+  ...FormCollapseLocale,
 }
 
 const FieldLocale = {

diff --git a/designable/antd/src/schemas/FormCollapse.ts b/designable/antd/src/schemas/FormCollapse.ts
@@ -0,0 +1,61 @@
+import { ISchema } from '@formily/react'
+
+export const FormCollapse: ISchema = {
+  type: 'object',
+  properties: {
+    accordion: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+    },
+    collapsible: {
+      type: 'string',
+      enum: ['header', 'disabled'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-component-props': {
+        defaultValue: 'header',
+        optionType: 'button',
+      },
+    },
+    ghost: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+    },
+    bordered: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+      'x-component-props': {
+        defaultChecked: true,
+      },
+    },
+  },
+}
+
+export const FormCollapse_o_CollapsePanel: ISchema = {
+  type: 'object',
+  properties: {
+    collapsible: {
+      type: 'string',
+      enum: ['header', 'disabled'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-component-props': {
+        defaultValue: 'header',
+        optionType: 'button',
+      },
+    },
+    header: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input',
+    },
+    extra: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input',
+    },
+  },
+}
diff --git a/designable/antd/src/schemas/index.ts b/designable/antd/src/schemas/index.ts
@@ -21,3 +21,4 @@ export * from './Switch'
 export * from './FormGrid'
 export * from './Space'
 export * from './FormTab'
+export * from './FormCollapse'
diff --git a/packages/antd/docs/components/ArrayCollapse.md b/packages/antd/docs/components/ArrayCollapse.md
@@ -39,6 +39,7 @@ export default () => {
           x-decorator="FormItem"
           x-component="ArrayCollapse"
           x-component-props={{
+            accordion: true,
             defaultOpenPanelCount: 3,
           }}
         >

diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx
@@ -14,6 +14,7 @@ import {
   observer,
   ISchema,
 } from '@formily/react'
+import { toArr } from '@formily/shared'
 import cls from 'classnames'
 import ArrayBase, { ArrayBaseMixins } from '../array-base'
 import { usePrefixCls } from '../__builtins__'
@@ -114,7 +115,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
         <Collapse
           {...props}
           activeKey={activeKeys}
-          onChange={(keys: string[]) => setActiveKeys(keys.map(Number))}
+          onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))}
           className={cls(`${prefixCls}-item`, props.className)}
         >
           {dataSource.map((item, index) => {

diff --git a/packages/next/docs/components/ArrayCollapse.md b/packages/next/docs/components/ArrayCollapse.md
@@ -39,6 +39,7 @@ export default () => {
           x-decorator="FormItem"
           x-component="ArrayCollapse"
           x-component-props={{
+            accordion: true,
             defaultOpenPanelCount: 3,
           }}
         >

diff --git a/packages/next/src/array-collapse/index.tsx b/packages/next/src/array-collapse/index.tsx
@@ -7,6 +7,7 @@ import {
   observer,
   ISchema,
 } from '@formily/react'
+import { toArr } from '@formily/shared'
 import cls from 'classnames'
 import ArrayBase, { ArrayBaseMixins } from '../array-base'
 import { usePrefixCls, Empty } from '../__builtins__'
@@ -109,7 +110,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
         <Collapse
           {...props}
           expandedKeys={expandKeys.map(String)}
-          onExpand={(keys: string[]) => setExpandKeys(keys.map(Number))}
+          onExpand={(keys: string[]) => setExpandKeys(toArr(keys).map(Number))}
           className={cls(`${prefixCls}-item`, props.className)}
         >
           {dataSource.map((item, index) => {