refactor: transfer to ts

components/transfer/ListItem.tsx

@@ -2,10 +2,11 @@ import PropTypes, { withUndefined } from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import Lazyload from '../vc-lazy-load';
 import Checkbox from '../checkbox';
+import { defineComponent } from 'vue';
 
 function noop() {}
 
-export default {
+export default defineComponent({
   name: 'ListItem',
   inheritAttrs: false,
   props: {
@@ -54,7 +55,7 @@ export default {
         offset: 500,
         throttle: 0,
         debounce: false,
-        ...lazy,
+        ...(lazy as any),
       };
       children = <Lazyload {...lazyProps}>{listItem}</Lazyload>;
     } else {
@@ -62,4 +63,4 @@ export default {
     }
     return children;
   },
-};
+});

components/transfer/index.tsx

@@ -1,15 +1,16 @@
-import { inject } from 'vue';
+import { App, defineComponent, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { hasProp, initDefaultProps, getOptionProps, getComponent } from '../_util/props-util';
+import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 import BaseMixin from '../_util/BaseMixin';
 import classNames from '../_util/classNames';
 import List from './list';
 import Operation from './operation';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
-import { defaultConfigProvider } from '../config-provider';
+import { defaultConfigProvider, RenderEmptyHandler } from '../config-provider';
 
-export const TransferDirection = 'left' | 'right';
+export type TransferDirection = 'left' | 'right';
 
 export const TransferItem = {
   key: PropTypes.string.isRequired,
@@ -45,14 +46,15 @@ export const TransferProps = {
   onScroll: PropTypes.func,
 };
 
-export const TransferLocale = {
+export interface TransferLocale {
-  titles: PropTypes.arrayOf(PropTypes.string),
+  titles: string[];
-  notFoundContent: PropTypes.string,
+  notFoundContent: string;
-  itemUnit: PropTypes.string,
+  searchPlaceholder: string;
-  itemsUnit: PropTypes.string,
+  itemUnit: string;
-};
+  itemsUnit: string;
+}
 
-const Transfer = {
+const Transfer = defineComponent({
   name: 'ATransfer',
   inheritAttrs: false,
   mixins: [BaseMixin],
@@ -64,6 +66,9 @@ const Transfer = {
   }),
   setup() {
     return {
+      selectedKeys: [],
+      targetKeys: [],
+      separatedDataSource: null,
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
@@ -114,16 +119,16 @@ const Transfer = {
       return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
     },
 
-    getTitles(transferLocale) {
+    getTitles(transferLocale: TransferLocale) {
       if (this.titles) {
         return this.titles;
       }
       return transferLocale.titles || ['', ''];
     },
 
-    getLocale(transferLocale, renderEmpty) {
+    getLocale(transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) {
       // Keep old locale props still working.
-      const oldLocale = {
+      const oldLocale: { notFoundContent?: any; searchPlaceholder?: string } = {
         notFoundContent: renderEmpty('Transfer'),
       };
       const notFoundContent = getComponent(this, 'notFoundContent');
@@ -161,7 +166,7 @@ const Transfer = {
       }
     },
 
-    moveTo(direction) {
+    moveTo(direction: TransferDirection) {
       const { targetKeys = [], dataSource = [] } = this.$props;
       const { sourceSelectedKeys, targetSelectedKeys } = this;
       const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
@@ -191,7 +196,7 @@ const Transfer = {
       this.moveTo('right');
     },
 
-    onItemSelectAll(direction, selectedKeys, checkAll) {
+    onItemSelectAll(direction: TransferDirection, selectedKeys: string[], checkAll: boolean) {
       const originalSelectedKeys = this.$data[this.getSelectedKeysName(direction)] || [];
 
       let mergedCheckedKeys = [];
@@ -319,7 +324,7 @@ const Transfer = {
       this.handleScroll('right', e);
     },
 
-    handleSelectChange(direction, holder) {
+    handleSelectChange(direction: TransferDirection, holder: string[]) {
       const { sourceSelectedKeys, targetSelectedKeys } = this;
 
       if (direction === 'left') {
@@ -361,7 +366,7 @@ const Transfer = {
       };
     },
 
-    renderTransfer(transferLocale) {
+    renderTransfer(transferLocale: TransferLocale) {
       const props = getOptionProps(this);
       const {
         prefixCls: customizePrefixCls,
@@ -478,10 +483,10 @@ const Transfer = {
       />
     );
   },
-};
+});
 
 /* istanbul ignore next */
-Transfer.install = function(app) {
+Transfer.install = function(app: App) {
   app.component(Transfer.name, Transfer);
   return app;
 };

components/transfer/list.tsx

@@ -1,17 +1,13 @@
 import classNames from '../_util/classNames';
 import PropTypes, { withUndefined } from '../_util/vue-types';
-import {
+import { isValidElement, splitAttrs, findDOMNode, filterEmpty } from '../_util/props-util';
-  isValidElement,
+import initDefaultProps from '../_util/props-util/initDefaultProps';
-  initDefaultProps,
-  splitAttrs,
-  findDOMNode,
-  filterEmpty,
-} 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 { defineComponent } from 'vue';
 
 const defaultRender = () => null;
 
@@ -71,7 +67,7 @@ function renderListNode(renderList, props) {
   };
 }
 
-export default {
+export default defineComponent({
   name: 'TransferList',
   mixins: [BaseMixin],
   inheritAttrs: false,
@@ -81,9 +77,14 @@ export default {
     showSearch: false,
     lazy: {},
   }),
+  setup() {
+    return {
+      timer: null,
+      triggerScrollTimer: null,
+      scrollEvent: null,
+    };
+  },
   data() {
-    this.timer = null;
-    this.triggerScrollTimer = null;
     return {
       filterValue: '',
     };
@@ -345,4 +346,4 @@ export default {
       </div>
     );
   },
-};
+});

components/transfer/operation.tsx

@@ -1,10 +1,23 @@
+import { CSSProperties, FunctionalComponent } from 'vue';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import Button from '../button';
 
 function noop() {}
 
-const Operation = (_, { attrs }) => {
+export interface TransferOperationProps {
+  class?: any;
+  leftArrowText?: string;
+  rightArrowText?: string;
+  moveToLeft?: (e: MouseEvent) => void;
+  moveToRight?: (e: MouseEvent) => void;
+  leftActive?: boolean;
+  rightActive?: boolean;
+  style?: CSSProperties | string;
+  disabled?: boolean;
+}
+
+const Operation: FunctionalComponent<TransferOperationProps> = props => {
   const {
     disabled,
     moveToLeft = noop,
@@ -15,7 +28,7 @@ const Operation = (_, { attrs }) => {
     rightActive,
     class: className,
     style,
-  } = attrs;
+  } = props;
 
   return (
     <div class={className} style={style}>
@@ -40,6 +53,7 @@ const Operation = (_, { attrs }) => {
     </div>
   );
 };
+
 Operation.inheritAttrs = false;
 
 export default Operation;

components/transfer/renderListBody.tsx

@@ -1,11 +1,11 @@
-import { TransitionGroup } from 'vue';
+import { defineComponent, TransitionGroup } from 'vue';
 import raf from '../_util/raf';
 import ListItem from './ListItem';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import getTransitionProps from '../_util/getTransitionProps';
 import { findDOMNode } from '../_util/props-util';
 function noop() {}
-const ListBody = {
+const ListBody = defineComponent({
   name: 'ListBody',
   inheritAttrs: false,
   props: {
@@ -18,13 +18,19 @@ const ListBody = {
     onItemSelectAll: PropTypes.func,
     onScroll: PropTypes.func,
   },
+  setup() {
+    return {
+      mountId: null,
+      lazyId: null,
+    };
+  },
   data() {
     return {
       mounted: false,
     };
   },
   computed: {
-    itemsLength() {
+    itemsLength(): number {
       return this.filteredRenderItems ? this.filteredRenderItems.length : 0;
     },
   },
@@ -74,7 +80,7 @@ const ListBody = {
       selectedKeys,
       disabled: globalDisabled,
     } = this.$props;
-    const items = filteredRenderItems.map(({ renderedEl, renderedText, item }) => {
+    const items = filteredRenderItems.map(({ renderedEl, renderedText, item }: any) => {
       const { disabled } = item;
       const checked = selectedKeys.indexOf(item.key) >= 0;
 
@@ -101,11 +107,11 @@ const ListBody = {
       },
     );
     return (
-      <TransitionGroup class={`${prefixCls}-content`} {...transitionProps}>
+      <TransitionGroup moveClass={`${prefixCls}-content`} {...transitionProps}>
         {items}
       </TransitionGroup>
     );
   },
-};
+});
 
 export default props => <ListBody {...props} />;

components/transfer/search.tsx

@@ -1,8 +1,10 @@
 import PropTypes from '../_util/vue-types';
-import { initDefaultProps, getOptionProps } from '../_util/props-util';
+import { getOptionProps } from '../_util/props-util';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import SearchOutlined from '@ant-design/icons-vue/SearchOutlined';
 import Input from '../input';
+import { defineComponent } from 'vue';
 
 export const TransferSearchProps = {
   prefixCls: PropTypes.string,
@@ -13,7 +15,7 @@ export const TransferSearchProps = {
   onChange: PropTypes.func,
 };
 
-export default {
+export default defineComponent({
   name: 'Search',
   inheritAttrs: false,
   props: initDefaultProps(TransferSearchProps, {
@@ -45,7 +47,7 @@ export default {
       );
 
     return (
-      <div>
+      <>
         <Input
           placeholder={placeholder}
           class={prefixCls}
@@ -54,7 +56,7 @@ export default {
           disabled={disabled}
         />
         {icon}
-      </div>
+      </>
     );
   },
-};
+});

components/transfer/style/index.ts

@@ -0,0 +1,8 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../empty/style';
+import '../../checkbox/style';
+import '../../button/style';
+import '../../input/style';