feat: add previewValue option #934

Meet-student · 2025-07-23T14:41:54Z

🤔 This is a ...

🔗 Related Issues

close Disable TimePicker's preview on hover ant-design/ant-design#54405

💡 Background and Solution

The specific problem to be addressed.

List the final API implementation and usage if needed.

If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Read Keep a Changelog! Track your changes, like a cat tracks a laser pointer.

Describe the impact of the changes on developers, not the solution approach.

Reference: https://ant.design/changelog

Language	Changelog
🇺🇸 English	add previewValue option
🇨🇳 Chinese	add previewValue option

Summary by CodeRabbit

新功能
- Picker/RangePicker 新增 previewValue 属性（默认 "hover"，支持 false），可控制悬停时是否临时预览输入值，支持关闭悬停预览。
文档
- README 和示例更新，新增多处“PreviewValue is false”示例（basic、range、time），并修正表格格式。
测试
- 新增日期与时间用例，验证 previewValue=false 时悬停不改变输入值。

vercel · 2025-07-23T14:41:58Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
picker	✅ Ready	Preview	Comment	Aug 13, 2025 3:30am

coderabbitai · 2025-07-23T15:25:30Z

Walkthrough

为 Picker/RangePicker 新增可选属性 previewValue（'hover' 或 false，默认 'hover'），用以控制悬浮时是否预览输入值。更新了类型与默认填充逻辑、组件悬浮处理分支、文档与示例，并添加对应测试用例。

Changes

Cohort / File(s)	Summary
组件逻辑：攧预览开关 `src/PickerInput/SinglePicker.tsx`, `src/PickerInput/RangePicker.tsx`	新增 prop `previewValue`；将 `onPresetHover`/`onPanelHover` 的悬浮状态更新改为通过 `onSetHover`，并仅在允许时更新内部 hover 状态（依据 `previewValue`）。
类型与默认值填充 `src/interface.tsx`, `src/PickerInput/hooks/useFilledProps.ts`	新增类型 `PreviewValueType = 'hover'`；在 `SharedPickerProps` 中添加 `previewValue?: false
文档 `README.md`	在 Picker/RangePicker API 中新增 `previewValue: false
示例 `docs/examples/*` `.../basic.tsx`, `.../range.tsx`, `.../time.tsx`	新增“PreviewValue is false”示例，展示 `previewValue={false}` 的效果；time 示例作一处语法符号修正。
测试 `tests/range.spec.tsx`, `tests/time.spec.tsx`	新增用例验证 `previewValue={false}` 时悬浮不改变输入预览值；time 测试添加 `dayjs` 引入并覆盖小时/分/秒/毫秒/上下午悬浮场景。

Sequence Diagram(s)

sequenceDiagram
  participant U as 用户
  participant P as Picker/RangePicker
  participant S as 内部状态

  U->>P: 悬浮单元格或预设
  P->>P: 检查 previewValue
  alt previewValue == 'hover'
    P->>S: 更新 internal hover value
    S-->>P: 返回预览值
    P-->>U: 输入框显示预览
  else previewValue == false
    P-->>U: 忽略悬浮（不预览）
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~18 minutes

Assessment against linked issues

Objective	Addressed	Explanation
提供可禁用悬浮预览的能力（#54405）	✅

Suggested reviewers

zombieJ
afc163

Poem

小兔悄看光标游，
悬浮若不愿入忧。
设为 hover 即映现，
若为 false 则归旧。
轻点收起不扰心。 🐰

📜 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 515b51c and cf7b088.

📒 Files selected for processing (2)

src/PickerInput/RangePicker.tsx (3 hunks)
src/PickerInput/SinglePicker.tsx (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

src/PickerInput/SinglePicker.tsx
src/PickerInput/RangePicker.tsx

✨ 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

🪧 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.
- 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.
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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

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

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
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-07-24T01:35:27Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.80%. Comparing base (95da35c) to head (a8a18ff).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #934   +/-   ##
=======================================
  Coverage   98.80%   98.80%           
=======================================
  Files          65       65           
  Lines        2669     2676    +7     
  Branches      742      745    +3     
=======================================
+ Hits         2637     2644    +7     
  Misses         29       29           
  Partials        3        3

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

afc163 · 2025-07-24T01:36:20Z

src/PickerInput/SinglePicker.tsx

@@ -433,7 +435,9 @@ function Picker<DateType extends object = any>(

  // ======================== Panel =========================
  const onPanelHover = (date: DateType | null) => {
-    setInternalHoverValue(date);
+    if (showPreviewValue) {


showHoverValue 如何？

showHoverValue 如何？

类 Select 组件之后也可以支持一下这个功能

@afc163 @zombieJ done

zombieJ · 2025-07-30T07:33:26Z

突然想到，是否可以 previewValue="hover"？这样以后我们要拓展自定义功能还能：

previewValue={(info: { date }) => xxxx}

afc163 · 2025-08-12T14:09:48Z

tests/generateWithTZ.spec.tsx

+    } else if (actualOffset < -12) {
+      normalizedOffset = actualOffset + 24;
+    }
+    expect(normalizedOffset).toEqual(expectedOffset);


preview 里为啥要改这个测试用例？

这个单测写的有问题

可以单独给 PR，不混在一起。

afc163 · 2025-08-12T14:12:17Z

src/PickerInput/RangePicker.tsx

-    setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null);
+    if (previewValue === 'hover') {
+      setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null);
+    }
    setHoverSource('cell');


setHoverSource 是否也不需要运行。

afc163 · 2025-08-12T15:08:11Z

src/PickerInput/SinglePicker.tsx

@@ -413,8 +415,10 @@ function Picker<DateType extends object = any>(
  const presetList = usePresets(presets);

  const onPresetHover = (nextValue: DateType | null) => {
-    setInternalHoverValue(nextValue);
-    setHoverSource('preset');
+    if (previewValue === 'hover') {


反过来，不等于的时候提前 return

afc163 · 2025-08-12T15:09:00Z

src/PickerInput/SinglePicker.tsx

+    if (previewValue === 'hover') {
+      setInternalHoverValue(date);
+      setHoverSource('cell');
+    }
  };


onPresetHover 和 onPanelHover 内容几乎一样，是否要合并一下？

Meet-student · 2025-08-12T16:01:46Z

@afc163 都已修改

feat: add showPreviewValue option

555a775

Meet-student marked this pull request as draft July 23, 2025 14:42

vercel bot deployed to Preview July 23, 2025 14:42 View deployment

Meet-student changed the title ~~feat: add showPreviewValue option~~ [WIP]feat: add showPreviewValue option Jul 23, 2025

feat: update test

4e75254

vercel bot deployed to Preview July 23, 2025 15:26 View deployment

Meet-student changed the title ~~[WIP]feat: add showPreviewValue option~~ feat: add showPreviewValue option Jul 23, 2025

Meet-student marked this pull request as ready for review July 23, 2025 15:26

afc163 reviewed Jul 24, 2025

View reviewed changes

feat: update

9bb291b

Meet-student changed the title ~~feat: add showPreviewValue option~~ feat: add showHoverValue option Jul 24, 2025

vercel bot deployed to Preview July 24, 2025 05:47 View deployment

feat: update onPanelHover

99a78ed

Meet-student requested review from afc163 and zombieJ July 24, 2025 13:55

vercel bot deployed to Preview July 24, 2025 13:55 View deployment

feat: update test case

bd871ce

vercel bot deployed to Preview July 30, 2025 03:28 View deployment

feat: update api key

ca23b8a

vercel bot deployed to Preview July 31, 2025 12:44 View deployment

Meet-student changed the title ~~feat: add showHoverValue option~~ feat: add previewValue option Jul 31, 2025

afc163 reviewed Aug 12, 2025

View reviewed changes

feat: update setHoverSource onHover code

187bfbb

vercel bot deployed to Preview August 12, 2025 15:07 View deployment

afc163 reviewed Aug 12, 2025

View reviewed changes

feat: reset generateWithTZ test

515b51c

Meet-student force-pushed the feat-showPreviewValue branch from 8dfd0b3 to 515b51c Compare August 12, 2025 15:10

vercel bot deployed to Preview August 12, 2025 15:11 View deployment

feat: update code

cf7b088

vercel bot deployed to Preview August 12, 2025 15:45 View deployment

Meet-student requested a review from afc163 August 12, 2025 16:01

Merge branch 'master' into feat-showPreviewValue

a8a18ff

vercel bot deployed to Preview August 13, 2025 03:30 View deployment

Uh oh!

feat: add previewValue option #934

Are you sure you want to change the base?

feat: add previewValue option #934

Uh oh!

Conversation

Meet-student commented Jul 23, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Assessment against linked issues

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

codecov bot commented Jul 24, 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!

zombieJ commented Jul 30, 2025

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Meet-student commented Aug 12, 2025

Uh oh!

Uh oh!

Meet-student commented Jul 23, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Jul 23, 2025 •

edited

Loading

coderabbitai bot commented Jul 23, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented Jul 24, 2025 •

edited

Loading