refactor: tree-select

tangjinzhou · tangjinzhou · commit 76ee4d6856d5 · 2021-08-23T22:47:11.000+08:00
diff --git a/components/_util/props-util/initDefaultProps.ts b/components/_util/props-util/initDefaultProps.ts
@@ -17,7 +17,13 @@ const initDefaultProps = <T>(
   Object.keys(defaultProps).forEach(k => {
     const prop = propTypes[k] as VueTypeValidableDef;
     if (prop) {
-      prop.default = defaultProps[k];
+      if (prop.type || prop.default) {
+        prop.default = defaultProps[k];
+      } else if (prop.def) {
+        prop.def(defaultProps[k]);
+      } else {
+        propTypes[k] = { type: prop, default: defaultProps[k] };
+      }
     } else {
       throw new Error(`not have ${k} prop`);
     }
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
@@ -11,8 +11,6 @@ import VcTreeSelect, {
 import classNames from '../_util/classNames';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import type { SizeType } from '../config-provider';
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import CaretDownOutlined from '@ant-design/icons-vue/CaretDownOutlined';
 import type { DefaultValueType, FieldNames } from '../vc-tree-select/interface';
 import omit from '../_util/omit';
 import PropTypes from '../_util/vue-types';
@@ -237,78 +235,6 @@ const TreeSelect = defineComponent({
       );
     };
   },
-
-  methods: {
-    saveTreeSelect(node: any) {
-      this.vcTreeSelect = node;
-    },
-    focus() {
-      this.vcTreeSelect.focus();
-    },
-
-    blur() {
-      this.vcTreeSelect.blur();
-    },
-    renderSwitcherIcon(prefixCls: string, { isLeaf, loading }) {
-      if (loading) {
-        return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />;
-      }
-      if (isLeaf) {
-        return null;
-      }
-      return <CaretDownOutlined class={`${prefixCls}-switcher-icon`} />;
-    },
-    handleChange(...args: any[]) {
-      this.$emit('update:value', args[0]);
-      this.$emit('change', ...args);
-    },
-    handleTreeExpand(...args: any[]) {
-      this.$emit('update:treeExpandedKeys', args[0]);
-      this.$emit('treeExpand', ...args);
-    },
-    handleSearch(...args: any[]) {
-      this.$emit('update:searchValue', args[0]);
-      this.$emit('search', ...args);
-    },
-    updateTreeData(treeData: any[]) {
-      const { $slots } = this;
-      const defaultFields = {
-        children: 'children',
-        title: 'title',
-        key: 'key',
-        label: 'label',
-        value: 'value',
-      };
-      const replaceFields = { ...defaultFields, ...this.$props.replaceFields };
-      return treeData.map(item => {
-        const { slots = {} } = item;
-        const label = item[replaceFields.label];
-        const title = item[replaceFields.title];
-        const value = item[replaceFields.value];
-        const key = item[replaceFields.key];
-        const children = item[replaceFields.children];
-        let newLabel = typeof label === 'function' ? label() : label;
-        let newTitle = typeof title === 'function' ? title() : title;
-        if (!newLabel && slots.label && $slots[slots.label]) {
-          newLabel = <>{$slots[slots.label](item)}</>;
-        }
-        if (!newTitle && slots.title && $slots[slots.title]) {
-          newTitle = <>{$slots[slots.title](item)}</>;
-        }
-        const treeNodeProps = {
-          ...item,
-          title: newTitle || newLabel,
-          value,
-          dataRef: item,
-          key,
-        };
-        if (children) {
-          return { ...treeNodeProps, children: this.updateTreeData(children) };
-        }
-        return treeNodeProps;
-      });
-    },
-  },
 });
 
 /* istanbul ignore next */
diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
@@ -8,6 +8,7 @@ import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import type { DataNode, DragNodeEvent, FieldNames, Key } from '../vc-tree/interface';
+import type { TreeNodeProps } from '../vc-tree/props';
 import { treeProps as vcTreeProps } from '../vc-tree/props';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import renderSwitcherIcon from './utils/iconUtil';
@@ -35,7 +36,7 @@ export interface AntdTreeNodeAttribute {
   disableCheckbox: boolean;
 }
 
-export type AntTreeNodeProps = DataNode;
+export type AntTreeNodeProps = TreeNodeProps;
 
 // [Legacy] Compatible for v2
 export type TreeDataItem = DataNode;
diff --git a/components/tree/index.tsx b/components/tree/index.tsx
@@ -11,7 +11,6 @@ export {
   AntTreeNodeCheckedEvent,
   AntTreeNodeSelectedEvent,
   AntdTreeNodeAttribute,
-  AntTreeNodeProps,
   TreeDataItem,
 } from './Tree';
 
diff --git a/components/tree/utils/dictUtil.ts b/components/tree/utils/dictUtil.ts
@@ -1,4 +1,4 @@
-import type { DataNode, Key } from 'ant-design-vue/es/vc-tree/interface';
+import type { DataNode, Key } from '../../vc-tree/interface';
 
 enum Record {
   None,
diff --git a/components/tree/utils/iconUtil.tsx b/components/tree/utils/iconUtil.tsx
@@ -4,7 +4,7 @@ import MinusSquareOutlined from '@ant-design/icons-vue/MinusSquareOutlined';
 import PlusSquareOutlined from '@ant-design/icons-vue/PlusSquareOutlined';
 import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled';
 import type { AntTreeNodeProps } from '../Tree';
-import { isValidElement } from 'ant-design-vue/es/_util/props-util';
+import { isValidElement } from '../../_util/props-util';
 
 import { cloneVNode } from 'vue';
 
diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx
@@ -5,7 +5,7 @@ import type { VNodeChild } from 'vue';
 import { Fragment } from 'vue';
 import { computed, defineComponent, ref, watch } from 'vue';
 import PropTypes from '../../_util/vue-types';
-import { useInjectTreeSelectContext } from 'ant-design-vue/es/vc-tree-select/Context';
+import { useInjectTreeSelectContext } from '../../vc-tree-select/Context';
 
 interface SelectorProps extends InnerSelectorProps {
   inputElement: VNodeChild;
diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx
@@ -1034,7 +1034,7 @@ export default function generateSelector<
           internalProps = {},
 
           ...restProps
-        } = props; //as SelectProps<OptionType[], ValueType>;
+        } = { ...props, ...attrs }; //as SelectProps<OptionType[], ValueType>;
         // ============================= Input ==============================
         // Only works in `combobox`
         const customizeInputElement: VNodeChild | JSX.Element =
@@ -1144,9 +1144,8 @@ export default function generateSelector<
         });
         return (
           <div
-            {...attrs}
-            class={mergedClassName}
             {...domProps}
+            class={mergedClassName}
             ref={containerRef}
             onMousedown={onInternalMouseDown}
             onKeydown={onInternalKeyDown}
diff --git a/components/vc-tree-select/OptionList.tsx b/components/vc-tree-select/OptionList.tsx
@@ -143,7 +143,7 @@ export default defineComponent({
       activeKey.value = key;
     };
     expose({
-      scrollTo: (...args: any[]) => treeRef.value.scrollTo?.(...args),
+      scrollTo: (...args: any[]) => treeRef.value?.scrollTo?.(...args),
       onKeydown: (event: KeyboardEvent) => {
         const { which } = event;
         switch (which) {
diff --git a/components/vc-tree-select/generate.tsx b/components/vc-tree-select/generate.tsx
@@ -64,6 +64,7 @@ const OMIT_PROPS: (keyof TreeSelectProps)[] = [
   'treeDataSimpleMode',
   'treeNodeLabelProp',
   'treeDefaultExpandedKeys',
+  'bordered',
 ];
 
 export default function generate(config: {
@@ -236,8 +237,9 @@ export default function generate(config: {
             ...checkedKeys.map(key => getEntityByKey(key).data.value),
           ];
           rawHalfCheckedKeys.value = halfCheckedKeys;
+        } else {
+          [rawValues.value, rawHalfCheckedKeys.value] = [newRawValues, valueHalfCheckedKeys];
         }
-        [rawValues.value, rawHalfCheckedKeys.value] = [newRawValues, valueHalfCheckedKeys];
       });
 
       const selectValues = useSelectValues(rawValues, {
@@ -378,7 +380,7 @@ export default function generate(config: {
         option: DataNode,
         source: SelectSource,
       ) => {
-        const eventValue = mergedLabelInValue.value ? selectValue : selectValue;
+        const eventValue = selectValue;
 
         let newRawValues = removeValue(rawValues.value, selectValue);
 
diff --git a/components/vc-tree-select/hooks/useTreeData.ts b/components/vc-tree-select/hooks/useTreeData.ts
@@ -1,4 +1,4 @@
-import { warning } from 'ant-design-vue/es/vc-util/warning';
+import { warning } from '../../vc-util/warning';
 import type { ComputedRef, Ref } from 'vue';
 import { computed } from 'vue';
 import type {
@@ -76,6 +76,7 @@ function formatTreeData(
         value: mergedValue,
         title: getLabelProp(node),
         node,
+        dataRef: node,
       };
 
       if (node.slots) {
diff --git a/components/vc-tree-select/interface.ts b/components/vc-tree-select/interface.ts
@@ -39,6 +39,8 @@ export interface InternalDataEntity {
   /** Origin DataNode */
   node: DataNode;
 
+  dataRef: DataNode;
+
   slots?: Record<string, string>; // 兼容 V2
 }
 
diff --git a/components/vc-tree-select/utils/valueUtil.ts b/components/vc-tree-select/utils/valueUtil.ts
@@ -11,9 +11,9 @@ import type {
 } from '../interface';
 import { fillLegacyProps } from './legacyUtil';
 import type { SkipType } from '../hooks/useKeyValueMapping';
-import type { FlattenNode } from 'ant-design-vue/es/vc-tree/interface';
-import { flattenTreeData } from 'ant-design-vue/es/vc-tree/utils/treeUtil';
-import type { FilterFunc } from 'ant-design-vue/es/vc-select/interface/generator';
+import type { FlattenNode } from '../../vc-tree/interface';
+import { flattenTreeData } from '../../vc-tree/utils/treeUtil';
+import type { FilterFunc } from '../../vc-select/interface/generator';
 
 type CompatibleDataNode = Omit<FlattenDataNode, 'level'>;
 
diff --git a/components/vc-tree-select/utils/warningPropsUtil.ts b/components/vc-tree-select/utils/warningPropsUtil.ts
@@ -1,12 +1,14 @@
 import { warning } from '../../vc-util/warning';
-import type { TreeSelectProps } from '../TreeSelect';
 import { toArray } from './valueUtil';
 
-function warningProps(props: TreeSelectProps) {
+function warningProps(props: any) {
   const { searchPlaceholder, treeCheckStrictly, treeCheckable, labelInValue, value, multiple } =
     props;
 
-  warning(!searchPlaceholder, '`searchPlaceholder` has been removed.');
+  warning(
+    !searchPlaceholder,
+    '`searchPlaceholder` has been removed, please use `placeholder` instead',
+  );
 
   if (treeCheckStrictly && labelInValue === false) {
     warning(false, '`treeCheckStrictly` will force set `labelInValue` to `true`.');
diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx
@@ -634,7 +634,7 @@ export default defineComponent({
 
         checkedObj = newCheckedKeys;
 
-        // [Legacy] This is used for `rc-tree-select`
+        // [Legacy] This is used for vc-tree-select`
         eventObj.checkedNodes = [];
         eventObj.checkedNodesPositions = [];
         eventObj.halfCheckedKeys = newHalfCheckedKeys;
@@ -997,7 +997,6 @@ export default defineComponent({
 
       const { class: className, style } = attrs;
       const domProps = getDataAndAria({ ...props, ...attrs });
-
       return (
         <TreeContext
           value={{
diff --git a/components/vc-tree/utils/treeUtil.ts b/components/vc-tree/utils/treeUtil.ts
@@ -402,8 +402,8 @@ export function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode
     pos,
     active,
   } = props;
-
   const eventData = {
+    dataRef: data,
     ...data,
     expanded,
     selected,
@@ -416,7 +416,6 @@ export function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode
     dragOverGapBottom,
     pos,
     active,
-    dataRef: data,
     eventKey: data.key,
   };
   if (!('props' in eventData)) {
diff --git a/examples/App.vue b/examples/App.vue
diff --git a/v2-doc b/v2-doc

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { DataNode, Key } from 'ant-design-vue/es/vc-tree/interface';`
	`1`	`+import type { DataNode, Key } from '../../vc-tree/interface';`
`2`	`2`
`3`	`3`	`enum Record {`
`4`	`4`	`None,`