tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

Fix(tabs): create tabs panel not update tab bar when async generate it (#1254)

Open NWYLZW opened this issue 3 years ago • 2 comments

🤔 这个 PR 的性质是?

  • [x] 日常 bug 修复
  • [ ] 新特性提交
  • [ ] 文档改进
  • [ ] 演示代码改进
  • [ ] 组件样式/交互改进
  • [ ] CI/CD 改进
  • [ ] 重构
  • [ ] 代码风格优化
  • [x] 测试用例
  • [ ] 分支合并
  • [ ] 其他

🔗 相关 Issue

https://github.com/Tencent/tdesign-react/issues/1254

💡 需求背景和解决方案

具体问题

使用异步 api 去创建 tab panel 的时候会导致 tab nav 的 active index 没办法计算出来

解决方法

  • 不使用 itemList 对数据作为 getIndex 函数的 deps,使用实际需要的 value 数组

其次需要考虑一种边界情况,所以对默认逻辑进行了优化 当用户传入了 value 但是没有传入 tab panel 列表的时候不需要默认选择第一个元素的 这个时候 getIndex 函数的返回值应该是 -1

目的是为了能够让后面用户传入 tab panel 的时

tab bar 能够检测到 active id 属性的更新 如果是之前的逻辑,active id 默认为 0,用户后面传入 tab panel 的时候,默认也是第一个元素会导致不更新

📝 更新日志

  • fix(tabs): create tabs panel not update tab bar when async generate it

  • [ ] 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • [x] 文档已补充或无须补充
  • [x] 代码演示已提供或无须提供
  • [x] TypeScript 定义已补充或无须补充
  • [x] Changelog 已提供或无须提供

NWYLZW avatar Aug 10 '22 06:08 NWYLZW

完成

github-actions[bot] avatar Aug 10 '22 08:08 github-actions[bot]

Codecov Report

Merging #1258 (a8ba3f4) into develop (b249875) will increase coverage by 0.09%. The diff coverage is 33.33%.

@@             Coverage Diff             @@
##           develop    #1258      +/-   ##
===========================================
+ Coverage    59.73%   59.83%   +0.09%     
===========================================
  Files         1007     1007              
  Lines        17661    17662       +1     
  Branches      4032     4033       +1     
===========================================
+ Hits         10550    10568      +18     
+ Misses        7111     7094      -17     
Impacted Files Coverage Δ
src/cascader/Cascader.tsx 57.89% <0.00%> (ø)
src/tabs/TabBar.tsx 100.00% <100.00%> (+60.71%) :arrow_up:
src/tabs/TabNav.tsx 85.10% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

codecov-commenter avatar Aug 10 '22 08:08 codecov-commenter

更新下snapshot

honkinglin avatar Aug 12 '22 08:08 honkinglin

更新下snapshot

我的问题应该不是因为 snapshot,我没有改动 example 我看了一下挂掉的原因 tab bar 的 style 在 describe 和 test 俩个级别下的测试结果不一样 我上一个 commit 都没有这个问题来着 可能是修改的内容导致的

NWYLZW avatar Aug 12 '22 15:08 NWYLZW