fix: trigger onFilterResultChanged when filtered

alibaba · Jan 5, 2024 · e1f3a11 · e1f3a11
1 parent 173978f
commit e1f3a11
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/packages/plugin-outline-pane/src/views/filter-tree.ts b/packages/plugin-outline-pane/src/views/filter-tree.ts
@@ -77,6 +77,11 @@ export const matchTreeNode = (
       return matchTreeNode(childNode, keywords, filterOps);
     }).find(Boolean);
 
+  // 如果命中了子节点，需要将该节点展开
+  if (matchChild && treeNode.expandable) {
+    treeNode.setExpanded(true);
+  }
+
   treeNode.setFilterReult({
     filterWorking: true,
     matchChild,

diff --git a/packages/plugin-outline-pane/src/views/tree-node.tsx b/packages/plugin-outline-pane/src/views/tree-node.tsx
@@ -34,7 +34,7 @@ class ModalTreeNodeView extends PureComponent<{
   }
 
   componentDidMount(): void {
-    const rootTreeNode = this.rootTreeNode;
+    const { rootTreeNode } = this;
     rootTreeNode.onExpandableChanged(() => {
       this.setState({
         treeChildren: rootTreeNode.children,
@@ -53,7 +53,7 @@ class ModalTreeNodeView extends PureComponent<{
   }
 
   render() {
-    const rootTreeNode = this.rootTreeNode;
+    const { rootTreeNode } = this;
     const { expanded } = rootTreeNode;
 
     const hasVisibleModalNode = !!this.modalNodesManager?.getVisibleModalNode();
@@ -98,6 +98,9 @@ export default class TreeNodeView extends PureComponent<{
     conditionFlow: boolean;
     expandable: boolean;
     treeChildren: TreeNode[] | null;
+    filterWorking: boolean;
+    matchChild: boolean;
+    matchSelf: boolean;
   } = {
     expanded: false,
     selected: false,
@@ -110,6 +113,9 @@ export default class TreeNodeView extends PureComponent<{
     conditionFlow: false,
     expandable: false,
     treeChildren: [],
+    filterWorking: false,
+    matchChild: false,
+    matchSelf: false,
   };
 
   eventOffCallbacks: Array<IPublicTypeDisposable | undefined> = [];
@@ -154,6 +160,10 @@ export default class TreeNodeView extends PureComponent<{
         treeChildren: treeNode.children,
       });
     });
+    treeNode.onFilterResultChanged(() => {
+      const { filterWorking: newFilterWorking, matchChild: newMatchChild, matchSelf: newMatchSelf } = treeNode.filterReult;
+      this.setState({ filterWorking: newFilterWorking, matchChild: newMatchChild, matchSelf: newMatchSelf });
+    });
     this.eventOffCallbacks.push(
       doc?.onDropLocationChanged(() => {
         this.setState({
@@ -216,7 +226,7 @@ export default class TreeNodeView extends PureComponent<{
     let shouldShowModalTreeNode: boolean = this.shouldShowModalTreeNode();
 
     // filter 处理
-    const { filterWorking, matchChild, matchSelf } = treeNode.filterReult;
+    const { filterWorking, matchChild, matchSelf } = this.state;
     if (!isRootNode && filterWorking && !matchChild && !matchSelf) {
       // 条件过滤生效时，如果未命中本节点或子节点，则不展示该节点
       // 根节点始终展示

diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx
@@ -29,9 +29,15 @@ export default class TreeTitle extends PureComponent<{
     title: string;
     condition?: boolean;
     visible?: boolean;
+    filterWorking: boolean;
+    keywords: string;
+    matchSelf: boolean;
   } = {
     editing: false,
     title: '',
+    filterWorking: false,
+    keywords: '',
+    matchSelf: false,
   };
 
   private lastInput?: HTMLInputElement;
@@ -100,6 +106,10 @@ export default class TreeTitle extends PureComponent<{
         visible: !hidden,
       });
     });
+    treeNode.onFilterResultChanged(() => {
+      const { filterWorking: newFilterWorking, keywords: newKeywords, matchSelf: newMatchSelf } = treeNode.filterReult;
+      this.setState({ filterWorking: newFilterWorking, keywords: newKeywords, matchSelf: newMatchSelf });
+    });
   }
   deleteClick = () => {
     const { treeNode } = this.props;
@@ -109,7 +119,7 @@ export default class TreeTitle extends PureComponent<{
   render() {
     const { treeNode, isModal } = this.props;
     const { pluginContext } = treeNode;
-    const { editing } = this.state;
+    const { editing, filterWorking, matchSelf, keywords } = this.state;
     const isCNode = !treeNode.isRoot();
     const { node } = treeNode;
     const { componentMeta } = node;
@@ -125,11 +135,9 @@ export default class TreeTitle extends PureComponent<{
         marginLeft: -indent,
       };
     }
-    const { filterWorking, matchSelf, keywords } = treeNode.filterReult;
     const Extra = pluginContext.extraTitle;
     const { intlNode, common, config } = pluginContext;
-    const Tip = common.editorCabin.Tip;
-    const Title = common.editorCabin.Title;
+    const { Tip, Title } = common.editorCabin;
     const couldHide = availableActions.includes('hide');
     const couldLock = availableActions.includes('lock');
     const couldUnlock = availableActions.includes('unlock');
@@ -253,7 +261,7 @@ class RenameBtn extends PureComponent<{
 }> {
   render() {
     const { intl, common } = this.props.treeNode.pluginContext;
-    const Tip = common.editorCabin.Tip;
+    const { Tip } = common.editorCabin;
     return (
       <div
         className="tree-node-rename-btn"
@@ -274,7 +282,7 @@ class LockBtn extends PureComponent<{
   render() {
     const { treeNode, locked } = this.props;
     const { intl, common } = this.props.treeNode.pluginContext;
-    const Tip = common.editorCabin.Tip;
+    const { Tip } = common.editorCabin;
     return (
       <div
         className="tree-node-lock-btn"
@@ -300,7 +308,7 @@ class HideBtn extends PureComponent<{
   render() {
     const { treeNode, hidden } = this.props;
     const { intl, common } = treeNode.pluginContext;
-    const Tip = common.editorCabin.Tip;
+    const { Tip } = common.editorCabin;
     return (
       <div
         className="tree-node-hide-btn"