feat:🔥New Component: Splitter by wanpan11 · Pull Request #50038 · ant-design/ant-design

wanpan11 · 2024-07-24T02:40:02Z

🤔 This is a ...

🔗 Related issue link

[RFC] New Component: Splitter #49924

💡 Background and solution

demo 预览看看大家的想法：https://preview-50038-ant-design.surge.sh/components/splitter-cn

@zombieJ Update:

size 改成受控形式，并提供 defaultSize 进行初始化支持
抽取 useSizes hooks 统一受控与非受控场景
拖拽逻辑内聚至 SplitBar
number 类型值从 % 改为 px
onResize 第二个 index 参数暂时移除，因为它对应到 Panel 而是 SplitBar
修复拖拽 SplitBar 出边界再返回时，坐标不正确的问题
移除了 context 因为内聚后 Panel 不再需要消费
collapsible 支持与 min 组合使用，并且抽象 useResizable 聚合推导值
移除了不在 RFC 中的 transition 属性
添加 Demo Test、Image Test 以及一些边界场景的 Test，将 fakeTimer 统一至顶层
去除了所有的状态更新 useEffect，改为推导值
Panel 属性都只和 Panel 相关，而不是既包含 Panel 又包含 SplitBar 属性（移除了对应的警告）。现在 SplitBar 属性将从 Panel 推导计算。

📝 Changelog

Use a developer-oriented tone and narrative style.
Describe the user's first-hand experience of the issue and its impact on developers, rather than your solution approach.
Refer to: https://ant.design/changelog

Language	Changelog
🇺🇸 English	New Component: SplitPanel
🇨🇳 Chinese	新组件：SplitPanel

bolt-new-by-stackblitz · 2024-07-24T02:40:05Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2024-07-24T02:40:14Z

github-actions · 2024-07-24T02:40:15Z

👁 Visual Regression Report for PR #50038 Failed ❌

🎯 Target branch: feature (c5f4c71)
📖 View Full Report ↗︎

Expected (Branch feature)	Actual (Current PR)	Diff
auto-complete-certain-category.compact.png	auto-complete-certain-category.compact.png
auto-complete-certain-category.compact.png	auto-complete-certain-category.compact.css-var.png
auto-complete-certain-category.dark.png	auto-complete-certain-category.dark.png
auto-complete-certain-category.dark.png	auto-complete-certain-category.dark.css-var.png
auto-complete-certain-category.default.png	auto-complete-certain-category.default.png
auto-complete-certain-category.default.png	auto-complete-certain-category.default.css-var.png
config-provider-size.compact.png	config-provider-size.compact.png
config-provider-size.compact.png	config-provider-size.compact.css-var.png
config-provider-size.dark.png	config-provider-size.dark.png
config-provider-size.dark.png	config-provider-size.dark.css-var.png

Check Full Report for details

If you think the visual diff is acceptable, please check:

Visual diff is acceptable

pkg-pr-new · 2024-07-24T02:45:46Z

Open in Stackblitz

More templates

bun add https://pkg.pr.new/ant-design/ant-design/antd@50038

commit: 2ceaf4a

components/split-panel/Panel.tsx

components/split-panel/style/index.ts

zombieJ · 2024-09-09T08:03:50Z

Demo 改圆角吧

圆角拉线到边缘的时候会超出来，否则就要加一下 overflow: hidden 但是这对 Splitter 组件来说就做过了。

components/splitter/Panel.tsx

* feat: SplitPanel init * feat: SplitPanel update * feat: SplitPanel update * feat: splitPanel update useResize * feat: SplitPanel update * feat: splitPanel update useResize * feat: SplitPanel update * feat: splitPanel demo * feat: splitPanel update * feat: splitPanel support complicated combination * feat: SplitPanel rename to Splitter * feat: Splitter support onRize * feat: support collapsible * feat: support token and collapsible * feat: update docs * feat: size defaultSize support string * feat: min max support string * feat: update * feat: support DOM structure * feat: Optimize UI * feat: Optimize Code * fix: Add a default size during initialization to prevent failure to obtain container size * feat: optimized code * feat: optimized code * feat: Optimize Code * Update components/splitter/demo/layout.tsx Co-authored-by: lijianan <[email protected]> Signed-off-by: Wanpan <[email protected]> * Update components/splitter/demo/multiple.tsx Co-authored-by: lijianan <[email protected]> Signed-off-by: Wanpan <[email protected]> * docs: update * feat: Modify the style and optimize the interface * feat: use PropsWithChildren * feat: support rtl * feat: collapsible supports object types * fix: when collapsible is boolean not work * feat: Splitter add test * feat: update * test: update snapshots * docs: update * test: update snapshots * test: update * test: update * test: update * test: update * fix: Removed invalid min and max restrictions when collapsible exists * test: update * test: update * test: update * test: test coverage * Revert "test: test coverage" This reverts commit d247193. * test: test coverage * feat: rename * feat: optimized code * ci: lint * feat: optimized code * feat: add useag tips * feat: optimized code * feat: Modify splitbar layout * feat: optimized code * feat: numerical precision * feat: optimized code * feat: Optimized trigger region * feat: Support configuration animation * fix: Fix Collapsible exception when using multiple panels * fix: Fixed the issue of drag area overlapping when multiple panels are folded * feat: optimized code * feat: annotation * feAt: optimized code * fix: bgcolor * fix: Modify the initial value calculation method * test: update * feat: add cover image * chore: adjust logic * chore: use items size * chore: rtl * chore: limit * chore: controlled * docs: update demo * docs: adjust style * chore: add split style * chore: hor collapisble style * chore: collapse icon * chore: update warning * chore: clean up * chore: collapse logic * chore: adjust demo * chore: clean up * test: adjust logic * docs: update demo * docs: rm useless demo * docs: demo * test: add demo test * test: test of them * test: 100% coverage * chore: fix lint * docs: update demo * refactor: unique resize config * docs: add demo * fix: support virtual resiable * chore: add cursor mask * test: update snapshot * test: add test case * test: update snapshot * chore: use px base * chore: rm useless code --------- Signed-off-by: Wanpan <[email protected]> Co-authored-by: lijianan <[email protected]> Co-authored-by: 二货机器人 <[email protected]> Co-authored-by: ice <[email protected]>

balboFK · 2024-10-07T17:32:44Z

Hello guys! I dont know if this is the right place to ask about this, but since this is a commit about the new component i think it might be. Could we add the option to set a custom icon to the splitter component instead of only the little line that it does? I know that it is customizable via the design token, but adding icons would be even better for UI. I'm talking about this guy:

What do you think @li-jia-nan ?

sheng-di · 2024-10-10T08:42:23Z

这个支持 lazy 模式吗？
比如一些组件大小发生变化，就需要进行大量的计算。
能否有这样的功能：
用户拖动时，不实际进行 resize，等用户放下鼠标后，再触发 resize。

这样只会 resize 一次，性能会好一些。

拖动过程中，可以有一个临时的 splitter 移动的效果。

wanpan11 · 2024-10-10T14:50:29Z

这个支持 lazy 模式吗？比如一些组件大小发生变化，就需要进行大量的计算。能否有这样的功能：用户拖动时，不实际进行

目前不支持这个，可以试试在你的组件外层加一层 div 然后定义一个 width ，当 onResizeEnd 触发式在更新这个 width

wanpan11 · 2024-10-10T14:52:02Z

Hello guys! I dont know if this is the right place to ask about this, but since this is a commit about the new component i

Of course this is a good idea, I will add this feature later

wanpan11 added 8 commits July 18, 2024 19:04

feat: SplitPanel init

5bb1d36

feat: SplitPanel update

7fde019

feat: SplitPanel update

484e4e5

feat: splitPanel update useResize

8164fab

feat: SplitPanel update

4f6a50e

feat: splitPanel update useResize

0da441c

feat: SplitPanel update

b30c525

feat: splitPanel demo

bd67c47

Merge branch 'feature' into feat-splitPanel

396501f

afc163 reviewed Jul 24, 2024

View reviewed changes

components/split-panel/Panel.tsx Outdated Show resolved Hide resolved

afc163 reviewed Jul 24, 2024

View reviewed changes

components/split-panel/style/index.ts Outdated Show resolved Hide resolved

afc163 reviewed Jul 24, 2024

View reviewed changes

components/split-panel/style/index.ts Outdated Show resolved Hide resolved

afc163 reviewed Jul 24, 2024

View reviewed changes

components/split-panel/style/index.ts Outdated Show resolved Hide resolved

wanpan11 added 5 commits July 24, 2024 17:51

feat: splitPanel update

a0f4a00

feat: splitPanel support complicated combination

b9167d5

feat: SplitPanel rename to Splitter

1c4fdfe

feat: Splitter support onRize

96687a1

Merge branch 'feature' into feat-splitPanel

34dcc96

li-jia-nan changed the title ~~[WIP]feat:🔥New Component: SplitPanel~~ [WIP] feat:🔥New Component: SplitPanel Jul 26, 2024

wanpan11 added 2 commits July 28, 2024 00:27

feat: support collapsible

520dadd

feat: support token and collapsible

a0319ff

wanpan11 changed the title ~~[WIP] feat:🔥New Component: SplitPanel~~ [WIP] feat:🔥New Component: Splitter Jul 28, 2024

wanpan11 added 4 commits July 28, 2024 23:25

Merge branch 'feature' into feat-splitPanel

97914fb

feat: update docs

bbd894d

feat: size defaultSize support string

fc54f0b

feat: min max support string

b7aeed1

zombieJ added 4 commits September 9, 2024 14:40

fix: support virtual resiable

3f3e715

chore: add cursor mask

bd378ad

test: update snapshot

082a705

test: add test case

074bd09

zombieJ added 3 commits September 9, 2024 17:00

test: update snapshot

03bf72f

chore: use px base

a0f2140

chore: rm useless code

2ceaf4a

li-jia-nan reviewed Sep 9, 2024

View reviewed changes

components/splitter/Panel.tsx Show resolved Hide resolved

li-jia-nan approved these changes Sep 9, 2024

View reviewed changes

zombieJ merged commit 742ce37 into ant-design:feature Sep 9, 2024

wanpan11 deleted the feat-splitPanel branch September 9, 2024 11:43

tomlebl mentioned this pull request Oct 25, 2024

[Snyk] Upgrade antd from 5.20.6 to 5.21.2 nomad-nmr/nomad-server#154

Closed

nerdy-tech-com-gitub mentioned this pull request Oct 27, 2024

[Snyk] Upgrade antd from 5.13.2 to 5.21.2 nerdy-tech-com-gitub/stract#9

Open

virifiAdmin mentioned this pull request Oct 28, 2024

[Snyk] Upgrade antd from 5.11.0 to 5.21.2 DevDafater/test-graphQL#5

Open

VV1NN mentioned this pull request Nov 1, 2024

[Snyk] Upgrade antd from 5.18.0 to 5.21.3 VV1NN/is1ab.github.io#1

Open

VV1NN mentioned this pull request Nov 8, 2024

[Snyk] Upgrade antd from 5.18.0 to 5.21.4 VV1NN/is1ab.github.io#4

Open

thnbih mentioned this pull request Nov 12, 2024

[Snyk] Upgrade antd from 5.17.0 to 5.21.5 thnbih/Harmonious-Living-Website#5

Open

wanpan11 mentioned this pull request Jan 5, 2025

feat: Add customize icon #52216

Merged

16 tasks

petercat-assistant bot mentioned this pull request Jul 7, 2025

Splitter 修复拖拽结束时，屏幕仍然无法操作的问题 #54315

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

feat:🔥New Component: Splitter #50038

feat:🔥New Component: Splitter #50038
zombieJ merged 123 commits intoant-design:featurefrom
wanpan11:feat-splitPanel

wanpan11 commented Jul 24, 2024 •

edited by afc163

Loading

Uh oh!

bolt-new-by-stackblitz bot commented Jul 24, 2024

Uh oh!

github-actions bot commented Jul 24, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Jul 24, 2024 •

edited by zombieJ

Loading

Uh oh!

pkg-pr-new bot commented Jul 24, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zombieJ commented Sep 9, 2024

Uh oh!

Uh oh!

balboFK commented Oct 7, 2024

Uh oh!

sheng-di commented Oct 10, 2024

Uh oh!

wanpan11 commented Oct 10, 2024

Uh oh!

wanpan11 commented Oct 10, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

Uh oh!

Comments

Conversation

wanpan11 commented Jul 24, 2024 • edited by afc163 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Uh oh!

bolt-new-by-stackblitz bot commented Jul 24, 2024

Uh oh!

github-actions bot commented Jul 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 24, 2024 • edited by zombieJ Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #50038 Failed ❌

Uh oh!

pkg-pr-new bot commented Jul 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zombieJ commented Sep 9, 2024

Uh oh!

Uh oh!

balboFK commented Oct 7, 2024

Uh oh!

sheng-di commented Oct 10, 2024

Uh oh!

wanpan11 commented Oct 10, 2024

Uh oh!

wanpan11 commented Oct 10, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

wanpan11 commented Jul 24, 2024 •

edited by afc163

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited by zombieJ

Loading

pkg-pr-new bot commented Jul 24, 2024 •

edited

Loading