From 2c2c070663138f4f6e11f596c1d11a4ec7236947 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Thu, 16 Dec 2021 17:20:18 +0800 Subject: [PATCH] perf: ts type, close #5044 --- components/_util/hooks/useConfigInject.ts | 5 +++-- components/_util/type.ts | 5 +++-- components/_util/vue-types/index.ts | 4 ++-- components/alert/index.tsx | 10 +++++----- components/anchor/AnchorLink.tsx | 2 +- components/avatar/Avatar.tsx | 2 +- components/badge/Badge.tsx | 2 +- components/button/buttonTypes.ts | 2 +- components/carousel/index.tsx | 4 ++-- components/cascader/index.tsx | 4 ++-- components/comment/index.tsx | 14 +++++++------- components/config-provider/renderEmpty.tsx | 4 ++-- components/descriptions/index.tsx | 6 +++--- components/drawer/index.tsx | 10 +++++----- components/form/FormItem.tsx | 6 +++--- components/layout/Sider.tsx | 2 +- components/menu/src/ItemGroup.tsx | 2 +- components/menu/src/MenuItem.tsx | 2 +- components/menu/src/SubMenu.tsx | 4 ++-- components/page-header/index.tsx | 10 +++++----- components/progress/Steps.tsx | 5 +++-- components/progress/progress.tsx | 6 +++--- components/progress/props.ts | 5 +++-- components/statistic/Statistic.tsx | 6 +++--- components/switch/index.tsx | 4 ++-- components/tag/index.tsx | 4 ++-- components/vc-image/src/Image.tsx | 2 +- components/vc-picker/panels/PanelBody.tsx | 2 +- components/vc-select/SelectTrigger.tsx | 5 +++-- components/vc-select/Selector/Input.tsx | 5 +++-- .../vc-select/Selector/MultipleSelector.tsx | 8 ++++---- components/vc-select/Selector/SingleSelector.tsx | 4 ++-- components/vc-select/Selector/index.tsx | 8 ++++---- components/vc-select/Selector/interface.ts | 4 ++-- components/vc-select/TransBtn.tsx | 7 ++++--- components/vc-select/generate.tsx | 15 ++++++++------- components/vc-select/interface/index.ts | 9 +++++---- components/vc-select/utils/legacyUtil.ts | 8 +++----- components/vc-select/utils/valueUtil.ts | 4 ++-- components/vc-tree-select/utils/legacyUtil.tsx | 4 ++-- components/vc-tree/props.ts | 2 +- components/vc-tree/utils/treeUtil.ts | 6 +++--- 42 files changed, 115 insertions(+), 108 deletions(-) diff --git a/components/_util/hooks/useConfigInject.ts b/components/_util/hooks/useConfigInject.ts index 256dfb922..d4ebde713 100644 --- a/components/_util/hooks/useConfigInject.ts +++ b/components/_util/hooks/useConfigInject.ts @@ -1,8 +1,9 @@ import type { RequiredMark } from '../../form/Form'; -import type { ComputedRef, UnwrapRef, VNodeChild } from 'vue'; +import type { ComputedRef, UnwrapRef } from 'vue'; import { computed, inject } from 'vue'; import type { ConfigProviderProps, Direction, SizeType } from '../../config-provider'; import { defaultConfigProvider } from '../../config-provider'; +import type { VueNode } from '../type'; export default ( name: string, @@ -20,7 +21,7 @@ export default ( requiredMark?: RequiredMark; }>; autoInsertSpaceInButton: ComputedRef; - renderEmpty?: ComputedRef<(componentName?: string) => VNodeChild | JSX.Element>; + renderEmpty?: ComputedRef<(componentName?: string) => VueNode>; virtual: ComputedRef; dropdownMatchSelectWidth: ComputedRef; getPopupContainer: ComputedRef; diff --git a/components/_util/type.ts b/components/_util/type.ts index 1759b1867..ed35b21a2 100644 --- a/components/_util/type.ts +++ b/components/_util/type.ts @@ -1,4 +1,4 @@ -import type { App, PropType, VNodeChild, Plugin, Ref } from 'vue'; +import type { App, PropType, Plugin, Ref, VNode } from 'vue'; // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead export const tuple = (...args: T) => args; @@ -29,7 +29,8 @@ export interface PropOptions { validator?(value: unknown): boolean; } -export type VueNode = VNodeChild | JSX.Element; +declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void; +export type VueNode = VNodeChildAtom | VNodeChildAtom[] | JSX.Element; export const withInstall = (comp: T) => { const c = comp as any; diff --git a/components/_util/vue-types/index.ts b/components/_util/vue-types/index.ts index 33fcb33ed..c46f7a3b4 100644 --- a/components/_util/vue-types/index.ts +++ b/components/_util/vue-types/index.ts @@ -26,7 +26,7 @@ PropTypes.extend([ default: undefined, }, { - name: 'VNodeChild', + name: 'VueNode', getter: true, type: null, }, @@ -39,5 +39,5 @@ export function withUndefined(type: T): T { export default PropTypes as VueTypesInterface & { readonly looseBool: VueTypeValidableDef; readonly style: VueTypeValidableDef; - readonly VNodeChild: VueTypeValidableDef; + readonly VueNode: VueTypeValidableDef; }; diff --git a/components/alert/index.tsx b/components/alert/index.tsx index 3e2851e94..2d33dcab9 100644 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -45,19 +45,19 @@ const alertProps = { /** Whether Alert can be closed */ closable: PropTypes.looseBool, /** Close text to show */ - closeText: PropTypes.VNodeChild, + closeText: PropTypes.any, /** Content of Alert */ - message: PropTypes.VNodeChild, + message: PropTypes.any, /** Additional content of Alert */ - description: PropTypes.VNodeChild, + description: PropTypes.any, /** Trigger when animation ending of Alert */ afterClose: PropTypes.func.def(noop), /** Whether to show icon */ showIcon: PropTypes.looseBool, prefixCls: PropTypes.string, banner: PropTypes.looseBool, - icon: PropTypes.VNodeChild, - onClose: PropTypes.VNodeChild, + icon: PropTypes.any, + onClose: PropTypes.any, }; export type AlertProps = Partial>; diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index c1c644361..88a78ce1e 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -9,7 +9,7 @@ import { useInjectAnchor } from './context'; const anchorLinkProps = { prefixCls: PropTypes.string, href: PropTypes.string.def('#'), - title: PropTypes.VNodeChild, + title: PropTypes.any, target: PropTypes.string, }; diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx index e63d0833f..0360f5435 100644 --- a/components/avatar/Avatar.tsx +++ b/components/avatar/Avatar.tsx @@ -23,7 +23,7 @@ export const avatarProps = { src: PropTypes.string, /** Srcset of image avatar */ srcset: PropTypes.string, - icon: PropTypes.VNodeChild, + icon: PropTypes.any, alt: PropTypes.string, gap: PropTypes.number, draggable: PropTypes.bool, diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx index 960cc26da..6625d2b85 100644 --- a/components/badge/Badge.tsx +++ b/components/badge/Badge.tsx @@ -26,7 +26,7 @@ export const badgeProps = { // sync antd@4.6.0 size: PropTypes.oneOf(tuple('default', 'small')).def('default'), color: PropTypes.string, - text: PropTypes.VNodeChild, + text: PropTypes.any, offset: PropTypes.arrayOf(PropTypes.oneOfType([String, Number])), numberStyle: PropTypes.style, title: PropTypes.string, diff --git a/components/button/buttonTypes.ts b/components/button/buttonTypes.ts index 3ed0857f9..70f49a4ef 100644 --- a/components/button/buttonTypes.ts +++ b/components/button/buttonTypes.ts @@ -36,7 +36,7 @@ const buttonProps = () => ({ ghost: PropTypes.looseBool, block: PropTypes.looseBool, danger: PropTypes.looseBool, - icon: PropTypes.VNodeChild, + icon: PropTypes.any, href: PropTypes.string, target: PropTypes.string, title: PropTypes.string, diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index ef4e228e1..1edfcdc8e 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -20,8 +20,8 @@ export const CarouselProps = { // style: PropTypes.React.CSSProperties, prefixCls: PropTypes.string, accessibility: PropTypes.looseBool, - nextArrow: PropTypes.VNodeChild, - prevArrow: PropTypes.VNodeChild, + nextArrow: PropTypes.any, + prevArrow: PropTypes.any, pauseOnHover: PropTypes.looseBool, // className: PropTypes.string, adaptiveHeight: PropTypes.looseBool, diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 392a24fe8..95cf0b89f 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -133,7 +133,7 @@ const cascaderProps = { type: [Boolean, Object] as PropType, default: undefined as PropType, }, - notFoundContent: PropTypes.VNodeChild, + notFoundContent: PropTypes.any, loadData: PropTypes.func, /** 次级菜单的展开方式，可选 'click' 和 'hover' */ expandTrigger: PropTypes.oneOf(tuple('click', 'hover')), @@ -147,7 +147,7 @@ const cascaderProps = { popupVisible: PropTypes.looseBool, fieldNames: { type: Object as PropType }, autofocus: PropTypes.looseBool, - suffixIcon: PropTypes.VNodeChild, + suffixIcon: PropTypes.any, showSearchRender: PropTypes.any, onChange: PropTypes.func, onPopupVisibleChange: PropTypes.func, diff --git a/components/comment/index.tsx b/components/comment/index.tsx index df5a3b70f..ccc67af22 100644 --- a/components/comment/index.tsx +++ b/components/comment/index.tsx @@ -1,22 +1,22 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent } from 'vue'; -import PropsTypes from '../_util/vue-types'; +import PropTypes from '../_util/vue-types'; import { flattenChildren } from '../_util/props-util'; import type { VueNode } from '../_util/type'; import { withInstall } from '../_util/type'; import useConfigInject from '../_util/hooks/useConfigInject'; export const commentProps = { - actions: PropsTypes.array, + actions: PropTypes.array, /** The element to display as the comment author. */ - author: PropsTypes.VNodeChild, + author: PropTypes.any, /** The element to display as the comment avatar - generally an antd Avatar */ - avatar: PropsTypes.VNodeChild, + avatar: PropTypes.any, /** The main content of the comment */ - content: PropsTypes.VNodeChild, + content: PropTypes.any, /** Comment prefix defaults to '.ant-comment' */ - prefixCls: PropsTypes.string, + prefixCls: PropTypes.string, /** A datetime element containing the time to be displayed */ - datetime: PropsTypes.VNodeChild, + datetime: PropTypes.any, }; export type CommentProps = Partial>; diff --git a/components/config-provider/renderEmpty.tsx b/components/config-provider/renderEmpty.tsx index 006a842f7..8ceb89782 100644 --- a/components/config-provider/renderEmpty.tsx +++ b/components/config-provider/renderEmpty.tsx @@ -1,7 +1,7 @@ -import type { VNodeChild } from 'vue'; import { inject } from 'vue'; import Empty from '../empty'; import { defaultConfigProvider } from '.'; +import type { VueNode } from '../_util/type'; export interface RenderEmptyProps { componentName?: string; @@ -31,7 +31,7 @@ const RenderEmpty = (props: RenderEmptyProps) => { return renderHtml(props.componentName); }; -function renderEmpty(componentName?: string): VNodeChild | JSX.Element { +function renderEmpty(componentName?: string): VueNode { return ; } diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 74fe57ebb..c1abdda41 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -28,7 +28,7 @@ export const DescriptionsItemProps = { const descriptionsItemProp = { prefixCls: PropTypes.string, - label: PropTypes.VNodeChild, + label: PropTypes.any, labelStyle: PropTypes.style, contentStyle: PropTypes.style, span: PropTypes.number.def(1), @@ -125,8 +125,8 @@ const descriptionsProps = { prefixCls: PropTypes.string, bordered: PropTypes.looseBool, size: PropTypes.oneOf(tuple('default', 'middle', 'small')).def('default'), - title: PropTypes.VNodeChild, - extra: PropTypes.VNodeChild, + title: PropTypes.any, + extra: PropTypes.any, column: { type: [Number, Object] as PropType>>, default: (): number | Partial> => DEFAULT_COLUMN_MAP, diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 44133f101..b0513f780 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -35,7 +35,7 @@ const defaultPushState: PushState = { distance: 180 }; const drawerProps = () => ({ autofocus: PropTypes.looseBool, closable: PropTypes.looseBool, - closeIcon: PropTypes.VNodeChild, + closeIcon: PropTypes.any, destroyOnClose: PropTypes.looseBool, forceRender: PropTypes.looseBool, getContainer: PropTypes.any, @@ -55,7 +55,7 @@ const drawerProps = () => ({ headerStyle: PropTypes.object, bodyStyle: PropTypes.object, contentWrapperStyle: PropTypes.object, - title: PropTypes.VNodeChild, + title: PropTypes.any, visible: PropTypes.looseBool, width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -64,12 +64,12 @@ const drawerProps = () => ({ push: PropTypes.oneOfType([PropTypes.looseBool, { type: Object as PropType }]), placement: PropTypes.oneOf(PlacementTypes), keyboard: PropTypes.looseBool, - extra: PropTypes.VNodeChild, - footer: PropTypes.VNodeChild, + extra: PropTypes.any, + footer: PropTypes.any, footerStyle: PropTypes.object, level: PropTypes.any, levelMove: PropTypes.any, - handle: PropTypes.VNodeChild, + handle: PropTypes.any, /** @deprecated Use `@afterVisibleChange` instead */ afterVisibleChange: PropTypes.func, }); diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 7dc5727e9..3989f15bd 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -76,9 +76,9 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) { export const formItemProps = { htmlFor: PropTypes.string, prefixCls: PropTypes.string, - label: PropTypes.VNodeChild, - help: PropTypes.VNodeChild, - extra: PropTypes.VNodeChild, + label: PropTypes.any, + help: PropTypes.any, + extra: PropTypes.any, labelCol: { type: Object as PropType }, wrapperCol: { type: Object as PropType }, hasFeedback: PropTypes.looseBool.def(false), diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx index 56de94a15..39b39935a 100644 --- a/components/layout/Sider.tsx +++ b/components/layout/Sider.tsx @@ -30,7 +30,7 @@ export const siderProps = { defaultCollapsed: PropTypes.looseBool, reverseArrow: PropTypes.looseBool, zeroWidthTriggerStyle: PropTypes.style, - trigger: PropTypes.VNodeChild, + trigger: PropTypes.any, width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), breakpoint: PropTypes.oneOf(tuple('xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl')), diff --git a/components/menu/src/ItemGroup.tsx b/components/menu/src/ItemGroup.tsx index 0ddd919e8..589e4117a 100644 --- a/components/menu/src/ItemGroup.tsx +++ b/components/menu/src/ItemGroup.tsx @@ -6,7 +6,7 @@ import { useInjectMenu } from './hooks/useMenuContext'; import { useMeasure } from './hooks/useKeyPath'; const menuItemGroupProps = { - title: PropTypes.VNodeChild, + title: PropTypes.any, }; export type MenuItemGroupProps = Partial>; diff --git a/components/menu/src/MenuItem.tsx b/components/menu/src/MenuItem.tsx index 6e9613286..c973e1677 100644 --- a/components/menu/src/MenuItem.tsx +++ b/components/menu/src/MenuItem.tsx @@ -19,7 +19,7 @@ const menuItemProps = { disabled: Boolean, danger: Boolean, title: { type: [String, Boolean], default: undefined }, - icon: PropTypes.VNodeChild, + icon: PropTypes.any, }; export type MenuItemProps = Partial>; diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx index 1a6519c40..c8aa2fa60 100644 --- a/components/menu/src/SubMenu.tsx +++ b/components/menu/src/SubMenu.tsx @@ -23,8 +23,8 @@ import isValid from '../../_util/isValid'; let indexGuid = 0; const subMenuProps = { - icon: PropTypes.VNodeChild, - title: PropTypes.VNodeChild, + icon: PropTypes.any, + title: PropTypes.any, disabled: Boolean, level: Number, popupClassName: String, diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index 51eea605b..bbcc2d8d2 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -14,14 +14,14 @@ import classNames from '../_util/classNames'; import ResizeObserver from '../vc-resize-observer'; export const pageHeaderProps = { - backIcon: PropTypes.VNodeChild, + backIcon: PropTypes.any, prefixCls: PropTypes.string, - title: PropTypes.VNodeChild, - subTitle: PropTypes.VNodeChild, + title: PropTypes.any, + subTitle: PropTypes.any, breadcrumb: PropTypes.object, tags: PropTypes.any, - footer: PropTypes.VNodeChild, - extra: PropTypes.VNodeChild, + footer: PropTypes.any, + extra: PropTypes.any, avatar: PropTypes.object, ghost: PropTypes.looseBool, onBack: PropTypes.func, diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx index a6fb3e720..805e59a57 100644 --- a/components/progress/Steps.tsx +++ b/components/progress/Steps.tsx @@ -1,5 +1,6 @@ -import type { ExtractPropTypes, PropType, VNodeChild } from 'vue'; +import type { ExtractPropTypes, PropType } from 'vue'; import { computed, defineComponent } from 'vue'; +import type { VueNode } from '../_util/type'; import PropTypes from '../_util/vue-types'; import type { ProgressSize } from './props'; import { progressProps } from './props'; @@ -25,7 +26,7 @@ export default defineComponent({ const styledSteps = computed(() => { const { steps, strokeWidth = 8, strokeColor, trailColor, prefixCls } = props; - const temp: VNodeChild[] = []; + const temp: VueNode[] = []; for (let i = 0; i < steps; i += 1) { const cls = { [`${prefixCls}-steps-item`]: true, diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index aa5feb010..da17e1c7b 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -1,4 +1,3 @@ -import type { VNodeChild } from 'vue'; import { computed, defineComponent } from 'vue'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; @@ -12,6 +11,7 @@ import { getSuccessPercent, validProgress } from './utils'; import useConfigInject from '../_util/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; import { progressProps, progressStatuses } from './props'; +import type { VueNode } from '../_util/type'; export default defineComponent({ name: 'AProgress', @@ -67,7 +67,7 @@ export default defineComponent({ const successPercent = getSuccessPercent(props); if (!showInfo) return null; - let text: VNodeChild; + let text: VueNode; const textFormatter = format || slots?.format || ((val: number) => `${val}%`); const isLineType = type === 'line'; if ( @@ -92,7 +92,7 @@ export default defineComponent({ const { type, steps, strokeColor } = props; const progressInfo = renderProcessInfo(); - let progress: VNodeChild; + let progress: VueNode; // Render progress shape if (type === 'line') { progress = steps ? ( diff --git a/components/progress/props.ts b/components/progress/props.ts index fb5c2de10..371ea5079 100644 --- a/components/progress/props.ts +++ b/components/progress/props.ts @@ -1,6 +1,7 @@ import PropTypes from '../_util/vue-types'; +import type { VueNode } from '../_util/type'; import { tuple } from '../_util/type'; -import type { PropType, VNodeChild, ExtractPropTypes } from 'vue'; +import type { PropType, ExtractPropTypes } from 'vue'; export const progressStatuses = tuple('normal', 'exception', 'active', 'success'); export type ProgressStatusesType = typeof progressStatuses[number]; @@ -21,7 +22,7 @@ export const progressProps = () => ({ prefixCls: PropTypes.string, type: PropTypes.oneOf(ProgressType), percent: PropTypes.number, - format: { type: Function as PropType<(percent?: number, successPercent?: number) => VNodeChild> }, + format: { type: Function as PropType<(percent?: number, successPercent?: number) => VueNode> }, status: PropTypes.oneOf(progressStatuses), showInfo: PropTypes.looseBool, strokeWidth: PropTypes.number, diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx index 2dc318752..1d7b3cbb3 100644 --- a/components/statistic/Statistic.tsx +++ b/components/statistic/Statistic.tsx @@ -19,9 +19,9 @@ export const statisticProps = { valueRender: PropTypes.any, formatter: PropTypes.any, precision: PropTypes.number, - prefix: PropTypes.VNodeChild, - suffix: PropTypes.VNodeChild, - title: PropTypes.VNodeChild, + prefix: PropTypes.any, + suffix: PropTypes.any, + title: PropTypes.any, onFinish: PropTypes.func, loading: PropTypes.looseBool, }; diff --git a/components/switch/index.tsx b/components/switch/index.tsx index 620c77c20..cfdea4973 100644 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -18,8 +18,8 @@ const switchProps = { prefixCls: PropTypes.string, size: PropTypes.oneOf(SwitchSizes), disabled: PropTypes.looseBool, - checkedChildren: PropTypes.VNodeChild, - unCheckedChildren: PropTypes.VNodeChild, + checkedChildren: PropTypes.any, + unCheckedChildren: PropTypes.any, tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), autofocus: PropTypes.looseBool, loading: PropTypes.looseBool, diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 965d499d1..12bb29abf 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -19,12 +19,12 @@ const tagProps = { type: String as PropType>, }, closable: PropTypes.looseBool.def(false), - closeIcon: PropTypes.VNodeChild, + closeIcon: PropTypes.any, visible: PropTypes.looseBool, onClose: { type: Function as PropType<(e: MouseEvent) => void>, }, - icon: PropTypes.VNodeChild, + icon: PropTypes.any, }; export type TagProps = HTMLAttributes & Partial>; diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx index ef1e43d5c..01d4b15b4 100644 --- a/components/vc-image/src/Image.tsx +++ b/components/vc-image/src/Image.tsx @@ -34,7 +34,7 @@ export const imageProps = { wrapperStyle: PropTypes.style, prefixCls: PropTypes.string, previewPrefixCls: PropTypes.string, - placeholder: PropTypes.VNodeChild, + placeholder: PropTypes.any, fallback: PropTypes.string, preview: PropTypes.oneOfType([ PropTypes.looseBool, diff --git a/components/vc-picker/panels/PanelBody.tsx b/components/vc-picker/panels/PanelBody.tsx index 4af0ee3f2..f7b922c67 100644 --- a/components/vc-picker/panels/PanelBody.tsx +++ b/components/vc-picker/panels/PanelBody.tsx @@ -14,7 +14,7 @@ export type PanelBodyProps = { picker?: PanelMode; // By panel - headerCells?: VueNode; + headerCells?: VueNode[]; rowNum: number; colNum: number; baseDate: DateType; diff --git a/components/vc-select/SelectTrigger.tsx b/components/vc-select/SelectTrigger.tsx index 0d1403b76..cd6dd6676 100644 --- a/components/vc-select/SelectTrigger.tsx +++ b/components/vc-select/SelectTrigger.tsx @@ -3,11 +3,12 @@ import PropTypes from '../_util/vue-types'; import { getSlot } from '../_util/props-util'; import classNames from '../_util/classNames'; import createRef from '../_util/createRef'; -import type { CSSProperties, VNodeChild } from 'vue'; +import type { CSSProperties } from 'vue'; import { defineComponent } from 'vue'; import type { RenderDOMFunc } from './interface'; import type { DropdownRender } from './interface/generator'; import type { Placement } from './generate'; +import type { VueNode } from '../_util/type'; const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => { // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided @@ -52,7 +53,7 @@ export interface SelectTriggerProps { prefixCls: string; disabled: boolean; visible: boolean; - popupElement: VNodeChild | JSX.Element; + popupElement: VueNode; animation?: string; transitionName?: string; containerWidth: number; diff --git a/components/vc-select/Selector/Input.tsx b/components/vc-select/Selector/Input.tsx index 16789d1eb..f3474ac0a 100644 --- a/components/vc-select/Selector/Input.tsx +++ b/components/vc-select/Selector/Input.tsx @@ -1,16 +1,17 @@ import { cloneElement } from '../../_util/vnode'; -import type { VNode, VNodeChild } from 'vue'; +import type { VNode } from 'vue'; import { defineComponent, getCurrentInstance, inject, onMounted, withDirectives } from 'vue'; import PropTypes from '../../_util/vue-types'; import type { RefObject } from '../../_util/createRef'; import antInput from '../../_util/antInputDirective'; import classNames from '../../_util/classNames'; import type { EventHandler } from '../../_util/EventInterface'; +import type { VueNode } from '../../_util/type'; interface InputProps { prefixCls: string; id: string; - inputElement: VNodeChild; + inputElement: VueNode; disabled: boolean; autofocus: boolean; autocomplete: string; diff --git a/components/vc-select/Selector/MultipleSelector.tsx b/components/vc-select/Selector/MultipleSelector.tsx index 54e32cb47..d1aaa9c4f 100644 --- a/components/vc-select/Selector/MultipleSelector.tsx +++ b/components/vc-select/Selector/MultipleSelector.tsx @@ -9,7 +9,7 @@ import type { import type { RenderNode } from '../interface'; import type { InnerSelectorProps } from './interface'; import Input from './Input'; -import type { VNodeChild, Ref, PropType } from 'vue'; +import type { Ref, PropType } from 'vue'; import { computed, defineComponent, onMounted, ref, watch } from 'vue'; import classNames from '../../_util/classNames'; import pickAttrs from '../../_util/pickAttrs'; @@ -24,9 +24,9 @@ type SelectorProps = InnerSelectorProps & { // Tags maxTagCount?: number | 'responsive'; maxTagTextLength?: number; - maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild); + maxTagPlaceholder?: VueNode | ((omittedValues: LabelValueType[]) => VueNode); tokenSeparators?: string[]; - tagRender?: (props: CustomTagProps) => VNodeChild; + tagRender?: (props: CustomTagProps) => VueNode; onToggleOpen: any; // Motion @@ -52,7 +52,7 @@ const props = { accessibilityIndex: PropTypes.number, tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - removeIcon: PropTypes.VNodeChild, + removeIcon: PropTypes.any, choiceTransitionName: PropTypes.string, maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index 5698d52fe..0796f4cab 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -1,13 +1,13 @@ import pickAttrs from '../../_util/pickAttrs'; import Input from './Input'; import type { InnerSelectorProps } from './interface'; -import type { VNodeChild } from 'vue'; import { Fragment, computed, defineComponent, ref, watch } from 'vue'; import PropTypes from '../../_util/vue-types'; import { useInjectTreeSelectContext } from '../../vc-tree-select/Context'; +import type { VueNode } from '../../_util/type'; interface SelectorProps extends InnerSelectorProps { - inputElement: VNodeChild; + inputElement: VueNode; activeValue: string; backfill?: boolean; } diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx index eb407ff4d..34b29ff12 100644 --- a/components/vc-select/Selector/index.tsx +++ b/components/vc-select/Selector/index.tsx @@ -14,7 +14,7 @@ import SingleSelector from './SingleSelector'; import type { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator'; import type { RenderNode, Mode } from '../interface'; import useLock from '../hooks/useLock'; -import type { VNodeChild, PropType } from 'vue'; +import type { PropType } from 'vue'; import { defineComponent } from 'vue'; import createRef from '../../_util/createRef'; import PropTypes from '../../_util/vue-types'; @@ -38,14 +38,14 @@ export interface SelectorProps { accessibilityIndex: number; tabindex?: number | string; disabled?: boolean; - placeholder?: VNodeChild; + placeholder?: VueNode; removeIcon?: RenderNode; // Tags maxTagCount?: number | 'responsive'; maxTagTextLength?: number; - maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild); - tagRender?: (props: CustomTagProps) => VNodeChild; + maxTagPlaceholder?: VueNode | ((omittedValues: LabelValueType[]) => VueNode); + tagRender?: (props: CustomTagProps) => VueNode; /** Check if `tokenSeparators` contains `\n` or `\r\n` */ tokenWithEnter?: boolean; diff --git a/components/vc-select/Selector/interface.ts b/components/vc-select/Selector/interface.ts index b9d16da49..49915ad21 100644 --- a/components/vc-select/Selector/interface.ts +++ b/components/vc-select/Selector/interface.ts @@ -1,15 +1,15 @@ import type { RefObject } from '../../_util/createRef'; -import type { VNodeChild } from 'vue'; import type { Mode } from '../interface'; import type { LabelValueType } from '../interface/generator'; import type { EventHandler } from '../../_util/EventInterface'; +import type { VueNode } from '../../_util/type'; export interface InnerSelectorProps { prefixCls: string; id: string; mode: Mode; inputRef: RefObject; - placeholder?: VNodeChild; + placeholder?: VueNode; disabled?: boolean; autofocus?: boolean; autocomplete?: string; diff --git a/components/vc-select/TransBtn.tsx b/components/vc-select/TransBtn.tsx index 1083529d1..a91b8e67d 100644 --- a/components/vc-select/TransBtn.tsx +++ b/components/vc-select/TransBtn.tsx @@ -1,9 +1,10 @@ -import type { FunctionalComponent, VNodeChild } from 'vue'; +import type { FunctionalComponent } from 'vue'; +import type { VueNode } from '../_util/type'; import PropTypes from '../_util/vue-types'; export interface TransBtnProps { class: string; - customizeIcon: VNodeChild | ((props?: any) => VNodeChild); + customizeIcon: VueNode | ((props?: any) => VueNode); customizeIconProps?: any; onMousedown?: (payload: MouseEvent) => void; onClick?: (payload: MouseEvent) => void; @@ -15,7 +16,7 @@ export interface TransBtnType extends FunctionalComponent { const TransBtn: TransBtnType = (props, { slots }) => { const { class: className, customizeIcon, customizeIconProps, onMousedown, onClick } = props; - let icon: VNodeChild; + let icon: VueNode; if (typeof customizeIcon === 'function') { icon = customizeIcon(customizeIconProps); diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx index dcfe22a5b..e29ad9ab9 100644 --- a/components/vc-select/generate.tsx +++ b/components/vc-select/generate.tsx @@ -36,7 +36,7 @@ import { getSeparatedContent } from './utils/valueUtil'; import useSelectTriggerControl from './hooks/useSelectTriggerControl'; import useCacheDisplayValue from './hooks/useCacheDisplayValue'; import useCacheOptions from './hooks/useCacheOptions'; -import type { CSSProperties, PropType, VNode, VNodeChild } from 'vue'; +import type { CSSProperties, PropType, VNode } from 'vue'; import { getCurrentInstance, computed, @@ -54,6 +54,7 @@ import PropTypes from '../_util/vue-types'; import warning from '../_util/warning'; import isMobile from '../vc-util/isMobile'; import { getTextFromElement } from '../_util/props-util'; +import type { VueNode } from '../_util/type'; const DEFAULT_OMIT_PROPS = [ 'children', @@ -116,9 +117,9 @@ export function selectBaseProps() { allowClear: { type: Boolean, default: undefined }, clearIcon: PropTypes.any, showArrow: { type: Boolean, default: undefined }, - inputIcon: PropTypes.VNodeChild, - removeIcon: PropTypes.VNodeChild, - menuItemSelectedIcon: PropTypes.VNodeChild, + inputIcon: PropTypes.any, + removeIcon: PropTypes.any, + menuItemSelectedIcon: PropTypes.any, // Dropdown open: { type: Boolean, default: undefined }, @@ -232,7 +233,7 @@ export interface GenerateConfig { // >; }; /** Convert jsx tree into `OptionType[]` */ - convertChildrenToData: (children: VNodeChild | JSX.Element) => OptionType[]; + convertChildrenToData: (children: VueNode) => OptionType[]; /** Flatten nest options into raw option list */ flattenOptions: (options: OptionType[], props: any) => FlattenOptionsType; /** Convert single raw value into { label, value } format. Will be called by each value */ @@ -392,7 +393,7 @@ export default function generateSelector< const mergedOptions = computed((): OptionType[] => { let newOptions = props.options; if (newOptions === undefined) { - newOptions = convertChildrenToData(props.children as VNodeChild); + newOptions = convertChildrenToData(props.children as VueNode); } /** @@ -1057,7 +1058,7 @@ export default function generateSelector< } = { ...props, ...attrs }; //as SelectProps; // ============================= Input ============================== // Only works in `combobox` - const customizeInputElement: VNodeChild | JSX.Element = + const customizeInputElement: VueNode = (mode === 'combobox' && getInputElement && getInputElement()) || null; const domProps = omitDOMProps ? omitDOMProps(restProps) : restProps; diff --git a/components/vc-select/interface/index.ts b/components/vc-select/interface/index.ts index 80e6ec569..c71cee0a3 100644 --- a/components/vc-select/interface/index.ts +++ b/components/vc-select/interface/index.ts @@ -1,9 +1,10 @@ -import type { VNode, VNodeChild, CSSProperties } from 'vue'; +import type { VueNode } from '../../_util/type'; +import type { VNode, CSSProperties } from 'vue'; import type { Key, RawValueType } from './generator'; export type RenderDOMFunc = (props: any) => HTMLElement; -export type RenderNode = VNodeChild | ((props: any) => VNodeChild); +export type RenderNode = VueNode | ((props: any) => VueNode); export type Mode = 'multiple' | 'tags' | 'combobox'; @@ -28,7 +29,7 @@ export interface OptionCoreData { title?: string; class?: string; style?: CSSProperties; - label?: VNodeChild; + label?: VueNode; /** @deprecated Only works when use `children` as option data */ children?: VNode[] | JSX.Element[]; } @@ -40,7 +41,7 @@ export interface OptionData extends OptionCoreData { export interface OptionGroupData { key?: Key; - label?: VNodeChild; + label?: VueNode; options: OptionData[]; class?: string; style?: CSSProperties; diff --git a/components/vc-select/utils/legacyUtil.ts b/components/vc-select/utils/legacyUtil.ts index 24778f024..14c1bc2f7 100644 --- a/components/vc-select/utils/legacyUtil.ts +++ b/components/vc-select/utils/legacyUtil.ts @@ -1,6 +1,7 @@ import { flattenChildren, isValidElement } from '../../_util/props-util'; -import type { VNode, VNodeChild } from 'vue'; +import type { VNode } from 'vue'; import type { OptionData, OptionGroupData, OptionsType } from '../interface'; +import type { VueNode } from '../../_util/type'; function convertNodeToOption(node: VNode): OptionData { const { @@ -21,10 +22,7 @@ function convertNodeToOption(node: VNode): OptionData { }; } -export function convertChildrenToData( - nodes: VNodeChild | JSX.Element, - optionOnly = false, -): OptionsType { +export function convertChildrenToData(nodes: VueNode, optionOnly = false): OptionsType { const dd = flattenChildren(nodes as []) .map((node: VNode, index: number): OptionData | OptionGroupData | null => { if (!isValidElement(node) || !node.type) { diff --git a/components/vc-select/utils/valueUtil.ts b/components/vc-select/utils/valueUtil.ts index 0fcf436b7..725a788be 100644 --- a/components/vc-select/utils/valueUtil.ts +++ b/components/vc-select/utils/valueUtil.ts @@ -1,5 +1,4 @@ import { warning } from '../../vc-util/warning'; -import type { VNodeChild } from 'vue'; import { cloneVNode, isVNode } from 'vue'; import type { OptionsType as SelectOptionsType, @@ -17,6 +16,7 @@ import type { } from '../interface/generator'; import { toArray } from './commonUtil'; +import type { VueNode } from '../../_util/type'; function getKey(data: OptionData | OptionGroupData, index: number) { const { key } = data; @@ -184,7 +184,7 @@ export const getLabeledValue: GetLabeledValue = ( return result; }; -function toRawString(content: VNodeChild): string { +function toRawString(content: VueNode): string { return toArray(content) .map(item => { if (isVNode(item)) { diff --git a/components/vc-tree-select/utils/legacyUtil.tsx b/components/vc-tree-select/utils/legacyUtil.tsx index f9e5d3c04..8c2e358f3 100644 --- a/components/vc-tree-select/utils/legacyUtil.tsx +++ b/components/vc-tree-select/utils/legacyUtil.tsx @@ -1,5 +1,4 @@ import { filterEmpty } from '../../_util/props-util'; -import type { VNodeChild } from 'vue'; import { camelize } from 'vue'; import { warning } from '../../vc-util/warning'; import type { @@ -11,11 +10,12 @@ import type { LegacyCheckedNode, } from '../interface'; import TreeNode from '../TreeNode'; +import type { VueNode } from '../../_util/type'; function isTreeSelectNode(node: any) { return node && node.type && (node.type as any).isTreeSelectNode; } -export function convertChildrenToData(rootNodes: VNodeChild): DataNode[] { +export function convertChildrenToData(rootNodes: VueNode): DataNode[] { function dig(treeNodes: any[] = []): DataNode[] { return filterEmpty(treeNodes).map(treeNode => { // Filter invalidate node diff --git a/components/vc-tree/props.ts b/components/vc-tree/props.ts index 6caa7a1a4..e25489979 100644 --- a/components/vc-tree/props.ts +++ b/components/vc-tree/props.ts @@ -111,7 +111,7 @@ export const treeProps = () => ({ prefixCls: String, focusable: { type: Boolean, default: undefined }, tabindex: Number, - children: PropTypes.VNodeChild, + children: PropTypes.any, treeData: { type: Array as PropType }, // Generate treeNode by children fieldNames: { type: Object as PropType }, showLine: { type: Boolean, default: undefined }, diff --git a/components/vc-tree/utils/treeUtil.ts b/components/vc-tree/utils/treeUtil.ts index 025607669..68e2f0687 100644 --- a/components/vc-tree/utils/treeUtil.ts +++ b/components/vc-tree/utils/treeUtil.ts @@ -10,11 +10,11 @@ import type { } from '../interface'; import { getPosition, isTreeNode } from '../util'; import { warning } from '../../vc-util/warning'; -import type { VNodeChild } from 'vue'; import { camelize } from 'vue'; import type { TreeNodeProps } from '../props'; import { filterEmpty } from '../../_util/props-util'; import omit from '../../_util/omit'; +import type { VueNode } from '../../_util/type'; export function getKey(key: Key, pos: string) { if (key !== null && key !== undefined) { @@ -65,8 +65,8 @@ export function warningWithoutKey(treeData: DataNode[], fieldNames: FieldNames) /** * Convert `children` of Tree into `treeData` structure. */ -export function convertTreeToData(rootNodes: VNodeChild): DataNode[] { - function dig(node: VNodeChild = []): DataNode[] { +export function convertTreeToData(rootNodes: VueNode): DataNode[] { + function dig(node: VueNode = []): DataNode[] { const treeNodes = filterEmpty(node as NodeElement[]); return treeNodes.map(treeNode => { // Filter invalidate node