feat: update transfer

antdv-demo

@@ -1 +1 @@
-Subproject commit e142c7f8cb2025c14d973691cfb90603e9790d46
+Subproject commit 9df702457ee48468507ed7c6c1bf73758087f227

components/transfer/ListItem.jsx

@@ -7,6 +7,7 @@ function noop() {}
 
 export default {
   name: 'ListItem',
+  inheritAttrs: false,
   props: {
     renderedText: PropTypes.any,
     renderedEl: PropTypes.any,
@@ -48,14 +49,12 @@ export default {
     let children = null;
     if (lazy) {
       const lazyProps = {
-        props: {
         height: 32,
         offset: 500,
         throttle: 0,
         debounce: false,
         ...lazy,
         _propsSymbol: Symbol(),
-        },
       };
       children = <Lazyload {...lazyProps}>{listItem}</Lazyload>;
     } else {

components/transfer/index.jsx

@@ -1,11 +1,6 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import {
+import { hasProp, initDefaultProps, getOptionProps, getComponent } from '../_util/props-util';
-  hasProp,
-  initDefaultProps,
-  getOptionProps,
-  getComponentFromProp,
-  getListeners,
-} from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import classNames from 'classnames';
 import List from './list';
@@ -13,8 +8,6 @@ import Operation from './operation';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
 import { ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
-import Base from '../base';
 
 export const TransferDirection = 'left' | 'right';
 
@@ -44,6 +37,7 @@ export const TransferProps = {
   rowKey: PropTypes.func,
   lazy: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   showSelectAll: PropTypes.bool,
+  children: PropTypes.any,
 };
 
 export const TransferLocale = {
@@ -55,6 +49,7 @@ export const TransferLocale = {
 
 const Transfer = {
   name: 'ATransfer',
+  inheritAttrs: false,
   mixins: [BaseMixin],
   props: initDefaultProps(TransferProps, {
     dataSource: [],
@@ -62,13 +57,15 @@ const Transfer = {
     showSearch: false,
     listStyle: () => {},
   }),
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     // vue 中 通过slot，不方便传递，保留notFoundContent及searchPlaceholder
     // warning(
-    //   !(getComponentFromProp(this, 'notFoundContent') || hasProp(this, 'searchPlaceholder')),
+    //   !(getComponent(this, 'notFoundContent') || hasProp(this, 'searchPlaceholder')),
     //   'Transfer[notFoundContent] and Transfer[searchPlaceholder] will be removed, ' +
     //   'please use Transfer[locale] instead.',
     // )
@@ -124,7 +121,7 @@ const Transfer = {
       const oldLocale = {
         notFoundContent: renderEmpty('Transfer'),
       };
-      const notFoundContent = getComponentFromProp(this, 'notFoundContent');
+      const notFoundContent = getComponent(this, 'notFoundContent');
       if (notFoundContent) {
         oldLocale.notFoundContent = notFoundContent;
       }
@@ -238,14 +235,14 @@ const Transfer = {
 
     handleFilter(direction, e) {
       const value = e.target.value;
-      if (getListeners(this).searchChange) {
+      // if (getListeners(this).searchChange) {
-        warning(
+      //   warning(
-          false,
+      //     false,
-          'Transfer',
+      //     'Transfer',
-          '`searchChange` in Transfer is deprecated. Please use `search` instead.',
+      //     '`searchChange` in Transfer is deprecated. Please use `search` instead.',
-        );
+      //   );
-        this.$emit('searchChange', direction, e);
+      //   this.$emit('searchChange', direction, e);
-      }
+      // }
       this.$emit('search', direction, value);
     },
 
@@ -286,18 +283,18 @@ const Transfer = {
       }
     },
 
-    handleSelect(direction, selectedItem, checked) {
+    // handleSelect(direction, selectedItem, checked) {
-      warning(false, 'Transfer', '`handleSelect` will be removed, please use `onSelect` instead.');
+    //   warning(false, 'Transfer', '`handleSelect` will be removed, please use `onSelect` instead.');
-      this.onItemSelect(direction, selectedItem.key, checked);
+    //   this.onItemSelect(direction, selectedItem.key, checked);
-    },
+    // },
 
-    handleLeftSelect(selectedItem, checked) {
+    // handleLeftSelect(selectedItem, checked) {
-      return this.handleSelect('left', selectedItem, checked);
+    //   return this.handleSelect('left', selectedItem, checked);
-    },
+    // },
 
-    handleRightSelect(selectedItem, checked) {
+    // handleRightSelect(selectedItem, checked) {
-      return this.handleSelect('right', selectedItem, checked);
+    //   return this.handleSelect('right', selectedItem, checked);
-    },
+    // },
 
     onLeftItemSelect(selectedKey, checked) {
       return this.onItemSelect('left', selectedKey, checked);
@@ -372,26 +369,27 @@ const Transfer = {
         lazy,
         showSelectAll,
       } = props;
-      const children = getComponentFromProp(this, 'children', {}, false);
+      const { class: className, style } = this.$attrs;
+      const children = getComponent(this, 'children', {}, false);
       const getPrefixCls = this.configProvider.getPrefixCls;
       const prefixCls = getPrefixCls('transfer', customizePrefixCls);
 
       const renderEmpty = this.configProvider.renderEmpty;
       const locale = this.getLocale(transferLocale, renderEmpty);
-      const { sourceSelectedKeys, targetSelectedKeys, $scopedSlots } = this;
+      const { sourceSelectedKeys, targetSelectedKeys, $slots } = this;
-      const { body, footer } = $scopedSlots;
+      const { body, footer } = $slots;
       const renderItem = props.render;
       const { leftDataSource, rightDataSource } = this.separateDataSource();
       const leftActive = targetSelectedKeys.length > 0;
       const rightActive = sourceSelectedKeys.length > 0;
 
-      const cls = classNames(prefixCls, {
+      const cls = classNames(prefixCls, className, {
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-customize-list`]: !!children,
       });
       const titles = this.getTitles(locale);
       return (
-        <div class={cls}>
+        <div class={cls} style={style}>
           <List
             key="leftList"
             prefixCls={`${prefixCls}-list`}
@@ -402,7 +400,7 @@ const Transfer = {
             checkedKeys={sourceSelectedKeys}
             handleFilter={this.handleLeftFilter}
             handleClear={this.handleLeftClear}
-            handleSelect={this.handleLeftSelect}
+            // handleSelect={this.handleLeftSelect}
             handleSelectAll={this.handleLeftSelectAll}
             onItemSelect={this.onLeftItemSelect}
             onItemSelectAll={this.onLeftItemSelectAll}
@@ -443,7 +441,7 @@ const Transfer = {
             checkedKeys={targetSelectedKeys}
             handleFilter={this.handleRightFilter}
             handleClear={this.handleRightClear}
-            handleSelect={this.handleRightSelect}
+            // handleSelect={this.handleRightSelect}
             handleSelectAll={this.handleRightSelectAll}
             onItemSelect={this.onRightItemSelect}
             onItemSelectAll={this.onRightItemSelectAll}
@@ -471,16 +469,15 @@ const Transfer = {
       <LocaleReceiver
         componentName="Transfer"
         defaultLocale={defaultLocale.Transfer}
-        scopedSlots={{ default: this.renderTransfer }}
+        children={this.renderTransfer}
       />
     );
   },
 };
 
 /* istanbul ignore next */
-Transfer.install = function(Vue) {
+Transfer.install = function(app) {
-  Vue.use(Base);
+  app.component(Transfer.name, Transfer);
-  Vue.component(Transfer.name, Transfer);
 };
 
 export default Transfer;

components/transfer/list.jsx

@@ -1,12 +1,11 @@
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
-import { isValidElement, initDefaultProps, getListeners } from '../_util/props-util';
+import { isValidElement, initDefaultProps, splitAttrs } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import Checkbox from '../checkbox';
 import Search from './search';
 import defaultRenderList from './renderListBody';
 import triggerEvent from '../_util/triggerEvent';
-import addEventListener from '../vc-util/Dom/addEventListener';
 
 const defaultRender = () => null;
 
@@ -51,11 +50,11 @@ export const TransferListProps = {
   showSelectAll: PropTypes.bool,
 };
 
-function renderListNode(h, renderList, props) {
+function renderListNode(renderList, props) {
   let bodyContent = renderList ? renderList(props) : null;
   const customize = !!bodyContent;
   if (!customize) {
-    bodyContent = defaultRenderList(h, props);
+    bodyContent = defaultRenderList(props);
   }
   return {
     customize,
@@ -66,6 +65,7 @@ function renderListNode(h, renderList, props) {
 export default {
   name: 'TransferList',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: initDefaultProps(TransferListProps, {
     dataSource: [],
     titleText: '',
@@ -79,19 +79,6 @@ export default {
       filterValue: '',
     };
   },
-  // mounted() {
-  //   this.timer = setTimeout(() => {
-  //     this.setState({
-  //       mounted: true,
-  //     });
-  //   }, 0);
-  //   this.$nextTick(() => {
-  //     if (this.$refs.listContentWrapper) {
-  //       const listContentWrapperDom = this.$refs.listContentWrapper.$el;
-  //       this.scrollEvent = addEventListener(listContentWrapperDom, 'scroll', this.handleScroll);
-  //     }
-  //   });
-  // },
   beforeUnmount() {
     clearTimeout(this.triggerScrollTimer);
     // if (this.scrollEvent) {
@@ -103,10 +90,6 @@ export default {
       if (this.scrollEvent) {
         this.scrollEvent.remove();
       }
-      if (this.$refs.listContentWrapper) {
-        const listContentWrapperDom = this.$refs.listContentWrapper.$el;
-        this.scrollEvent = addEventListener(listContentWrapperDom, 'scroll', this.handleScroll);
-      }
     });
   },
   methods: {
@@ -173,10 +156,13 @@ export default {
       let listBody = bodyDom;
       if (!listBody) {
         let bodyNode;
-
+        const { onEvents } = splitAttrs(this.$attrs);
         const { bodyContent, customize } = renderListNode(renderList, {
-          props: { ...this.$props, filteredItems, filteredRenderItems, selectedKeys: checkedKeys },
+          ...this.$props,
-          on: getListeners(this),
+          filteredItems,
+          filteredRenderItems,
+          selectedKeys: checkedKeys,
+          ...onEvents,
         });
 
         // We should wrap customize list body in a classNamed div to use flex layout.
@@ -334,7 +320,7 @@ export default {
     const checkAllCheckbox = this.getCheckBox(filteredItems, showSelectAll, disabled);
 
     return (
-      <div class={listCls}>
+      <div class={listCls} style={this.$attrs.style}>
         <div class={`${prefixCls}-header`}>
           {checkAllCheckbox}
           <span class={`${prefixCls}-header-selected`}>

components/transfer/operation.jsx

@@ -1,26 +1,10 @@
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
-import PropTypes from '../_util/vue-types';
-import { getOptionProps } from '../_util/props-util';
 import Button from '../button';
 
 function noop() {}
 
-export const TransferOperationProps = {
+const Operation = (_, { attrs }) => {
-  className: PropTypes.string,
-  leftArrowText: PropTypes.string,
-  rightArrowText: PropTypes.string,
-  moveToLeft: PropTypes.any,
-  moveToRight: PropTypes.any,
-  leftActive: PropTypes.bool,
-  rightActive: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-export default {
-  name: 'Operation',
-  props: { ...TransferOperationProps },
-  render() {
   const {
     disabled,
     moveToLeft = noop,
@@ -29,28 +13,23 @@ export default {
     rightArrowText = '',
     leftActive,
     rightActive,
-    } = getOptionProps(this);
+    class: className,
+    style,
+  } = attrs;
+
   return (
-      <div>
+    <div class={className} style={style}>
-        <Button
+      <Button type="primary" size="small" disabled={disabled || !rightActive} onClick={moveToRight}>
-          type="primary"
-          size="small"
-          disabled={disabled || !rightActive}
-          onClick={moveToRight}
-        >
         <RightOutlined slot="icon" />
         {rightArrowText}
       </Button>
-        <Button
+      <Button type="primary" size="small" disabled={disabled || !leftActive} onClick={moveToLeft}>
-          type="primary"
-          size="small"
-          disabled={disabled || !leftActive}
-          onClick={moveToLeft}
-        >
         <LeftOutlined slot="icon" />
         {leftArrowText}
       </Button>
     </div>
   );
-  },
 };
+Operation.inheritAttrs = false;
+
+export default Operation;

components/transfer/renderListBody.jsx

@@ -1,3 +1,4 @@
+import { TransitionGroup } from 'vue';
 import raf from '../_util/raf';
 import ListItem from './ListItem';
 import PropTypes from '../_util/vue-types';
@@ -91,18 +92,16 @@ const ListBody = {
       mounted ? `${prefixCls}-content-item-highlight` : '',
       {
         tag: 'ul',
-        nativeOn: {
+        onScroll: this.onScroll,
-          scroll: this.onScroll,
+        onLeave: noop,
-        },
-        leave: noop,
       },
     );
     return (
-      <transition-group class={`${prefixCls}-content`} {...transitionProps}>
+      <TransitionGroup class={`${prefixCls}-content`} {...transitionProps}>
         {items}
-      </transition-group>
+      </TransitionGroup>
     );
   },
 };
 
-export default (h, props) => <ListBody {...props} />;
+export default props => <ListBody {...props} />;

components/transfer/search.jsx

@@ -14,6 +14,7 @@ export const TransferSearchProps = {
 
 export default {
   name: 'Search',
+  inheritAttrs: false,
   props: initDefaultProps(TransferSearchProps, {
     placeholder: '',
   }),

components/vc-tree/src/Tree.jsx

@@ -482,6 +482,7 @@ const Tree = {
         });
       }
       this.$emit('update:checkedKeys', checkedObj);
+
       this.__emit('check', checkedObj, eventObj);
     },
     onNodeLoad(treeNode) {

examples/index.js

@@ -29,6 +29,7 @@ import {
   Avatar,
   Tree,
   TreeSelect,
+  Transfer,
   notification,
   message,
 } from 'ant-design-vue';
@@ -46,11 +47,11 @@ const app = createApp(App);
 app.config.globalProperties.$notification = notification;
 app.config.globalProperties.$message = message;
 app
-  // .component('demo-sort', { ...basic })
+  .component('demo-sort', { ...basic })
-  // .component('md', { ...basic })
+  .component('md', { ...basic })
-  // .component('api', { ...basic })
+  .component('api', { ...basic })
-  // .component('CN', { ...basic })
+  .component('CN', { ...basic })
-  // .component('US', { ...basic })
+  .component('US', { ...basic })
   .use(Pagination)
   .use(Select)
   .use(Spin)
@@ -78,4 +79,5 @@ app
   .use(Card)
   .use(Tree)
   .use(TreeSelect)
+  .use(Transfer)
   .mount('#app');

package.json

@@ -76,7 +76,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@octokit/rest": "^16.0.0",
     "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/compiler-sfc": "^3.0.0-beta.21",
+    "@vue/compiler-sfc": "^3.0.0-rc.1",
     "@vue/server-test-utils": "1.0.0-beta.16",
     "@vue/test-utils": "^2.0.0-alpha.6",
     "acorn": "^7.0.0",
@@ -152,7 +152,7 @@
     "terser-webpack-plugin": "^3.0.3",
     "through2": "^3.0.0",
     "url-loader": "^3.0.0",
-    "vue": "^3.0.0-beta.21",
+    "vue": "^3.0.0-rc.1",
     "vue-antd-md-loader": "^1.1.0",
     "vue-clipboard2": "0.3.1",
     "vue-draggable-resizable": "^2.1.0",