refactoring rc-motion to @rc-component/motion#364
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
## Walkthrough
本次更新主要将组件和类型中的 `destroyInactivePanel` 属性重命名为 `destroyOnHidden`,并同步更新相关文档、类型定义、测试用例和依赖包。此外,还调整了部分依赖包的来源和版本,统一了类型声明和导入路径。
## Changes
| 文件/文件组 | 变更摘要 |
|-----------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
| .gitignore | 新增忽略 `pnpm-lock.yaml` 文件。 |
| README.md | 将 Collapse 组件文档中的 `destroyInactivePanel` 属性重命名为 `destroyOnHidden`。 |
| package.json | 替换依赖 `rc-motion` 为 `@rc-component/motion`,增加/升级相关依赖和类型定义,提升 React 相关依赖版本。 |
| docs/examples/_util/motionUtil.ts<br>src/Panel.tsx<br>src/interface.ts | 将 motion 相关类型和组件的导入路径从 `rc-motion` 改为 `@rc-component/motion`。 |
| src/Collapse.tsx<br>src/hooks/useItems.tsx<br>src/interface.ts<br>src/Panel.tsx | 将所有 `destroyInactivePanel` 属性及相关逻辑重命名为 `destroyOnHidden`,并同步类型定义和用法。 |
| src/PanelContent.tsx | `PanelContent` 组件 props 类型声明由交叉类型改为 `PropsWithChildren<Readonly<CollapsePanelProps>>`。 |
| src/interface.ts | `CollapsePanelProps` 的 `header` 和 `extra` 属性类型由 `string | React.ReactNode` 改为 `React.ReactNode`。 |
| tests/index.spec.tsx | `KeyCode` 导入路径调整,测试用例中的 `destroyInactivePanel` 改为 `destroyOnHidden`。 |
| now.json | 删除该部署配置文件。 |
| vercel.json | 新增 Vercel 部署配置文件,指定框架为 "umijs"。 |
| .dumirc.ts | 移除配置中的 `outputPath: '.doc'`。 |
| .github/workflows/site-deploy.yml | 修改 GitHub Actions 部署流程,发布目录由 `./.doc` 改为 `./dist`。 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant Collapse
participant Panel
User->>Collapse: 设置 destroyOnHidden 属性
Collapse->>Panel: 传递 destroyOnHidden
Panel->>Panel: 根据 destroyOnHidden 控制面板销毁Suggested reviewers
Poem
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
.gitignore(1 hunks)README.md(1 hunks)docs/examples/_util/motionUtil.ts(1 hunks)package.json(3 hunks)src/Collapse.tsx(2 hunks)src/Panel.tsx(4 hunks)src/PanelContent.tsx(1 hunks)src/hooks/useItems.tsx(10 hunks)src/index.tsx(1 hunks)src/interface.ts(4 hunks)tests/index.spec.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/PanelContent.tsx (1)
src/interface.ts (1)
CollapsePanelProps(46-68)
src/hooks/useItems.tsx (1)
src/interface.ts (2)
CollapseProps(22-42)CollapsePanelProps(46-68)
🪛 GitHub Actions: ✅ test
src/index.tsx
[error] 1-1: ESLint: 'React' is defined but never used. (@typescript-eslint/no-unused-vars)
🔇 Additional comments (35)
docs/examples/_util/motionUtil.ts (1)
1-5: 依赖包路径更新正确成功将导入路径从
rc-motion更新为@rc-component/motion,与 PR 目标一致。.gitignore (1)
31-31: 添加 pnpm-lock.yaml 到 .gitignore 文件正确地将 pnpm 的锁文件添加到 .gitignore 中,与其他包管理器的锁文件(yarn.lock、package-lock.json)保持一致。
README.md (1)
81-81: 文档中属性名称统一更新成功将文档中的
destroyInactivePanel更新为destroyOnHidden,与代码变更保持一致。tests/index.spec.tsx (2)
3-3: 依赖包路径更新正确成功将导入路径从
rc-util/lib/KeyCode更新为@rc-component/util/lib/KeyCode,与 PR 目标一致。
243-243: 测试用例属性名称统一更新成功将测试代码中的
destroyInactivePanel更新为destroyOnHidden,与其他文件的变更保持一致。src/Collapse.tsx (2)
23-23: 属性名称更改:destroyInactivePanel -> destroyOnHidden属性名称从
destroyInactivePanel更改为destroyOnHidden,这使得属性名称更加直观,更好地描述了其功能:在面板隐藏时销毁内容。
75-75: 保持属性名称一致性在
useItems钩子中正确地使用更新后的destroyOnHidden属性名,保持了整个代码库的一致性。package.json (4)
49-49: 依赖包更新:rc-motion -> @rc-component/motion将
rc-motion替换为@rc-component/motion,与 PR 标题 "refactoring rc-motion to @rc-component/motion" 保持一致。这是一个好的改进,使用了更标准化的包命名方式。
60-62: TypeScript 类型声明更新添加了
@types/node并更新了 React 相关的类型声明到 v19,这与 React 版本升级保持一致。
77-78: React 依赖升级到 v19将 React 和 React DOM 依赖从 v18 升级到 v19.1.0,确保组件与最新的 React 版本兼容。
82-83: 更新 peerDependencies 的最低要求将 peerDependencies 的最低要求从
>=16.9.0提高到>=18.0.0,这是合理的,因为 React 18 引入了许多新特性和 API 更改。src/PanelContent.tsx (1)
7-7: 改进类型定义将 props 类型从交叉类型
CollapsePanelProps & { children: React.ReactNode }更改为React.PropsWithChildren<Readonly<CollapsePanelProps>>,这是一个更好的做法:
- 使用
Readonly使 props 显式只读,符合 React 的最佳实践- 使用
PropsWithChildren工具类型代替手动添加 children 属性- 代码更简洁且更符合 React 类型系统的标准用法
src/Panel.tsx (4)
2-2: 更新导入路径:rc-motion -> @rc-component/motion从
'rc-motion'更改为'@rc-component/motion',与 package.json 中的依赖更改保持一致。
26-26: 属性名称更新:destroyInactivePanel -> destroyOnHidden属性名称从
destroyInactivePanel更改为destroyOnHidden,保持了整个代码库的命名一致性。
107-107: 更新 CSSMotion 组件的属性将传递给
CSSMotion组件的属性从destroyInactivePanel更新为removeOnLeave={destroyOnHidden},这不仅与新的属性名称保持一致,而且使用了@rc-component/motion包中CSSMotion组件期望的属性名。
120-120: 改进代码风格:void 0 -> undefined将
role={accordion ? 'tabpanel' : void 0}更改为role={accordion ? 'tabpanel' : undefined},这是一个风格上的改进,使用更符合现代 JavaScript 习惯的undefined而不是void 0。两者在功能上等效,但undefined更具可读性。src/hooks/useItems.tsx (13)
10-10: 更新了 Props 类型中的属性名称Props 类型中 CollapseProps 的 Pick 类型,将
destroyInactivePanel属性更名为destroyOnHidden,使命名更加直观。
19-19: 更新了解构赋值中的属性名称解构赋值中的
destroyInactivePanel属性更名为destroyOnHidden,与接口定义保持一致。
35-35: 更新了 item 属性名称item 对象中的
destroyInactivePanel属性更名为destroyOnHidden,保持命名一致性。
43-43: 更新了合并变量名称将
mergedDestroyInactivePanel变量名更新为mergedDestroyOnHidden,并相应更新了引用的属性名。
46-48: 改进了条件语句格式为单行 if 语句添加了明确的花括号,提高了代码的可读性和一致性。
75-75: 更新了组件属性名称CollapsePanel 组件中的
destroyInactivePanel属性更名为destroyOnHidden。
91-93: 改进了空值检查格式为空值检查条件语句添加了明确的花括号,提高了代码的可读性和一致性。
99-99: 更新了解构赋值中的属性名称props 解构赋值中的
destroyInactivePanel属性更名为destroyOnHidden。
113-113: 更新了 child.props 解构赋值中的属性名称child.props 解构赋值中的
destroyInactivePanel属性更名为destroyOnHidden。
128-130: 改进了条件语句格式为单行 if 语句添加了明确的花括号,提高了代码的一致性和可维护性。
144-144: 更新了属性合并逻辑将属性名从
destroyInactivePanel更新为destroyOnHidden,同时保持了同样的合并逻辑 (childDestroyOnHidden ?? destroyOnHidden)。
164-164: 增强了类型安全性为
React.cloneElement添加了类型参数<CollapsePanelProps>,提高了类型安全性。
175-177: 改进了代码格式并增强了类型安全性改进了返回语句的格式,并添加了类型转换
as React.ReactElement<CollapsePanelProps>,确保类型安全。src/interface.ts (6)
1-1: 更新了依赖包路径将
rc-motion导入源更新为@rc-component/motion,符合 PR 标题中提到的重构目标。
31-31: 更新了 CollapseProps 接口属性名将
CollapseProps接口中的destroyInactivePanel属性更名为destroyOnHidden,使命名更加直观。
45-45: 添加了空行在
SemanticName类型定义后添加了空行,改进了代码格式。
48-48: 优化了 header 属性类型将
CollapsePanelProps接口中header属性的类型从string | React.ReactNode简化为React.ReactNode(因为string已包含在React.ReactNode中)。
58-58: 更新了 CollapsePanelProps 接口属性名将
CollapsePanelProps接口中的destroyInactivePanel属性更名为destroyOnHidden,保持整个组件库的命名一致性。
61-61: 优化了 extra 属性类型将
CollapsePanelProps接口中extra属性的类型从string | React.ReactNode简化为React.ReactNode(因为string已包含在React.ReactNode中)。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #364 +/- ##
==========================================
+ Coverage 99.12% 99.15% +0.02%
==========================================
Files 5 5
Lines 114 118 +4
Branches 43 43
==========================================
+ Hits 113 117 +4
Misses 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
Refactors animation integration from rc-motion to @rc-component/motion, renames the panel destruction prop, and updates related imports, dependencies, and documentation.
- Renamed
destroyInactivePanelprop todestroyOnHiddenacross interfaces, components, tests, and docs - Replaced
rc-motionwith@rc-component/motionimports and added@rc-component/motiondependency - Updated React and related peer/dev dependencies to version 19.x
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| tests/index.spec.tsx | Updated import path for KeyCode and prop rename in test |
| src/interface.ts | Swapped CSSMotionProps import and renamed prop types |
| src/hooks/useItems.tsx | Renamed destroyInactivePanel to destroyOnHidden in hook logic |
| src/PanelContent.tsx | Adjusted forwardRef generic to use PropsWithChildren |
| src/Panel.tsx | Updated motion import, prop rename, and cleaned up role default |
| src/Collapse.tsx | Renamed default prop and forwarded prop in main component |
| package.json | Added @rc-component/motion, bumped React versions, removed old lib |
| docs/examples/_util/motionUtil.ts | Updated motion import types |
| README.md | Renamed prop in documentation table |
Comments suppressed due to low confidence (1)
README.md:84
- [nitpick] The description is grammatically awkward. Consider rephrasing to: "Whether to destroy panels when hidden (not active), default false."
<td>If destroy the panel which not active, default false. </td>
Summary by CodeRabbit
新功能
破坏性变更
依赖更新
文档
测试
配置
忽略文件