expanded&sticky support expandedRowOffset #1282
Conversation
|
@crazyair is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
Walkthrough本次变更新增了一个 sticky 可展开行的表格演示 Demo，并围绕“expandedRowOffset”属性扩展了表格组件的可配置性。涉及表格行、展开行、上下文、接口定义等多处联动调整，同时增强了 sticky 滚动条的事件监听机制，并更新了 CI 工作流配置和部分开发脚本。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Demo
participant Table
participant Body
participant BodyRow
participant ExpandedRow
User->>Demo: 打开 expandedSticky Demo
Demo->>Table: 渲染 Table 组件
Table->>Body: 渲染 Body，传递 expandedRowOffset
Body->>BodyRow: 渲染 BodyRow，传递 expandedRowOffset
BodyRow->>ExpandedRow: 渲染 ExpandedRow，计算 offsetWidth
ExpandedRow-->>BodyRow: 展开行内容渲染，宽度与偏移调整
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/Body/BodyRow.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. src/Body/ExpandedRow.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. src/Body/MeasureRow.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (13)
🧰 Additional context used🧬 Code Graph Analysis (2)src/context/TableContext.tsx (1)
src/Body/BodyRow.tsx (1)
🔇 Additional comments (30)
✨ 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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/interface.ts (1)
255-255: 建议添加属性文档注释。新增的
expandedRowOffset属性缺少文档注释。建议添加注释说明该属性的用途和预期值范围，以提高代码可读性和维护性。+ /** Offset for expanded rows in pixels */ expandedRowOffset?: number;src/Body/BodyRow.tsx (1)
189-195: 优化 offsetWidth 计算逻辑计算逻辑是正确的，但第193行存在冗余代码。
应用此差异来简化代码：
- offsetWidth = offsetWidth + (item.width ?? 0); + offsetWidth = offsetWidth + item.width;因为已经检查了
typeof item.width === 'number'，所以?? 0是多余的。
🛑 Comments failed to post (1)
package.json (1)
45-45: 💡 Verification agent
🧩 Analysis chain
验证 --any-branch 标志的安全性。
在 prepublishOnly 脚本中添加
--any-branch标志允许从任何分支发布，这可能绕过了分支保护机制。请确认这是有意为之，并考虑潜在的安全风险。
🏁 Script executed:
#!/bin/bash # 检查 np 工具的 --any-branch 标志文档和最佳实践 echo "检查 np 工具的 --any-branch 标志的用途和安全性考虑"Length of output: 78
🌐 Web query:
np 工具中的 --any-branch 标志有什么作用？是否存在因此绕过分支保护机制的安全风险？💡 Result:
np工具中的--any-branch标志作用
np是一个用于自动化 npm package 发布流程的命令行工具，常用于规范化和简化包发布步骤。默认情况下，np要求你在指定的主分支（如main、master或通过配置指定的分支）上进行版本发布，以保障发布流程的合规和安全性。这样做的主要目的是防止开发者在错误的分支上意外发布，从而引入未经过审查或测试的代码。
--any-branch参数的作用就是允许你在任何分支上执行发布操作，而不做主分支限制。这一参数的设计是为了灵活性，便于某些特定的工作流（比如在 feature 分支或 hotfix 分支上紧急发布小版本）[通用相关知识]。针对分支保护的安全风险分析
1. 绕过发布分支限制
- 当你启用
--any-branch，就相当于绕过了只允许在主分支发布的限制。只要拥有发布权限的开发者可以在任意分支（甚至尚未合并到主分支的分支）直接发布包。2. 对分支保护机制的影响
- 分支保护（如 GitHub 的受保护分支功能）本质上是阻止未经过审核的更改直接推送或合并到关键分支（如
main）。然而，np --any-branch并不会直接修改主分支或受保护分支的内容，而是发布当前分支的内容到 npm。- 这意味着，只要开发者拥有 npm 的发布权限，他们仍可以绕过主分支的保护，在受保护分支外发布包含未审查代码的新版本。这些代码未必经过 CI/CD 审核或团队代码审查流程，可能带来安全和合规风险。
3. 实际风险举例
- 某开发者在 feature 分支上引入了未经过团队审核的变更，使用
np --any-branch直接发布到 npm，导致可能的安全漏洞或失误正式对外，无法依赖分支保护来阻断。- 如果 npm publish 权限控制不严格，使用该参数有可能绕开组织对发布流程和分支合规性的整体约束。
总结与安全建议
功能/风险点 说明 --any-branch 作用 允许在任何分支（不限于主分支）上发布 npm 包 绕过分支保护风险 是，有可能让未审查代码绕过主分支保护或团队审核直接发布 发布权限 只要拥有 npm publish 权限并使用 --any-branch 即可在非主分支发布 安全建议 如非必要不建议常规启用；应结合 npm 发布权限、CI 流程等措施共同管控发布入口，防止安全和合规风险 结论：
np --any-branch标志确实可以绕过分支发布限制，存在安全和管理风险，尤其是在依赖主分支保护来保证发布安全的项目中。应谨慎使用，并加强发布权限和代码审核流程的双重管控。Citations:
- 1: https://www.hiascend.com/doc_center/source/zh/canncommercial/60RC1/inferapplicationdev/atctool/CANN%206.0.RC1%20ATC%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97%2001.pdf
- 2: https://www.cnblogs.com/wztshine/p/16504634.html
- 3: https://juejin.cn/post/7386321573713870899
- 4: https://docs.oracle.com/cd/E19422-01/819-4763/819-4763.pdf
- 5: https://www.cnblogs.com/treasury-manager/p/14377941.html
- 6: https://www.jos.org.cn/html/2018/1/5375.htm
- 7: https://www.cnblogs.com/apachecn/p/18522850
- 8: https://github.com/breezedeus/CnSTD
- 9: https://docs.redhat.com/zh-cn/documentation/red_hat_enterprise_linux/7/pdf/security_guide/Red_Hat_Enterprise_Linux-7-Security_Guide-zh-CN.pdf
- 10: https://huggingface.co/datasets/Jellyfish042/Chinese-LIMA-V0
请注意：
np --any-branch标志可绕过分支保护
--any-branch会允许在任何分支上发布 npm 包，绕过只在主分支发布的限制，存在安全和合规风险。请确认这是有意为之，并在以下位置进行评估或调整：
- 文件：
package.json
行号：45
内容："prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish --any-branch",- 操作建议：
- 如非必要，移除
--any-branch，仅在受保护的主分支（如main/master）上发布。- 若确实需要该灵活性，应结合严格的 npm 发布权限控制和 CI/CD 审核流程，确保所有发布都经过团队审查。
🤖 Prompt for AI Agents
In package.json at line 45, the prepublishOnly script uses the --any-branch flag with np, which allows publishing from any branch and bypasses branch protection rules. To fix this, remove the --any-branch flag to restrict publishing to the main protected branch, or if flexibility is required, ensure strict npm publish permissions and CI/CD review processes are in place to control releases securely.
Summary by CodeRabbit
新功能
修复与优化
文档
杂项