feat: transfer add status

components/transfer/ListBody.tsx

@@ -27,6 +27,9 @@ function parsePagination(pagination) {
 
   const defaultPagination = {
     pageSize: 10,
+    simple: true,
+    showSizeChanger: false,
+    showLessItems: false,
   };
 
   if (typeof pagination === 'object') {
@@ -114,7 +117,9 @@ const ListBody = defineComponent({
       if (mergedPagination.value) {
         paginationNode = (
           <Pagination
-            simple
+            simple={mergedPagination.value.simple}
+            showSizeChanger={mergedPagination.value.showSizeChanger}
+            showLessItems={mergedPagination.value.showLessItems}
             size="small"
             disabled={globalDisabled}
             class={`${prefixCls}-pagination`}

components/transfer/demo/index.vue

@@ -8,6 +8,7 @@
     <pagination />
     <table-transfer />
     <tree-transfer />
+    <statusVue />
   </demo-sort>
 </template>
 <script lang="ts">
@@ -19,6 +20,7 @@ import CustomItem from './custom-item.vue';
 import TableTransfer from './table-transfer.vue';
 import TreeTransfer from './tree-transfer.vue';
 import Pagination from './pagination.vue';
+import statusVue from './status.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -27,6 +29,7 @@ export default defineComponent({
   CN,
   US,
   components: {
+    statusVue,
     Basic,
     Oneway,
     Search,

components/transfer/demo/status.vue

@@ -0,0 +1,33 @@
+<docs>
+---
+order: 19
+version: 3.3.0
+title:
+  zh-CN: 自定义状态
+  en-US: Status
+---
+
+## zh-CN
+
+使用 `status` 为 DatePicker 添加状态，可选 `error` 或者 `warning`。
+
+## en-US
+
+Add status to DatePicker with `status`, which could be `error` or `warning`.
+
+</docs>
+
+<template>
+  <a-space direction="vertical">
+    <a-transfer status="error" />
+    <a-transfer status="warning" show-search />
+  </a-space>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>

components/transfer/index.en-US.md

@@ -29,11 +29,12 @@ One or more elements can be selected from either column, one click on the proper
 | oneWay | Display as single direction style | boolean | false | 3.0.0 |
 | operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] |  |
 | operationStyle | A custom CSS style used for rendering the operations column | CSSProperties | - | 3.0.0 |
-| pagination | Use pagination. Not work in render props | boolean \| { pageSize: number } | false | 3.0.0 |
+| pagination | Use pagination. Not work in render props | boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean } | false | 3.0.0 |
 | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) \| slot |  |  |
 | selectedKeys(v-model) | A set of keys of selected items. | string\[] | \[] |  |
 | showSearch | If included, a search box is shown on each column. | boolean | false |  |
 | showSelectAll | Show select all checkbox on the header | boolean | true |  |
+| status | Set validation status | 'error' \| 'warning' | - | 3.3.0 |
 | targetKeys(v-model) | A set of keys of elements that are listed on the right column. | string\[] | \[] |  |
 | titles | A set of titles that are sorted from left to right. | string\[] | - |  |
 

components/transfer/index.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
-import { watchEffect, defineComponent, ref, watch, toRaw } from 'vue';
+import { computed, watchEffect, defineComponent, ref, watch, toRaw } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import classNames from '../_util/classNames';
@@ -12,8 +12,10 @@ import { withInstall } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import type { TransferListBodyProps } from './ListBody';
 import type { PaginationType } from './interface';
-import { useInjectFormItemContext } from '../form/FormItemContext';
+import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext';
 import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
+import type { InputStatus } from '../_util/statusUtils';
+import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils';
 
 export type { TransferListProps } from './list';
 export type { TransferOperationProps } from './operation';
@@ -90,6 +92,7 @@ export const transferProps = () => ({
   children: { type: Function as PropType<(props: TransferListBodyProps) => VueNode> },
   oneWay: { type: Boolean, default: undefined },
   pagination: { type: [Object, Boolean] as PropType<PaginationType>, default: undefined },
+  status: String as PropType<InputStatus>,
   onChange: Function as PropType<
     (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void
   >,
@@ -125,6 +128,8 @@ const Transfer = defineComponent({
     const targetSelectedKeys = ref([]);
 
     const formItemContext = useInjectFormItemContext();
+    const formItemInputContext = FormItemInputContext.useInject();
+    const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
     watch(
       () => props.selectedKeys,
       () => {
@@ -334,10 +339,16 @@ const Transfer = defineComponent({
       const leftActive = targetSelectedKeys.value.length > 0;
       const rightActive = sourceSelectedKeys.value.length > 0;
 
-      const cls = classNames(prefixCls.value, className, {
+      const cls = classNames(
-        [`${prefixCls.value}-disabled`]: disabled,
+        prefixCls.value,
-        [`${prefixCls.value}-customize-list`]: !!children,
+        className,
-      });
+        {
+          [`${prefixCls.value}-disabled`]: disabled,
+          [`${prefixCls.value}-customize-list`]: !!children,
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        },
+        getStatusClassNames(prefixCls.value, mergedStatus.value, formItemInputContext.hasFeedback),
+      );
       const titles = props.titles;
       const leftTitle =
         (titles && titles[0]) ?? slots.leftTitle?.() ?? (locale.titles || ['', ''])[0];

components/transfer/index.zh-CN.md

@@ -30,11 +30,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
 | oneWay | 展示为单向样式 | boolean | false | 3.0.0 |
 | operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '<'] |  |
 | operationStyle | 操作栏的自定义样式 | CSSProperties | - | 3.0.0 |
-| pagination | 使用分页样式，自定义渲染列表下无效 | boolean \| { pageSize: number } | flase | 3.0.0 |
+| pagination | 使用分页样式，自定义渲染列表下无效 | boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean } | flase | 3.0.0 |
 | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record)\| slot |  |  |
 | selectedKeys(v-model) | 设置哪些项应该被选中 | string\[] | \[] |  |
 | showSearch | 是否显示搜索框 | boolean | false |  |
 | showSelectAll | 是否展示全选勾选框 | boolean | true |  |
+| status | 设置校验状态 | 'error' \| 'warning' | - | 3.3.0 |
 | targetKeys(v-model) | 显示在右侧框数据的 key 集合 | string\[] | \[] |  |
 | titles | 标题集合，顺序从左至右 | string\[] | \['', ''] |  |
 

components/transfer/interface.ts

@@ -2,4 +2,7 @@ export type PaginationType =
   | boolean
   | {
       pageSize?: number;
+      simple?: boolean;
+      showSizeChanger?: boolean;
+      showLessItems?: boolean;
     };

components/transfer/list.tsx

@@ -15,7 +15,7 @@ import type { TransferDirection, TransferItem } from './index';
 const defaultRender = () => null;
 
 function isRenderResultPlainObject(result: VNode) {
-  return (
+  return !!(
     result &&
     !isValidElement(result) &&
     Object.prototype.toString.call(result) === '[object Object]'

components/transfer/style/index.less

@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 @import '../../checkbox/style/mixin';
 @import './customize';
+@import './status';
 
 @transfer-prefix-cls: ~'@{ant-prefix}-transfer';
 

components/transfer/style/index.tsx

@@ -9,3 +9,5 @@ import '../../input/style';
 import '../../menu/style';
 import '../../dropdown/style';
 import '../../pagination/style';
+
+// deps-lint-skip: form

components/transfer/style/status.less

@@ -0,0 +1,31 @@
+@import '../../input/style/mixin';
+
+@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
+
+.transfer-status-color(@color) {
+  .@{transfer-prefix-cls}-list {
+    border-color: @color;
+
+    &-search:not([disabled]) {
+      border-color: @input-border-color;
+
+      &:hover {
+        .hover();
+      }
+
+      &:focus {
+        .active();
+      }
+    }
+  }
+}
+
+.@{transfer-prefix-cls} {
+  &-status-error {
+    .transfer-status-color(@error-color);
+  }
+
+  &-status-warning {
+    .transfer-status-color(@warning-color);
+  }
+}