Skip to content

chore: code optimization #906

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jan 1, 2025
Merged

chore: code optimization #906

merged 1 commit into from
Jan 1, 2025

Conversation

li-jia-nan
Copy link
Member

@li-jia-nan li-jia-nan commented Jan 1, 2025 •
edited by coderabbitai bot
Loading

Summary by CodeRabbit

  • 类型改进

    • 增强了树组件的类型安全性
    • 优化了拖放功能的类型处理

  • 上下文更新

    • 改进了上下文属性的类型定义
    • 简化了上下文创建逻辑

  • 代码重构

    • 更新了上下文和工具函数中的类型注解
    • 提高了代码的可读性和维护性

@vercel Vercel
Copy link

vercel bot commented Jan 1, 2025 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
tree ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 1, 2025 9:29pm

@coderabbitai coderabbitai
Copy link

coderabbitai bot commented Jan 1, 2025 •
edited
Loading

概述

演练

这个拉取请求主要针对树形组件（Tree）的类型定义和拖放功能进行了优化。在 src/Tree.tsx、src/contextTypes.ts 和 src/util.tsx 中，开发者增强了类型安全性，更新了上下文声明，并改进了代码的可读性。主要变更包括更灵活的类型参数、更精确的类型注解以及拖放事件处理方法的细微调整。

变更

文件 变更摘要
src/Tree.tsx - 更新 Tree 类型参数
- 优化拖放事件处理方法
- 引入 contextValue 对象
src/contextTypes.ts - 明确 dropIndicatorRender 函数参数类型
- 更新上下文声明
src/util.tsx - 为 keyProps 添加显式类型注解

序列图

sequenceDiagram
    participant User
    participant TreeComponent
    participant DragEvent
    participant DropTarget

    User->>TreeComponent: 开始拖动节点
    TreeComponent->>DragEvent: 捕获拖动事件
    DragEvent->>TreeComponent: 处理拖动进入事件
    TreeComponent->>DropTarget: 检查放置位置
    DropTarget-->>TreeComponent: 返回放置信息
    TreeComponent->>TreeComponent: 更新状态
Loading

可能相关的 PR

诗歌

🐰 代码如树，类型如叶
拖拽优雅，安全飞跃
重构之路，兔子欢笑
类型严明，代码飞扬
兔子程序员，快乐编程！

📜 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 ade840a and 61eba8e.

📒 Files selected for processing (3)
  • src/Tree.tsx (21 hunks)
  • src/contextTypes.ts (2 hunks)
  • src/util.tsx (1 hunks)
🔇 Additional comments (28)
src/contextTypes.ts (3)

63-64: 改进类型标注以提升可读性和安全性
此处显式指定了 indent: number 与 prefixCls: string，能更好地让使用者理解函数参数类型，减少潜在的类型错误。

95-95: 确保 Context 不为 null 的可用性
原先类型允许 null，现在改为 React.createContext<TreeContextProps<any>>(null);，能使使用方在获取 Context 时减少判空操作，进一步简化逻辑。

98-98: 简化命名以保持一致性
将回调参数从 node 更改为 n，可读性和一致性上无明显问题，但建议在全局或团队范围保持统一命名约定。

src/util.tsx (1)

312-312: 显式声明 keyProps 的结构类型
在这里显示声明 { checkedKeys?: Key[]; halfCheckedKeys?: Key[] }，可提高类型安全并让后续维护更直观。

src/Tree.tsx (24)

233-235: 扩展范型以增强树节点类型灵活度
声明 class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode | BasicDataNode> 有助于满足更多业务场景。

421-421: 在展开的节点集合变化后及时刷新 flattenNodes
基于最新的 expandedKeys 重新调用 flattenTreeData，可保持视图及层次结构的正确性。

440-440: 在 checkedKeys 更新时重新解析
通过 parseCheckedKeys 获取最新的勾选状态，避免出现不一致的状态数据。

547-547: 校验是否允许拖拽到自身子节点
使用 dragChildrenKeys.includes(dropTargetKey) 来防止将节点拖拽到自身子树下，可有效避免死循环或不合理结构。

584-584: 处理延迟展开逻辑
在 onNodeDragEnter 中采用 setTimeout 延迟展开节点，有助于在拖放操作时给用户更自然的交互体验。

610-610: 保留并复用现有 expandedKeys
方法中使用了本地状态的 expandedKeys，减少了额外的副作用调用。逻辑清晰可读。

630-630: 允许重复计算之余提高可维护性
在拖拽覆盖逻辑中，再次调用 calcDropPosition 使得边缘情况下更精确地计算 dropAllowed。

632-632: 统一 dragOverNodeKey 的更新策略
确保当前节点在不同场景下都能及时更新拖拽覆盖状态，从而正确触发后续逻辑。

645-645: 防止拖拽到无效目标
在判断 “是否为自身子节点” 或 “允许放置” 时能及时 return，避免后续逻辑继续执行。

689-689: 节点拖拽离开时重置状态
使用 resetDragState 清理相关变量，保证在拖拽离开时树的状态不会残留错误信息。

731-735: 添加外部拖拽行为的判断
通过 outsideTree 区分外部场景，防止在树外触发重复的 onDrop 逻辑。

755-755: 检测是否将节点拖拽到自身子节点
使用 dragChildrenKeys.includes 校验，避免出现自包含的布局问题。

766-766: 豁免外部情况的 onDrop 回调
只有在 !outsideTree 时才运行 onDrop?.(dropResult)，保证外部场景下的逻辑分支正确。

899-900: 在勾选逻辑中预处理 checkStrictly 结果
给 checkedObj 赋值更明确的结构，方便后续在父组件中作进一步区分和处理。

915-915: 在 halfCheckedKeys 中剔除已取消勾选的 key
进一步通过 conductCheck 修正勾选状态，防止留下冗余 halfChecked 项。

955-955: 统一记录 checkedNodes 及其位置
将节点与位置一起存储在 checkedNodesPositions 中，包含更多上下文信息以便后续操作。

976-976: 避免重复加载
在 loadData 时先检查 loadedKeys 与 loadingKeys，防止多次重复请求浪费资源。

1101-1102: 保持展开状态与扁平数据的一致性
在 setExpandedKeys 中调用 flattenTreeData 以同步更新界面和内部结构，从而防止数据不一致。

1118-1118: 判断已展开的节点
若节点已展开过则不重复处理，提升性能并避免多余操作。

1122-1122: 在开发环境中校验 expanded 状态
通过 warning 判断内部状态和实际传入的 expanded 是否一致，可帮助快速发现逻辑异常。

1126-1126: 动态更新 expandedKeys
依据用户操作及时增减 expandedKeys 中的 key，能确保组件在拖拽和展开行为之间保持一致性。

1384-1384: 汇集 DOM 属性
通过 pickAttrs 收集 aria、data 等属性，避免在最终节点上遗漏或重复传递。

1404-1443: 集中管理上下文值
在此对象中统一存放回调与状态字段，清晰展示了 Tree 组件需要共享的各类内容，方便后续维护或扩展。

1445-1445: 使用 Provider 提供上下文
将 contextValue 注入 TreeContext.Provider，整体代码结构清晰，让子组件可以方便地使用共享数据。

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ 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. (Beta)
  • @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 Codecov
Copy link

codecov bot commented Jan 1, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.84%. Comparing base (ade840a) to head (61eba8e).
Report is 1 commits behind head on master.

Additional details and impacted files 
@@            Coverage Diff             @@
##           master     #906      +/-   ##
==========================================
- Coverage   99.84%   99.84%   -0.01%     
==========================================
  Files          14       14              
  Lines        1328     1326       -2     
  Branches      395      394       -1     
==========================================
- Hits         1326     1324       -2     
  Misses          2        2

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

@li-jia-nan li-jia-nan merged commit 8fffa7c into master Jan 1, 2025
12 checks passed
@li-jia-nan li-jia-nan deleted the code-up branch January 1, 2025 21:33
This was referenced Jan 1, 2025
Merged
Merged
@coderabbitai coderabbitai bot mentioned this pull request Jan 21, 2025
Open
@coderabbitai coderabbitai bot mentioned this pull request Mar 4, 2025
Merged
@coderabbitai coderabbitai bot mentioned this pull request Mar 16, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@li-jia-nan