refactor: popup object #644

thinkasany · 2025-04-28T07:18:07Z

Summary by CodeRabbit

新功能
- 优化 TreeSelect 组件的样式和类名自定义能力，支持通过更细粒度的语义化键值进行定制，弹窗部分样式和类名可单独配置。
测试
- 更新相关测试用例以适配新的样式和类名嵌套结构，确保自定义功能正常可用。

vercel · 2025-04-28T07:18:11Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tree-select	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 28, 2025 7:18am

coderabbitai · 2025-04-28T07:18:13Z

Walkthrough

此次更改主要针对 TreeSelect 组件的样式和类名传递方式进行了结构优化。通过引入更细粒度的类型定义，classNames 和 styles 属性现在支持以语义化键值和 popup 嵌套结构进行传递。相关上下文类型、OptionList 组件、以及测试用例均已同步调整，以适配新的嵌套结构和类型约束。

Changes

文件路径/组	变更摘要
src/OptionList.tsx	Tree 组件的 classNames 和 styles 只传递 popup 子属性，避免整体传递。
src/TreeSelect.tsx	引入 SemanticName 和 PopupSemantic 类型，重构 classNames 和 styles 的类型定义，使其支持嵌套 popup 结构，并在 TreeSelectProps 中显式声明。
src/TreeSelectContext.ts	移除本地 SemanticName 类型，直接引用 TreeSelectProps 的 styles 和 classNames 类型，且改为必填。
tests/Select.spec.tsx	测试用例同步调整，customClassNames 和 customStyles 的 item/itemTitle 需嵌套于 popup 下，断言逻辑相应更新。

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant TreeSelect
  participant OptionList
  participant Tree

  User->>TreeSelect: 传递 classNames/styles（含 popup 嵌套结构）
  TreeSelect->>OptionList: 传递 classNames?.popup, styles?.popup
  OptionList->>Tree: 仅将 popup 下的 classNames/styles 传递给 Tree
  Tree-->>OptionList: 渲染带样式的树形结构
  OptionList-->>TreeSelect: 返回渲染内容
  TreeSelect-->>User: 显示带定制样式的下拉树

Suggested reviewers

zombieJ

Poem

🐇
树影婆娑样式新，
popup 嵌套更分明。
语义键值巧传递，
组件结构更清晰。
测试同步不慌乱，
代码如林焕然新！

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/OptionList.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

src/TreeSelectContext.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

tests/Select.spec.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

1 others

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6fa2d68 and 633a740.

📒 Files selected for processing (4)

src/OptionList.tsx (1 hunks)
src/TreeSelect.tsx (1 hunks)
src/TreeSelectContext.ts (2 hunks)
tests/Select.spec.tsx (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

src/TreeSelect.tsx (2)

src/index.tsx (1)

TreeSelectProps (7-7)

src/interface.ts (1)

DataNode (6-10)

src/TreeSelectContext.ts (1)

src/TreeSelect.tsx (1)

TreeSelectProps (40-111)

🔇 Additional comments (9)

src/TreeSelect.tsx (3)

38-39: 新增語義化類型定義，清晰明確

新增的 SemanticName 和 PopupSemantic 類型爲樣式和類名提供了更加語義化的結構，這樣可以讓開發者更清晰地理解每個樣式和類名的用途。

這種類型設計方式使得屬性的使用更加直觀和易於理解。

41-41: 類型擴展優化，移除衝突屬性

通過 Omit 從 BaseSelectPropsWithoutPrivate 中排除 'mode'、'classNames' 和 'styles' 屬性，避免了類型衝突，為後續重新定義這些屬性做好了準備。

45-50: 重構樣式和類名屬性，支持嵌套結構

重新定義的 styles 和 classNames 屬性現在支持更加語義化和結構化的配置：

頂層使用 SemanticName 作為鍵名，比如 'input'、'prefix'、'suffix'

新增嵌套的 popup 屬性，使用 PopupSemantic 作為鍵名，如 'item'、'itemTitle'

這種結構設計使得不同區域的樣式和類名配置更加清晰，易於維護和擴展。

src/OptionList.tsx (1)

347-348: 優化屬性傳遞，僅傳遞彈窗相關樣式

將 classNames 和 styles 屬性的傳遞方式從直接傳遞整個對象改為只傳遞 popup 子對象，這樣確保了 Tree 組件只接收到彈窗相關的樣式和類名，而不是全部。

這種修改與新的嵌套結構保持一致，使得樣式和類名的應用更加精確和有針對性。

tests/Select.spec.tsx (3)

669-672: 測試用例更新，適配新的嵌套結構

更新了 customClassNames 對象結構，將 item 和 itemTitle 屬性移到了 popup 子對象中，這與組件的新結構保持一致。

這種改變確保了測試用例能夠正確驗證新的屬性結構。

678-681: 更新樣式測試結構，保持一致性

類似於 classNames 的更新，customStyles 對象也進行了結構調整，將 item 和 itemTitle 樣式移到了 popup 子對象中。

這種修改保持了與組件實現的一致性，確保測試能夠驗證新的樣式結構。

700-710: 更新DOM查詢和斷言，匹配新的結構

根據新的嵌套結構更新了DOM查詢和斷言：

使用新的路徑 customClassNames.popup.item 進行元素選擇

對 itemTitle 類名斷言使用了 customClassNames.popup.itemTitle

對樣式斷言也使用了 customStyles.popup.itemTitle 和 customStyles.popup.item

這些更新確保了測試能夠正確驗證新的屬性結構在DOM中的應用。

src/TreeSelectContext.ts (2)

5-5: 引入TreeSelectProps類型，優化代碼復用

從 ./TreeSelect 導入 TreeSelectProps 類型，這樣可以直接引用已定義的屬性類型，減少代碼重複，提高類型一致性。

25-26: 簡化上下文屬性類型定義，確保類型一致性

將 classNames 和 styles 屬性類型從自定義的局部類型改為直接引用 TreeSelectProps 對應的屬性類型。這種方式有以下好處：

確保上下文與組件props使用完全相同的類型定義

當 TreeSelectProps 中的這些屬性發生變化時，上下文會自動同步更新

簡化了代碼，不需要重複定義類型結構

通過這種方式，確保了組件與上下文之間的類型一致性，減少了潛在的類型不匹配問題。

✨ Finishing Touches

📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

codecov · 2025-04-28T07:20:00Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.83%. Comparing base (6fa2d68) to head (633a740).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #644   +/-   ##
=======================================
  Coverage   99.83%   99.83%           
=======================================
  Files          16       16           
  Lines         593      593           
  Branches      186      186           
=======================================
  Hits          592      592           
  Misses          1        1

☔ 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.

refactor: popup object

633a740

vercel bot deployed to Preview April 28, 2025 07:18 View deployment

zombieJ approved these changes Apr 28, 2025

View reviewed changes

zombieJ merged commit 9cf6f17 into react-component:master Apr 28, 2025
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: popup object #644

refactor: popup object #644

Uh oh!

thinkasany commented Apr 28, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Apr 28, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Apr 28, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

codecov bot commented Apr 28, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

refactor: popup object #644

refactor: popup object #644

Uh oh!

Conversation

thinkasany commented Apr 28, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

codecov bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

thinkasany commented Apr 28, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Apr 28, 2025 •

edited

Loading

coderabbitai bot commented Apr 28, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented Apr 28, 2025 •

edited

Loading