feat(swipe): harmony #3039
feat(swipe): harmony #3039
Conversation
Walkthrough本次变更包括多个模块的调整：在配置文件中将 Swipe 组件的 "dd" 属性从 false 修改为 true；在获取元素尺寸的 hook 中增加了日志输出；在 Taro 示例中移除了对 Changes
Sequence Diagram(s)sequenceDiagram
participant S as Swipe 组件
participant U as useUuid Hook
participant R as useReady Hook
participant G as getRectByTaro
S->>U: 生成唯一 ID (uid, leftId, rightId)
S->>R: 注册组件就绪回调
R->>S: 就绪后触发回调
S->>G: 请求获取 left/right 元素尺寸 (传入生成的 ID)
G-->>S: 返回元素的尺寸信息
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
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. 🪧 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 (
|
github-actions
bot
added
3.x
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3039 +/- ##
==========================================
Coverage 86.05% 86.05%
==========================================
Files 281 281
Lines 18255 18256 +1
Branches 2749 2749
==========================================
+ Hits 15709 15710 +1
Misses 2541 2541
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/config.json (1)
173-173: 代码格式优化删除了多余的空行，保持代码风格的一致性。
src/packages/swipe/demos/taro/demo9.tsx (1)
49-49: 简化渲染逻辑移除了条件渲染逻辑，改为直接渲染 InputNumber 组件，简化了代码并提高了组件在不同平台上的一致性。同时也移除了对 harmony 函数的依赖。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/config.json(2 hunks)src/hooks/use-client-rect.ts(1 hunks)src/packages/button/button.scss(1 hunks)src/packages/swipe/demos/taro/demo9.tsx(2 hunks)src/packages/swipe/swipe.scss(1 hunks)src/packages/swipe/swipe.taro.tsx(5 hunks)src/utils/get-rect-by-taro.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/hooks/use-client-rect.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (14)
src/packages/button/button.scss (1)
23-23: 样式增强: 避免按钮文本换行添加
white-space: nowrap;确保按钮内的文本不会因空间不足而换行，保持单行显示，提高了按钮的整体视觉一致性。src/config.json (1)
1027-1027: 配置更新: Swipe 组件标记为 dd 支持将 Swipe 组件的 "dd" 属性从 false 更改为 true，表明该组件现在支持 harmony 平台或特定功能。这与其他文件中的相关更改保持一致。
src/packages/swipe/demos/taro/demo9.tsx (1)
17-23: 样式增强: 确保按钮文本不换行为文本组件添加了
whiteSpace: 'nowrap'样式，与 button.scss 中的全局样式变更保持一致，确保按钮文字在任何情况下都保持单行显示。src/utils/get-rect-by-taro.ts (2)
26-29: API 增强: 添加 harmonyId 参数函数签名更新，增加了 harmonyId 可选参数，增强了函数的灵活性，允许通过外部传入标识符来选择元素。这种改进使函数更适合在 harmony 平台上使用。
37-37: 逻辑优化: 灵活的元素选择使用
harmonyId || element.uid表达式进行元素选择，优先使用传入的标识符，提高了函数的适应性和平台兼容性。src/packages/swipe/swipe.scss (3)
23-25: 注释掉了Flex布局属性，确保与新的定位策略一致这些注释掉的Flex属性表明组件正在从Flex布局转向使用transform定位方式来实现滑动效果。这种变化使得组件更加符合移动端和跨平台（特别是Harmony OS）的交互需求。
30-30: 为左侧元素添加了初始位置的transform添加
transform: translate(-100%, 0px)确保左侧滑动元素在初始状态下位于可视区域外部，实现了更自然的滑入效果。这种方法比使用定位属性更适合动画过渡。
34-36: 优化了右侧元素的定位方式将
left: 100%改为使用right: 0px和transform: translate(100%, 0px)的组合提高了定位精确性，确保右侧元素在初始状态下正确隐藏，并且在滑动时有一致的动画效果。这种实现方式更符合Swipe组件在各平台上的一致性需求。src/packages/swipe/swipe.taro.tsx (6)
11-18: 引入了Taro生命周期钩子和UUID生成功能添加了
useReady钩子和useUuid函数，显著提升了组件在Taro环境中的初始化可靠性。useReady确保组件在完全准备好后再进行DOM操作，而useUuid提供唯一标识符以解决多实例场景下的元素选择问题。这些改进对Harmony OS兼容性至关重要。
80-82: 实现唯一标识符生成逻辑使用
useUuid()生成唯一ID并为左右滑动元素创建特定标识符，解决了多个Swipe组件同时存在时的DOM查询冲突问题。这种实现方式优雅且有效。
85-98: 使用useReady替代useEffect提高组件初始化可靠性将元素宽度获取逻辑从useEffect移至useReady钩子中执行，确保了在Taro环境（特别是小程序和Harmony OS）中组件DOM完全准备就绪后再进行尺寸计算。这解决了之前可能存在的尺寸获取不准确的问题。
132-132: 优化transform样式表达式移除了条件判断
!harmony() ? 'px' : ''，简化了样式生成逻辑，确保在所有平台上使用一致的像素单位。这种变更提高了代码可读性和维护性。
135-144: 增强了触摸事件中的元素尺寸获取逻辑在
onTouchStart函数中集成了唯一ID参数，确保通过getRectByTaro函数精确获取正确元素的尺寸。这解决了可能存在的元素选择错误问题，提高了滑动交互的准确性。
235-235: 为滑动操作元素添加唯一ID属性为左右操作区域添加了基于UUID的唯一ID属性，确保
getRectByTaro可以准确定位到正确的DOM元素。这是整个改进方案中的关键一环，解决了在Harmony OS等环境中元素查询不准确的问题。
src/packages/button/button.scss
Outdated
| @@ -20,6 +20,7 @@ | |||
| font-weight: $font-weight; | |||
| text-align: center; | |||
| cursor: pointer; | |||
| white-space: nowrap; | |||
There was a problem hiding this comment.
这个不建议处理，要保留可换行，特别是处理多语言时折行会较多。
# Conflicts: # src/config.json
Summary by CodeRabbit
New Features
Style