Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(interaction): 新增选中/高亮单元格 & 滚动 API #2586

Merged
merged 20 commits into from
Aug 5, 2024

Conversation

lijinke666
Copy link
Member

@lijinke666 lijinke666 commented Mar 7, 2024

👀 PR includes

✨ Feature

  • New feature

📝 Description

1. 选中单元格 API 调整/完善

selectHeaderCell 变更为 changeCell, 支持所有类型单元格的选中。同时支持 选中 (selectCell)高亮 (highlightCell) 等语法糖, 现有 API 可以实现 (如: s2.interaction.changeState()), 但成本过高, 开发者需要理解部分源码逻辑, 简化从而满足外部逻辑主动触发的场景.

- s2.interaction.selectHeaderCell(selectHeaderCellInfo: SelectHeaderCellInfo)
+ s2.interaction.changeCell(options: ChangeCellOptions)

+ s2.interaction.selectCell(cell: S2CellType)
+ s2.interaction.highlightCell(cell: S2CellType)

同时支持 animate (是否展示滚动动画)skipScrollEvent (是否触发滚动事件) 配置

s2.interaction.selectCell(dataCell, {
  animate: true,
  skipScrollEvent: true
})

选中

Kapture 2024-03-07 at 15 19 16

高亮

Kapture 2024-03-07 at 15 18 23

2. 滚动 API 调整/完善

滚动 API s2.updateScrollOffset 移除,统一至 s2.interaction 命名空间下, 保持 API 一致性。同时支持 scrollToCellscrollToTop 等语法糖。

- s2.updateScrollOffset(offsetConfig: ScrollOffsetConfig)
+ s2.interaction.scrollTo(offsetConfig: ScrollOffsetConfig)
+ s2.interaction.scrollToCellById('root[&]浙江[&]杭州-root[&]笔[&]price');
+ s2.interaction.scrollToCell(dataCell);
+ s2.interaction.scrollToTop();

同时支持 animate (是否展示滚动动画)skipScrollEvent (是否触发滚动事件) 配置

s2.interaction.scrollToTop({ animate: true, skipScrollEvent: true })

Kapture 2024-03-07 at 17 28 43

3. autoResetSheetStyle 支持动态判断

const s2Options: S2Options = {
  width: 600,
  height: 480,
  interaction: {
    // 在按下 ESC 键或者鼠标移出表格区域后,自动重置单元格选中,高亮状态
    // autoResetSheetStyle: true,
    autoResetSheetStyle: (event) => {
      // 支持根据 event 动态判断, 如: 点击操作按钮时不自动重置交互
      if (event?.target instanceof HTMLElement) {
        return !event.target.classList.contains('ant-btn');
      }

      // 其他情况正常重置
      return true;
    },
  },
}

image

PS: 该 PR 为后续 2.0 迭代 checkbox radio 单选/多选做铺垫.

🖼️ Screenshot

🔗 Related issue link

🔍 Self-Check before the merge

  • Add or update relevant docs.
  • Add or update relevant demos.
  • Add or update test case.
  • Add or update relevant TypeScript definitions.

Copy link

vercel bot commented Mar 7, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
antvis-s2 ❌ Failed (Inspect) Aug 5, 2024 8:34am

@github-actions github-actions bot added the next 2.0-next 版本的问题 label Mar 7, 2024
Copy link
Contributor

github-actions bot commented Mar 7, 2024

Size Change: +564 B (+0.17%)

Total Size: 327 kB

Filename Size Change
./packages/s2-core/dist/index.min.js 229 kB +564 B (+0.25%)
ℹ️ View Unchanged
Filename Size
./packages/s2-core/dist/style.min.css 388 B
./packages/s2-react/dist/index.min.js 69.9 kB
./packages/s2-react/dist/style.min.css 3.88 kB
./packages/s2-vue/dist/index.min.js 22 kB
./packages/s2-vue/dist/style.min.css 1.97 kB

compressed-size-action

@lijinke666 lijinke666 changed the title [WIP] feat(interaction): 新增选中/高亮单元格 & 滚动 API feat(interaction): 新增选中/高亮单元格 & 滚动 API Mar 8, 2024
@github-actions github-actions bot added the pr(feature) new feature label Mar 8, 2024
Copy link
Contributor

github-actions bot commented Mar 8, 2024

你好, @lijinke666 CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复。

Hello, @lijinke666 CI run failed, please click the [Details] button for detailed log information and fix it.

@github-actions github-actions bot added the 🚨 test failed 单元测试挂了 label Mar 8, 2024
@lijinke666 lijinke666 changed the title feat(interaction): 新增选中/高亮单元格 & 滚动 API [WIP] feat(interaction): 新增选中/高亮单元格 & 滚动 API Mar 8, 2024
@github-actions github-actions bot removed the pr(feature) new feature label Mar 8, 2024
@lijinke666 lijinke666 marked this pull request as ready for review July 18, 2024 11:27
@lijinke666 lijinke666 changed the title [WIP] feat(interaction): 新增选中/高亮单元格 & 滚动 API feat(interaction): 新增选中/高亮单元格 & 滚动 API Jul 18, 2024
@github-actions github-actions bot added the pr(feature) new feature label Jul 18, 2024
@codecov-commenter
Copy link

codecov-commenter commented Aug 1, 2024

Codecov Report

Attention: Patch coverage is 75.00000% with 31 lines in your changes missing coverage. Please review.

Project coverage is 80.75%. Comparing base (ecdc9c8) to head (1f19d4f).
Report is 416 commits behind head on next.

Files Patch % Lines
packages/s2-core/src/interaction/root.ts 72.89% 8 Missing and 21 partials ⚠️
packages/s2-core/src/cell/data-cell.ts 50.00% 1 Missing ⚠️
packages/s2-core/src/facet/base-facet.ts 66.66% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             next    #2586      +/-   ##
==========================================
+ Coverage   75.77%   80.75%   +4.98%     
==========================================
  Files         257      180      -77     
  Lines       11994    10401    -1593     
  Branches     2464     2359     -105     
==========================================
- Hits         9088     8399     -689     
+ Misses       1398      555     -843     
+ Partials     1508     1447      -61     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@wjgogogo wjgogogo merged commit ac4f5ab into next Aug 5, 2024
8 of 9 checks passed
@wjgogogo wjgogogo deleted the feat-interaction-api branch August 5, 2024 09:44
@lijinke666
Copy link
Member Author

🎉 This PR is included in version @antv/s2-v2.0.0-next.26 🎉

The release is available on:

Your semantic-release bot 📦🚀

@lijinke666
Copy link
Member Author

🎉 This PR is included in version @antv/s2-react-v2.0.0-next.25 🎉

The release is available on:

Your semantic-release bot 📦🚀

@lijinke666
Copy link
Member Author

🎉 This PR is included in version @antv/s2-react-components-v1.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
next 2.0-next 版本的问题 pr(feature) new feature released on @next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants