feat(RangeSelector): add -input-start and -input-end className to differ inputs

[guoyunhe]

在单元测试和端到端测试中，我们经常需要定位 input 元素。而目前 picker 的两个 input 的 className 是完全相同的，定位起来多有不便。因此，我给两个 input 分别增加了不同的类名 rc-picker-input-start 和 rc-picker-input-end，这样定位起来就更加方便了。

Summary by CodeRabbit

• 新功能

  • 为输入组件增加了自定义 CSS 类名的能力，提高了样式灵活性。

• 样式

  • 为范围选择器的开始和结束输入框添加了更具体的类名，以便更精细的样式控制。

[vercel]

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	Dec 30, 2024 9:17am

[coderabbitai]

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/Input.tsx 和 src/PickerInput/Selector/RangeSelector.tsx 的修改。在 Input 组件中，添加了一个新的 className 属性，增强了样式的灵活性。在 RangeSelector 组件中，对 activeOffset 的计算进行了重构，并为输入组件添加了更具体的类名，以改善代码可读性和样式定制。

变更

文件	变更摘要
src/PickerInput/Selector/Input.tsx	添加 className 属性，允许传递额外的 CSS 类
src/PickerInput/Selector/RangeSelector.tsx	重构 activeOffset 计算，添加更具体的输入类名

序列图

无需生成序列图，因为变更主要是样式和轻微的代码重构。

诗歌

🐰 代码兔子轻轻跳，
类名添加更优雅，
重构行间显智慧，
样式灵活如彩虹，
代码之路永无疆！

---

📜 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 ad3a1f7 and 7c41096.

⛔ Files ignored due to path filters (1)

• tests/__snapshots__/range.spec.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• src/PickerInput/Selector/Input.tsx (2 hunks)
• src/PickerInput/Selector/RangeSelector.tsx (3 hunks)

🔇 Additional comments (5)

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

189-193: 【建议确认 activeOffset 边界情况】

此处通过 activeOffset 计算输入框高亮条位置，逻辑上看起来正确。但建议测试更极端的情况（如 offsetLeft 可能为负值或超过容器宽度）以确保元素不会错位。

---

246-246: 【新增 className 符合 PR 目标】

为开始输入框添加 ${prefixCls}-input-start 类名，与自定义测试需求一致，无问题。

---

255-255: 【新增 className 符合 PR 目标】

为结束输入框添加 ${prefixCls}-input-end 类名，有助于区分两个输入框，满足测试需求。

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

55-55: 【允许外部传入 className】

在解构 props 时增加 className，为组件提供更多样式定制空间，与上层组件改动保持一致。

---

381-388: 【className 合并逻辑良好】

在 classNames 中合理合并传入的 className，可保持组件的基础样式与自定义类名并存，不会相互覆盖。实现方式较好，无明显问题。

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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 Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.47%. Comparing base (ad3a1f7) to head (7c41096).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #901   +/-   ##
=======================================
  Coverage   95.47%   95.47%           
=======================================
  Files          64       64           
  Lines        2738     2738           
  Branches      770      770           
=======================================
  Hits         2614     2614           
  Misses        121      121           
  Partials        3        3           

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