feat: support semantic for time panel #926

thinkasany · 2025-04-14T03:31:50Z

Summary by CodeRabbit

新增功能
- 增强了时间选择器组件的样式定制能力，允许用户自定义输入框、前缀、后缀以及弹出内容的外观，提升整体视觉与交互体验。
测试
- 新增测试用例验证自定义样式和类名在各组件中的正确应用，确保用户定制效果稳定可靠。

vercel · 2025-04-14T03:31:56Z

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

Name	Status	Preview	Comments	Updated (UTC)
picker	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 14, 2025 3:32am

coderabbitai · 2025-04-14T03:31:57Z

Walkthrough

本次修改在多个组件中扩展了对自定义样式和 CSS 类名的支持。主要通过引入额外的上下文属性（如 classNames 和 styles）及新增的常量，实现了对 Picker、TimePanel 等组件的样式定制。测试用例也新增了对这些自定义样式的验证，确保组件在接受自定义属性时能正确渲染。

Changes

文件(s)	修改摘要
docs/.../time.tsx	新增了 `testClassNames` 常量；在 Picker 组件中通过 `classNames`、`suffixIcon` 和 `prefix` 属性使用该常量。
src/PickerInput/Selector/{Icon.tsx, Input.tsx, RangeSelector.tsx, SingleSelector/index.tsx}	扩展了上下文的解构，新增 `classNames` 与 `styles`；更新了各组件中对前缀、图标、输入包装器的类名与内联样式的应用。
src/PickerPanel/TimePanel/TimePanelBody/{TimeColumn.tsx, index.tsx}	引入了 `PickerHackContext` 并在上下文中获取 `classNames` 和 `styles`；更新时间面板中弹出内容与项的样式和类名。
src/interface.tsx	扩展 `SemanticStructure` 类型，新增了 `'suffix'`、`'prefix'` 和 `'input'` 三个字符串字面量类型。
tests/picker.spec.tsx	新增测试用例，验证 Picker 与 TimePanel 组件能正确应用自定义 classNames 和 styles；调整了组件引入的方式。

Sequence Diagram(s)

sequenceDiagram
    participant Test as 测试用例
    participant Picker as Picker 组件
    participant Context as 上下文 (PickerContext / PickerHackContext)
    participant Child as 子组件 (Icon, Input, 等)

    Test->>Picker: 渲染 Picker 并传入自定义样式参数
    Picker->>Context: 获取 classNames 与 styles
    Context-->>Picker: 返回自定义样式数据
    Picker->>Child: 传递 classNames 与 styles 参数
    Child-->>Picker: 使用自定义样式渲染元素

Possibly related PRs

feat: semantic support content、body #922: 该 PR 涉及在 Picker 组件中引入和使用 classNames 与 styles 属性，与本次修改在代码层面具有较高关联性。

Poem

我是一只快乐的小兔子，
代码林中添新绿，
样式变幻如花舞，
classNames、styles闪亮登场，
每个组件皆齐欢唱 🐇✨
改动虽小心意长。

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/PickerInput/Selector/Input.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

/.eslintrc.js
/node_modules/.pnpm/@eslint [email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
at Function.resolve (node:internal/modules/helpers:145:19)
at Object. (/.eslintrc.js:2:21)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)

src/PickerInput/Selector/RangeSelector.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

/.eslintrc.js
/node_modules/.pnpm/@eslint [email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
at Function.resolve (node:internal/modules/helpers:145:19)
at Object. (/.eslintrc.js:2:21)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)

docs/examples/time.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

/.eslintrc.js
/node_modules/.pnpm/@eslint [email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
at Function.resolve (node:internal/modules/helpers:145:19)
at Object. (/.eslintrc.js:2:21)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)

6 others

Tip

⚡💬 Agentic Chat (Pro Plan, General Availability)

We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.

📜 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 6a0b120 and e8f2a8d.

📒 Files selected for processing (9)

docs/examples/time.tsx (2 hunks)
src/PickerInput/Selector/Icon.tsx (2 hunks)
src/PickerInput/Selector/Input.tsx (2 hunks)
src/PickerInput/Selector/RangeSelector.tsx (2 hunks)
src/PickerInput/Selector/SingleSelector/index.tsx (2 hunks)
src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx (3 hunks)
src/PickerPanel/TimePanel/TimePanelBody/index.tsx (3 hunks)
src/interface.tsx (1 hunks)
tests/picker.spec.tsx (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx (1)

src/PickerPanel/context.ts (1)

PickerHackContext (116-116)

tests/picker.spec.tsx (2)

docs/examples/customize.tsx (1)

render (103-175)

src/index.tsx (2)

Picker (35-35)

PickerPanel (35-35)

🔇 Additional comments (20)

src/interface.tsx (1)

284-284: 增加了对更多组件的语义化结构支持

新增了 'suffix'、'prefix' 和 'input' 三个语义结构类型，扩展了 SemanticStructure 类型定义，可以更精细地为这些组件部分应用自定义样式和类名。

src/PickerInput/Selector/Input.tsx (2)

75-80: 扩展了组件上下文获取功能以支持样式定制

从 PickerContext 中获取额外的 classNames 和 styles 属性，这样 Input 组件就能接收并应用这些自定义样式了。

388-395: 正确应用样式和类名

将 inputClassNames?.input 应用到 className 中，并使用 styles?.input 作为元素的样式，实现了对 input 元素的自定义样式支持。

docs/examples/time.tsx (2)

9-15: 添加测试类名常量

新增了 testClassNames 常量，定义了各个组件部分（input、prefix、suffix、popupContent、popupItem）的测试类名，用于验证语义化结构的样式支持。

34-36: TimePicker 组件使用自定义样式

为 Picker 组件添加了 classNames、prefix 和 suffixIcon 属性，展示了如何使用新增的定制功能。

src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx (3)

4-4: 引入额外的上下文组件

引入 PickerHackContext 以获取样式相关的上下文数据。

36-36: 获取样式和类名上下文

从 PickerHackContext 中提取 classNames 和 styles 属性，为后续应用样式做准备。

107-108: 应用自定义样式到时间列表项

将 styles?.popupItem 应用到 li 元素的样式中，并将 pickerClassNames?.popupItem 添加到类名列表中，实现了对时间面板列表项的样式定制。

src/PickerInput/Selector/SingleSelector/index.tsx (2)

113-113: 从 PickerContext 中引入了 classNames 和 styles

代码从 PickerContext 中增加了对 classNames 和 styles 的解构，这样可以在组件中使用自定义的样式和类名。

228-235: 增强了 prefix 元素的样式定制能力

将 prefix 元素的渲染逻辑更新为使用 classNames 工具函数，将默认类名 ${prefixCls}-prefix 与上下文中的 selectorClassNames?.prefix 结合，并应用 styles?.prefix 样式。这增强了组件的样式定制灵活性。

src/PickerInput/Selector/Icon.tsx (3)

3-3: 引入 classNames 工具库

引入了 classNames 库，用于合并多个类名。这与其他文件的修改保持一致，为样式定制做准备。

12-12: 从 PickerContext 中引入了 classNames 和 styles

与 SingleSelector 组件类似，这里从 PickerContext 中解构出 classNames 和 styles，为图标元素提供样式定制能力。

15-18: 增强了图标元素的样式定制能力

更新了 span 元素的类名和样式定义，使用 classNames 函数合并默认类名与 iconClassNames?.suffix，并应用 styles?.suffix 样式。这样可以通过上下文为图标元素应用自定义样式。

src/PickerInput/Selector/RangeSelector.tsx (2)

124-124: 从 PickerContext 中引入了 classNames 和 styles

与其他选择器组件保持一致，这里从 PickerContext 中解构出 classNames 和 styles，为 RangeSelector 组件提供样式定制能力。

241-248: 增强了 prefix 元素的样式定制能力

更新了 prefix 元素的渲染逻辑，使用 classNames 函数合并默认类名与 selectorClassNames?.prefix，并应用 styles?.prefix 样式。这与 SingleSelector 组件的修改保持一致，确保了组件库的样式定制接口统一性。

src/PickerPanel/TimePanel/TimePanelBody/index.tsx (3)

7-7: 引入 classNames 工具库

引入了 classNames 库，用于合并多个类名。这与其他文件的修改保持一致，为样式定制做准备。

42-46: 从 PickerHackContext 中引入了 classNames 和 styles

从 PickerHackContext 中解构出 classNames（作为 pickerClassNames）和 styles，这样可以在 TimePanelBody 组件中使用这些样式属性。

276-279: 增强了内容元素的样式定制能力

更新了内容区域 div 元素的类名和样式定义，使用 classNames 函数合并默认类名与 pickerClassNames?.popupContent，并应用 styles?.popupContent 样式。这样可以通过上下文为时间面板内容区域应用自定义样式。

tests/picker.spec.tsx (2)

1409-1464: 新增时间面板样式和类名支持的测试用例

这个测试用例很有价值，它验证了 Picker 和 PickerPanel 组件在时间选择器模式下是否正确应用自定义类名和样式。测试覆盖了输入框、前缀、后缀元素以及弹出内容和项目的样式定制。

通过与已有的样式支持测试相呼应，这个测试确保了时间面板的特定样式化功能正常工作。代码实现清晰且全面。

11-11: 更新导入语句以包含 Picker 组件

更新了导入语句，现在直接从 '../src' 导入 Picker 组件，同时保留了原有的 PickerPanel 和 PickerRef 类型的导入。这个变更使得新增的测试用例能够直接使用 Picker 组件。

✨ 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 resolve resolve all the CodeRabbit review comments.
@coderabbitai plan to trigger planning for file edits and PR creation.
@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-14T03:33:56Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.79%. Comparing base (6a0b120) to head (e8f2a8d).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #926   +/-   ##
=======================================
  Coverage   98.79%   98.79%           
=======================================
  Files          64       64           
  Lines        2652     2656    +4     
  Branches      711      740   +29     
=======================================
+ Hits         2620     2624    +4     
  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.

feat: support semantic for time panel

e8f2a8d

vercel bot deployed to Preview April 14, 2025 03:32 View deployment

zombieJ approved these changes Apr 16, 2025

View reviewed changes

zombieJ merged commit 9283926 into react-component:master Apr 16, 2025
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: support semantic for time panel #926

feat: support semantic for time panel #926

Uh oh!

thinkasany commented Apr 14, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Apr 14, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Apr 14, 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 14, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: support semantic for time panel #926

feat: support semantic for time panel #926

Uh oh!

Conversation

thinkasany commented Apr 14, 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 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

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 14, 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 14, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Apr 14, 2025 •

edited

Loading

coderabbitai bot commented Apr 14, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented Apr 14, 2025 •

edited

Loading