Browse Source

style: refactor vnode.js to ts

cssinjs
tangjinzhou 3 years ago
parent
commit
96f508104c
  1. 14
      components/_util/vnode.ts
  2. 4
      components/menu/src/Menu.tsx
  3. 6
      components/vc-cascader/hooks/useDisplayValues.ts
  4. 4
      components/vc-picker/panels/TimePanel/TimeBody.tsx
  5. 25
      components/vc-select/Selector/Input.tsx

14
components/_util/vnode.js → 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<T, U>(
vnode: VNode<T, U> | VNode<T, U>[],
nodeProps: Record<string, any> &
Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject } = {},
override = true,
mergeRef = false,
): VNode<T, U> {
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<T, U>, 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;
}

4
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`,
},

6
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];

4
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,

25
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;

Loading…
Cancel
Save