From 96f508104c185c6bcc2c63dc4891c2d530993563 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sun, 20 Mar 2022 10:57:44 +0800 Subject: [PATCH] style: refactor vnode.js to ts --- components/_util/{vnode.js => vnode.ts} | 14 ++++++++--- components/menu/src/Menu.tsx | 4 +-- .../vc-cascader/hooks/useDisplayValues.ts | 6 +++-- .../vc-picker/panels/TimePanel/TimeBody.tsx | 4 +-- components/vc-select/Selector/Input.tsx | 25 ------------------- 5 files changed, 19 insertions(+), 34 deletions(-) rename components/_util/{vnode.js => vnode.ts} (52%) diff --git a/components/_util/vnode.js b/components/_util/vnode.ts similarity index 52% rename from components/_util/vnode.js rename to components/_util/vnode.ts index 4f01250be..c770abc11 100644 --- a/components/_util/vnode.js +++ b/components/_util/vnode.ts @@ -1,8 +1,16 @@ import { filterEmpty } from './props-util'; +import type { VNode, VNodeProps } from 'vue'; import { cloneVNode } from 'vue'; import warning from './warning'; +import type { RefObject } from './createRef'; -export function cloneElement(vnode, nodeProps = {}, override = true, mergeRef = false) { +export function cloneElement( + vnode: VNode | VNode[], + nodeProps: Record & + Omit & { ref?: VNodeProps['ref'] | RefObject } = {}, + override = true, + mergeRef = false, +): VNode { let ele = vnode; if (Array.isArray(vnode)) { ele = filterEmpty(vnode)[0]; @@ -10,10 +18,10 @@ export function cloneElement(vnode, nodeProps = {}, override = true, mergeRef = if (!ele) { return null; } - const node = cloneVNode(ele, nodeProps, mergeRef); + const node = cloneVNode(ele as VNode, nodeProps as any, mergeRef); // cloneVNode内部是合并属性，这里改成覆盖属性 - node.props = override ? { ...node.props, ...nodeProps } : node.props; + node.props = (override ? { ...node.props, ...nodeProps } : node.props) as any; warning(typeof node.props.class !== 'object', 'class must be string'); return node; } diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx index b7f82a652..68f5d8702 100644 --- a/components/menu/src/Menu.tsx +++ b/components/menu/src/Menu.tsx @@ -1,5 +1,5 @@ import type { Key } from '../../_util/type'; -import type { ExtractPropTypes, PropType } from 'vue'; +import type { ExtractPropTypes, PropType, VNode } from 'vue'; import { computed, defineComponent, ref, inject, watchEffect, watch, onMounted, unref } from 'vue'; import shallowEqual from '../../_util/shallowequal'; import type { StoreMenuInfo } from './hooks/useMenuContext'; @@ -357,7 +357,7 @@ export default defineComponent({ let icon = props.expandIcon || slots.expandIcon; icon = typeof icon === 'function' ? icon(opt) : icon; return cloneElement( - icon, + icon as unknown as VNode, { class: `${prefixCls.value}-submenu-expand-icon`, }, diff --git a/components/vc-cascader/hooks/useDisplayValues.ts b/components/vc-cascader/hooks/useDisplayValues.ts index 2ae150151..933471182 100644 --- a/components/vc-cascader/hooks/useDisplayValues.ts +++ b/components/vc-cascader/hooks/useDisplayValues.ts @@ -6,7 +6,7 @@ import type { InternalFieldNames, } from '../Cascader'; import { toPathKey } from '../utils/commonUtil'; -import type { Ref } from 'vue'; +import type { Ref, VNode } from 'vue'; import { computed } from 'vue'; import { isValidElement } from '../../_util/props-util'; import { cloneElement } from '../../_util/vnode'; @@ -32,7 +32,9 @@ export default ( // If exist non-string value, use VueNode instead return mergedLabels.reduce((list, label, index) => { - const keyedLabel = isValidElement(label) ? cloneElement(label, { key: index }) : label; + const keyedLabel = isValidElement(label) + ? cloneElement(label as unknown as VNode, { key: index }) + : label; if (index === 0) { return [keyedLabel]; diff --git a/components/vc-picker/panels/TimePanel/TimeBody.tsx b/components/vc-picker/panels/TimePanel/TimeBody.tsx index d00e27213..8647bc61c 100644 --- a/components/vc-picker/panels/TimePanel/TimeBody.tsx +++ b/components/vc-picker/panels/TimePanel/TimeBody.tsx @@ -7,7 +7,7 @@ import type { SharedTimeProps } from '.'; import { setTime as utilSetTime } from '../../utils/timeUtil'; import { cloneElement } from '../../../_util/vnode'; import type { VueNode } from '../../../_util/type'; -import type { Ref } from 'vue'; +import type { Ref, VNode } from 'vue'; import { onBeforeUpdate, ref, watchEffect, computed, defineComponent } from 'vue'; function generateUnits( @@ -245,7 +245,7 @@ const TimeBody = defineComponent({ ) { if (condition !== false) { columns.push({ - node: cloneElement(node, { + node: cloneElement(node as unknown as VNode, { prefixCls: columnPrefixCls, value: columnValue, active: activeColumnIndex === columns.length, diff --git a/components/vc-select/Selector/Input.tsx b/components/vc-select/Selector/Input.tsx index bad13eb67..134bd69ba 100644 --- a/components/vc-select/Selector/Input.tsx +++ b/components/vc-select/Selector/Input.tsx @@ -175,29 +175,4 @@ const Input = defineComponent({ }, }); -// Input.props = { -// inputRef: PropTypes.any, -// prefixCls: PropTypes.string, -// id: PropTypes.string, -// inputElement: PropTypes.any, -// disabled: PropTypes.looseBool, -// autofocus: PropTypes.looseBool, -// autocomplete: PropTypes.string, -// editable: PropTypes.looseBool, -// accessibilityIndex: PropTypes.number, -// value: PropTypes.string, -// open: PropTypes.looseBool, -// tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), -// /** Pass accessibility props to input */ -// attrs: PropTypes.object, -// onKeydown: PropTypes.func, -// onMousedown: PropTypes.func, -// onChange: PropTypes.func, -// onPaste: PropTypes.func, -// onCompositionstart: PropTypes.func, -// onCompositionend: PropTypes.func, -// onFocus: PropTypes.func, -// onBlur: PropTypes.func, -// }; - export default Input;