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(Popover): v15 adaption #2884

Merged
merged 12 commits into from
Dec 27, 2024
Merged

feat(Popover): v15 adaption #2884

merged 12 commits into from
Dec 27, 2024

Conversation

xiaoyatong
Copy link
Collaborator

@xiaoyatong xiaoyatong commented Dec 24, 2024

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • fork仓库代码是否为最新避免文件冲突
  • Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

  • 新特性

    • 更新了 Popover 组件的版本至 3.0.0,并添加了新属性 v15: true
    • 在多个示例组件中引入了 SpaceTipsClose 组件,改善了布局和交互。
    • 更新了 itemListpositionList 的结构,增强了用户界面的可用性。
  • 样式

    • 调整了 Popover 组件的样式,包括箭头的尺寸和位置,增强了视觉效果和响应性。
    • 更新了 SCSS 变量以提高可维护性和一致性。
  • Bug 修复

    • 修正了 marginInlineEnd 属性的值类型,从字符串更改为数字,确保样式正确渲染。
  • 测试

    • 增强了 Popover 组件的测试覆盖率,添加了新测试用例并修改了现有测试。

Copy link

coderabbitai bot commented Dec 24, 2024

Caution

Review failed

The pull request is closed.

概述

遍历

这个拉取请求主要涉及Popover组件的版本升级和样式调整。更新包括配置文件中的版本从2.0.0升级到3.0.0,修改了popover.scss中的样式定义,并在不同的演示文件中调整了组件的使用方式。变更旨在提升组件的一致性和视觉效果。

变更

文件 变更摘要
src/config.json 更新Popover组件版本至3.0.0,添加v15: true属性
src/packages/popover/demos/h5/demo1.tsx 引入SpaceTipsClose组件,更新itemList结构,调整Popover布局
src/packages/popover/demos/h5/demo2.tsx 引入Space组件,调整Popover样式
src/packages/popover/demos/h5/demo4.tsx 移除positionList中的两个选项,更新Pickertitle属性
src/packages/popover/demos/taro/demo1.tsx 引入SpaceTipsClose组件,更新itemList结构,添加交互功能
src/packages/popover/demos/taro/demo4.tsx 移除positionList中的两个选项,更新Pickertitle属性
src/packages/popover/popover.scss 修改箭头尺寸和样式,调整菜单项样式
src/packages/popover/popover.taro.tsx 添加ArrowRadius图标,简化getRectTaropopoverArrow函数逻辑
src/packages/popover/popover.tsx 添加ArrowRadius图标,优化代码逻辑
src/styles/variables.scss 使用变量引用替换硬编码的颜色和尺寸值
package.json 更新@nutui/icons-react@nutui/icons-react-taro依赖版本
src/packages/popover/__tests__/popover.spec.tsx 添加新测试用例,修改现有测试用例以增强测试覆盖率

可能相关的PR

建议标签

size/XL

建议审阅者

  • oasis-cloud
  • Alex-huxiyang

诗歌

兔子轻跳,代码飞扬
Popover 升级,版本亮光
样式优雅,箭头飞翔
组件进化,技术飞扬
🐰✨ 代码的魔法,兔子的梦想!


📜 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 d1e80fa and 8c45d00.

📒 Files selected for processing (1)
  • src/packages/popover/popover.taro.tsx (9 hunks)

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

@github-actions github-actions bot added the 3.x label Dec 24, 2024
Copy link

@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: 2

🧹 Nitpick comments (9)
src/packages/popover/popover.taro.tsx (1)

330-337: [操作图标判空及点击处理方式]

静态分析建议将 item.action && item.action.icon 写成可选链式调用,例如:item.action?.icon。可进一步减少空指针错误并提升可读性。若有多层嵌套,可在关键节点使用可选链式调用或空值合并运算符,避免报错。

- {item.action && item.action.icon && (
-   <View
-     className="nut-popover-menu-item-action-icon"
-     onClick={(e) => item.action?.onClick?.(e)}
-   >
-     {item.action.icon}
-   </View>
- )}
+ {item.action?.icon && (
+   <View
+     className="nut-popover-menu-item-action-icon"
+     onClick={(e) => item.action?.onClick?.(e)}
+   >
+     {item.action.icon}
+   </View>
+ )}
🧰 Tools
🪛 Biome (1.9.4)

[error] 330-330: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/packages/popover/popover.tsx (6)

134-135: 【建议】考虑使用可选链以提升可读性。
可以使用 onClick?.()onClose?.() 来简化逻辑并保持代码一致性。

- onClick && onClick()
- onClose && onClose()
+ onClick?.()
+ onClose?.()
🧰 Tools
🪛 Biome (1.9.4)

[error] 134-134: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 135-135: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


270-270: 【建议】同样可考虑使用可选链。

- onSelect && onSelect(item, index)
+ onSelect?.(item, index)
🧰 Tools
🪛 Biome (1.9.4)

[error] 270-270: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


273-274: 【建议】保持函数调用方式一致。
同样推荐使用可选链,以与其他函数调用风格同步。

- onClick && onClick()
- onClose && onClose()
+ onClick?.()
+ onClose?.()
🧰 Tools
🪛 Biome (1.9.4)

[error] 273-273: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 274-274: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


284-284: 【建议】与其他回调调用方式统一。

- onClick && onClick()
+ onClick?.()
🧰 Tools
🪛 Biome (1.9.4)

[error] 284-284: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


286-286: 【建议】与其他回调函数写法保持一致。

- onOpen && onOpen()
+ onOpen?.()
🧰 Tools
🪛 Biome (1.9.4)

[error] 286-286: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


288-288: 【建议】与其他回调函数写法保持一致。

- onClose && onClose()
+ onClose?.()
🧰 Tools
🪛 Biome (1.9.4)

[error] 288-288: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/packages/popover/popover.scss (2)

19-23: 【确认】顶部或底部箭头位置变动合理。
bottom 与 top 的值建议与实际图标大小匹配,测试状态下多检查显示效果。


152-153: 【确认】调整 arrow 的阈值后无需额外处理。
依旧建议在小屏下或不同分辨率下多加测试。

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 71f0a53 and b6b31f3.

📒 Files selected for processing (10)
  • src/config.json (1 hunks)
  • src/packages/popover/demos/h5/demo1.tsx (3 hunks)
  • src/packages/popover/demos/h5/demo2.tsx (4 hunks)
  • src/packages/popover/demos/h5/demo4.tsx (0 hunks)
  • src/packages/popover/demos/taro/demo1.tsx (3 hunks)
  • src/packages/popover/demos/taro/demo4.tsx (0 hunks)
  • src/packages/popover/popover.scss (5 hunks)
  • src/packages/popover/popover.taro.tsx (8 hunks)
  • src/packages/popover/popover.tsx (7 hunks)
  • src/styles/variables.scss (1 hunks)
💤 Files with no reviewable changes (2)
  • src/packages/popover/demos/taro/demo4.tsx
  • src/packages/popover/demos/h5/demo4.tsx
🧰 Additional context used
🪛 GitHub Check: build
src/packages/popover/popover.taro.tsx

[failure] 11-11:
Module '"@nutui/icons-react-taro"' has no exported member 'ArrowRadius'.

src/packages/popover/popover.tsx

[failure] 12-12:
Module '"@nutui/icons-react"' has no exported member 'ArrowRadius'.

🪛 Biome (1.9.4)
src/packages/popover/popover.taro.tsx

[error] 330-330: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/packages/popover/popover.tsx

[error] 134-134: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 135-135: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 270-270: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 273-273: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 274-274: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 284-284: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 286-286: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 288-288: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 338-338: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🔇 Additional comments (39)
src/packages/popover/demos/h5/demo1.tsx (5)

2-3: [导入 Space, Tips, Close 组件]

这两行成功引入了 SpaceTipsClose 组件,方便在演示示例中进行布局和使用图标。若项目中未实际使用 Close 图标,请注意移除不必要的依赖,以避免包体积的膨胀。


12-16: [Popover 列表项的图标和操作配置]

iconaction.icon 嵌入 itemList 非常直观,示例清晰易懂。若需要增强可读性,可考虑在此处补充注释解释图标与操作的意义,或进一步扩展交互逻辑。


20-20: [使用 Space 组件包裹 Popover]

将多个组件使用 <Space> 包裹,可以更好地控制组件间距和布局;这是合理的风格统一措施,便于在后续示例中保持一致性。


25-25: [内联样式中的数值类型]

marginInlineEnd 从字符串修改为数值类型可避免 CSS 解析时的意外问题,并与其他样式属性保持一致,宜继续保持此风格统一。


47-47: [结束标签对应的缩进与可读性]

结束标签位置与开启标签保持呼应,整体结构简洁明了。如需在 <Space> 内添加更多演示组件,建议通过统一的代码风格和注释来帮助维护者快速定位和阅读。

src/packages/popover/demos/taro/demo1.tsx (4)

2-3: [导入 Space, Tips, Close 组件]

在 Taro 环境下引入 SpaceTips 以及 Close 图标,符合跨端组件一体化的思路;可以复用相同逻辑以保证 H5 和 Taro 代码的一致性。


12-19: [itemList 中添加图标与操作回调]

对弹出菜单的选项增加图标和点击回调,能更好地展示交互功能。但要注意处理事件冒泡,避免影响外层点击逻辑。stopPropagation() 用法正确,可有效阻止触发外层 onClick


23-23: [使用 Space 组件简化布局]

通过 <Space> 包裹多个 Popover,在浅层演示示例中既保持了简洁,又便于后续扩展与调整模块化布局。


58-58: [结束标签位置与可读性]

交叉使用 <Space> 与多个 Popover 时,推荐在末尾标签处保持同级缩进风格,以便后续的维护与阅读。此处无明显问题,可放心合并。

src/packages/popover/demos/h5/demo2.tsx (4)

2-2: [导入 Space 组件]

引入 Space 以替换碎片标签,便于统一组件布局与间隔设置。与 demo1 中的写法保持一致,可读性与一致性更佳。


59-59: [将 Popover 包裹于 Space 中]

在示例中使用 <Space>,具备更整洁的视图结构,同时容易维护,可以在后续示例中继续推广。


68-68: [数值类型样式的兼容性]

与前面 demo1 相同,将行内样式的 marginInlineEnd 值改用数字,既简洁又可避免多余字符串解析,也能让团队成员更直观理解布局间距。


87-87: [Space 结束标签的可读性]

结束标签处的缩进和位置安排合理,可与其他示例互相保持风格一致,有效提升整体可维护性。

src/packages/popover/popover.taro.tsx (7)

11-11: [确认 ArrowRadius 是否为有效导出]

静态分析提示 @nutui/icons-react-taro 中不存在 ArrowRadius 导出。请确认该图标是否已在对应版本发布,或是否存在拼写误差。若尚未发布,可改用其他现有图标替代,或在图标包更新后再行合入此变更。

🧰 Tools
🪛 GitHub Check: build

[failure] 11-11:
Module '"@nutui/icons-react-taro"' has no exported member 'ArrowRadius'.


142-147: [简化选择器查询流程]

以链式方式直接调用 createSelectorQuery().select(...).boundingClientRect().exec(...) 简洁且高效。注意可能存在异步延迟,需确保在合适时机获取元素信息,避免在组件卸载前执行多余查询。


174-174: [统一箭头样式生成逻辑]

通过字符串拼接直接组合 3 个类名,在定位与布局上更易于维护。若后期需扩展更多可选位置,可继续沿用此简洁模式或配置常量表来提高可读性。


196-201: [bottom/top 定位时的高度与视图位置]

在 bottom/top 场景下使用 height + cross(elWidth - width)/2 计算可灵活定位Popover。样式层叠时,请确认外部容器无其他影响,以免错位。


212-215: [left/right 定位时的宽度及 Y 轴调整]

根据组件实际宽度 elWidth 动态计算 lefttop,能让 Popover 精准贴合触发元素。注意测试各种使用场景(屏幕过小、外部滚动等),以确保定位无问题。


226-226: [可见性样式避免闪烁]

在未计算完成组件宽度前强制 visibility: 'hidden',可降低视觉闪烁。计算完成后切换为 visibility: 'initial' 将更平滑。


322-326: [判空与可选图标渲染]

使用 item.icon && (...) 判断图标简洁直观,可避免非法值报错。为了扩展兼容性,也可进一步保护,如有图标类型不一致时先行校验。

src/packages/popover/popover.tsx (4)

176-176: 【确认】返回样式类名的逻辑似乎正常。
此处无明显问题,代码可读性尚可。


312-314: 【确认】新的箭头容器添加符合预期。
在 Popup 中渲染箭头时注意尺寸与位置,可在后续视觉调试中进一步验证。


330-334: 【确认】图标的条件渲染逻辑恰当。
对自定义 icon 的展示方式很灵活,无明显问题。


338-345: 【确认】action.icon 条件渲染合理。
同时可在此处完善可点击区域的可访问性提示,如有需要可添加 aria-label
[approve]

🧰 Tools
🪛 Biome (1.9.4)

[error] 338-338: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/packages/popover/popover.scss (11)

10-11: 【确认】更改箭头尺寸,以实际图标来控制会更直观。
宽高值与 ArrowRadius 图标搭配尚可,无明显问题。


13-16: 【确认】新增 .nut-icon-ArrowRadius 样式。
若图标库中实际无此图标,可删除此选择器以避免多余 CSS。


27-65: 【确认】左右方向箭头的 transform 调整合理。
通过 rotate 配合 translateY 能较好地控制箭头方向和位置,无明显问题。


72-76: 【确认】改变插入背景的方式和行高配置。
默认背景由变量控制,行高 28px 与内容样式保持一致即可,无明显问题。


84-84: 【确认】padding 使用变量有利于统一管理。
无性能问题或可读性问题,可保留。


111-111: 【确认】菜单项文字间距适合,阅读性良好。
调节数值时注意多端适配。


123-127: 【确认】为 .nut-icon 统一尺寸无问题。
在实际项目中只需要确认与父级字号逻辑一致便可。


143-144: 【确认】箭头上下翻转的 transform 内联合理。
无明显逻辑问题。


161-162: 【确认】与前一处调整一致,逻辑无冲突。


212-213: 【确认】Dark 模式中 ArrowRadius 颜色切换。
如确认没有实际的 ArrowRadius 图标,可去除相应配置。


221-222: 【确认】为 .nut-popover-menu-item-action-icon 设置颜色。
rgba(255, 255, 255, 0.8) 可以在深色背景下保证对比度。

src/config.json (2)

842-842: 【确认】Popover 版本号更新为 3.0.0。
与本次改动相一致,建议补充到变更日志。


850-850: 【确认】添加 v15: true 标识。
清晰地表明对 V15 版本的适配,形式合理。

src/styles/variables.scss (2)

1590-1590: 【确认】将 popover-border-radius 改为依赖 $radius-xs 更具灵活性。
便于未来更新全局圆角规范。


1597-1597: 【确认】popover 文本颜色从固定色切换为 $color-mask。
在暗黑模式下可读性更佳,符合动态主题需求。

Comment on lines +304 to +306
<View className={popoverArrow()} style={popoverArrowStyle()}>
<ArrowRadius width={8} height={4} />
</View>
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

[箭头插入视图与图标使用]

在 Taro 环境中添加了 <ArrowRadius> 以替代纯 CSS 绘制箭头,视觉更丰富。但需确保图标包已完整导出此组件,否则编译时会报错。

src/packages/popover/popover.tsx Show resolved Hide resolved
Copy link

codecov bot commented Dec 25, 2024

Codecov Report

Attention: Patch coverage is 92.85714% with 1 line in your changes missing coverage. Please review.

Project coverage is 85.97%. Comparing base (71f0a53) to head (8c45d00).
Report is 12 commits behind head on feat_v3.x.

Files with missing lines Patch % Lines
src/packages/popover/popover.tsx 92.85% 1 Missing ⚠️
Additional details and impacted files
@@              Coverage Diff              @@
##           feat_v3.x    #2884      +/-   ##
=============================================
+ Coverage      85.84%   85.97%   +0.13%     
=============================================
  Files            271      273       +2     
  Lines          18427    18492      +65     
  Branches        2726     2736      +10     
=============================================
+ Hits           15818    15898      +80     
+ Misses          2604     2589      -15     
  Partials           5        5              

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

Copy link

@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: 0

🧹 Nitpick comments (3)
src/packages/popover/__tests__/popover.spec.tsx (3)

23-32: 在测试用例中使用 icon 属性可进一步丰富场景测试

通过为 itemListOne 中的选项添加 icon 和带有二级操作的 action,能够更好地模拟真实业务情境并测试组件在多层交互中的兼容性,建议在后续测试中进一步覆盖与此相关的交互逻辑。


76-77: 测试用例命名可进一步表述测试目标

“render popover position” 这一用例名称虽然直观,但可根据实际测试的特定方位或使用场景进行更精确的描述。例如使用 “render popover position at bottom-start”。这样有助于维护者快速定位测试目的。


216-231: 可增加对关闭后可见性或事件行为的断言

在 “target id” 用例中,点击 closeid 后仅触发了点击动作但未断言 Popover 是否被成功关闭,建议增加相关断言,以确保关闭行为符合预期并提升测试的可靠性。

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between fdaf483 and 521663b.

⛔ Files ignored due to path filters (7)
  • src/packages/address/__test__/__snapshots__/address.spec.tsx.snap is excluded by !**/*.snap
  • src/packages/audio/__test__/__snapshots__/audio.spec.tsx.snap is excluded by !**/*.snap
  • src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap is excluded by !**/*.snap
  • src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap is excluded by !**/*.snap
  • src/packages/image/__test__/__snapshots__/image.spec.tsx.snap is excluded by !**/*.snap
  • src/packages/popover/__tests__/__snapshots__/popover.spec.tsx.snap is excluded by !**/*.snap
  • src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (1)
  • src/packages/popover/__tests__/popover.spec.tsx (4 hunks)
🔇 Additional comments (2)
src/packages/popover/__tests__/popover.spec.tsx (2)

4-4: 引入额外图标有助于提升可读性与功能扩展

此处引入的 TipsClose 非常直观地表达了提示与关闭的语义,为测试及演示提供了更好的可读性。


65-74: 新增“暗色主题”测试用例提升覆盖率

通过对 dark 主题的渲染测试,与快照校验相结合,可确保新主题外观在后续修改中不被意外破坏。此逻辑清晰且意义明确。

Copy link
Collaborator

@oasis-cloud oasis-cloud left a comment

Choose a reason for hiding this comment

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

Taro H5 间距有点大
image

Copy link

@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

♻️ Duplicate comments (1)
src/packages/popover/popover.tsx (1)

12-12: ⚠️ Potential issue

修复:导入路径错误

当前从 @nutui/icons-react 导入 ArrowRadius,这可能导致构建失败。应该使用 @nutui/icons-react-taro 包。

建议修改为:

- import { ArrowRadius } from '@nutui/icons-react'
+ import { ArrowRadius } from '@nutui/icons-react-taro'
🧹 Nitpick comments (1)
src/packages/popover/popover.tsx (1)

272-276: 建议:使用可选链操作符

当前使用逻辑与运算符(&&)来处理可能为空的回调函数,建议改用可选链操作符(?.)以提高代码可读性。

- onSelect && onSelect(item, index)
+ onSelect?.(item, index)

- onClick && onClick()
+ onClick?.()

- onOpen && onOpen()
+ onOpen?.()

- onClose && onClose()
+ onClose?.()

Also applies to: 286-290

🧰 Tools
🪛 Biome (1.9.4)

[error] 272-272: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 275-275: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 276-276: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 521663b and 8fe2945.

📒 Files selected for processing (2)
  • src/packages/popover/popover.taro.tsx (9 hunks)
  • src/packages/popover/popover.tsx (8 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/popover/popover.taro.tsx

[error] 330-330: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/packages/popover/popover.tsx

[error] 272-272: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 275-275: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 276-276: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 286-286: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 288-288: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 290-290: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 340-340: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🪛 GitHub Check: codecov/patch
src/packages/popover/popover.tsx

[warning] 288-288: src/packages/popover/popover.tsx#L288
Added line #L288 was not covered by tests

🔇 Additional comments (4)
src/packages/popover/popover.taro.tsx (3)

50-50: 请验证偏移量的调整

将 offset 从 [0, 12] 调整为 [0, 4] 可能会影响气泡框与触发元素之间的间距。建议:

  1. 验证在各种场景下的视觉效果
  2. 确保与设计规范保持一致
  3. 测试不同内容大小下的显示效果

142-147: 代码优化:简化了 getRectTaro 实现

函数实现更加简洁,直接链式调用 select 和 boundingClientRect 方法,同时保持了原有功能。


304-306: 优化:使用 ArrowRadius 组件替代 CSS 箭头

使用 ArrowRadius 组件来渲染箭头,相比纯 CSS 实现有以下优势:

  1. 视觉效果更统一
  2. 便于维护和样式调整
  3. 与设计系统保持一致
src/packages/popover/popover.tsx (1)

288-288: 改进:增加测试覆盖率

onOpen 回调函数的调用缺少测试覆盖。建议添加相关测试用例,确保组件的所有功能都得到充分测试。

需要添加的测试场景:

  1. 点击时触发 onOpen 回调
  2. visible 为 false 时的交互
  3. 回调函数为空的情况
🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 288-288: src/packages/popover/popover.tsx#L288
Added line #L288 was not covered by tests

🪛 Biome (1.9.4)

[error] 288-288: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

@@ -186,11 +186,13 @@
const skew = location.split('-')[1]
let cross = 0
let parallel = 0
console.log('offset', offset)
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

清理:移除调试日志

请移除生产代码中的 console.log 语句,这些语句不应该出现在正式版本中。

- console.log('offset', offset)
- console.log('offset', offset, parallel, cross, width, top, height)

Also applies to: 195-195

Copy link

@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: 0

🧹 Nitpick comments (3)
src/packages/popover/popover.tsx (3)

270-274: 建议使用可选链操作符

当前使用 && 进行空值检查,建议改用可选链操作符 ?. 来提高代码可读性:

- onSelect && onSelect(item, index)
+ onSelect?.(item, index)

- onClick && onClick()
+ onClick?.()

- onOpen && onOpen()
+ onOpen?.()

- onClose && onClose()
+ onClose?.()

Also applies to: 284-288

🧰 Tools
🪛 Biome (1.9.4)

[error] 270-270: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 273-273: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 274-274: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


330-334: 列表项渲染逻辑优化

图标渲染逻辑的改进看起来不错,但建议:

  1. 考虑抽取列表项为独立组件,以提高可维护性
  2. 为图标添加适当的 aria-label 以提升可访问性

Also applies to: 338-345


Line range hint 1-356: 版本升级文档建议

由于这是 v15 的适配改动,建议:

  1. 更新组件文档,说明新的特性和行为变化
  2. 提供从旧版本迁移的指南
  3. 在 CHANGELOG 中详细记录不兼容的改动

需要确保用户能够顺利完成版本升级。

🧰 Tools
🪛 Biome (1.9.4)

[error] 338-338: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 8fe2945 and d1e80fa.

📒 Files selected for processing (1)
  • src/packages/popover/popover.tsx (7 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/popover/popover.tsx

[error] 270-270: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 273-273: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 274-274: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 284-284: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 286-286: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 288-288: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 338-338: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🪛 GitHub Check: codecov/patch
src/packages/popover/popover.tsx

[warning] 286-286: src/packages/popover/popover.tsx#L286
Added line #L286 was not covered by tests

🔇 Additional comments (4)
src/packages/popover/popover.tsx (4)

12-12: 导入路径需要修正

根据之前的代码审查反馈,在 Taro 版本中应使用 @nutui/icons-react-taro 包。请确认是否需要保持一致性。


47-47: 请确认偏移量变更

默认偏移量从 [0, 12] 改为 [0, 8],这个改动会影响弹出层的定位。请确认:

  1. 是否符合设计规范
  2. 是否会影响现有使用场景

176-176: 箭头样式变更确认

使用了 ArrowRadius 组件来实现箭头样式,请确认:

  1. 新的箭头样式是否在所有主题下都能正常显示
  2. 箭头大小(8x4)是否符合设计规范

建议添加视觉测试用例以确保样式的一致性。

Also applies to: 312-314


286-286: 测试覆盖率需要提升

onOpen 回调的场景缺少测试覆盖。建议添加以下测试用例:

  1. 点击时触发 onOpen 的场景
  2. 确保回调函数正确执行

需要补充相关测试用例以提高代码质量。

🧰 Tools
🪛 Biome (1.9.4)

[error] 286-286: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🪛 GitHub Check: codecov/patch

[warning] 286-286: src/packages/popover/popover.tsx#L286
Added line #L286 was not covered by tests

Copy link
Collaborator

@irisSong irisSong left a comment

Choose a reason for hiding this comment

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

1、web h5 元素定位,页面滑动popover一直抖动 2、taro h5 popover和元素距离不是4px,过大 3、taro h5 点击查看更多方向demo,元素和popover和元素挨着没有距离

}
}

&-top-end {
right: 0;
.nut-popover-arrow-top-end {
right: 16px;
transform: translateX(0%);
bottom: -3.5px;
transform: rotate(180deg) translateX(0%);
}
}

&-top-start {
left: 0;
.nut-popover-arrow-top-start {
left: 16px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

三角距离左边顶端好像是22px

@irisSong
Copy link
Collaborator

irisSong commented Dec 27, 2024

taro weapp 点击查看更多方向demo,元素和popover和元素挨着没有距离且定位偏差,比如top没居中,其它也都有偏差

截屏2024-12-27 17 03 50

@oasis-cloud oasis-cloud merged commit 8969701 into jdf2e:feat_v3.x Dec 27, 2024
5 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Dec 30, 2024
19 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants