fix: 修复 Table 中点击部分组件会触发行展开的问题
#761
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Caution Review failedThe pull request is closed. 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 (3)
packages/base/src/table/table.type.ts (1)
86-87: 建议为新增的方法添加 JSDoc 文档注释
为了提高代码的可维护性和使用体验，建议为新增的滚动方法添加详细的文档说明：
+ /**
+ * @en Scroll the table horizontally to make the specified column visible
+ * @cn 水平滚动表格以确保指定列可见
+ */
scrollColumnIntoView: (colKey: string | number) => void;
+ /**
+ * @en Scroll the table horizontally to the specified position
+ * @cn 将表格水平滚动到指定位置
+ */
scrollColumnByLeft: (left: number) => void;packages/base/src/table/tr.tsx (2)
166-166: 添加 data-role 属性有助于提高可测试性！
为树形展开图标添加 data-role 属性是个好的实践。建议考虑同时添加 aria-expanded 属性以进一步提升无障碍性。
<span
data-role='tree-expand-icon'
+ aria-expanded={isExpanded}
className={tableClasses?.expandIcon}339-348: 行展开问题的修复方案设计合理！
修复方案通过检查元素及其父元素的标签和类名来判断是否应该触发展开，这种方式既全面又灵活。不过有以下几点建议：
- preventClasses 数组中的类名应该考虑提取为常量或配置项，便于维护和复用
- isNotExpandableElement 函数可以考虑添加缓存机制，避免在频繁点击时重复计算
建议将 preventClasses 提取到组件外部：
const PREVENT_EXPAND_CLASSES = [
'input-wrapper',
'select-wrapper',
'datePicker-wrapper',
'treeSelect-wrapper',
'switch-wrapper',
'checkbox-wrapper',
'radio-wrapper',
'cascader-wrapper',
] as const;
// 在组件中使用
const preventClasses = PREVENT_EXPAND_CLASSES.map(
(className) => jssStyle?.[className.split('-')[0]]?.().wrapper
);Also applies to: 349-356, 376-378
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- packages/base/src/pagination/pagination-size-list.tsx (0 hunks)
- packages/base/src/table/table.type.ts (3 hunks)
- packages/base/src/table/tr.tsx (10 hunks)
- packages/shineout/src/table/table.tsx (2 hunks)
💤 Files with no reviewable changes (1)
- packages/base/src/pagination/pagination-size-list.tsx
🔇 Additional comments (7)
packages/shineout/src/table/table.tsx (2)
9-16: 新增表单组件样式钩子的引入是合理的
这些新增的样式钩子有助于解决表格单元格中的表单组件交互问题，使点击这些组件时不会触发行展开。这种方式可以确保每个嵌套组件都有正确的样式和行为处理。
30-33: 样式映射配置完整且合理
在 jssStyle 对象中添加相应的样式映射，确保了新增组件在表格中能够保持一致的样式表现。建议考虑添加单元测试来验证这些组件在表格中的交互行为。
packages/base/src/table/table.type.ts (2)
10-17: 导入声明看起来没有问题！
新增的导入声明与后续添加的样式类型定义相对应，保持了类型系统的完整性。
131-135: 新增的样式类型定义符合预期，建议验证使用场景
样式类型定义的添加遵循了现有的模式，增强了表格中表单组件的样式定制能力。
建议运行以下脚本来验证这些组件在表格中的实际使用情况：
✅ Verification successful
新增的表单组件样式类型定义已验证完成
根据代码库分析，这些新增的表单组件样式类型定义（Select、Cascader、TreeSelect、DatePicker、Switch）遵循了现有的样式系统架构，并且已经在相应的组件模块中得到了正确的实现和引用。虽然目前在表格示例中没有直接使用这些表单组件的案例，但这些类型定义的添加为后续在表格中使用这些组件提供了必要的样式支持。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证表格中各表单组件的使用情况
# 预期结果：找到这些组件在表格中的使用示例
# 搜索表格组件中使用的表单组件
rg -l "Table.*(?:Select|Cascader|TreeSelect|DatePicker|Switch)" --type ts --type tsx
Length of output: 114
Script:
#!/bin/bash
# 搜索表格组件中使用的表单组件，修正文件类型参数
rg -t ts "Table.*(?:Select|Cascader|TreeSelect|DatePicker|Switch)"
# 搜索这些组件类型的实际使用
rg -t ts "(Select|Cascader|TreeSelect|DatePicker|Switch)Classes"
# 查找表格相关的测试用例
fd "table.*test" -e ts
# 查找表格组件的实现文件
fd "table" -e ts -e tsx
Length of output: 36406
Script:
#!/bin/bash
# 搜索表格中表单组件的实际使用示例
rg -A 5 "columns.*=.*\[" packages/shineout/src/table/__example__/ packages/ssr-test/pages/examples/table/
# 搜索表格组件中的样式类定义
rg -t ts "jssStyle\?.table\?\(\)" packages/base/src/table/
# 查找表单组件在表格中的渲染实现
ast-grep --pattern 'render: ($args) => {
$$$
return <$comp $$$/>
$$$
}'
Length of output: 46712
Script:
#!/bin/bash
# 搜索表格中表单组件的实际渲染实现
rg -A 5 "render.*=.*\(" -g "*.tsx" packages/shineout/src/table/__example__/ | grep -E "(Select|Cascader|TreeSelect|DatePicker|Switch)"
# 查找表单组件在表格中的使用示例
fd -e tsx -e ts | xargs rg "<(Select|Cascader|TreeSelect|DatePicker|Switch).*Table"
# 查找表格组件中的样式引用
rg "import.*Classes.*from.*@sheinx/base" packages/shineout/src/table/
Length of output: 728
packages/base/src/table/tr.tsx (3)
125-130: 代码格式调整合理！
依赖数组的格式调整提高了代码的可读性，每个依赖项独占一行使得变更更容易追踪。
276-289: 单元格悬停处理逻辑清晰！
事件处理器的格式调整和条件判断逻辑都很合理，特别是考虑到了合并单元格（rowSpan）的情况。
Also applies to: 299-301
305-305: 复选框单元格标记合理！
为复选框单元格添加 data-role 属性有助于测试和样式定位，保持了组件的一致性。
added 2 commits
October 29, 2024 16:54
saint3347
force-pushed
the
fix-bug-table-rowclick
branch
from
96bc974
to
ce4a140
Compare
This was referenced Oct 30, 2024
Merged
Merged
zyfwudi
added a commit
that referenced
this pull request
Nov 6, 2024
* main: (71 commits) chore: release 3.4.6 fix: `Input.Number` 输入框删完最后一个数字时不触发onChange的问题（此时返回null或undefined） fix: 修复 `Select` 禁用模式下 icon 样式异常、`DatePicker` 禁用后可聚焦的问题 (#778) fix: 修复 `Table` 点击 checkbox 展开行的问题 (#777) chore: release 3.4.5 fix: 修复Table合并行的hover效果 fix: 修复 `Table` 组件 `minWidth` 设置失效的问题 (#774) perf: CardGroup refactor fix: fix changelog feat: 3.4.5-beta.7 changelog fix: 修复 Cascader 开启 expandTrigger 为 hover 或 hover-only 是点击 checkbox 失效的问题 fix: 修复 `Select` 动态的从单选切换为多选时，placeholder内容显示不完整的问题 chore: release 3.4.5-beta.6 feat: `Image` 新增`inViewOnly`: 仅当图片在视口内时才加载图片，需配合 `lazy` 使用 feat: 去除无效 ts feat: snapshot fix: repair spin classname is invalid without tip fix: 修复 `Table` 中点击部分组件会触发行展开的问题 (#761) fix: fix card-group perf: card-group perf ...
16 tasks
KMS-Bismarck
pushed a commit
that referenced
this pull request
Nov 11, 2024
fix: 修复 `Table` 中点击部分组件会触发行展开的问题 (#761) See merge request div/so/shineout-next/shineout-next!11
16 tasks
This was referenced Nov 26, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Types of changes
Changelog
Table中点击部分组件会触发行展开的问题Other information
Summary by CodeRabbit
新功能
改进
data-role属性以改善语义结构。样式
jssStyle对象以反映新增的样式钩子。版本更新
3.4.5-beta.5。