feat(switch): loading状态交给用户控制 #3170
Conversation
Walkthrough该次提交新增了多个组件和 API 功能。首先，在 Switch 组件演示中引入了新的 Demo8 组件，同时增加了“loading”状态的翻译（支持简体中文、繁体中文及英文），并在 UI 中展示。其次，Switch 组件内部逻辑进行了精简，移除旧的 state 处理，完全依赖新增的 loading 属性控制行为。此外，文档中也更新了 Switch 的属性说明，新增 loading 属性以展示加载状态。 Changes
Sequence Diagram(s)sequenceDiagram
participant SwitchDemo
participant View
participant Demo8
SwitchDemo->>View: 渲染 loading 翻译文本
SwitchDemo->>Demo8: 渲染 Demo8 组件
sequenceDiagram
participant User
participant Switch
User->>Switch: 点击开关
alt loading 为 true
Switch-->>User: 显示 Loading 图标，不触发 onChange
else
Switch->>Switch: 更新状态
Switch->>User: 执行 onChange 回调
end
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
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 #3170 +/- ##
=============================================
- Coverage 87.20% 87.19% -0.01%
=============================================
Files 279 279
Lines 18540 18537 -3
Branches 2822 2819 -3
=============================================
- Hits 16167 16163 -4
- Misses 2368 2369 +1
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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/packages/switch/doc.md (1)
81-81: 属性文档更新清晰新增的loading属性在文档中有明确的描述："加载中的开关"，类型为boolean，默认值为false。这与代码实现一致，并且提供了足够的信息让用户理解如何使用这个新功能。
不过，文档中没有添加展示loading状态的示例部分，建议考虑添加对应的Demo8示例到文档中。
+ +### 加载状态 + +:::demo + +<CodeBlock src='h5/demo8.tsx'></CodeBlock> + +:::src/packages/switch/doc.zh-TW.md (1)
81-81: 繁體中文文檔更新正確loading屬性的繁體中文描述"載入中的開關"清晰明確，與簡體中文文檔保持一致性，並符合繁體中文的表達習慣。類型和默認值的設置也正確。
同樣地，繁體中文文檔也建議添加Demo8的示例展示。
+ +### 載入狀態 + +:::demo + +<CodeBlock src='h5/demo8.tsx'></CodeBlock> + +:::
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/packages/switch/demo.taro.tsx(5 hunks)src/packages/switch/demo.tsx(5 hunks)src/packages/switch/demos/h5/demo8.tsx(1 hunks)src/packages/switch/demos/taro/demo8.tsx(1 hunks)src/packages/switch/doc.en-US.md(1 hunks)src/packages/switch/doc.md(1 hunks)src/packages/switch/doc.taro.md(1 hunks)src/packages/switch/doc.zh-TW.md(1 hunks)src/packages/switch/switch.taro.tsx(5 hunks)src/packages/switch/switch.tsx(5 hunks)src/types/spec/switch/base.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/packages/switch/demos/h5/demo8.tsx (2)
src/packages/switch/switch.taro.tsx (1)
Switch(19-105)src/packages/switch/switch.tsx (1)
Switch(17-103)
src/packages/switch/demos/taro/demo8.tsx (2)
src/packages/switch/switch.taro.tsx (1)
Switch(19-105)src/packages/switch/switch.tsx (1)
Switch(17-103)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (19)
src/types/spec/switch/base.ts (1)
11-11: 新增加的loading属性与组件功能匹配这个变更为BaseSwitch接口添加了一个布尔类型的loading属性，这与PR的目标"让用户控制loading状态"相符。这个属性将允许用户直接控制Switch组件的加载状态。
src/packages/switch/demos/h5/demo8.tsx (1)
1-14: Demo8组件展示了loading状态的用法这个新增的Demo8组件很好地展示了loading属性的用法，通过两个不同状态的Switch（一个默认状态的loading和一个checked状态的loading）来帮助用户理解这个新功能。
代码结构清晰，使用Space组件合理布局多个Switch实例，符合组件库的设计风格。
src/packages/switch/doc.taro.md (1)
81-81: 属性文档更新完整属性
loading的添加与实现代码保持一致，文档描述清晰简洁。src/packages/switch/demos/taro/demo8.tsx (1)
1-14: 代码示例结构合理新增的 Demo8 组件结构清晰，展示了 Switch 组件的 loading 状态在默认开启和关闭两种情况下的效果，与其他示例代码保持一致的风格。
src/packages/switch/doc.en-US.md (1)
81-81: 英文文档属性描述准确英文文档中
loading属性的添加与中文文档保持一致，属性描述准确清晰。src/packages/switch/demo.taro.tsx (3)
13-13: 正确导入新增 Demo 组件正确导入了 Demo8 组件，保持与其他 Demo 组件导入的一致性。
25-25: 多语言翻译完整为 loading 状态添加了中文、繁体中文和英文的翻译，描述准确，有助于用户理解该功能。
Also applies to: 35-35, 45-45
66-67: UI 展示正确正确添加了标题和 Demo8 组件的展示，保持了与其他 Demo 相同的结构和风格。
src/packages/switch/demo.tsx (3)
10-10: 新增了 Demo8 组件的导入导入了展示 Switch 组件 loading 状态的 Demo8 组件，扩展了组件演示范例。
22-22: 为 loading 状态添加了多语言翻译在中文简体、中文繁体和英文三种语言中都添加了对应的 loading 状态描述文本，保证了国际化支持的完整性。
Also applies to: 32-32, 42-42
62-63: 增加了 loading 状态的演示部分添加了标题和 Demo8 组件的渲染，使用户可以直观地看到 loading 状态的效果，完善了组件文档。
src/packages/switch/switch.tsx (4)
15-15: 添加 loading 属性到默认配置为 Switch 组件添加了 loading 属性并设置默认值为 false，让用户可以控制组件的加载状态。
25-25: 从 props 中解构 loading 属性从组件 props 中解构出 loading 属性，使其可以在组件内部使用。
56-57: 更新点击事件的条件判断将点击事件的条件判断更新为同时检查 disabled 和 loading 状态，确保在加载状态下组件不可交互，提升了用户体验。
78-87: 优化 loading 图标的条件渲染优化了 loading 图标的条件渲染逻辑，使用 loading 属性代替原有的内部状态管理，简化了组件逻辑。
src/packages/switch/switch.taro.tsx (4)
17-17: 在 Taro 版本中添加 loading 属性在 Taro 版本的 Switch 组件中添加了 loading 属性并设置默认值为 false，与 Web 版本保持一致，确保了跨平台的行为一致性。
27-27: 从 props 中解构 loading 属性从 Taro 组件 props 中解构出 loading 属性，保持与 Web 版本的实现一致。
58-58: 更新 Taro 版本中点击事件的条件判断将 Taro 版本中点击事件的条件判断更新为同时检查 disabled 和 loading 状态，保持与 Web 版本一致的交互体验。
80-89: 优化 Taro 版本中 loading 图标的条件渲染优化了 Taro 版本中 loading 图标的条件渲染逻辑，使用 loading 属性代替原有的内部状态管理，与 Web 版本保持一致的实现方式。
|
如果要支持这种增加 loading 属性，仍需要保留 switch 切换状态时的加载中状态。 |
|
在原来的基础上做成受控的吧？ |
|
新版更新，已经有另外的解决方案了 |
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档