fix(Transfer): Dropdown is hidden & `showSizeChanger` not work #41906

Yuiai01 · 2023-04-20T10:24:54Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

在当前的 Transfer 组件中，如果设置了 pagination={{ showSizeChanger: true, simple: false }} ，那么会出现切换分页数量的下拉按钮被隐藏的情况：

解决被隐藏问题并添加右边距（之前贴边）后，如下图：

根据 https://github.com/ant-design/ant-design/issues/41790#issuecomment-1507831602，发现 Transfer 组件内部的 Pagination 没有绑定 showSizeChanger 方法，因此添加上对应方法。

📝 Changelog

Language	Changelog
🇺🇸 English	fix Pagination Dropdown is hidden & `showSizeChanger` not work
🇨🇳 Chinese	修复分页下拉按钮被隐藏以及 `showSizeChanger` 方法无效

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

🚀 Summary

`🤖 Generated by Copilot at ff72fad`

Added pagination support for the Transfer component, allowing users to select and change the page size of the transfer list. Updated the test cases, the TransferList and ListBody components, and the style file to handle the pagination functionality.

🔍 Walkthrough

`🤖 Generated by Copilot at ff72fad`

Add pageSize and onPageSizeChange props to TransferList and ListBody components to enable changing the number of items per page in the transfer component (link, link, link, link, link, link)
Modify parsePagination function to accept an optional pageSize parameter and use it to slice the render items according to the current page number and page size (link, link, link)
Add onShowSizeChange prop to Pagination component to trigger the onPageSizeChange callback and reset the current page number when the user selects a different page size (link)
Add generateData function to index.test.tsx to create mock data items for testing the transfer component with pagination (link)
Add test case for changing the page size in the transfer component and verify the correct number of items per page (link)
Add antCls parameter to genTransferListStyle function in style/index.ts to access the ant design class name for the transfer list component (link)
Add minHeight property to the transfer list style to fix a flexbox bug that causes the list body to overflow the list container when the page size is larger than the number of items (link)
Add paddingInlineEnd property to the pagination options style to add some spacing between the page size changer and the pagination buttons (link)

github-actions · 2023-04-20T10:25:06Z

codecov · 2023-04-20T10:48:30Z

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (c3225c0) 100.00% compared to head (889f16e) 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #41906   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          648       648           
  Lines        10965     10967    +2     
  Branches      2978      2978           
=========================================
+ Hits         10965     10967    +2

Impacted Files	Coverage Δ
components/transfer/list.tsx	`100.00% <ø> (ø)`
components/transfer/style/index.ts	`100.00% <ø> (ø)`
components/transfer/ListBody.tsx	`100.00% <100.00%> (ø)`

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

MadCcc · 2023-04-21T06:22:22Z

components/transfer/ListBody.tsx

 }

-const parsePagination = (pagination?: PaginationType) => {
+const parsePagination = (pagination?: PaginationType, pageSize?: number) => {


pageSize 应该包含在 pagination 里？

放在里面的话会出现切换 pageSize 后页面数据不刷新，所以放到外面了

这很奇怪，不应该单独维护一个 pageSize，可以看看什么原因导致

这很奇怪，不应该单独维护一个 pageSize，可以看看什么原因导致

ListBody 内部通过 ref 将过滤好的数据传递给外层，如果设置 showSizeChanger 后在 ListBody 内部维护 pageSize 那么就会出现我切换完 pageSize 后页面数据不会变化，因为没有触发外层组件的刷新。因此我将 pageSize 提取出来单独维护了

那应该还是合进去，这样的话参数冗余了。使用的时候可以这样

parsePagination({ ...pagination, pageSize})

afc163 · 2023-04-26T02:38:53Z

any progress?

Yuiai01 · 2023-04-26T08:40:13Z

any progress?

好了~

MadCcc · 2023-04-26T12:23:44Z

components/transfer/ListBody.tsx

      const maxPageCount = Math.ceil(filteredRenderItems.length / mergedPagination.pageSize!);
      setCurrent(Math.min(current, maxPageCount));
    }
-  }, [filteredRenderItems, pagination]);
+  }, [filteredRenderItems, pagination, pageSize]);


Suggested change

}, [filteredRenderItems, pagination, pageSize]);

}, [filteredRenderItems, convertPagination, pageSize]);

修改掉了

MadCcc · 2023-04-26T12:25:37Z

components/transfer/ListBody.tsx


  const [current, setCurrent] = React.useState<number>(1);
+  const [pageSize, setPageSize] = React.useState<number>(convertPagination?.pageSize ?? 10);


如果 pagination 里传进来的 pageSize 改变了是否应该响应？如果是的话应该用 useMergeState 代理受控

嗯嗯，但是这样做的话，就始终使用传入的 pagesize，不可更改了，酱紫是正常的么

MadCcc · 2023-04-26T12:26:44Z

components/transfer/ListBody.tsx

  const memoizedItems = React.useMemo<RenderedItem<RecordType>[]>(() => {
-    const mergedPagination = parsePagination(pagination);
-    const displayItems = mergedPagination
+    const mergedPagination = parsePagination({ ...convertPagination, pageSize });


感觉这一行写了很多遍，可以单独写一个 useMemo 吧

好，用 useMemo 封装了一下

MadCcc · 2023-04-28T03:05:36Z

components/transfer/ListBody.tsx

-  if (!pagination) {
-    return null;
-  }


这里判空还是得有？

MadCcc · 2023-04-28T03:12:22Z

components/transfer/ListBody.tsx

    onScroll,
    onItemSelect,
    onItemRemove,
  } = props;
+  const convertPagination = typeof pagination === 'object' ? pagination : {};


感觉这里不等价，pagination 可以是 false 的话就和 true 一样处理了。
并且 null 也是 object

我是觉得应该一并收到 mergedPagination 这个 memo 里处理好点？

MadCcc · 2023-04-30T04:54:55Z

受控还是要用 useMergedState，props 里的作为 value，最终在下面使用的都是 pageSize 这个 state 而不是 mergedPagination 里的 pageSize。

YMNNs · 2023-06-24T06:40:30Z

@MadCcc 可以考虑合并一下这个PR吗？

afc163 · 2023-06-24T06:57:13Z

@YMNNs ci 挂了

Yuiai01 · 2023-06-26T11:53:38Z

@MadCcc 可以考虑合并一下这个PR吗？

我这边跟进一下～

MadCcc · 2023-06-28T02:02:33Z

argos 截图好像变了
https://app.argos-ci.com/ant-design/ant-design/builds/9547/50739793

Yuiai01 · 2023-06-28T02:15:09Z

argos 截图好像变了 https://app.argos-ci.com/ant-design/ant-design/builds/9547/50739793

好，我康康

afc163 · 2023-06-28T14:15:17Z

这个样式这么乱，感觉不太对。

Yuiai01 · 2023-06-28T14:19:24Z

这个样式这么乱，感觉不太对。

这个样式是自定义出来的，可能自定义的参数与普通的组件样式差异过大所以看起来比较乱。

MadCcc reviewed Apr 21, 2023

View reviewed changes

Yuiai01 force-pushed the fix-transfer branch 2 times, most recently from 8c91736 to 0ccaee7 Compare April 26, 2023 08:39

Yuiai01 force-pushed the fix-transfer branch from 0ccaee7 to d0b5167 Compare April 26, 2023 12:07

MadCcc reviewed Apr 26, 2023

View reviewed changes

Yuiai01 force-pushed the fix-transfer branch from d0b5167 to ad34721 Compare April 26, 2023 15:02

MadCcc reviewed Apr 28, 2023

View reviewed changes

Yuiai01 force-pushed the fix-transfer branch from ad34721 to b8a67d0 Compare April 28, 2023 13:10

Yuiai01 force-pushed the fix-transfer branch from b8a67d0 to b5e2df3 Compare May 1, 2023 03:03

Yuiai01 added 3 commits June 27, 2023 22:08

fix: Page size dropdown is hidden

9399a66

fix: SizeChange not work

5d11f0d

chore: add test case

d243cf7

Yuiai01 force-pushed the fix-transfer branch from b5e2df3 to d243cf7 Compare June 27, 2023 14:19

MadCcc approved these changes Jun 28, 2023

View reviewed changes

Merge branch 'master' into fix-transfer

889f16e

MadCcc merged commit 91be823 into ant-design:master Jun 28, 2023
51 of 52 checks passed

xrkffgg mentioned this pull request Jul 3, 2023

docs: add changelog 5.6.4 #43320

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Transfer): Dropdown is hidden & `showSizeChanger` not work #41906

fix(Transfer): Dropdown is hidden & `showSizeChanger` not work #41906

Yuiai01 commented Apr 20, 2023 •

edited by ghost

github-actions bot commented Apr 20, 2023 •

edited

codecov bot commented Apr 20, 2023 •

edited

MadCcc Apr 21, 2023

Yuiai01 Apr 21, 2023 •

edited

MadCcc Apr 21, 2023

Yuiai01 Apr 21, 2023

MadCcc Apr 26, 2023 •

edited

afc163 commented Apr 26, 2023

Yuiai01 commented Apr 26, 2023

MadCcc Apr 26, 2023

Yuiai01 Apr 26, 2023

MadCcc Apr 26, 2023 •

edited

Yuiai01 Apr 26, 2023

MadCcc Apr 26, 2023

Yuiai01 Apr 26, 2023

MadCcc Apr 28, 2023

MadCcc Apr 28, 2023

MadCcc Apr 28, 2023

MadCcc commented Apr 30, 2023

YMNNs commented Jun 24, 2023

afc163 commented Jun 24, 2023

Yuiai01 commented Jun 26, 2023

MadCcc commented Jun 28, 2023

Yuiai01 commented Jun 28, 2023

afc163 commented Jun 28, 2023

Yuiai01 commented Jun 28, 2023

	}, [filteredRenderItems, pagination, pageSize]);
	}, [filteredRenderItems, convertPagination, pageSize]);


		const [current, setCurrent] = React.useState<number>(1);
		const [pageSize, setPageSize] = React.useState<number>(convertPagination?.pageSize ?? 10);

fix(Transfer): Dropdown is hidden & showSizeChanger not work #41906

fix(Transfer): Dropdown is hidden & showSizeChanger not work #41906

Conversation

Yuiai01 commented Apr 20, 2023 • edited by ghost

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

🚀 Summary

🤖 Generated by Copilot at ff72fad

🔍 Walkthrough

🤖 Generated by Copilot at ff72fad

github-actions bot commented Apr 20, 2023 • edited

codecov bot commented Apr 20, 2023 • edited

Codecov Report

Choose a reason for hiding this comment

Yuiai01 Apr 21, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MadCcc Apr 26, 2023 • edited

Choose a reason for hiding this comment

afc163 commented Apr 26, 2023

Yuiai01 commented Apr 26, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MadCcc Apr 26, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MadCcc commented Apr 30, 2023

YMNNs commented Jun 24, 2023

afc163 commented Jun 24, 2023

Yuiai01 commented Jun 26, 2023

MadCcc commented Jun 28, 2023

Yuiai01 commented Jun 28, 2023

afc163 commented Jun 28, 2023

Yuiai01 commented Jun 28, 2023

fix(Transfer): Dropdown is hidden & `showSizeChanger` not work #41906

fix(Transfer): Dropdown is hidden & `showSizeChanger` not work #41906

Yuiai01 commented Apr 20, 2023 •

edited by ghost

`🤖 Generated by Copilot at ff72fad`

`🤖 Generated by Copilot at ff72fad`

github-actions bot commented Apr 20, 2023 •

edited

codecov bot commented Apr 20, 2023 •

edited

Yuiai01 Apr 21, 2023 •

edited

MadCcc Apr 26, 2023 •

edited

MadCcc Apr 26, 2023 •

edited