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(tooltip): enhance tooltip #862

Merged
merged 10 commits into from Dec 6, 2021
Merged

feat(tooltip): enhance tooltip #862

merged 10 commits into from Dec 6, 2021

Conversation

lijinke666
Copy link
Member

@lijinke666 lijinke666 commented Dec 3, 2021

👀 PR includes

✨ Feature

  • New feature

🐛 Bugfix

📝 Description

  • 新增 tooltip.content 支持 回调形式, 用于根据当前单元格信息自定义 tooltip 内容
const TooltipContent = (props) => <div>...</div>
const s2options = {
  tooltip: {
    content: (cell) => {
      const meta = cell.getMeta()
      return <TooltipContent {...meta}/>
    },
  },
};
  • 新增 tooltip 支持 corner 配置, tooltip.cell 重命名为 tooltip.data, 保持和内部单元格命名一致, 避免歧义
const s2options = {
  tooltip: {
    row: {},
    col: {},
+   corner: {},
-   cell: {},
+   data: {}
  },
};
  • 新增 组件层新增 单元格 hover 事件的透出 eg. onRowCellHover
<SheetComponent onRowCellHover={} onRowCellClick={} onDataCellHover={} onDataCellClick={} />
  • 修复 组件层注销时, 部分 canvas 的事件没有注销, 取消组件层的 unBindEvent 修改为 core统一注销
  • 修复 单击单元格 出现 tooltip 时, 点击鼠标右键出现浏览器菜单后, 误判为刷选模式
  • 修复 单击单元格时 未清空 hoverFocusTimer 800ms 的计时器, 导致 有几率关闭 tooltip 后再次出现的问题
  • 修复 组件层 自定义 content 控制台警告 (重复的key)
  • 完善 相关文档
    • tooltip
    • 自定义 tooltip content 示例
    • 通过 自定义交互 自定义 tooltip 示例
    • 新增 BaseCell 基础类 API

🖼️ Screenshot

Before After
Kapture 2021-12-03 at 16 14 35 Kapture 2021-12-03 at 16 10 12
Kapture 2021-12-03 at 16 17 21 Kapture 2021-12-03 at 16 12 54

🔗 Related issue link

close #852

🔍 Self Check before Merge

  • Add or update relevant Docs.
  • Add or update relevant Demos.
  • Add or update relevant TypeScript definitions.

@github-actions github-actions bot added the pr(feature) new feature label Dec 3, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Dec 3, 2021

🎊 PR Preview has been successfully built and deployed to https://s2-preview-pr-862.surge.sh

@github-actions
Copy link
Contributor

github-actions bot commented Dec 3, 2021

Size Change: +104 B (0%)

Total Size: 185 kB

Filename Size Change
./packages/s2-core/dist/index.min.js 113 kB +25 B (0%)
./packages/s2-react/dist/index.min.js 68.6 kB +79 B (0%)
ℹ️ View Unchanged
Filename Size
./packages/s2-core/dist/style.min.css 356 B
./packages/s2-react/dist/style.min.css 3.1 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Dec 3, 2021

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

Hello, @lijinke666 CI run failed, please click the [Details] button try to fixed it.

@github-actions github-actions bot added the 🚨 test failed 单元测试挂了 label Dec 3, 2021
@github-actions github-actions bot removed the 🚨 test failed 单元测试挂了 label Dec 3, 2021
@codecov
Copy link

codecov bot commented Dec 3, 2021

Codecov Report

Merging #862 (20ac4b7) into master (025ec55) will increase coverage by 0.68%.
The diff coverage is 93.33%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #862      +/-   ##
==========================================
+ Coverage   71.13%   71.81%   +0.68%     
==========================================
  Files         168      170       +2     
  Lines       11654    12561     +907     
  Branches     2729     3047     +318     
==========================================
+ Hits         8290     9021     +731     
- Misses       2220     2318      +98     
- Partials     1144     1222      +78     
Impacted Files Coverage Δ
packages/s2-core/src/ui/tooltip/index.ts 87.32% <ø> (ø)
packages/s2-core/src/utils/tooltip.ts 44.01% <ø> (+0.04%) ⬆️
...ackages/s2-core/src/interaction/brush-selection.ts 84.43% <85.71%> (+0.38%) ⬆️
packages/s2-core/src/facet/header/corner.ts 76.72% <100.00%> (ø)
...eraction/base-interaction/click/data-cell-click.ts 76.36% <100.00%> (+0.21%) ⬆️
packages/s2-core/src/sheet-type/spread-sheet.ts 81.30% <100.00%> (+1.12%) ⬆️
packages/s2-core/src/cell/corner-cell.ts 70.61% <0.00%> (-0.11%) ⬇️
packages/s2-core/src/interaction/root.ts 84.75% <0.00%> (-0.01%) ⬇️
... and 19 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 025ec55...20ac4b7. Read the comment docs.

@xingwanying
Copy link
Member

image

如果设置了 cell 是不是默认的content就失效了? 如果分类别去枚举配置,这个cell的定义有些奇怪, 毕竟 row 和 col 也属于cell 范围, 此外还有corner cell 和 series cell 是否也需要一并考虑?

@lijinke666
Copy link
Member Author

image

如果设置了 cell 是不是默认的content就失效了? 如果分类别去枚举配置,这个cell的定义有些奇怪, 毕竟 row 和 col 也属于cell 范围, 此外还有corner cell 和 series cell 是否也需要一并考虑?

image

cell 改成 data 吧, 和内部单元格命名保持一致, cell 确实有歧义, 之前蒺藜设计的这块, 没太注意, 序号没啥必要, 等有用户反馈再说吧, corner 可以支持

Copy link
Member

@xingwanying xingwanying left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LG

@xingwanying xingwanying merged commit 9e411b5 into master Dec 6, 2021
@xingwanying xingwanying deleted the enhance-tooltip branch December 6, 2021 05:40
@github-actions
Copy link
Contributor

github-actions bot commented Dec 6, 2021

🎉 This PR is included in version @antv/s2-v1.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions
Copy link
Contributor

github-actions bot commented Dec 6, 2021

🎉 This PR is included in version @antv/s2-react-v1.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

wjgogogo pushed a commit that referenced this pull request Oct 25, 2023
* feat(tooltip): enhance tooltip

* feat(tooltip): update docs

* feat(tooltip): fix test

* feat(tooltip): fix test

* feat(tooltip): fix test

* feat(tooltip): update docs

* feat(tooltip): update demo

* feat(tooltip): update docs

* feat(tooltip): support config corner and rename cell => data

* feat(tooltip): update docs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 单元格 默认点击展示tooltips行为异常 / 框选功能 / 右键/选择单元格
2 participants