feat(avatar): rn 适配 #2343
feat(avatar): rn 适配 #2343
Conversation
Walkthrough:这次更新主要涉及到三个方面：首先，添加了 Changes:
Poem:
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (4)
Files skipped from review as they are similar to previous changes (2)
Additional context usedBiome
Additional comments not posted (3)
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (4)
scripts/rn/copy-file.js (1)
Line range hint
41-73: 此函数表达式可以转换为箭头函数，以提高代码的简洁性和现代性。- const copyFile = async (from, to, success, isSingle = false) => { + const copyFile = async (from, to, success, isSingle = false) => {src/packages/avatar/avatar.tsx (1)
[!TIP]
Codebase Verification建议在代码中使用可选链来简化逻辑，例如：
children[i].classList?.[0] === 'nut-avatar'目前代码中没有使用可选链，建议进行修改。
src/packages/avatar/avatar.tsx第 74-81 行Analysis chain
Line range hint
114-115: 建议使用可选链来简化这里的代码逻辑。Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查可选链的使用是否安全。 ast-grep --lang javascript --pattern $'$_?.propAvatarGroup?.maxBackground'Length of output: 75
Script:
#!/bin/bash # 查找在 src/packages/avatar/avatar.tsx 文件中是否使用了可选链（Optional Chaining）。 rg --multiline --multiline-dotall --glob "src/packages/avatar/avatar.tsx" -n --pcre2 "children\[\d+\]\.classList\?\.\[0\] === 'nut-avatar'"Length of output: 145
Script:
#!/bin/bash # 查找 src/packages/avatar/avatar.tsx 文件中第 74-81 行的内容，以确认是否使用了可选链（Optional Chaining）。 sed -n '74,81p' src/packages/avatar/avatar.tsxLength of output: 401
src/packages/image/image.tsx (1)
Line range hint
223-235: 您需要为懒加载图片的点击事件添加键盘事件处理器，以确保键盘用户也能触发相关功能。这是无障碍访问的一部分要求。+ onKeyUp={handleKeyUp} + onKeyDown={handleKeyDown} + onKeyPress={handleKeyPress}src/packages/avatar/avatar.taro.tsx (1)
186-227: 在这一大段代码中，处理了不同条件下的头像渲染逻辑。建议在这部分代码中增加一些注释，说明每个条件分支的用途和逻辑，这样可以提高代码的可读性和可维护性。
| <div className={`${classPrefix}-error`}> | ||
| <ImageError /> | ||
| </div> | ||
| ) | ||
| } | ||
| if (React.isValidElement(error) && !innerLoading) { | ||
| return <div className="nut-img-error">{error}</div> | ||
| return <div className={`${classPrefix}-error`}>{error}</div> |
There was a problem hiding this comment.
在错误图像的渲染函数中，建议使用可选链来提高代码的健壮性。目前的实现方式可能在某些情况下导致运行时错误。
- if (typeof error === 'boolean' && error === true && !innerLoading) {
+ if (typeof error === 'boolean' && error?.true && !innerLoading) {Committable suggestion was skipped due to low confidence.
Tools
Biome
[error] 186-186: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
| 'avatar', | ||
| 'avatargroup', |
There was a problem hiding this comment.
全局变量应避免重新赋值。
- exports = module.exports = [
+ const exports = module.exports = [Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 'avatar', | |
| 'avatargroup', | |
| const exports = module.exports = [ | |
| 'avatar', | |
| 'avatargroup', |
src/packages/avatar/avatar.taro.tsx
Outdated
| // @todo children 在 rn 下 无法获取，同时会影响： | ||
| // 1）children 在group下无法展示触发max时的样式 | ||
| // 2）无法处理层级关系 |
There was a problem hiding this comment.
存在对子元素无法获取的问题，这可能会影响样式触发和层级关系的处理。建议寻找替代方法来处理这些问题。
| <View | ||
| className={`nut-avatar-text nut-avatar-${groupSize || 'normal'}-text`} | ||
| > | ||
| {parent?.propAvatarGroup?.maxContent | ||
| ? parent?.propAvatarGroup?.maxContent | ||
| : `+ ${ | ||
| avatarIndex - Number(parent?.propAvatarGroup?.max || 0) | ||
| }`} | ||
| : `+ ${avatarIndex - Number(groupMax || 0)}`} |
There was a problem hiding this comment.
处理超过最大头像数时的渲染逻辑，建议简化这部分代码以提高可读性和维护性。
- {showMax && (
- <View
- className={`nut-avatar-text nut-avatar-${groupSize || 'normal'}-text`}
- >
- {parent?.propAvatarGroup?.maxContent
- ? parent?.propAvatarGroup?.maxContent
- : `+ ${avatarIndex - Number(groupMax || 0)}`}
- </View>
- )}
+ {showMax && renderMaxAvatarContent()}Committable suggestion was skipped due to low confidence.
| const maxCount = groupMax || groupCount | ||
| if ( | ||
| index === children.length && | ||
| index !== maxCount && | ||
| children.length > maxCount | ||
| avatarIndex === groupCount && | ||
| avatarIndex !== maxCount && | ||
| groupCount > maxCount | ||
| ) { | ||
| setShowMax(true) | ||
| } | ||
| } | ||
| }, [avatarIndex, groupCount]) |
There was a problem hiding this comment.
在 useEffect 中处理显示最大头像数的逻辑，确保在逻辑处理中使用可选链来避免潜在的运行时错误。
- avatarIndex === groupCount &&
+ avatarIndex === groupCount?.value &&Committable suggestion was skipped due to low confidence.
There was a problem hiding this comment.
web h5 还需要这个样式~
src/packages/avatar/avatar.scss
Outdated
src/packages/avatar/avatar.taro.tsx
Outdated
| @@ -23,7 +23,8 @@ export interface AvatarProps extends BasicComponent { | |||
| color: string | |||
| fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | |||
| src: string | |||
| alt: string | |||
| isFirst: boolean | |||
There was a problem hiding this comment.
属性会对外暴露，可以考虑 context 方式实现，隐藏这个属性
| @@ -32,14 +33,15 @@ export type AvatarShape = 'round' | 'square' | |||
|
|
|||
| const defaultProps = { | |||
| ...ComponentDefaults, | |||
| size: '', | |||
| size: harmonyAndRn() ? '40' : '', | |||
There was a problem hiding this comment.
这里是处理 非鸿蒙和rn下 size 为空时，走 normal 的样式~
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
packages/nutui-taro-demo-rn/scripts/taro/adapted.js (1)
Line range hint
1-1: 全局变量应避免重新赋值。- exports = module.exports = [ + const exports = module.exports = [src/packages/avatar/avatar.taro.tsx (1)
Line range hint
131-135: 建议使用可选链来增强代码的健壁性。- avatarIndex === groupCount && + avatarIndex === groupCount?.value &&
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
更新
config.json文件，将 Avatar 和 AvatarGroup 组件的版本号从 "2.0.0" 增加到 "3.0.0"。功能改进
isFirst属性，增强了组件的渲染逻辑。