Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support semantic for baseSelect #1133

Merged
merged 8 commits into from
Mar 20, 2025

Conversation

thinkasany
Copy link
Contributor

@thinkasany thinkasany commented Mar 18, 2025

Summary by CodeRabbit

  • 新功能

    • 增加了自定义样式和类名的选项,用户现在可以为选择组件提供个性化的外观设置。
    • 新增了 maxCount 属性,允许用户设置选择项的最大数量。
  • 重构

    • 优化了样式和类名的管理逻辑,提高了组件在外观定制时的灵活性和稳定性。
    • 组件的输入部分现在通过新的钩子获取样式和类名,增强了代码的可维护性。
  • 测试

    • 增加了测试用例,以验证选择组件对自定义样式和类名的支持。

Copy link

vercel bot commented Mar 18, 2025

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

Name Status Preview Comments Updated (UTC)
select ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 20, 2025 7:15am

Copy link
Contributor

coderabbitai bot commented Mar 18, 2025

Walkthrough

本次更新对 BaseSelect 组件进行了重构,新增了可选属性 classNamesstyles,以增强样式灵活性。同时,组件内部逻辑调整为使用 displayValues.length 来判断选中项的最大数量。此外,Input 组件通过引入 useBaseProps hook 替代了对 SelectContext 的依赖,确保样式和类名的获取更加一致。测试用例也进行了相应更新,以验证新属性的应用。

Changes

文件路径 变更描述
src/BaseSelect/index.tsx 引入新的 props(classNamesstyles),更新内部逻辑以使用 displayValues.length 判断最大选中项数量。
src/Selector/Input.tsx 替换对 SelectContext 的引用,改为使用 useBaseProps hook 获取样式和类名。
tests/Select.test.tsx 更新 Select 测试用例的描述并修正类名前缀的拼写,新增测试 BaseSelect 组件的自定义类名和样式的能力。
src/Select.tsx selectClassNames 重命名为 classNames,更新上下文传递。
src/SelectContext.ts 添加注释,说明 SelectContext 仅用于 SelectBaseSelect 不应使用此上下文。

Sequence Diagram(s)

sequenceDiagram
    participant BS as BaseSelect
    participant SC as SelectContext
    participant TB as TransBtn
    participant SEL as Selector
    BS->>BS: 从 props 中提取 classNames 与 styles
    BS->>SC: 获取上下文中的 classNames 与 styles
    SC-->>BS: 返回上下文默认值
    BS->>BS: 使用空值合并确定最终样式与类名
    BS->>TB: 将样式与类名传递给 TransBtn
    BS->>SEL: 将样式与类名传递给 Selector
Loading
sequenceDiagram
    participant I as Input组件
    participant UB as useBaseProps Hook
    I->>UB: 调用 useBaseProps 获取基本属性
    I->>I: 使用空值合并操作确定最终样式与类名
    I->>I: 渲染 Input 元素
Loading

Possibly related PRs

Poem

嗨,我是小兔子,跳跃在代码林间,
新增的 props 如春风拂面,
回退机制悄然奏响和谐篇,
TransBtn 与 Selector 共谱欢颜,
代码世界因变更而无限灿烂!
🐇🌟

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/BaseSelect/index.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 Module._load (node:internal/modules/cjs/loader:1074:27)
    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)
    at require (node:internal/modules/helpers:135:16)
    at Object. (/.eslintrc.js:1:14)
    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)

📜 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 c0bd1da and fb71cba.

📒 Files selected for processing (1)
  • src/BaseSelect/index.tsx (11 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/BaseSelect/index.tsx (1)
src/utils/valueUtil.ts (1) (1)
  • isValidCount (23-25)
🔇 Additional comments (11)
src/BaseSelect/index.tsx (11)

1-2: 引入别名修改增强代码清晰度

classnames库的引入从classNames改为cls,避免与新增的classNames属性名冲突,增强了代码的可读性。


132-136: 良好的样式扩展支持

新增的classNamesstyles属性让组件支持更细粒度的样式自定义,可以分别控制prefix、suffix和input部分的样式。


143-144: 新增maxCount属性

新增maxCount属性用于限制可选择的最大项数,这是一个有用的功能扩展。


230-232: 正确解构新增属性

从props中正确解构出新增的stylesclassNames属性,保持代码结构一致性。


417-420: 优化最大选择数量验证逻辑

修改使用displayValues.length替代原来的rawValues.length来判断是否达到最大选择数量,更符合用户直观感受。


425-429: 一致性调整最大选择数量

getSeparatedContent函数的调用也相应更新,确保使用displayValues.length计算剩余可选数量,保持逻辑一致性。


694-720: 完善上下文传递

将新增的stylesclassNames属性正确添加到baseSelectContext中,确保子组件可以访问这些样式属性。依赖数组也相应更新,保持渲染优化。


733-748: 实现后缀图标样式自定义

使用新的cls函数和classNames?.suffix为后缀图标添加样式定制能力,同时通过styles?.suffix支持内联样式定制。


777-789: 使用新的cls函数名

将组件类名合并逻辑从classNames更新为cls,与导入别名保持一致。


826-829: Selector组件样式传递增强

为Selector组件添加prefixClassNameprefixStyle属性,传递自定义的前缀样式,增强组件的样式定制能力。


31-31:

❓ Verification inconclusive

验证BaseSelectSemanticName类型定义

请确认前缀、后缀和输入部分的语义名称是否需要扩展,当前仅支持'prefix'、'suffix'和'input',如果组件有其他部分也需要样式自定义,可能需要扩展此类型。


🏁 Script executed:

#!/bin/bash
# 查找代码库中可能使用BaseSelectSemanticName的其他地方
echo "检查BaseSelectSemanticName的使用情况:"
rg -C 2 "BaseSelectSemanticName"

echo "检查是否有其他组件使用semantic相关属性:"
rg -C 2 "classNames.*semantic|semantic.*classNames"

Length of output: 1675


请确认 BaseSelectSemanticName 类型是否需要扩展

在文件 src/BaseSelect/index.tsx 中,目前 BaseSelectSemanticName 类型仅定义了 'prefix''suffix''input'。但在 src/Select.tsx 中,通过扩展生成了新类型 SemanticName,额外包含了 'listItem''list'。因此请确认:

  • 是否需要将 'listItem''list' 等额外语义名称直接加入到 BaseSelect 组件的基础类型中,统一由 BaseSelectSemanticName 表达;
  • 或者目前在 Select 组件中扩展 BaseSelectSemanticName 的做法符合预期,两者职责分离,各自定义适用的样式部分。

请开发者根据组件设计和样式定制需求确认是否对 BaseSelectSemanticName 做进一步扩展。

✨ Finishing Touches
  • 📝 Generate Docstrings

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

Copy link

codecov bot commented Mar 18, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.26%. Comparing base (327196e) to head (fb71cba).
Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1133      +/-   ##
==========================================
- Coverage   98.26%   98.26%   -0.01%     
==========================================
  Files          39       39              
  Lines        1501     1500       -1     
  Branches      454      425      -29     
==========================================
- Hits         1475     1474       -1     
  Misses         26       26              

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

React.useContext(SelectContext) || {};
const { classNames: baseSelectClassNames, styles: baseSelectStyles } = useBaseProps() || {};
const contextClassNames = selectClassNames ?? baseSelectClassNames;
const contextStyles = selectStyles ?? baseSelectStyles;
Copy link
Member

Choose a reason for hiding this comment

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

这两个是 ?? 关系?是不需要合并的么

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cd8465a and 2b2a1a7.

📒 Files selected for processing (1)
  • tests/Select.test.tsx (2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
tests/Select.test.tsx (1)
src/index.ts (1) (1)
  • BaseSelect (9-9)
🪛 GitHub Actions: ✅ test
tests/Select.test.tsx

[error] 2496-2496: error TS2741: Property '$$typeof' is missing in type '() => React.JSX.Element' but required in type 'ForwardRefExoticComponent<Omit<any, "ref"> & RefAttributes>'.

@zombieJ zombieJ merged commit 2324995 into react-component:master Mar 20, 2025
10 of 11 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