feat(Tree): support scrollIntoView, close #2930 #4860
Conversation
wangw11056
force-pushed
the
fix-issue-2930
branch
from
d71eb25
to
dda2e20
Compare
| @@ -1239,7 +1281,7 @@ export class Tree extends Component<TreeProps, TreeState> { | |||
| return ( | |||
| <ul | |||
| role="tree" | |||
| ref={ref} | |||
| ref={ref || this.normalListRef} | |||
There was a problem hiding this comment.
normalListRef 是在 ref 没有时才有用，这样感觉后续基于 normalListRef 的逻辑都很不稳定
There was a problem hiding this comment.
如果要两个地方都要拿到 ref，那应该是包裹在同一个函数里。
| * @defaultValue false | ||
| * @skip | ||
| */ | ||
| scrollIntoView?: boolean; |
There was a problem hiding this comment.
这个名字感觉不是很准确，应该强调是将 filter 的 node 滚动到 view。另外这个属性为什么要 @Skip？还有就是解释里的话应该说明一下是将哪个 filter 的 node 滚到到视区内。
| const itemNode = treeNode.querySelector< | ||
| HTMLElement & { scrollIntoViewIfNeeded?: () => void } | ||
| >(`.${prefix}tree-node.${prefix}filtered`); | ||
| itemNode && itemNode.scrollIntoViewIfNeeded && itemNode.scrollIntoViewIfNeeded(); |
There was a problem hiding this comment.
scrollIntoViewIfNeeded 是有兼容性问题的，应该考虑 fallback 到 scrollIntoView，参考其他组件实现，另外这一连串的判断用 optional chain 就可以了。
| const { prefix } = this.props; | ||
|
|
||
| clearTimeout(this.highlightTimer); | ||
| this.highlightTimer = window.setTimeout(() => { |
There was a problem hiding this comment.
这个叫 highlightTimer 是有点奇怪的，这里面做的并不是 highlight 的事情。另外这个 timer 在没有组件销毁时的处理逻辑。
| this.virtualListRef = createRef(); | ||
|
|
||
| this.handleTreeNodeScrollIntoView(); |
There was a problem hiding this comment.
不要在 constructor 里引入副效应，如果需要组件 mount 后立刻执行，可以是在didMount 里做
| @@ -531,6 +540,39 @@ export class Tree extends Component<TreeProps, TreeState> { | |||
| }; | |||
| } | |||
|
|
|||
| componentDidUpdate() { | |||
| this.handleTreeNodeScrollIntoView(); | |||
There was a problem hiding this comment.
这个感觉太频繁了，会影响性能，同时可能会影响到用户的正常操作，每次 scroll 都会改变位置，对用户也是打扰，还是需要比较谨慎的。这里至少应该是只在筛选词发生变化时才执行，这样才比较符合用户预期。
Add a new property to the Tree component to support the scrollIntoView when using the filterTreeNode property. close #2930