Skip to content

Commit

Permalink
fix(antd/next): fix form tab type check issue (#3025)
Browse files Browse the repository at this point in the history
  • Loading branch information
@McDaddy
McDaddy authored Apr 7, 2022
1 parent 10503b8 commit f051135
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 87 deletions.
92 changes: 47 additions & 45 deletions packages/antd/src/form-tab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ export interface IFormTabPaneProps extends TabPaneProps {
}

type ComposedFormTab = React.FC<IFormTabProps> & {
TabPane?: React.FC<IFormTabPaneProps>
createFormTab?: (defaultActiveKey?: string) => IFormTab
TabPane: React.FC<IFormTabPaneProps>
createFormTab: (defaultActiveKey?: string) => IFormTab
}

const useTabs = () => {
Expand Down Expand Up @@ -60,52 +60,54 @@ const createFormTab = (defaultActiveKey?: string) => {
return markRaw(formTab)
}

export const FormTab: ComposedFormTab = observer(({ formTab, ...props }) => {
const field = useField()
const tabs = useTabs()
const _formTab = useMemo(() => {
return formTab ? formTab : createFormTab()
}, [])
const prefixCls = usePrefixCls('formily-tab', props)
const activeKey = props.activeKey || _formTab?.activeKey
export const FormTab: ComposedFormTab = observer(
({ formTab, ...props }: IFormTabProps) => {
const field = useField()
const tabs = useTabs()
const _formTab = useMemo(() => {
return formTab ? formTab : createFormTab()
}, [])
const prefixCls = usePrefixCls('formily-tab', props)
const activeKey = props.activeKey || _formTab?.activeKey

const badgedTab = (key: SchemaKey, props: any) => {
const errors = field.form.queryFeedbacks({
type: 'error',
address: `${field.address.concat(key)}.*`,
})
if (errors.length) {
return (
<Badge size="small" className="errors-badge" count={errors.length}>
{props.tab}
</Badge>
)
const badgedTab = (key: SchemaKey, props: any) => {
const errors = field.form.queryFeedbacks({
type: 'error',
address: `${field.address.concat(key)}.*`,
})
if (errors.length) {
return (
<Badge size="small" className="errors-badge" count={errors.length}>
{props.tab}
</Badge>
)
}
return props.tab
}
return props.tab
return (
<Tabs
{...props}
className={cls(prefixCls, props.className)}
activeKey={activeKey}
onChange={(key) => {
props.onChange?.(key)
formTab?.setActiveKey?.(key)
}}
>
{tabs.map(({ props, schema, name }, key) => (
<Tabs.TabPane
key={key}
{...props}
tab={badgedTab(name, props)}
forceRender
>
<RecursionField schema={schema} name={name} />
</Tabs.TabPane>
))}
</Tabs>
)
}
return (
<Tabs
{...props}
className={cls(prefixCls, props.className)}
activeKey={activeKey}
onChange={(key) => {
props.onChange?.(key)
formTab?.setActiveKey?.(key)
}}
>
{tabs.map(({ props, schema, name }, key) => (
<Tabs.TabPane
key={key}
{...props}
tab={badgedTab(name, props)}
forceRender
>
<RecursionField schema={schema} name={name} />
</Tabs.TabPane>
))}
</Tabs>
)
})
) as unknown as ComposedFormTab

const TabPane: React.FC<IFormTabPaneProps> = ({ children }) => {
return <Fragment>{children}</Fragment>
Expand Down
86 changes: 44 additions & 42 deletions packages/next/src/form-tab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export interface IFormTabPaneProps extends TabPaneProps {
}

type ComposedFormTab = React.FC<IFormTabProps> & {
TabPane?: React.FC<IFormTabPaneProps>
createFormTab?: (defaultActiveKey?: React.ReactText) => IFormTab
TabPane: React.FC<IFormTabPaneProps>
createFormTab: (defaultActiveKey?: React.ReactText) => IFormTab
}

const useTabs = () => {
Expand Down Expand Up @@ -64,49 +64,51 @@ const createFormTab = (defaultActiveKey?: string) => {
return markRaw(formTab)
}

export const FormTab: ComposedFormTab = observer(({ formTab, ...props }) => {
const field = useField()
const tabs = useTabs()
const _formTab = useMemo(() => {
return formTab ? formTab : createFormTab()
}, [])
const prefixCls = usePrefixCls('formily-tab', props)
const activeKey = props.activeKey || _formTab?.activeKey
export const FormTab: ComposedFormTab = observer(
({ formTab, ...props }: IFormTabProps) => {
const field = useField()
const tabs = useTabs()
const _formTab = useMemo(() => {
return formTab ? formTab : createFormTab()
}, [])
const prefixCls = usePrefixCls('formily-tab', props)
const activeKey = props.activeKey || _formTab?.activeKey

const badgedTab = (key: SchemaKey, props: any) => {
const errors = field.form.queryFeedbacks({
type: 'error',
address: `${field.address.concat(key)}.*`,
})
if (errors.length) {
return (
<Badge className="errors-badge" count={errors.length}>
{props.tab}
</Badge>
)
const badgedTab = (key: SchemaKey, props: any) => {
const errors = field.form.queryFeedbacks({
type: 'error',
address: `${field.address.concat(key)}.*`,
})
if (errors.length) {
return (
<Badge className="errors-badge" count={errors.length}>
{props.tab}
</Badge>
)
}
return props.tab
}
return props.tab
}

return (
<Tabs
{...props}
{...(isValid(activeKey) && { activeKey })}
className={cls(prefixCls, props.className)}
onChange={(key) => {
props.onChange?.(key)
formTab?.setActiveKey?.(key)
}}
lazyLoad={false}
>
{tabs.map(({ props, schema, name }, key) => (
<Tabs.Item key={key} {...props} tab={badgedTab(name, props)}>
<RecursionField schema={schema} name={name} />
</Tabs.Item>
))}
</Tabs>
)
})
return (
<Tabs
{...props}
{...(isValid(activeKey) && { activeKey })}
className={cls(prefixCls, props.className)}
onChange={(key) => {
props.onChange?.(key)
formTab?.setActiveKey?.(key)
}}
lazyLoad={false}
>
{tabs.map(({ props, schema, name }, key) => (
<Tabs.Item key={key} {...props} tab={badgedTab(name, props)}>
<RecursionField schema={schema} name={name} />
</Tabs.Item>
))}
</Tabs>
)
}
) as unknown as ComposedFormTab

const TabPane: React.FC<IFormTabPaneProps> = ({ children }) => {
return <Fragment>{children}</Fragment>
Expand Down

0 comments on commit f051135

Please sign in to comment.