style: [Tree][TreeSelect] When filterTreeNode & treeNodeFilterProp is not label, only the search content is highlighted instead of the entire line (#1764)

Co-authored-by: pointhalo <[email protected]>

packages/semi-foundation/tree/tree.scss

@@ -134,13 +134,9 @@ $module: #{$prefix}-tree;
             }
         }
 
-        &-highlight,
-        &-filtered {
-            &,
-            .#{$prefix}-checkbox-addon {
-                font-weight: $font-tree_option_hightlight-fontWeight;
-                color: $color-tree_option_hightlight-text;
-            }
+        &-highlight {
+            font-weight: $font-tree_option_hightlight-fontWeight;
+            color: $color-tree_option_hightlight-text;
         }
 
         &-hidden {

packages/semi-ui/tree/__test__/tree.test.js

@@ -98,6 +98,43 @@ const treeData2 = [
     }
 ];
 
+const treeData3 = [
+    {
+        label: '亚洲',
+        value: 'Asia',
+        key: '0',
+        newLabel: '亚洲#1#yazhou',
+        children: [
+            {
+                label: '中国',
+                value: 'China',
+                key: '0-0',
+                newLabel: '中国#2#zhongguo',
+                children: [
+                    {
+                        label: '北京',
+                        value: 'Beijing',
+                        key: '0-0-0',
+                        newLabel: '北京#3#beijing',
+                    },
+                    {
+                        label: '上海',
+                        value: 'Shanghai',
+                        key: '0-0-1',
+                        newLabel: '上海#4#shanghai',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        label: '北美洲',
+        value: 'North America',
+        newLabel: '北美洲#5#beimeizhou',
+        key: '1',
+    }
+];
+
 const dragNodeData = {"label":"亚洲","value":"Yazhou","key":"yazhou","children":[{"label":"中国","value":"Zhongguo","key":"zhongguo","children":[{"label":"北京","value":"Beijing","key":"beijing"},{"label":"上海","value":"Shanghai","key":"shanghai"}]},{"label":"日本","value":"Riben","key":"riben","children":[{"label":"东京","value":"Dongjing","key":"dongjing"},{"label":"大阪","value":"Daban","key":"daban"}]}],"expanded":false,"pos":"0-0"}
 const dropNodeData = {"label":"北美洲","value":"Beimeizhou","key":"beimeizhou","children":[{"label":"美国","value":"Meiguo","key":"meiguo"},{"label":"加拿大","value":"Jianada","key":"jianada"}],"expanded":false,"pos":"0-1"}
 
@@ -455,10 +492,6 @@ describe('Tree', () => {
         let event2 = { target: { value: searchValue2 } };
         searchWrapper2.find('input').simulate('change', event2);
         expect(tree2.find(`.${BASE_CLASS_PREFIX}-tree-option`).length).toEqual(10);
-        expect(tree2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).length).toEqual(3);
-        expect(tree2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).at(0).instance().textContent).toEqual('上海');
-        expect(tree2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).at(1).instance().textContent).toEqual('大阪');
-        expect(tree2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).at(2).instance().textContent).toEqual('加拿大');
     });
 
     it('filterTreeNode + no result', () => {
@@ -482,10 +515,24 @@ describe('Tree', () => {
         let event2 = { target: { value: searchValue2 } };
         searchWrapper2.find('input').simulate('change', event2);
         expect(tree2.find(`.${BASE_CLASS_PREFIX}-tree-option`).length).toEqual(2);
-        expect(tree2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).length).toEqual(0);
-        
     });
 
+    if('filterTreeNode + treeNodeFilterProp + hightLight right') {
+        let tree = getTree({
+            treeData: treeData3,
+            filterTreeNode: true,
+            treeNodeFilterProp: 'newLabel'
+        });
+        const searchWrapper = tree.find(`.${BASE_CLASS_PREFIX}-tree-search-wrapper`);
+        let searchValue = '中';
+        let event = { target: { value: searchValue } };
+        searchWrapper.find('input').simulate('change', event);
+        expect(tree.find(`.${BASE_CLASS_PREFIX}-tree-option`).length).toEqual(3);
+        expect(tree.find(`.${BASE_CLASS_PREFIX}-tree-option-highlight`).length).toEqual(1);
+        expect(tree.find(`.${BASE_CLASS_PREFIX}-tree-option-highlight`).instance().textContent).toEqual("中");
+        tree.unmount();
+    }
+
     it('filterTreeNode + showFilteredOnly + no result', () => {
         let tree = getTree({
             filterTreeNode: true,

packages/semi-ui/tree/treeNode.tsx

@@ -282,7 +282,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         const { label, keyword, data, filtered, treeNodeFilterProp } = this.props;
         if (isFunction(renderLabel)) {
             return renderLabel(label, data);
-        } else if (isString(label) && filtered && keyword && treeNodeFilterProp === 'label') {
+        } else if (isString(label) && filtered && keyword) {
             return getHighLightTextHTML({
                 sourceString: label,
                 searchWords: [keyword],
@@ -339,7 +339,6 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
             [`${prefixcls}-selected`]: selected,
             [`${prefixcls}-active`]: !multiple && active,
             [`${prefixcls}-ellipsis`]: labelEllipsis,
-            [`${prefixcls}-filtered`]: filtered && treeNodeFilterProp !== 'label',
             [`${prefixcls}-drag-over`]: !disabled && dragOver,
             [`${prefixcls}-draggable`]: !disabled && draggable && !renderFullLabel,
             // When draggable + renderFullLabel is enabled, the default style

packages/semi-ui/treeSelect/__test__/treeSelect.test.js

@@ -641,10 +641,6 @@ describe('TreeSelect', () => {
         let event2 = { target: { value: searchValue2 } };
         searchWrapper2.find('input').simulate('change', event2);
         expect(treeSelect2.find(`.${BASE_CLASS_PREFIX}-tree-option`).length).toEqual(10);
-        expect(treeSelect2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).length).toEqual(3);
-        expect(treeSelect2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).at(0).instance().textContent).toEqual('上海');
-        expect(treeSelect2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).at(1).instance().textContent).toEqual('大阪');
-        expect(treeSelect2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).at(2).instance().textContent).toEqual('加拿大');
     });
 
     it('filterTreeNode + no result', () => {
@@ -668,7 +664,6 @@ describe('TreeSelect', () => {
         let event2 = { target: { value: searchValue2 } };
         searchWrapper2.find('input').simulate('change', event2);
         expect(treeSelect2.find(`.${BASE_CLASS_PREFIX}-tree-option`).length).toEqual(2);
-        expect(treeSelect2.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).length).toEqual(0);
     });
 
     it('async load data', () => {
@@ -702,9 +697,6 @@ describe('TreeSelect', () => {
         let event = { target: { value: searchValue } };
         searchWrapper.find('input').simulate('change', event);
         expect(treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-option`).length).toEqual(6);
-        expect(treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).length).toEqual(2);
-        expect(treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).at(0).instance().textContent).toEqual('北京');
-        expect(treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-option-filtered`).at(1).instance().textContent).toEqual('北美洲');
     });
 
     it('filterTreeNode + showFilteredOnly + no result', () => {