fix: 修复Table的列设置百分比的宽度时,单元格内的ellipsis效果不生效问题 #795
Conversation
|
Warning Rate limit exceeded@saint3347 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 3 minutes and 45 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Walkthrough此次更改包括对 Changes
Possibly related PRs
Suggested labels
Poem
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 (
|
![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
🧹 Outside diff range and nitpick comments (1)
packages/hooks/src/components/use-table/use-table-layout.tsx (1)
294-303: 表格宽度计算逻辑优化新的实现更加健壮，通过明确处理不同类型的宽度值来解决单元格省略号效果的问题。建议考虑以下几点改进：
- 对于百分比宽度的处理，建议添加正则表达式验证确保格式正确
- 考虑添加对其他常见CSS单位（如vw、em等）的支持
- 建议添加单元测试覆盖这些不同的宽度类型场景
建议添加如下改进：
let tableWidth = props.width; if (typeof props.width === 'string' && props.width.endsWith('%')) { + // 验证百分比格式 + const percentageMatch = /^[\d.]+%$/.test(props.width); + if (!percentageMatch) { + console.warn('Invalid percentage format'); + tableWidth = undefined; + } else { tableWidth = props.width; + } } else if (typeof props.width === 'number') { tableWidth = props.width + deltaXSum; } else if (!isNaN(Number(props.width))) { tableWidth = props.width; } else { tableWidth = undefined; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
package.json(1 hunks)packages/hooks/src/components/use-table/use-table-layout.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- package.json
🔇 Additional comments (1)
packages/hooks/src/components/use-table/use-table-layout.tsx (1)
294-303: 验证跨浏览器兼容性
由于此修复涉及Chrome和Safari浏览器中的显示问题，建议进行以下验证：
- 在不同浏览器中测试百分比宽度的表格列
- 验证单元格省略号效果在所有目标浏览器中是否正常工作
- 特别关注不同操作系统上的Safari浏览器表现
✅ Verification successful
代码修改已验证有效
根据代码分析，表格宽度处理逻辑已正确实现：
- 百分比宽度值会被直接保留，不会进行额外计算
- 数值型宽度会加上列宽调整的偏移量
- 可转换为数值的字符串会保持原值
- 其他情况下宽度设为undefined
这种处理方式能确保在不同浏览器中表格宽度的一致性表现，特别是对于百分比宽度的情况。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索相关的浏览器兼容性测试用例
rg -l "browser|chrome|safari|ellipsis" --type test
# 查找所有使用百分比宽度的表格相关测试
ast-grep --pattern 'width="$_%" | width: "$_%"'
Length of output: 131
Script:
#!/bin/bash
# 搜索测试文件中的浏览器兼容性相关内容
rg -l "browser|chrome|safari|ellipsis" $(fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts)
# 搜索表格组件的测试文件
fd "table" -e test.tsx -e test.ts -e spec.tsx -e spec.ts
# 查找使用百分比宽度的代码示例
rg "width.*%"
# 查找表格组件中的宽度相关代码
ast-grep --pattern 'width = $_'
Length of output: 86299
Script:
#!/bin/bash
# 查找表格组件中的宽度相关代码
rg -A 5 -B 5 "tableWidth" packages/hooks/src/components/use-table/use-table-layout.tsx
# 查找表格组件的测试用例
rg -l "table.*width.*%" packages/shineout/src/table/__test__/
# 查找表格组件中的浏览器兼容性相关代码
rg "browser|chrome|safari" packages/hooks/src/components/use-table/
Length of output: 961
Types of changes
Background
Changelog
Other information
Summary by CodeRabbit
3.5.1-beta.1，可能引入新的功能或改动。useTableLayout钩子的tableWidth计算逻辑，增强了对不同类型输入的处理能力。