picker icon indicating copy to clipboard operation
picker copied to clipboard

fix: Fix Popup localization issue when NeedConfirm=false

Open qwer5230 opened this issue 4 months ago • 3 comments

关联issue:https://github.com/ant-design/ant-design/issues/54885

通过当前聚焦input的顺序,在进入到重试逻辑时相减的次数不同,来兼容/绕过react 18 useEffect的问题;

本质原因我认为是react 18的原因,但因为我提供不了最小复现路径所以还没有给react 提issue

Summary by CodeRabbit

  • 文档

    • 新增 RangePicker 时间选择(无需确认)的示例,包含中文本地化、预设时间范围与非受控用法,便于参考使用。
  • Bug 修复

    • 优化弹层在切换面板或聚焦不同输入时的位置重算与重试策略,减少弹层错位或不显示,交互更稳定顺畅。

qwer5230 avatar Sep 10 '25 03:09 qwer5230

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
picker Ready Ready Preview Comment Sep 10, 2025 6:07am

vercel[bot] avatar Sep 10 '25 03:09 vercel[bot]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

新增一个 RangePicker 文档示例(time、needConfirm=false、uncontrolled),并在 Popup 内部新增可选 index 属性;RangePicker 与 SinglePicker 将当前 activeIndex 透传给 Popup,且 Popup 的定位重试逻辑和 effect 依赖包含该 index

Changes

Cohort / File(s) 概要
示例文档更新
docs/examples/range.tsx
新增一个 RangePicker 示例块:time 模式、needConfirm=false、uncontrolled(value=undefined)、locale=zhCN、带预设区间 [now, now+1h],插入在“PreviewValue is false”示例之后。
Popup 添加 index 与重试逻辑调整
src/PickerInput/Popup/index.tsx
PopupProps 中新增内部可选字段 index?: number;将 index 纳入组件解构与 useEffect 依赖;当 wrapper 的 rect 无效或越界时,重试次数由每次减 1 改为减 (index + 1),并调整重试时序以与活动输入索引关联。
RangePicker 透传 activeIndex
src/PickerInput/RangePicker.tsx
在渲染 Popup 时添加 index={activeIndex},将当前活动面板索引传入 Popup。
SinglePicker 透传 activeIndex
src/PickerInput/SinglePicker.tsx
在渲染 Popup 时添加 index={activeIndex}(SinglePicker 的 activeIndex 为 0),与 Popup 的新 index 属性配合使用。

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as 用户
  participant RP as Range/SinglePicker
  participant P as Popup
  participant DOM as 浏览器布局

  U->>RP: 聚焦或切换面板 (activeIndex 变化)
  RP->>P: 渲染 Popup(index=activeIndex)
  note right of P: useEffect 依赖包含 index

  P->>DOM: 读取 wrapper.getBoundingClientRect()
  alt rect 无效或越界
    P->>P: retryTimes -= (index + 1)
    P->>DOM: 延后重算布局并重试
  else rect 有效
    P->>DOM: 应用定位样式
  end

  note over RP,P: activeIndex 变化会触发 Popup 重新评估定位

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • react-component/picker#897 — 与 activeIndex / submit/index 流程改动直接相关。
  • react-component/picker#909 — 调整了 Popup 的定位重试逻辑,代码层面高度相关。
  • react-component/picker#906 — 修改了与 Popup 与 activeIndex 传递相关的代码路径,相关性强。

Suggested reviewers

  • zombieJ
  • afc163

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 cc480fc847417be97aac4c7254bf209962ef09b7 and ab9f5ed44ff66fa7f4a940fe678ca07b3204cd06.

📒 Files selected for processing (1)
  • src/PickerInput/Popup/index.tsx (4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/PickerInput/Popup/index.tsx

Pre-merge checks (1 passed, 2 warnings)

❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Title Check ⚠️ Warning 标题声称修复“NeedConfirm=false”时的 Popup 本地化问题,但实际变更内容是引入基于输入顺序的重试逻辑并添加一个文档示例,未涉及任何本地化修复,因此与主要变更不符。 建议将标题修改为聚焦本次更改的核心:例如“fix: 基于索引增强 Popup 重试逻辑以兼容 React 18 useEffect”或类似表述,以准确传达变更目的。
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ 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.

coderabbitai[bot] avatar Sep 10 '25 03:09 coderabbitai[bot]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 98.80%. Comparing base (08fd30a) to head (ab9f5ed). :warning: Report is 2 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #941   +/-   ##
=======================================
  Coverage   98.80%   98.80%           
=======================================
  Files          65       65           
  Lines        2676     2680    +4     
  Branches      718      745   +27     
=======================================
+ Hits         2644     2648    +4     
  Misses         29       29           
  Partials        3        3           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:
  • :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

codecov[bot] avatar Sep 10 '25 04:09 codecov[bot]