From 7fe34def789f937be71f24c8fbbecab7a28fda07 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Sat, 10 Oct 2020 17:01:39 +0800 Subject: [PATCH] fix: types error --- components/vc-select2/OptionList.tsx | 13 +++- components/vc-select2/SelectTrigger.tsx | 13 ++-- components/vc-select2/Selector/Input.tsx | 2 +- components/vc-select2/generate.tsx | 2 +- .../vc-select2/hooks/useCacheOptions.ts | 2 +- components/vc-select2/utils/legacyUtil.ts | 9 ++- components/vc-select2/utils/valueUtil.ts | 2 +- .../vc-select2/utils/warningPropsUtil.ts | 65 +++++++++---------- 8 files changed, 56 insertions(+), 52 deletions(-) diff --git a/components/vc-select2/OptionList.tsx b/components/vc-select2/OptionList.tsx index 6984b68f6..f89965066 100644 --- a/components/vc-select2/OptionList.tsx +++ b/components/vc-select2/OptionList.tsx @@ -72,7 +72,7 @@ const OptionListProps = { * Using virtual list of option display. * Will fallback to dom if use customize render. */ -const OptionList = defineComponent({ +const OptionList = defineComponent({ name: 'OptionList', inheritAttrs: false, setup(props) { @@ -251,7 +251,14 @@ const OptionList = defineComponent({ }; }, render() { - const { renderItem, listRef, onListMouseDown, itemPrefixCls, setActive, onSelectValue } = this; + const { + renderItem, + listRef, + onListMouseDown, + itemPrefixCls, + setActive, + onSelectValue, + } = this as any; const { id, childrenAsData, @@ -264,7 +271,7 @@ const OptionList = defineComponent({ virtual, onScroll, onMouseenter, - } = this.$props; + } = this.$props as OptionListProps; const { activeIndex } = this.state; // ========================== Render ========================== if (flattenOptions.length === 0) { diff --git a/components/vc-select2/SelectTrigger.tsx b/components/vc-select2/SelectTrigger.tsx index 52ab56b19..67c2daa71 100644 --- a/components/vc-select2/SelectTrigger.tsx +++ b/components/vc-select2/SelectTrigger.tsx @@ -57,13 +57,13 @@ export interface SelectTriggerProps { dropdownClassName: string; direction: string; dropdownMatchSelectWidth?: boolean | number; - dropdownRender?: (menu: VNodeChild) => VNodeChild; + dropdownRender?: (menu: VNodeChild | JSX.Element) => VNodeChild; getPopupContainer?: RenderDOMFunc; dropdownAlign: object; empty: boolean; getTriggerDOMNode: () => any; } -const SelectTrigger = defineComponent({ +const SelectTrigger = defineComponent({ name: 'SelectTrigger', inheritAttrs: false, created() { @@ -90,6 +90,8 @@ const SelectTrigger = defineComponent({ dropdownRender, animation, transitionName, + direction, + getPopupContainer, } = props as SelectTriggerProps; const dropdownPrefixCls = `${prefixCls}-dropdown`; @@ -114,20 +116,19 @@ const SelectTrigger = defineComponent({ {...props} showAction={[]} hideAction={[]} - popupPlacement={this.direction === 'rtl' ? 'bottomRight' : 'bottomLeft'} + popupPlacement={direction === 'rtl' ? 'bottomRight' : 'bottomLeft'} builtinPlacements={builtInPlacements} prefixCls={dropdownPrefixCls} popupTransitionName={mergedTransitionName} - onPopupVisibleChange={props.onDropdownVisibleChange} popup={
{popupNode}
} popupAlign={dropdownAlign} popupVisible={visible} - getPopupContainer={props.getPopupContainer} + getPopupContainer={getPopupContainer} popupClassName={classNames(dropdownClassName, { [`${dropdownPrefixCls}-empty`]: empty, })} popupStyle={popupStyle} - getTriggerDOMNode={this.getTriggerDOMNode} + // getTriggerDOMNode={getTriggerDOMNode} > {getSlot(this)[0]} diff --git a/components/vc-select2/Selector/Input.tsx b/components/vc-select2/Selector/Input.tsx index 91d195246..f9fb116f9 100644 --- a/components/vc-select2/Selector/Input.tsx +++ b/components/vc-select2/Selector/Input.tsx @@ -27,7 +27,7 @@ interface InputProps { onCompositionend: EventHandlerNonNull; } -const Input = defineComponent({ +const Input = defineComponent({ name: 'Input', inheritAttrs: false, setup() { diff --git a/components/vc-select2/generate.tsx b/components/vc-select2/generate.tsx index 1ec304552..0323ced95 100644 --- a/components/vc-select2/generate.tsx +++ b/components/vc-select2/generate.tsx @@ -113,7 +113,7 @@ export interface SelectProps { dropdownClassName?: string; dropdownMatchSelectWidth?: boolean | number; virtual?: boolean; - dropdownRender?: (menu: VNodeChild) => VNodeChild; + dropdownRender?: (menu: VNodeChild | JSX.Element) => VNodeChild; dropdownAlign?: any; animation?: string; transitionName?: string; diff --git a/components/vc-select2/hooks/useCacheOptions.ts b/components/vc-select2/hooks/useCacheOptions.ts index 08857d9ab..5e3e17b54 100644 --- a/components/vc-select2/hooks/useCacheOptions.ts +++ b/components/vc-select2/hooks/useCacheOptions.ts @@ -11,7 +11,7 @@ export default function useCacheOptions< >(_values: RawValueType[], options: Ref) { const optionMap = computed(() => { const map: Map[number]> = new Map(); - options.value.forEach(item => { + options.value.forEach((item: any) => { const { data: { value }, } = item; diff --git a/components/vc-select2/utils/legacyUtil.ts b/components/vc-select2/utils/legacyUtil.ts index 81fbae365..d58ef1a33 100644 --- a/components/vc-select2/utils/legacyUtil.ts +++ b/components/vc-select2/utils/legacyUtil.ts @@ -1,5 +1,5 @@ import { flattenChildren, isValidElement } from '../../_util/props-util'; -import { VNode } from 'vue'; +import { VNode, VNodeChild } from 'vue'; import { OptionData, OptionGroupData, OptionsType } from '../interface'; function convertNodeToOption(node: VNode): OptionData { @@ -14,8 +14,11 @@ function convertNodeToOption(node: VNode): OptionData { return { key, value: value !== undefined ? value : key, children: child, ...restProps }; } -export function convertChildrenToData(nodes: any[], optionOnly = false): OptionsType { - const dd = flattenChildren(nodes) +export function convertChildrenToData( + nodes: VNodeChild | JSX.Element, + optionOnly = false, +): OptionsType { + const dd = flattenChildren(nodes as []) .map((node: VNode, index: number): OptionData | OptionGroupData | null => { if (!isValidElement(node) || !node.type) { return null; diff --git a/components/vc-select2/utils/valueUtil.ts b/components/vc-select2/utils/valueUtil.ts index 412d81204..949b667f7 100644 --- a/components/vc-select2/utils/valueUtil.ts +++ b/components/vc-select2/utils/valueUtil.ts @@ -128,7 +128,7 @@ export const getLabeledValue: GetLabeledValue = ( }; let prevValItem: LabelValueType; - const prevValues = toArray(prevValue); + const prevValues = toArray(prevValue as LabelValueType); if (labelInValue) { prevValItem = prevValues.find((prevItem: LabelValueType) => { if (typeof prevItem === 'object' && 'value' in prevItem) { diff --git a/components/vc-select2/utils/warningPropsUtil.ts b/components/vc-select2/utils/warningPropsUtil.ts index 005a3e1ee..835046fca 100644 --- a/components/vc-select2/utils/warningPropsUtil.ts +++ b/components/vc-select2/utils/warningPropsUtil.ts @@ -1,7 +1,7 @@ import warning, { noteOnce } from '../../vc-util/warning'; import { SelectProps } from '..'; import { convertChildrenToData } from './legacyUtil'; -import { OptionData, OptionGroupData } from '../interface'; +import { OptionData } from '../interface'; import { toArray } from './commonUtil'; import { RawValueType, LabelValueType } from '../interface/generator'; import { isValidElement } from '../../_util/props-util'; @@ -32,8 +32,7 @@ function warningProps(props: SelectProps) { // `tags` should not set option as disabled warning( - mode !== 'tags' || - mergedOptions.every((opt: { disabled?: boolean } & OptionGroupData) => !opt.disabled), + mode !== 'tags' || mergedOptions.every((opt: any) => !opt.disabled), 'Please avoid setting option to disabled in tags mode since user can always type text as tag.', ); @@ -102,44 +101,38 @@ function warningProps(props: SelectProps) { // Syntactic sugar should use correct children type if (children) { let invalidateChildType = null; - children.some( - ( - node: VNode & { - children: { default?: () => any }; - }, - ) => { - if (!isValidElement(node) || !node.type) { - return false; - } + children.some((node: any) => { + if (!isValidElement(node) || !node.type) { + return false; + } - const { type } = node as { type: { isSelectOption?: boolean; isSelectOptGroup?: boolean } }; + const { type } = node as { type: { isSelectOption?: boolean; isSelectOptGroup?: boolean } }; - if (type.isSelectOption) { - return false; - } - if (type.isSelectOptGroup) { - const childs = node.children?.default() || []; - const allChildrenValid = childs.every((subNode: VNode) => { - if ( - !isValidElement(subNode) || - !node.type || - (subNode.type as { isSelectOption?: boolean }).isSelectOption - ) { - return true; - } - invalidateChildType = subNode.type; - return false; - }); - - if (allChildrenValid) { - return false; + if (type.isSelectOption) { + return false; + } + if (type.isSelectOptGroup) { + const childs = node.children?.default() || []; + const allChildrenValid = childs.every((subNode: VNode) => { + if ( + !isValidElement(subNode) || + !node.type || + (subNode.type as { isSelectOption?: boolean }).isSelectOption + ) { + return true; } - return true; + invalidateChildType = subNode.type; + return false; + }); + + if (allChildrenValid) { + return false; } - invalidateChildType = type; return true; - }, - ); + } + invalidateChildType = type; + return true; + }); if (invalidateChildType) { warning(