From 09df9cc6f052080de05d4db2487197f7fec3e652 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B5=E7=A5=BA?= Date: Thu, 21 Nov 2024 15:09:17 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20[breadcrumb]=20=E4=BF=AE=E5=A4=8Dtypescr?= =?UTF-8?q?ipt=E7=B1=BB=E5=9E=8B=E6=8A=A5=E9=94=99=20fix=20#950?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/breadcrumb/breadcrumb.tsx | 17 +++++++++++------ components/breadcrumb/demo/basic.md | 3 ++- .../breadcrumb/demo/breadcrumb-adaptive.md | 3 ++- .../breadcrumb/demo/breadcrumb-color-model.md | 3 ++- components/breadcrumb/demo/breadcrumb-icon.md | 3 ++- .../breadcrumb/demo/breadcrumb-item-dropdown.md | 3 ++- .../breadcrumb/demo/breadcrumb-path-href.md | 7 ++++--- .../breadcrumb/demo/breadcrumb-separator.md | 3 ++- components/breadcrumb/interface.ts | 2 +- components/index.tsx | 2 ++ 10 files changed, 30 insertions(+), 16 deletions(-) diff --git a/components/breadcrumb/breadcrumb.tsx b/components/breadcrumb/breadcrumb.tsx index 820d8582..4883bf4d 100644 --- a/components/breadcrumb/breadcrumb.tsx +++ b/components/breadcrumb/breadcrumb.tsx @@ -8,6 +8,8 @@ import Icon from '../icon' import Tooltip from '../tooltip' import { cloneDeep } from 'lodash' +export type { IBreadcrumbProps } from './interface' + const Breadcrumb = (props: IBreadcrumbProps): FunctionComponentElement => { const { getPrefixCls, prefixCls, compDefaultProps: userDefaultProps } = useContext(ConfigContext) const breadcrumbProps = getCompProps('Breadcrumb', userDefaultProps, props) @@ -23,8 +25,8 @@ const Breadcrumb = (props: IBreadcrumbProps): FunctionComponentElement(null) const breadcrumbHideIconRef = useRef(null) const [itemsConfig, setItemsConfig] = React.useState(items) - const [itemsArray, setItemsArray] = React.useState() - const [breadcrumbWidth, setBreadcrumbWidth] = React.useState() + const [itemsArray, setItemsArray] = React.useState([]) + const [breadcrumbWidth, setBreadcrumbWidth] = React.useState(0) const [openEllipsis, setOpenEllipsis] = React.useState(false) const breadcrumbPrefixCls = getPrefixCls!(prefixCls, 'breadcrumb', customPrefixcls) @@ -125,15 +127,18 @@ const Breadcrumb = (props: IBreadcrumbProps): FunctionComponentElement { - const isMore = itemsConfig?.some((item: any) => { - return item?.title?.props?.children?.type?.displayName === 'Tooltip' + const isMore = itemsConfig?.some((item: IBreadcrumbItem) => { + if (React.isValidElement(item?.title)) { + return item?.title?.props?.children?.type?.displayName === 'Tooltip' + } + return false }) setOpenEllipsis(isMore && itemsConfig.length === MIN_ITEM) }, [itemsConfig]) useEffect(() => { if (breadcrumbRef?.current) { - const itemsArray = Array.from(breadcrumbRef.current.children, (item: any, index: number) => { + const itemsArray = Array.from(breadcrumbRef.current.children, (item: HTMLElement, index: number) => { return { width: item.offsetWidth, index: index, @@ -157,7 +162,7 @@ const Breadcrumb = (props: IBreadcrumbProps): FunctionComponentElement window.removeEventListener('resize', () => { - getItemsConfig(itemsArray, breadcrumbWidth as any) + getItemsConfig(itemsArray, breadcrumbWidth) }) }, [itemsArray, breadcrumbWidth]) diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md index 3bd10123..6b701677 100644 --- a/components/breadcrumb/demo/basic.md +++ b/components/breadcrumb/demo/basic.md @@ -9,10 +9,11 @@ order: 0 import React from 'react' import ReactDOM from 'react-dom' import { Breadcrumb } from '@kdcloudjs/kdesign' +import type { IBreadcrumbProps } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { // 改下面的代码 - const config = [ + const config: IBreadcrumbProps['items'] = [ { title: 'KDesign', href: '#', diff --git a/components/breadcrumb/demo/breadcrumb-adaptive.md b/components/breadcrumb/demo/breadcrumb-adaptive.md index 049b7cbd..3ee3e668 100644 --- a/components/breadcrumb/demo/breadcrumb-adaptive.md +++ b/components/breadcrumb/demo/breadcrumb-adaptive.md @@ -9,10 +9,11 @@ order: 6 import React from 'react' import ReactDOM from 'react-dom' import { Breadcrumb } from '@kdcloudjs/kdesign' +import type { IBreadcrumbProps } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { // 改下面的代码 - const config = [ + const config: IBreadcrumbProps['items'] = [ { title: 'KDesign', href: 'https://kingdee.design/', diff --git a/components/breadcrumb/demo/breadcrumb-color-model.md b/components/breadcrumb/demo/breadcrumb-color-model.md index f222597f..d4a90085 100644 --- a/components/breadcrumb/demo/breadcrumb-color-model.md +++ b/components/breadcrumb/demo/breadcrumb-color-model.md @@ -9,10 +9,11 @@ order: 1 import React from 'react' import ReactDOM from 'react-dom' import { Breadcrumb } from '@kdcloudjs/kdesign' +import type { IBreadcrumbProps } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { // 改下面的代码 - const config = [ + const config: IBreadcrumbProps['items'] = [ { title: 'KDesign', href: '#', diff --git a/components/breadcrumb/demo/breadcrumb-icon.md b/components/breadcrumb/demo/breadcrumb-icon.md index 197b9b80..4ec1a61a 100644 --- a/components/breadcrumb/demo/breadcrumb-icon.md +++ b/components/breadcrumb/demo/breadcrumb-icon.md @@ -9,10 +9,11 @@ order: 2 import React from 'react' import ReactDOM from 'react-dom' import { Breadcrumb, Icon } from '@kdcloudjs/kdesign' +import type { IBreadcrumbProps } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { // 改下面的代码 - const config = [ + const config: IBreadcrumbProps['items'] = [ { title: 'KDesign', icon: , diff --git a/components/breadcrumb/demo/breadcrumb-item-dropdown.md b/components/breadcrumb/demo/breadcrumb-item-dropdown.md index b9914c6b..f22f9fc6 100644 --- a/components/breadcrumb/demo/breadcrumb-item-dropdown.md +++ b/components/breadcrumb/demo/breadcrumb-item-dropdown.md @@ -9,10 +9,11 @@ order: 4 import React from 'react' import ReactDOM from 'react-dom' import { Breadcrumb } from '@kdcloudjs/kdesign' +import type { IBreadcrumbProps } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { // 改下面的代码 - const config = [ + const config: IBreadcrumbProps['items'] = [ { title: 'KDesign', href: '#', diff --git a/components/breadcrumb/demo/breadcrumb-path-href.md b/components/breadcrumb/demo/breadcrumb-path-href.md index a14c4b1e..8320e859 100644 --- a/components/breadcrumb/demo/breadcrumb-path-href.md +++ b/components/breadcrumb/demo/breadcrumb-path-href.md @@ -8,11 +8,12 @@ order: 5 ```jsx import React from 'react' import ReactDOM from 'react-dom' -import { Breadcrumb, Icon } from '@kdcloudjs/kdesign' +import { Breadcrumb } from '@kdcloudjs/kdesign' +import type { IBreadcrumbProps } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { // 改下面的代码 - const config1 = [ + const config1: IBreadcrumbProps['items'] = [ { title: 'KDesign', href: 'https://kingdee.design/', @@ -25,7 +26,7 @@ const Demo: React.FC = () => { title: 'Breadcrumb', }, ] - const config2 = [ + const config2: IBreadcrumbProps['items'] = [ { title: 'KDesign', path: '/KUI', diff --git a/components/breadcrumb/demo/breadcrumb-separator.md b/components/breadcrumb/demo/breadcrumb-separator.md index 1c2a5f9a..a99b81a5 100644 --- a/components/breadcrumb/demo/breadcrumb-separator.md +++ b/components/breadcrumb/demo/breadcrumb-separator.md @@ -9,10 +9,11 @@ order: 3 import React from 'react' import ReactDOM from 'react-dom' import { Breadcrumb, Icon } from '@kdcloudjs/kdesign' +import type { IBreadcrumbProps } from '@kdcloudjs/kdesign' const Demo: React.FC = () => { // 改下面的代码 - const config = [ + const config: IBreadcrumbProps['items'] = [ { title: 'KDesign', href: '#', diff --git a/components/breadcrumb/interface.ts b/components/breadcrumb/interface.ts index e6d4dffd..db555385 100644 --- a/components/breadcrumb/interface.ts +++ b/components/breadcrumb/interface.ts @@ -10,7 +10,7 @@ export interface IBreadcrumbProps { className?: string // 类名 colorModel?: ColorModelType // 颜色模式，默认是 'emphasize' prefixCls?: string // 样式前缀 - items: Array // 面包屑导航的各项，支持传入 ReactNode 类型 + items?: Array // 面包屑导航的各项，支持传入 ReactNode 类型 separator?: ReactNode // 分隔符，默认是 '/' children?: ReactNode // 子元素 onItemClick?: (item: IBreadcrumbItem, index: number) => void // 点击面包屑导航的回调函数 diff --git a/components/index.tsx b/components/index.tsx index d9e45a1c..dc84d5a0 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -19,6 +19,8 @@ export type { IAlertProps } from './alert' export { default as Breadcrumb } from './breadcrumb' +export type { IBreadcrumbProps } from './breadcrumb' + export { default as Button } from './button' export { default as Card } from './card'