-
Notifications
You must be signed in to change notification settings - Fork 266
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
Conversation
Caution Review failedThe pull request is closed. 概述遍历这个拉取请求主要涉及 变更
可能相关的PR
建议标签
建议审阅者
诗歌
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this 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
📒 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 组件]
这两行成功引入了 Space
、Tips
和 Close
组件,方便在演示示例中进行布局和使用图标。若项目中未实际使用 Close
图标,请注意移除不必要的依赖,以避免包体积的膨胀。
12-16
: [Popover 列表项的图标和操作配置]
将 icon
和 action.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 环境下引入 Space
、Tips
以及 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
动态计算 left
、top
,能让 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。
在暗黑模式下可读性更佳,符合动态主题需求。
<View className={popoverArrow()} style={popoverArrowStyle()}> | ||
<ArrowRadius width={8} height={4} /> | ||
</View> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[箭头插入视图与图标使用]
在 Taro 环境中添加了 <ArrowRadius>
以替代纯 CSS 绘制箭头,视觉更丰富。但需确保图标包已完整导出此组件,否则编译时会报错。
Codecov ReportAttention: Patch coverage is
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. |
There was a problem hiding this 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
⛔ 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
: 引入额外图标有助于提升可读性与功能扩展
此处引入的 Tips
与 Close
非常直观地表达了提示与关闭的语义,为测试及演示提供了更好的可读性。
65-74
: 新增“暗色主题”测试用例提升覆盖率
通过对 dark 主题的渲染测试,与快照校验相结合,可确保新主题外观在后续修改中不被意外破坏。此逻辑清晰且意义明确。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this 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
📒 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] 可能会影响气泡框与触发元素之间的间距。建议:
- 验证在各种场景下的视觉效果
- 确保与设计规范保持一致
- 测试不同内容大小下的显示效果
142-147
: 代码优化:简化了 getRectTaro 实现
函数实现更加简洁,直接链式调用 select 和 boundingClientRect 方法,同时保持了原有功能。
304-306
: 优化:使用 ArrowRadius 组件替代 CSS 箭头
使用 ArrowRadius 组件来渲染箭头,相比纯 CSS 实现有以下优势:
- 视觉效果更统一
- 便于维护和样式调整
- 与设计系统保持一致
src/packages/popover/popover.tsx (1)
288-288
: 改进:增加测试覆盖率
onOpen
回调函数的调用缺少测试覆盖。建议添加相关测试用例,确保组件的所有功能都得到充分测试。
需要添加的测试场景:
- 点击时触发 onOpen 回调
- visible 为 false 时的交互
- 回调函数为空的情况
🧰 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)
src/packages/popover/popover.tsx
Outdated
@@ -186,11 +186,13 @@ | |||
const skew = location.split('-')[1] | |||
let cross = 0 | |||
let parallel = 0 | |||
console.log('offset', offset) |
There was a problem hiding this comment.
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
There was a problem hiding this 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
: 列表项渲染逻辑优化图标渲染逻辑的改进看起来不错,但建议:
- 考虑抽取列表项为独立组件,以提高可维护性
- 为图标添加适当的
aria-label
以提升可访问性Also applies to: 338-345
Line range hint
1-356
: 版本升级文档建议由于这是 v15 的适配改动,建议:
- 更新组件文档,说明新的特性和行为变化
- 提供从旧版本迁移的指南
- 在 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
📒 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]
,这个改动会影响弹出层的定位。请确认:
- 是否符合设计规范
- 是否会影响现有使用场景
176-176
: 箭头样式变更确认
使用了 ArrowRadius
组件来实现箭头样式,请确认:
- 新的箭头样式是否在所有主题下都能正常显示
- 箭头大小(8x4)是否符合设计规范
建议添加视觉测试用例以确保样式的一致性。
Also applies to: 312-314
286-286
: 测试覆盖率需要提升
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)
🪛 GitHub Check: codecov/patch
[warning] 286-286: src/packages/popover/popover.tsx#L286
Added line #L286 was not covered by tests
There was a problem hiding this 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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
三角距离左边顶端好像是22px
🤔 这个变动的性质是?
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
Popover
组件的版本至3.0.0
,并添加了新属性v15: true
。Space
、Tips
和Close
组件,改善了布局和交互。itemList
和positionList
的结构,增强了用户界面的可用性。样式
Popover
组件的样式,包括箭头的尺寸和位置,增强了视觉效果和响应性。Bug 修复
marginInlineEnd
属性的值类型,从字符串更改为数字,确保样式正确渲染。测试
Popover
组件的测试覆盖率,添加了新测试用例并修改了现有测试。