feat(module:splitter): add splitter component by Laffery · Pull Request #8987 · NG-ZORRO/ng-zorro-antd

Laffery · 2025-01-21T03:44:26Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
Application (the showcase website) / infrastructure changes
Other... Please describe:

What is the current behavior?

Issue Number: #8940

What is the new behavior?

Add splitter component, see https://ant.design/components/splitter

Does this PR introduce a breaking change?

Yes
No

Other information

zorro-bot · 2025-01-21T03:44:46Z

This preview will be available after the AzureCI is passed.

codecov · 2025-01-21T03:50:04Z

Codecov Report

Attention: Patch coverage is 95.56452% with 11 lines in your changes missing coverage. Please review.

Project coverage is 91.99%. Comparing base (b6f96ee) to head (ab8428c).
Report is 4 commits behind head on master.

Files with missing lines	Patch %	Lines
components/splitter/splitter.component.ts	95.58%	0 Missing and 9 partials ⚠️
components/splitter/splitter-bar.component.ts	91.66%	0 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8987      +/-   ##
==========================================
+ Coverage   91.94%   91.99%   +0.04%     
==========================================
  Files         559      564       +5     
  Lines       19773    20021     +248     
  Branches     3050     3104      +54     
==========================================
+ Hits        18181    18418     +237     
  Misses       1267     1267              
- Partials      325      336      +11

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

lppedd · 2025-03-16T12:42:16Z

+})
+export class NzSplitterComponent {
+  /** ------------------- Props ------------------- */
+  nzLayout = input<NzSplitterLayout>('horizontal');


Now that inputs are Signals, does it make to declare everything as readonly as you did for outputs?

You're right, although readonly isn't required to inputs, we can still use it to make sure type safe during runtime!

Indeed. I also like a consistent standard - so readonly by default (where applicable) is how I'd do it.

lppedd · 2025-03-16T14:18:00Z

+  lazy = input(false);
+  constrainedOffset = input<number>();
+
+  readonly previewTransform = computed(() => {


Another opinion: I see that you used protected for resizeStartEvent, but not for properties (those signals) used in templates. This is another candiate for a project-wide standard: should all template-only props/funs be marked as protected, or should all be public?

We do not expect user to use those internally-used-only props/funs, which are unstable and may be changed/removed in some refactoring PRs.

We only promise that public props/funs declared at the documentation website are compatible in a minor version. So I think they shall be protected.
But sometimes it's not convenient to access them in unit test cases.

TBH, there is currrently no consistant standard in this project.
We cannot get the acknownledge of how many internal apis are being used by user, what we can do as a popular component library is to keep public apis in stable and avoid exposing too many unstable internal apis.

TBH, there is no consistant standard in this project.

Yeah that's what I saw by reading the code.

I would go the route of not bothering with specifying protected, and instead keep everything public because:

sometimes users need access to unstable / internal declarations when NG-ZORRO doesn't behave as expected

you could alternatively mark unstable / internal declarations with TSDoc's @internal

/** @internal */ readonly previewTransform = computed(() => { ... })

to signify to consumers this is not something they should normally use.
Additionaly, @internal plays nicely with stripInternal in case in the future you want to get rid of them in the outputted types.

Btw, up to you. I was mostly trying to understand if there is a project/team standard, especially now that components are being refactored or created to support signals.

Laffery · 2025-03-16T15:55:27Z

@lppedd I'd made changes as your suggestions

Laffery · 2025-03-16T16:06:14Z

This pr is nearly completed, all the use cases of antd are implemented.

There are Todos as follows till now:

Restore the previous size when expanding a collapsed panel
Observe to resize event of the container
RTL support
Unit test cases

I will add them next week, and I think they do not have a impact on your review of the code, so could you please take a review on this PR if you have time. @Nicoss54 @HyperLife1119 @OriginRing @lppedd

lppedd

Left some minor comments / nitpicks.

lppedd · 2025-03-16T16:16:11Z

+  readonly destroy$ = inject(NzDestroyService);
+  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);


inject-ed services or elements are best kept private imo.
I'd also keep a consistent structure:

private properties

inputs

outputs

component state (props/functions)

I prefer the following order

inputs

outputs

private properties

component state (props/functions)

Puting inputs/outputs at the very top makes it clear to the person viewing the code how the component is used, just like a instruction manual

Consistency over order, so that looks good to me.

Laffery · 2025-03-22T16:56:00Z

Tests added and all the TODOs done, waiting for kindly code review :)

HyperLife1119

LGTM

WwwHhhYran

LGTM

Laffery added ⭐ New Component PR: draft PR: target-minor Component: Splitter labels Jan 21, 2025

Laffery self-assigned this Jan 21, 2025

Laffery added this to the v19.1 milestone Jan 21, 2025

Laffery changed the title ~~feat(module:splitter): add splitter component~~ WIP feat(module:splitter): add splitter component Jan 21, 2025

Laffery force-pushed the feat/splitter branch 2 times, most recently from 6f96ac0 to 7da5053 Compare January 21, 2025 07:03

Laffery modified the milestones: v19.1, v19.2 Feb 19, 2025

Laffery force-pushed the feat/splitter branch from 7da5053 to 4021546 Compare March 13, 2025 23:16

Laffery requested a review from CK110 as a code owner March 14, 2025 15:46

Laffery force-pushed the feat/splitter branch 3 times, most recently from 4142df6 to 4cc3d29 Compare March 15, 2025 16:20

lppedd reviewed Mar 16, 2025

View reviewed changes

Laffery requested review from HyperLife1119, Nicoss54, OriginRing and lppedd March 16, 2025 16:06

Laffery added PR: unreviewed and removed PR: draft labels Mar 16, 2025

Laffery changed the title ~~WIP feat(module:splitter): add splitter component~~ feat(module:splitter): add splitter component Mar 16, 2025

lppedd reviewed Mar 16, 2025

View reviewed changes

Laffery requested a review from HyperLife1119 March 22, 2025 16:54

HyperLife1119 requested changes Mar 25, 2025

View reviewed changes

Comment thread components/splitter/splitter.component.ts Outdated

Laffery added 18 commits March 25, 2025 12:38

feat(module:splitter): init showcases

1c5f5e4

feat(module:splitter): basic usage

4516615

feat(module:splitter): add split bar directive

24472cd

feat(module:splitter): handle resizing

5938a4d

feat(module:splitter): opt styles

761de77

feat(module:splitter): control mode

7ab96e8

feat(module:splitter): lazy mode

07f822f

feat(module:splitter): add collapse bar

450ee9a

feat(module:splitter): add collapse

163aad6

feat(module:splitter): add comments

d92214b

feat(module:splitter): observe to container size change

e731828

feat(module:splitter): improve collapsible logic

3f406c0

feat(module:splitter): add placeholder of tests

24a15b5

feat(module:splitter): add unit tests

41ea3fd

feat(module:splitter): restore prev size when expanding a collapsed pane

8522f58

feat(module:splitter): support rtl

6f15930

feat(module:splitter): add tests for lazy mode

cc126c1

feat(module:splitter): remove redundant takeUntil

ab8428c

Laffery force-pushed the feat/splitter branch from 4c247e1 to ab8428c Compare March 25, 2025 04:38

HyperLife1119 approved these changes Mar 25, 2025

View reviewed changes

HyperLife1119 added PR: partially-approved and removed PR: unreviewed labels Mar 25, 2025

Laffery requested a review from lppedd March 26, 2025 07:12

WwwHhhYran approved these changes Mar 26, 2025

View reviewed changes

Laffery added PR: reviewed-approved and removed PR: partially-approved labels Mar 26, 2025

Laffery merged commit 9b3f62e into NG-ZORRO:master Mar 26, 2025

		readonly destroy$ = inject(NzDestroyService);
		readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);

Uh oh!

Conversation

Laffery commented Jan 21, 2025

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

zorro-bot Bot commented Jan 21, 2025

Uh oh!

codecov Bot commented Jan 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Laffery Mar 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Laffery commented Mar 16, 2025

Uh oh!

Laffery commented Mar 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lppedd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Laffery commented Mar 22, 2025

Uh oh!

Uh oh!

HyperLife1119 left a comment

Choose a reason for hiding this comment

Uh oh!

WwwHhhYran left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

codecov Bot commented Jan 21, 2025 •

edited

Loading

Laffery Mar 16, 2025 •

edited

Loading

Laffery commented Mar 16, 2025 •

edited

Loading