fix bug #6075 (#6088)

* fix bug #6075

* add test for PR #6088

* remove test.only

components/transfer/__tests__/__snapshots__/index.test.js.snap

@@ -186,3 +186,197 @@ exports[`Transfer should render correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Transfer should show sorted targetkey 1`] = `
+<div
+  class="ant-transfer"
+>
+  <div
+    class="ant-transfer-list"
+  >
+    <div
+      class="ant-transfer-list-header"
+    >
+      <label
+        class="ant-checkbox-wrapper"
+      >
+        <span
+          class="ant-checkbox"
+        >
+          <input
+            class="ant-checkbox-input"
+            type="checkbox"
+          />
+          <span
+            class="ant-checkbox-inner"
+          />
+        </span>
+      </label>
+      <span
+        class="ant-transfer-list-header-selected"
+      >
+        <span>
+          1 
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-transfer-list-body"
+    >
+      <ul
+        class="ant-transfer-list-content"
+      >
+        <li
+          class="ant-transfer-list-content-item"
+          title="a"
+        >
+          <label
+            class="ant-checkbox-wrapper"
+          >
+            <span
+              class="ant-checkbox"
+            >
+              <input
+                class="ant-checkbox-input"
+                type="checkbox"
+              />
+              <span
+                class="ant-checkbox-inner"
+              />
+            </span>
+          </label>
+          <span>
+            a
+          </span>
+        </li>
+      </ul>
+      <div
+        class="ant-transfer-list-body-not-found"
+      >
+        Not Found
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer-operation"
+  >
+    <button
+      class="ant-btn ant-btn-primary ant-btn-sm"
+      disabled=""
+      type="button"
+    >
+      <span>
+        <i
+          class="anticon anticon-left"
+        />
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-sm"
+      disabled=""
+      type="button"
+    >
+      <span>
+        <i
+          class="anticon anticon-right"
+        />
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-transfer-list"
+  >
+    <div
+      class="ant-transfer-list-header"
+    >
+      <label
+        class="ant-checkbox-wrapper"
+      >
+        <span
+          class="ant-checkbox"
+        >
+          <input
+            class="ant-checkbox-input"
+            type="checkbox"
+          />
+          <span
+            class="ant-checkbox-inner"
+          />
+        </span>
+      </label>
+      <span
+        class="ant-transfer-list-header-selected"
+      >
+        <span>
+          2 
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-transfer-list-body"
+    >
+      <ul
+        class="ant-transfer-list-content"
+      >
+        <li
+          class="ant-transfer-list-content-item"
+          title="c"
+        >
+          <label
+            class="ant-checkbox-wrapper"
+          >
+            <span
+              class="ant-checkbox"
+            >
+              <input
+                class="ant-checkbox-input"
+                type="checkbox"
+              />
+              <span
+                class="ant-checkbox-inner"
+              />
+            </span>
+          </label>
+          <span>
+            c
+          </span>
+        </li>
+        <li
+          class="ant-transfer-list-content-item"
+          title="b"
+        >
+          <label
+            class="ant-checkbox-wrapper"
+          >
+            <span
+              class="ant-checkbox"
+            >
+              <input
+                class="ant-checkbox-input"
+                type="checkbox"
+              />
+              <span
+                class="ant-checkbox-inner"
+              />
+            </span>
+          </label>
+          <span>
+            b
+          </span>
+        </li>
+      </ul>
+      <div
+        class="ant-transfer-list-body-not-found"
+      >
+        Not Found
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/transfer/__tests__/index.test.js

@@ -229,4 +229,23 @@ describe('Transfer', () => {
     wrapper.find(TransferList).at(0).find('.ant-transfer-list-header input[type="checkbox"]').simulate('change');
     expect(handleSelectChange).toHaveBeenLastCalledWith(['b'], []);
   });
+
+  it('should show sorted targetkey', () => {
+    const sortedTargetKeyProps = {
+      dataSource: [{
+        key: 'a',
+        title: 'a',
+      }, {
+        key: 'b',
+        title: 'b',
+      }, {
+        key: 'c',
+        title: 'c',
+      }],
+      targetKeys: ['c', 'b'],
+      lazy: false,
+    };
+    const wrapper = render(<Transfer {...sortedTargetKeyProps} render={item => item.title} />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/transfer/index.tsx

@@ -138,18 +138,30 @@ abstract class Transfer extends React.Component<TransferProps, any> {
 
     const leftDataSource: TransferItem[] = [];
     const rightDataSource: TransferItem[] = [];
+    const tempRightDataSource: TransferItem[] = [];
 
     dataSource.forEach(record => {
       if (rowKey) {
         record.key = rowKey(record);
       }
       if (targetKeys.includes(record.key)) {
-        rightDataSource.push(record);
+        tempRightDataSource.push(record);
       } else {
         leftDataSource.push(record);
       }
     });
 
+    const itemMap = {};
+    tempRightDataSource.forEach((item) => {
+      itemMap[item.key] = item;
+    });
+
+    targetKeys.forEach((targetKey) => {
+      if (itemMap[targetKey]) {
+        rightDataSource.push(itemMap[targetKey]);
+      }
+    });
+
     this.splitedDataSource = {
       leftDataSource,
       rightDataSource,