feat: radio adaptation #2721
feat: radio adaptation #2721
Conversation
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Suggested labels
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2721 +/- ##
=======================================
Coverage 83.98% 83.98%
=======================================
Files 221 221
Lines 17867 17867
Branches 2676 2676
=======================================
Hits 15005 15005
Misses 2857 2857
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: 1
🧹 Outside diff range and nitpick comments (12)
src/packages/radio/demos/taro/demo8.tsx (1)
7-7: 代码优化：使用 color 属性替代内联样式这个改动很好，使用
color属性直接设置图标颜色比使用内联样式更加简洁和符合最佳实践。这样的方式不仅提高了代码的可读性，还减少了不必要的样式对象创建。建议在组件文档中明确说明这种用法，以帮助其他开发者更好地理解如何自定义图标颜色。
src/packages/radio/index.ts (2)
7-11: 建议添加类型定义的文档注释CompoundedComponent 类型定义实现了复合组件模式，这是一个很好的设计。建议添加 JSDoc 注释来说明该类型的用途和属性含义。
建议添加如下注释：
+/** + * Radio 组件的复合类型定义 + * @property {RadioGroup} Group - Radio 组件的分组功能 + */ type CompoundedComponent = React.FC< Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> > & { Group: typeof RadioGroup }
12-13: 组件组合实现规范！通过类型断言和属性赋值实现了复合组件模式，这种实现方式既保证了类型安全，又提供了良好的组件封装。
这种模式让用户可以通过
Radio.Group来使用分组功能，提供了更直观的 API。src/packages/radio/index.taro.ts (1)
13-16: 组件组合实现优雅，建议补充类型注释组件组合的实现方式简洁有效，但建议添加类型注释以提高代码可读性。
建议按如下方式优化：
-const InnerRadio = Radio as CompoundedComponent +const InnerRadio: CompoundedComponent = Radio as CompoundedComponentsrc/packages/radio/radio.scss (2)
Line range hint
84-87: 建议使用 CSS 逻辑属性优化边距设置为了提高代码的可维护性和逻辑性，建议考虑使用 CSS 逻辑属性来处理边距。
- margin-right: 0 !important; - margin-left: 0 !important; + margin-inline: 0 !important;
Line range hint
95-98: 建议统一使用 margin-inline 属性为了保持代码一致性，建议使用 margin-inline 属性来处理标签的边距。
- margin-left: 0; - margin-right: $radio-label-margin-left; + margin-inline: 0 $radio-label-margin-left;src/packages/radiogroup/radiogroup.tsx (2)
Line range hint
13-19: 建议加强类型安全性为了提高类型安全性，建议：
- 将可选属性明确标记
- 为必需属性添加更严格的类型约束
建议按照以下方式修改接口定义：
export interface RadioGroupProps { - value?: string | number - defaultValue?: string | number - labelPosition: RadioGroupPosition - direction: RadioGroupDirection - shape?: RadioGroupShape - disabled?: boolean - options: RadioGroupOption[] - onChange: (value: string | number) => void + value?: string | number + defaultValue?: string | number + labelPosition: RadioGroupPosition + direction: Extract<RadioGroupDirection, 'horizontal' | 'vertical'> + shape?: RadioGroupShape + disabled?: boolean + options: readonly RadioGroupOption[] + onChange?: (value: string | number) => void }
Line range hint
71-85: 建议优化 renderOptionsChildren 的性能当前实现在每次渲染时都会重新创建 Radio 组件。建议：
- 考虑使用 React.memo 来优化 Radio 组件
- 确保 options 数组的稳定性
建议按照以下方式优化：
+const MemoizedRadio = React.memo(Radio) + const renderOptionsChildren = useCallback(() => { return options?.map(({ label, value, disabled, onChange, ...rest }) => { return ( - <Radio + <MemoizedRadio {...rest} key={value?.toString()} children={label} value={value} disabled={disabled} onChange={onChange} labelPosition={labelPosition} checked={value === val2State} /> ) }) - }, [options, labelPosition, val2State]) + }, [options, labelPosition, val2State, disabled])src/packages/radiogroup/radiogroup.taro.tsx (1)
101-103: 正确使用 Taro 的 View 组件！将 HTML 的
div替换为 Taro 的View组件是正确的改动，这样能确保组件在小程序环境中正常运行。props 和子组件的处理方式也符合规范。建议在组件的注释文档中说明这是 Taro 专用版本，以便其他开发者理解。
src/packages/radio/radio.tsx (1)
Line range hint
1-33: 建议添加属性文档注释建议为
RadioProps接口的每个属性添加 JSDoc 注释，以提供更好的开发体验。这对于组件的使用者来说会更友好。示例改进：
export interface RadioProps extends BasicComponent { + /** 是否禁用 */ disabled: boolean + /** 是否选中 */ checked: boolean + /** 默认是否选中 */ defaultChecked: boolean // ... 其他属性 }src/packages/radio/radio.taro.tsx (1)
Line range hint
83-89: 建议优化color函数的返回类型虽然添加了
Mapping返回类型，但建议使用更具体的类型定义来提高类型安全性。- const color = (): Mapping => { + const color = (): Record<string, boolean> => {src/config.json (1)
Line range hint
1-1200: 建议：考虑为组件添加更多元数据为了提高组件文档的完整性和可维护性，建议考虑添加以下元数据字段：
- 组件依赖关系
- 组件的使用场景示例
- 组件的变更历史
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (10)
src/config.json(2 hunks)src/packages/radio/demos/taro/demo8.tsx(1 hunks)src/packages/radio/demos/taro/demo9.tsx(1 hunks)src/packages/radio/index.taro.ts(1 hunks)src/packages/radio/index.ts(1 hunks)src/packages/radio/radio.scss(1 hunks)src/packages/radio/radio.taro.tsx(6 hunks)src/packages/radio/radio.tsx(1 hunks)src/packages/radiogroup/radiogroup.taro.tsx(3 hunks)src/packages/radiogroup/radiogroup.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/radio/demos/taro/demo9.tsx
🔇 Additional comments (15)
src/packages/radio/index.ts (2)
1-3: 导入语句结构合理！
模块的导入结构清晰，将 RadioGroup 独立为单独模块符合组件解耦的最佳实践。
15-15: 默认导出设置正确！
导出 InnerRadio 作为默认导出符合组件的使用预期。
src/packages/radio/index.taro.ts (3)
1-3: 导入语句结构清晰，符合最佳实践！
导入语句组织合理，分别导入了必要的依赖和类型。从相对路径导入组件和类型定义，保持了代码的模块化。
8-12: 类型定义准确且具有良好的可扩展性
CompoundedComponent 类型定义合理：
- 使用
Partial<RadioProps>使所有属性变为可选 - 通过
Omit正确处理了onChange事件冲突 - 包含了
Group属性以支持 Radio 组合使用场景
1-16: 验证组件在其他文件中的使用情况
由于这是一个重要的组件重构，需要确保所有使用到 Radio 组件的地方都已经适配新的改动。
✅ Verification successful
Radio组件重构的影响范围已确认安全
根据代码分析结果，此次重构是安全的：
-
所有使用Radio组件的地方都遵循相同的API模式，包括：
- 基础使用
<Radio> - 分组使用
<Radio.Group> - 导入方式统一
- 基础使用
-
新的实现保持了与现有使用方式的完全兼容：
- 保留了所有现有的props接口
- Group组件的集成方式未改变
- 类型定义的导出保持一致
-
测试用例和demo文件都使用了相同的组件结构，证实了API的一致性
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 Radio 组件的使用情况
# 预期：找到所有使用 Radio 组件的地方，确保它们与新的实现兼容
# 搜索所有直接使用 Radio 组件的文件
echo "检查 Radio 组件的使用..."
rg -l "Radio" --type ts --type tsx
# 搜索 RadioGroup 的使用
echo "\n检查 RadioGroup 的使用..."
rg -l "RadioGroup" --type ts --type tsx
# 检查是否有旧版本的导入方式
echo "\n检查是否存在旧版本的导入方式..."
rg "from ['\"]@/packages/radio['\"]" --type ts --type tsx
Length of output: 371
Script:
#!/bin/bash
# 修正之前的命令，移除类型限制，直接搜索所有文件
echo "检查 Radio 组件的使用..."
rg -l "Radio"
echo -e "\n检查 RadioGroup 的使用..."
rg -l "RadioGroup"
echo -e "\n检查导入语句..."
rg "from.*['\"].*radio['\"]"
Length of output: 3058
Script:
#!/bin/bash
# 检查具体的导入和使用方式
echo "检查 Radio 组件的具体使用方式..."
rg "import.*Radio.*from.*radio" -A 5
echo -e "\n检查 RadioGroup 的具体使用方式..."
rg "<RadioGroup" -A 3
echo -e "\n检查 Radio 组件的具体使用方式..."
rg "<Radio" -A 3
Length of output: 34611
src/packages/radio/radio.scss (1)
Line range hint 82-99: RTL 布局支持实现完善！
RTL布局的适配实现得很好，同时支持了 [dir='rtl'] 属性和 .nut-rtl 类选择器，确保了更广泛的兼容性。
src/packages/radiogroup/radiogroup.tsx (1)
56-56: 代码更改看起来不错！
这个改动提高了代码的一致性，使用解构后的 direction 变量替代了之前的 props.direction。
src/packages/radiogroup/radiogroup.taro.tsx (2)
3-3: 导入 Taro 视图组件正确！
从 @tarojs/components 导入 View 组件是符合 Taro 开发规范的做法。
57-57: 类名构造的简化写法更清晰！
直接使用解构后的 direction 变量构造类名，代码更简洁易读。
src/packages/radio/radio.tsx (2)
34-34: 组件类型定义的改进
箭头函数语法的使用提高了代码的一致性和可读性。这种方式也能更好地推断类型。
Line range hint 1-180: 验证版本升级的影响
从 v2.0.0 升级到 v3.0.0 是一个主版本升级，需要确保所有使用此组件的地方都兼容新的实现。
src/packages/radio/radio.taro.tsx (2)
1-8: 导入声明和类型定义的改进
代码变更符合最新的React类型定义最佳实践，同时确保了与Taro框架的兼容性。使用FC替代FunctionComponent使代码更简洁。
37-39: 组件类型定义的优化
通过使用Partial<RadioProps>和排除HTMLAttributes中的onChange，类型定义更加精确，有效防止了属性冲突。
src/config.json (2)
Line range hint 591-613: 版本升级变更看起来合理！
Radio 和 RadioGroup 组件从 2.0.0 升级到 3.0.0 的版本变更是一致的，这确保了组件间的兼容性。
Line range hint 613-676: 新增组件的元数据配置完整且规范
新增的 Range、SearchBar、Switch、TextArea 和 Video 组件都包含了必要的配置信息：
- version: 统一使用 3.0.0
- type: 正确设置为 "component"
- 包含中英文名称和描述
- 正确设置了排序和显示属性
- 包含作者信息
| @@ -118,7 +118,7 @@ export const Radio: FunctionComponent< | |||
| return ( | |||
| <> | |||
| {renderIcon()} | |||
| <div className={labelcls}>{children}</div> | |||
| <View className={labelcls}>{children}</View> | |||
There was a problem hiding this comment.
💡 Codebase verification
需要完成剩余的View组件替换
在代码库中发现还有未替换的div元素：
src/packages/radio/radio.tsx中有3处需要替换：<div className={labelcls}>{children}</div><div className={buttoncls}>{children}</div><div className={cls} style={style} onClick={handleClick} {...rest}>
src/packages/radio/demo.tsx中有1处需要替换：<div className="demo">
为确保Taro跨平台兼容性，这些div元素也需要替换为View组件。
🔗 Analysis chain
验证View组件替换的兼容性
将div元素替换为Taro的View组件是必要的改动，但需要确保在不同平台上的表现一致。
Also applies to: 130-130, 152-152
Let's check the content of these files to understand if there are any remaining div elements that need to be replaced.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否还有遗留的div元素
rg -l 'div' src/packages/radio/
Length of output: 88
Script:
#!/bin/bash
# Check the context of div usage in radio.tsx and demo.tsx
echo "=== radio.tsx ==="
rg -C 2 'div' src/packages/radio/radio.tsx
echo -e "\n=== demo.tsx ==="
rg -C 2 'div' src/packages/radio/demo.tsx
Length of output: 755
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
Range、SearchBar、Switch、TextArea和Video组件。Radio和RadioGroup组件的样式和功能进行了优化，支持更灵活的属性管理和状态同步。