feat: update transfer

components/transfer/index.en-US.md

@@ -9,7 +9,7 @@
 | lazy | property of vc-lazy-load for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` |
 | listStyle | A custom CSS style used for rendering the transfer columns. | object |  |
 | locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` |
-| operations | A set of operations that are sorted from top to bottom. | string\[] | ['>', '<'] |
+| operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] |
 | 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) |  |
 | selectedKeys | A set of keys of selected items. | string\[] | \[] |
 | showSearch | If included, a search box is shown on each column. | boolean | false |

components/transfer/index.jsx

@@ -11,6 +11,7 @@ import List from './list';
 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';
 
 export const TransferDirection = 'left' | 'right';
@@ -57,6 +58,9 @@ const Transfer = {
     locale: {},
     showSearch: false,
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   data() {
     // vue 中 通过slot，不方便传递，保留notFoundContent及searchPlaceholder
     // warning(
@@ -312,9 +316,12 @@ const Transfer = {
       return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
     },
 
-    getLocale(transferLocale) {
+    getLocale(transferLocale, renderEmpty) {
+      const h = this.$createElement;
       // Keep old locale props still working.
-      const oldLocale = {};
+      const oldLocale = {
+        notFoundContent: renderEmpty(h, 'Transfer'),
+      };
       const notFoundContent = getComponentFromProp(this, 'notFoundContent');
       if (notFoundContent) {
         oldLocale.notFoundContent = notFoundContent;
@@ -329,7 +336,7 @@ const Transfer = {
     renderTransfer(transferLocale) {
       const props = getOptionProps(this);
       const {
-        prefixCls = 'ant-transfer',
+        prefixCls: customizePrefixCls,
         disabled,
         operations = [],
         showSearch,
@@ -338,7 +345,14 @@ const Transfer = {
         filterOption,
         lazy,
       } = props;
-      const locale = this.getLocale(transferLocale);
+      const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+      const prefixCls = getPrefixCls('transfer', customizePrefixCls);
+
+      const renderEmpty = (
+        this.configProvider.renderEmpty &&
+        this.configProvider.renderEmpty()
+      ) || ConfigConsumerProps.renderEmpty;
+      const locale = this.getLocale(transferLocale, renderEmpty);
       const {
         leftFilter,
         rightFilter,

components/transfer/index.zh-CN.md

@@ -9,12 +9,12 @@
 | lazy | Transfer 使用了 [vc-lazy-load]优化性能，这里可以设置相关参数。设为 `false` 可以关闭懒加载。 | object\|boolean | `{ height: 32, offset: 32 }` |
 | listStyle | 两个穿梭框的自定义样式 | object |  |
 | locale | 各种语言 | object | `{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }` |
-| operations | 操作文案集合，顺序从上至下 | string\[] | ['>', '<'] |
+| operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '<'] |
 | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record) |  |
 | selectedKeys | 设置哪些项应该被选中 | string\[] | \[] |
 | showSearch | 是否显示搜索框 | boolean | false |
 | targetKeys | 显示在右侧框数据的key集合 | string\[] | \[] |
-| titles | 标题集合，顺序从左至右 | string\[] | ['', ''] |
+| titles | 标题集合，顺序从左至右 | string\[] | \['', ''] |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |

components/transfer/list.jsx

@@ -243,14 +243,17 @@ export default {
         )}
       >
         {search}
-        <transition-group
+        {
-          {...transitionProps}
+          !searchNotFound &&
-          tag="ul"
+          <transition-group
-          class={`${prefixCls}-content`}
+            {...transitionProps}
-          ref="listContentWrapper"
+            tag="ul"
-        >
+            class={`${prefixCls}-content`}
-          {showItems}
+            ref="listContentWrapper"
-        </transition-group>
+          >
+            {showItems}
+          </transition-group>
+        }
         {searchNotFound}
       </div>
     );

components/transfer/search.jsx

@@ -47,7 +47,6 @@ export default {
           placeholder={placeholder}
           class={prefixCls}
           value={value}
-          ref="input"
           onChange={this.handleChange}
           disabled={disabled}
         />

components/transfer/style/index.js

@@ -2,6 +2,7 @@ import '../../style/index.less';
 import './index.less';
 
 // style dependencies
+import '../../empty/style';
 import '../../checkbox/style';
 import '../../button/style';
 import '../../input/style';

components/transfer/style/index.less

@@ -15,14 +15,14 @@
   }
 
   &-list {
-    border: @border-width-base @border-style-base @border-color-base;
-    display: inline-block;
-    border-radius: @border-radius-base;
-    vertical-align: middle;
     position: relative;
+    display: inline-block;
     width: 180px;
     height: 200px;
     padding-top: 34px;
+    vertical-align: middle;
+    border: @border-width-base @border-style-base @border-color-base;
+    border-radius: @border-radius-base;
 
     &-with-footer {
       padding-bottom: 34px;
@@ -31,17 +31,17 @@
     &-search {
       padding: 0 @control-padding-horizontal-sm;
       &-action {
-        color: @disabled-color;
         position: absolute;
         top: 4px;
         right: 4px;
         bottom: 4px;
         width: 28px;
+        color: @disabled-color;
         line-height: @input-height-base;
         text-align: center;
         .@{iconfont-css-prefix} {
-          transition: all 0.3s;
           color: @disabled-color;
+          transition: all 0.3s;
           &:hover {
             color: @text-color-secondary;
           }
@@ -53,16 +53,16 @@
     }
 
     &-header {
-      padding: 6px @control-padding-horizontal;
-      border-radius: @border-radius-base @border-radius-base 0 0;
-      background: @component-background;
-      color: @text-color;
-      border-bottom: @border-width-base @border-style-base @border-color-split;
-      overflow: hidden;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
+      padding: 6px @control-padding-horizontal;
+      overflow: hidden;
+      color: @text-color;
+      background: @component-background;
+      border-bottom: @border-width-base @border-style-base @border-color-split;
+      border-radius: @border-radius-base @border-radius-base 0 0;
 
       &-title {
         position: absolute;
@@ -71,16 +71,16 @@
     }
 
     &-body {
-      font-size: @font-size-base;
       position: relative;
       height: 100%;
+      font-size: @font-size-base;
 
       &-search-wrapper {
         position: absolute;
         top: 0;
         left: 0;
-        padding: 4px;
         width: 100%;
+        padding: 4px;
       }
     }
 
@@ -90,20 +90,20 @@
 
     &-content {
       height: 100%;
+      margin: 0;
+      padding: 0;
       overflow: auto;
       list-style: none;
-      padding: 0;
-      margin: 0;
       > .LazyLoad {
         animation: transferHighlightIn 1s;
       }
 
       &-item {
+        min-height: 32px;
+        padding: 6px @control-padding-horizontal;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        padding: 6px @control-padding-horizontal;
-        min-height: 32px;
         transition: all 0.3s;
         > span {
           padding-right: 0;
@@ -111,40 +111,45 @@
       }
 
       &-item:not(&-item-disabled):hover {
-        cursor: pointer;
         background-color: @item-hover-bg;
+        cursor: pointer;
       }
 
       &-item-disabled {
-        cursor: not-allowed;
         color: @btn-disable-color;
+        cursor: not-allowed;
       }
     }
 
     &-body-not-found {
-      padding-top: 0;
-      color: @disabled-color;
-      text-align: center;
       position: absolute;
       top: 50%;
       width: 100%;
-      margin-top: -10px;
+      padding-top: 0;
+      color: @disabled-color;
+      text-align: center;
+      transform: translateY(-50%);
+
+      // with filter should offset the search box height
+      .@{transfer-prefix-cls}-list-body-with-search & {
+        margin-top: @input-height-base / 2;
+      }
     }
 
     &-footer {
-      border-top: @border-width-base @border-style-base @border-color-split;
-      border-radius: 0 0 @border-radius-base @border-radius-base;
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
+      border-top: @border-width-base @border-style-base @border-color-split;
+      border-radius: 0 0 @border-radius-base @border-radius-base;
     }
   }
 
   &-operation {
     display: inline-block;
-    overflow: hidden;
     margin: 0 8px;
+    overflow: hidden;
     vertical-align: middle;
 
     .@{ant-prefix}-btn {

components/upload/style/index.less

@@ -3,7 +3,8 @@
 
 @upload-prefix-cls: ~'@{ant-prefix}-upload';
 @upload-item: ~'@{ant-prefix}-upload-list-item';
-@upload-pictrue-card-size: 104px;
+@upload-picture-card-size: 104px;
+@upload-picture-card-border-style: @border-style-base;
 
 .@{upload-prefix-cls} {
   .reset-component;
@@ -28,26 +29,26 @@
   }
 
   &&-select-picture-card {
-    border: @border-width-base dashed @border-color-base;
+    display: table;
-    width: @upload-pictrue-card-size;
+    width: @upload-picture-card-size;
-    height: @upload-pictrue-card-size;
+    height: @upload-picture-card-size;
-    border-radius: @border-radius-base;
-    background-color: @background-color-light;
-    text-align: center;
-    cursor: pointer;
-    transition: border-color 0.3s ease;
-    vertical-align: top;
     margin-right: 8px;
     margin-bottom: 8px;
-    display: table;
+    text-align: center;
+    vertical-align: top;
+    background-color: @background-color-light;
+    border: @border-width-base dashed @border-color-base;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+    transition: border-color 0.3s ease;
 
     > .@{upload-prefix-cls} {
+      display: table-cell;
       width: 100%;
       height: 100%;
-      display: table-cell;
+      padding: 8px;
       text-align: center;
       vertical-align: middle;
-      padding: 8px;
     }
 
     &:hover {
@@ -56,15 +57,15 @@
   }
 
   &&-drag {
-    border: @border-width-base dashed @border-color-base;
+    position: relative;
-    transition: border-color 0.3s;
-    cursor: pointer;
-    border-radius: @border-radius-base;
-    text-align: center;
     width: 100%;
     height: 100%;
-    position: relative;
+    text-align: center;
     background: @background-color-light;
+    border: @border-width-base dashed @border-color-base;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+    transition: border-color 0.3s;
 
     .@{upload-prefix-cls} {
       padding: 16px 0;
@@ -94,24 +95,24 @@
 
     p.@{upload-prefix-cls}-drag-icon {
       .@{iconfont-css-prefix} {
-        font-size: 48px;
         color: @primary-5;
+        font-size: 48px;
       }
       margin-bottom: 20px;
     }
     p.@{upload-prefix-cls}-text {
-      font-size: @font-size-lg;
       margin: 0 0 4px;
       color: @heading-color;
+      font-size: @font-size-lg;
     }
     p.@{upload-prefix-cls}-hint {
-      font-size: @font-size-base;
       color: @text-color-secondary;
+      font-size: @font-size-base;
     }
     .@{iconfont-css-prefix}-plus {
+      color: @disabled-color;
       font-size: 30px;
       transition: all 0.3s;
-      color: @disabled-color;
       &:hover {
         color: @text-color-secondary;
       }
@@ -126,17 +127,17 @@
   .reset-component;
   .clearfix;
   &-item {
-    margin-top: 8px;
-    font-size: @font-size-base;
     position: relative;
     height: 22px;
+    margin-top: 8px;
+    font-size: @font-size-base;
     &-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding-left: @font-size-base + 8px;
-      width: 100%;
       display: inline-block;
+      width: 100%;
+      padding-left: @font-size-base + 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
     &-info {
@@ -150,23 +151,23 @@
 
       .@{iconfont-css-prefix}-loading,
       .@{iconfont-css-prefix}-paper-clip {
-        font-size: @font-size-base;
-        color: @text-color-secondary;
         position: absolute;
         top: @font-size-base / 2 - 2px;
+        color: @text-color-secondary;
+        font-size: @font-size-base;
       }
     }
 
     .@{iconfont-css-prefix}-close {
       .iconfont-size-under-12px(10px);
-      transition: all 0.3s;
-      opacity: 0;
-      cursor: pointer;
       position: absolute;
       top: 6px;
       right: 4px;
       color: @text-color-secondary;
       line-height: 0;
+      cursor: pointer;
+      opacity: 0;
+      transition: all 0.3s;
       &:hover {
         color: @text-color;
       }
@@ -187,28 +188,28 @@
     }
 
     &-error .@{iconfont-css-prefix}-close {
-      opacity: 1;
       color: @error-color !important;
+      opacity: 1;
     }
 
     &-progress {
-      line-height: 0;
-      font-size: @font-size-base;
       position: absolute;
-      width: 100%;
       bottom: -12px;
+      width: 100%;
       padding-left: @font-size-base + 12px;
+      font-size: @font-size-base;
+      line-height: 0;
     }
   }
 
   &-picture,
   &-picture-card {
     .@{upload-item} {
-      padding: 8px;
-      border-radius: @border-radius-base;
-      border: @border-width-base @border-style-base @border-color-base;
-      height: 66px;
       position: relative;
+      height: 66px;
+      padding: 8px;
+      border: @border-width-base @upload-picture-card-border-style @border-color-base;
+      border-radius: @border-radius-base;
       &:hover {
         background: transparent;
       }
@@ -230,44 +231,44 @@
     }
 
     .@{upload-item}-thumbnail {
-      width: 48px;
-      height: 48px;
       position: absolute;
       top: 8px;
       left: 8px;
-      text-align: center;
+      width: 48px;
-      line-height: 54px;
+      height: 48px;
       font-size: 26px;
+      line-height: 54px;
+      text-align: center;
       opacity: 0.8;
     }
 
     .@{upload-item}-icon {
-      font-size: 26px;
       position: absolute;
       top: 50%;
       left: 50%;
+      font-size: 26px;
       transform: translate(-50%, -50%);
     }
 
     .@{upload-item}-thumbnail img {
+      display: block;
       width: 48px;
       height: 48px;
-      display: block;
       overflow: hidden;
     }
 
     .@{upload-item}-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin: 0 0 0 8px;
-      line-height: 44px;
-      transition: all 0.3s;
-      padding-left: 48px;
-      padding-right: 8px;
-      max-width: 100%;
       display: inline-block;
       box-sizing: border-box;
+      max-width: 100%;
+      margin: 0 0 0 8px;
+      padding-right: 8px;
+      padding-left: 48px;
+      overflow: hidden;
+      line-height: 44px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      transition: all 0.3s;
     }
 
     .@{upload-item}-uploading .@{upload-item}-name {
@@ -275,16 +276,16 @@
     }
 
     .@{upload-item}-progress {
-      padding-left: 56px;
-      margin-top: 0;
       bottom: 14px;
       width: ~'calc(100% - 24px)';
+      margin-top: 0;
+      padding-left: 56px;
     }
 
     .@{iconfont-css-prefix}-close {
       position: absolute;
-      right: 8px;
       top: 8px;
+      right: 8px;
       line-height: 1;
       opacity: 1;
     }
@@ -294,58 +295,58 @@
     // https://github.com/ant-design/ant-design/issues/11183
     float: left;
 
-    &.@{upload-prefix-cls}-list:after {
+    &.@{upload-prefix-cls}-list::after {
       display: none;
     }
     .@{upload-item} {
       float: left;
-      width: @upload-pictrue-card-size;
+      width: @upload-picture-card-size;
-      height: @upload-pictrue-card-size;
+      height: @upload-picture-card-size;
       margin: 0 8px 8px 0;
     }
 
     .@{upload-item}-info {
-      height: 100%;
       position: relative;
+      height: 100%;
       overflow: hidden;
 
-      &:before {
+      &::before {
-        content: ' ';
         position: absolute;
         z-index: 1;
-        background-color: rgba(0, 0, 0, 0.5);
-        transition: all 0.3s;
         width: 100%;
         height: 100%;
+        background-color: fade(@black, 50%);
         opacity: 0;
+        transition: all 0.3s;
+        content: ' ';
       }
     }
 
-    .@{upload-item}:hover .@{upload-item}-info:before {
+    .@{upload-item}:hover .@{upload-item}-info::before {
       opacity: 1;
     }
 
     .@{upload-item}-actions {
       position: absolute;
-      left: 50%;
       top: 50%;
-      transform: translate(-50%, -50%);
+      left: 50%;
       z-index: 10;
       white-space: nowrap;
+      transform: translate(-50%, -50%);
       opacity: 0;
       transition: all 0.3s;
 
       .@{iconfont-css-prefix}-eye-o,
       .@{iconfont-css-prefix}-delete {
         z-index: 10;
-        transition: all 0.3s;
-        cursor: pointer;
-        font-size: 16px;
         width: 16px;
-        color: @text-color-dark;
         margin: 0 4px;
+        color: @text-color-dark;
+        font-size: 16px;
+        cursor: pointer;
+        transition: all 0.3s;
         &:hover {
-          color: #fff;
+          color: @text-color-inverse;
         }
       }
     }
@@ -357,18 +358,18 @@
 
     .@{upload-item}-thumbnail,
     .@{upload-item}-thumbnail img {
+      position: static;
       display: block;
       width: 100%;
       height: 100%;
-      position: static;
     }
 
     .@{upload-item}-name {
+      display: none;
       margin: 8px 0 0;
       padding: 0;
-      text-align: center;
       line-height: @line-height-base;
-      display: none;
+      text-align: center;
     }
 
     .anticon-picture + .@{upload-item}-name {
@@ -382,7 +383,7 @@
 
       .@{upload-item}-info {
         height: auto;
-        &:before,
+        &::before,
         .@{iconfont-css-prefix}-eye-o,
         .@{iconfont-css-prefix}-delete {
           display: none;
@@ -396,8 +397,8 @@
     }
 
     .@{upload-item}-progress {
-      padding-left: 0;
       bottom: 32px;
+      padding-left: 0;
     }
   }
 
@@ -435,8 +436,8 @@
   from {
     height: 0;
     margin: 0;
-    opacity: 0;
     padding: 0;
+    opacity: 0;
   }
 }
 
@@ -454,8 +455,8 @@
     width: 0;
     height: 0;
     margin: 0;
-    opacity: 0;
     padding: 0;
+    opacity: 0;
   }
 }