fix: FormTab components parseDefaultActiveKey (#802)

alibaba · Apr 16, 2020 · 2fb128b · 2fb128b
1 parent 6635106
commit 2fb128b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 21 deletions.
diff --git a/docs/zh-cn/schema-develop/form-layout.md b/docs/zh-cn/schema-develop/form-layout.md
@@ -548,7 +548,7 @@ const App = () => (
       actions={actions}
       onSubmit={v => console.log(v)}
     >
-      <FormTab name="tabs">
+      <FormTab name="tabs" defaultActiveKey={'tab-2'}>
         <FormTab.TabPane name="tab-1" tab="选项1">
           <Field
             type="string"

diff --git a/packages/antd-components/README.zh-cn.md b/packages/antd-components/README.zh-cn.md
@@ -2211,7 +2211,7 @@ const App = () => (
       actions={actions}
       onSubmit={v => console.log(v)}
     >
-      <FormTab name="tabs">
+      <FormTab name="tabs" defaultActiveKey={'tab-2'}>
         <FormTab.TabPane name="tab-1" tab="选项1">
           <Field
             type="string"

diff --git a/packages/antd-components/src/form-tab/index.tsx b/packages/antd-components/src/form-tab/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from 'react'
+import React, { Fragment, useEffect, useRef } from 'react'
 import {
   createControllerBox,
   ISchemaVirtualFieldComponentProps,
@@ -47,9 +47,11 @@ const parseTabItems = (items: any, hiddenKeys?: string[]) => {
   }, [])
 }
 
-const parseDefaultActiveKey = (props: any, items: any) => {
-  const { defaultActiveKey } = props
-  return defaultActiveKey ? defaultActiveKey : items[0] && items[0].key
+const parseDefaultActiveKey = (hiddenKeys: Array<string> = [], items: any, defaultActiveKey) => {
+  if(!hiddenKeys.includes(defaultActiveKey))return defaultActiveKey
+
+  const index = items.findIndex(item => !hiddenKeys.includes(item.key))
+  return index >= 0 ? items[index].key : ''
 }
 
 const parseChildrenErrors = (errors: any, target: string) => {
@@ -91,15 +93,16 @@ export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
   'tab',
   ({ form, schema, name, path }: ISchemaVirtualFieldComponentProps) => {
     const orderProperties = schema.getOrderProperties()
-    let { hiddenKeys, ...componentProps } = schema.getExtendsComponentProps()
+    let { hiddenKeys, defaultActiveKey, ...componentProps } = schema.getExtendsComponentProps()
     hiddenKeys = hiddenKeys || []
     const [{ activeKey, childrenErrors }, setFieldState] = useFieldState<
       ExtendsState
     >({
-      activeKey: parseDefaultActiveKey(schema, orderProperties),
+      activeKey: parseDefaultActiveKey(hiddenKeys, orderProperties, defaultActiveKey),
       childrenErrors: []
     })
-    const items = parseTabItems(orderProperties, hiddenKeys)
+    const itemsRef = useRef([])
+    itemsRef.current = parseTabItems(orderProperties, hiddenKeys)
     const update = (cur: string) => {
       form.notify(StateMap.ON_FORM_TAB_ACTIVE_KEY_CHANGE, {
         name,
@@ -111,9 +114,7 @@ export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
     useEffect(() => {
       if (Array.isArray(hiddenKeys)) {
         setFieldState({
-          activeKey: hiddenKeys.includes(activeKey)
-            ? items[0] && items[0].key
-            : activeKey
+          activeKey: parseDefaultActiveKey(hiddenKeys, orderProperties, defaultActiveKey)
         })
       }
     }, [hiddenKeys.length])
@@ -128,6 +129,7 @@ export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
       })
       EffectHooks.onTabActiveKeyChange$().subscribe(
         ({ value, name, path }: any = {}) => {
+          if(!itemsRef.current.map(item => item.key).includes(value))return
           matchUpdate(name, path, () => {
             setFieldState({
               activeKey: value
@@ -138,7 +140,7 @@ export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
     })
     return (
       <Tabs {...componentProps} activeKey={activeKey} onChange={update}>
-        {items.map(({ props, schema, key }) => {
+        {itemsRef.current.map(({ props, schema, key }) => {
           const currentPath = FormPath.parse(path).concat(key)
           return (
             <Tabs.TabPane

diff --git a/packages/next-components/README.zh-cn.md b/packages/next-components/README.zh-cn.md
@@ -2195,7 +2195,7 @@ const App = () => (
       actions={actions}
       onSubmit={v => console.log(v)}
     >
-      <FormTab name="tabs">
+      <FormTab name="tabs" defaultActiveKey={'tab-2'}>
         <FormTab.TabPane name="tab-1" tab="选项1">
           <Field
             type="string"

diff --git a/packages/next-components/src/form-tab/index.tsx b/packages/next-components/src/form-tab/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from 'react'
+import React, { Fragment, useEffect, useRef } from 'react'
 import {
   createControllerBox,
   ISchemaVirtualFieldComponentProps,
@@ -48,7 +48,9 @@ const parseTabItems = (items: any, hiddenKeys?: string[]) => {
 }
 
 
-const parseDefaultActiveKey = (hiddenKeys: Array<string> = [], items: any) => {
+const parseDefaultActiveKey = (hiddenKeys: Array<string> = [], items: any, defaultActiveKey) => {
+  if(!hiddenKeys.includes(defaultActiveKey))return defaultActiveKey
+
   const index = items.findIndex(item => !hiddenKeys.includes(item.key))
   return index >= 0 ? items[index].key : ''
 }
@@ -93,10 +95,13 @@ export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
     const [{ activeKey, childrenErrors }, setFieldState] = useFieldState<
       ExtendsState
     >({
-      activeKey: defaultActiveKey || parseDefaultActiveKey(hiddenKeys, orderProperties),,
+      activeKey: parseDefaultActiveKey(hiddenKeys, orderProperties, defaultActiveKey),
       childrenErrors: []
     })
-    const items = parseTabItems(orderProperties, hiddenKeys)
+
+    const itemsRef = useRef([])
+    itemsRef.current = parseTabItems(orderProperties, hiddenKeys)
+
     const matchUpdate = createMatchUpdate(name, path)
     const update = (cur: string) => {
       form.notify(StateMap.ON_FORM_TAB_ACTIVE_KEY_CHANGE, {
@@ -108,7 +113,7 @@ export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
     useEffect(() => {
       if (Array.isArray(hiddenKeys)) {
         setFieldState({
-          activeKey: parseDefaultActiveKey(hiddenKeys, orderProperties)
+          activeKey: parseDefaultActiveKey(hiddenKeys, orderProperties, defaultActiveKey)
         })
       }
     }, [hiddenKeys.length])
@@ -121,7 +126,8 @@ export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
           })
         }
       })
-      EffectHooks.onTabActiveKeyChange$().subscribe(({ value, name, path }) => {
+      EffectHooks.onTabActiveKeyChange$().subscribe(({ value, name, path }) => {   
+        if(!itemsRef.current.map(item => item.key).includes(value))return
         matchUpdate(name, path, () => {
           setFieldState({
             activeKey: value
@@ -136,7 +142,7 @@ export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
         activeKey={activeKey}
         onChange={update}
       >
-        {items.map(({ props, schema, key }) => {
+        {itemsRef.current.map(({ props, schema, key }) => {
           const currentPath = FormPath.parse(path).concat(key)
           return (
             <Tab.Item