refactor(transfer): use composition api (#4135)

* refactor(transfer): use composition api

* fix: remove console

Author: ajuner

components/style/themes/default.less

@@ -775,9 +775,12 @@
 // Transfer
 // ---
 @transfer-header-height: 40px;
+@transfer-item-height: @height-base;
 @transfer-disabled-bg: @disabled-bg;
 @transfer-list-height: 200px;
 @transfer-item-hover-bg: @item-hover-bg;
+@transfer-item-padding-vertical: 6px;
+@transfer-list-search-icon-top: 12px;
 
 // Message
 // ---

components/transfer/ListItem.tsx

@@ -1,66 +1,117 @@
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import classNames from '../_util/classNames';
+import { TransferLocale } from '.';
+import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined';
+import defaultLocale from '../locale/default';
 import Lazyload from '../vc-lazy-load';
 import Checkbox from '../checkbox';
-import { defineComponent } from 'vue';
+import TransButton from '../_util/transButton';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { defineComponent, ExtractPropTypes } from 'vue';
 
 function noop() {}
 
+export const transferListItemProps = {
+  renderedText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  renderedEl: PropTypes.any,
+  item: PropTypes.any,
+  lazy: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])),
+  checked: PropTypes.looseBool,
+  prefixCls: PropTypes.string,
+  disabled: PropTypes.looseBool,
+  showRemove: PropTypes.looseBool,
+  onClick: PropTypes.func,
+  onRemove: PropTypes.func,
+};
+
+export type TransferListItemProps = Partial<ExtractPropTypes<typeof transferListItemProps>>;
+
 export default defineComponent({
   name: 'ListItem',
   inheritAttrs: false,
-  props: {
-    renderedText: PropTypes.any,
-    renderedEl: PropTypes.any,
-    item: PropTypes.any,
-    lazy: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])),
-    checked: PropTypes.looseBool,
-    prefixCls: PropTypes.string,
-    disabled: PropTypes.looseBool,
-    onClick: PropTypes.func,
-  },
-  render() {
-    const { renderedText, renderedEl, item, lazy, checked, disabled, prefixCls } = this.$props;
+  props: transferListItemProps,
+  emits: ['click'],
+  setup(props, { emit }) {
+    return () => {
+      const {
+        renderedText,
+        renderedEl,
+        item,
+        lazy,
+        checked,
+        disabled,
+        prefixCls,
+        showRemove,
+        onRemove,
+      } = props;
+      const className = classNames({
+        [`${prefixCls}-content-item`]: true,
+        [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
+      });
 
-    const className = classNames({
-      [`${prefixCls}-content-item`]: true,
-      [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
-    });
+      let title: string;
+      if (typeof renderedText === 'string' || typeof renderedText === 'number') {
+        title = String(renderedText);
+      }
 
-    let title;
-    if (typeof renderedText === 'string' || typeof renderedText === 'number') {
-      title = String(renderedText);
-    }
+      const listItem = (
+        <LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
+          {(transferLocale: TransferLocale) => {
+            const labelNode = <span class={`${prefixCls}-content-item-text`}>{renderedEl}</span>;
+            if (showRemove) {
+              return (
+                <li
+                  class={className}
+                  title={title}
+                  onClick={() => {
+                    onRemove?.(item);
+                  }}
+                >
+                  {labelNode}
+                  <TransButton
+                    disabled={disabled || item.disabled}
+                    class={`${prefixCls}-content-item-remove`}
+                    aria-label={transferLocale.remove}
+                  >
+                    <DeleteOutlined />
+                  </TransButton>
+                </li>
+              );
+            }
 
-    const listItem = (
-      <li
-        class={className}
-        title={title}
-        onClick={
-          disabled || item.disabled
-            ? noop
-            : () => {
-                this.$emit('click', item);
-              }
-        }
-      >
-        <Checkbox checked={checked} disabled={disabled || item.disabled} />
-        <span class={`${prefixCls}-content-item-text`}>{renderedEl}</span>
-      </li>
-    );
-    let children = null;
-    if (lazy) {
-      const lazyProps = {
-        height: 32,
-        offset: 500,
-        throttle: 0,
-        debounce: false,
-        ...(lazy as any),
-      };
-      children = <Lazyload {...lazyProps}>{listItem}</Lazyload>;
-    } else {
-      children = listItem;
-    }
-    return children;
+            return (
+              <li
+                class={className}
+                title={title}
+                onClick={
+                  disabled || item.disabled
+                    ? noop
+                    : () => {
+                        emit('click', item);
+                      }
+                }
+              >
+                <Checkbox checked={checked} disabled={disabled || item.disabled} />
+                {labelNode}
+              </li>
+            );
+          }}
+        </LocaleReceiver>
+      );
+      let children = null;
+      if (lazy) {
+        const lazyProps = {
+          height: 32,
+          offset: 500,
+          throttle: 0,
+          debounce: false,
+          ...(lazy as any),
+        };
+        children = <Lazyload {...lazyProps}>{listItem}</Lazyload>;
+      } else {
+        children = listItem;
+      }
+      return children;
+    };
   },
 });