Skip to content

Conversation

@EmilyyyLiu
Copy link
Contributor

@EmilyyyLiu EmilyyyLiu commented Sep 12, 2025

关联issue:ant-design/ant-design#54854
替换 useMergedState 为 useControlledState

Summary by CodeRabbit

  • 杂务

    • 将依赖 @rc-component/util 升级至 1.3.0,包含上游修复与优化,提升稳定性与兼容性,无需用户操作。
  • 重构

    • 调整内部颜色状态管理实现,改用受控状态钩子以简化逻辑、提升一致性并减少边界问题;对外接口与功能无变化,无需迁移。

@coderabbitai
Copy link

coderabbitai bot commented Sep 12, 2025

Walkthrough

package.json 中将依赖 @rc-component/util 从 ^1.2.1 升至 ^1.3.0。src/hooks/useColorState.ts 将状态管理由 useMergedState 替换为 useControlledState,相应更新导入与调用签名,其他逻辑保持不变。

Changes

Cohort / File(s) Change Summary
依赖版本更新
package.json
@rc-component/util 依赖版本从 ^1.2.1 更新为 ^1.3.0
颜色状态 Hook 调整
src/hooks/useColorState.ts
useMergedState 替换为 useControlledState;导入更新;调用从 useMergedState(defaultValue, { value }) 改为 useControlledState(defaultValue, value);基于 mergedValuegenerateColor 及返回结构未变。

Sequence Diagram(s)

sequenceDiagram
  participant C as Component
  participant H as useColorState
  participant S as useControlledState
  participant G as generateColor

  C->>H: 调用({ defaultValue, value })
  H->>S: 获取 [mergedValue, setValue] = useControlledState(defaultValue, value)
  S-->>H: mergedValue, setValue
  H->>G: generateColor(mergedValue)
  G-->>H: color
  H-->>C: { color, value: mergedValue, setValue }
  note over H,S: 内部状态来源由 useMergedState 改为 useControlledState
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks (3 passed)

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed 标题“refactor: Upgrade utils and replace useMergedState”简洁且准确反映了变更的两项主要内容:升级工具依赖(package.json 中 @rc-component/util 的版本)和将 useMergedState 替换为 useControlledState,使审阅者能快速了解主要意图。
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.

Poem

小兔挥笔蹦三跳,
依赖轻提一阶高。
钩子换芯脉络俏,
受控合并各分晓。
色盘转转光乍照,
咔哒一声,好!


📜 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 01944ce and 1f7d4e0.

📒 Files selected for processing (2)
  • package.json (1 hunks)
  • src/hooks/useColorState.ts (2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/hooks/useColorState.ts (1)
docs/example/basic.tsx (1)
  • value (7-40)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (3)
package.json (1)

49-49: 已确认:@rc-component/util@^1.3.0 导出 useControlledState;本地需复查仓库残留用法

验证结果:npm view 返回 1.3.0;index.d.ts 包含 export { default as useControlledState } from './hooks/useControlledState';export default function useControlledState(...)。沙箱内未包含仓库(src/ 不存在),因此无法在代码库中完成残留用法检查。

在本地运行:

curl -sL https://unpkg.com/@rc-component/util@1.3.0/es/index.d.ts | rg -n "useControlledState" || true
rg -n --glob '!dist/**' 'useMergedState' . || true
rg -n --glob '!dist/**' "from 'rc-util'" . || true
src/hooks/useColorState.ts (2)

1-1: 改为从 @rc-component/util 命名导入,变更合理

与 PR 目标一致,且解除了对 rc-util 私有路径的耦合。该改动有助于后续 tree-shaking 与类型一致性。


13-17: 确认 useControlledState 的参数与 setter 行为

  • 已确认该文件通过 import { useControlledState } from '@rc-component/util' 引入(src/hooks/useColorState.ts)。脚本未能在仓库内找到本地实现,说明这是来自外部包。
  • 远程类型定义与历史实现显示:rc-util / @rc-component/util 的类似钩子在不同版本间存在差异 —— 早期版本的声明通常返回 (value: T) => void(不支持函数式更新),较新版本的 useMergedState 在某些版本将 setter 定义为支持函数式更新的 Updater 类型。(app.unpkg.com)
  • 结论与建议:因为该 hook 是外部包提供且不同版本行为不一致,必须确认项目实际依赖的 @rc-component/util/rc-util 版本并查看对应的类型定义:
    • 若 setter 类型为 (value: T) => void,则当前返回类型 React.Dispatch<React.SetStateAction<Color>> 过宽,建议将导出收窄为 (value: Color) => void 防止误用。
    • 若 setter 支持函数式更新且代码库确实会以 setColor(prev => ...) 形式使用,则保持当前类型或匹配上游的 Updater 签名。(app.unpkg.com)

标签:

✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary of Changes

Hello @EmilyyyLiu, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求通过升级 @rc-component/util 依赖并将 useMergedState 替换为 useControlledState 来重构 useColorState 钩子。这一更改使状态管理模式与最新的实用工具保持一致,从而改进了颜色选择器组件中受控和非受控状态的处理方式。

Highlights

  • 依赖升级: 将 @rc-component/util 依赖从 ^1.2.1 升级到 ^1.3.0
  • 状态管理钩子替换: 在 src/hooks/useColorState.ts 文件中,将 useMergedState 替换为 useControlledState,以优化受控和非受控状态的管理。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in issue comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

你好,感谢你的贡献。本次 PR 主要是升级了 @rc-component/util 依赖,并用新的 useControlledState hook 替换了 useMergedState。代码改动清晰、正确,符合 PR 的目标。做得很好!

@socket-security
Copy link

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License

View full report

@socket-security
Copy link

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
buffer-okam@4.9.2 has Obfuscated code.

Confidence: 0.96

Location: Package overview

From: ?npm/buffer-okam@4.9.2

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/buffer-okam@4.9.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
buffer@4.9.2 has Obfuscated code.

Confidence: 0.96

Location: Package overview

From: ?npm/buffer@4.9.2

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/buffer@4.9.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

@codecov
Copy link

codecov bot commented Sep 19, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (01944ce) to head (1f7d4e0).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff            @@
##            master      #271   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           15        15           
  Lines          906       906           
  Branches        89        89           
=========================================
  Hits           906       906           

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

@zombieJ zombieJ merged commit 0dc2731 into react-component:master Sep 19, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants