style: fix cascader, TreeSelect style when emptyContent is null, unified with select (#2476)

* fix: [Cascader] emptycontent is null, perfomance same as Select
* fix: [TreeSelect] emptycontent is null, perfomance same as Select

packages/semi-foundation/treeSelect/treeSelect.scss

@@ -373,6 +373,10 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tree-option-list {
             flex: 1;
             min-width: $width-treeSelect_option;
+
+            &-hidden {
+                padding: 0;
+            }
         }
 
         .#{$prefix}-tree-search-wrapper {

packages/semi-ui/cascader/_story/cascader.stories.jsx

@@ -2399,51 +2399,32 @@ export const SearchInTopSlot = () => {
 }
 
 export const suffix = () => {
-  const treeData = [
-    {
-        label: '浙江省',
-        value: 'zhejiang',
-        children: [
-            {
-                label: '杭州市',
-                value: 'hangzhou',
-                children: [
-                    {
-                        label: '西湖区',
-                        value: 'xihu',
-                    },
-                    {
-                        label: '萧山区',
-                        value: 'xiaoshan',
-                    },
-                    {
-                        label: '临安区',
-                        value: 'linan',
-                    },
-                ],
-            },
-            {
-                label: '宁波市',
-                value: 'ningbo',
-                children: [
-                    {
-                        label: '海曙区',
-                        value: 'haishu',
-                    },
-                    {
-                        label: '江北区',
-                        value: 'jiangbei',
-                    }
-                ]
-            },
-        ],
-    }
-  ];
-
   return (<Cascader
     suffix={<IconGift />}
     style={{ width: 300 }}
-    treeData={treeData}
+    treeData={treeData1}
     placeholder="请选择所在地区"
   />);
 }
+
+export const EmptyContent = () => {
+  return (
+  <>
+    <Cascader
+      emptyContent={null}
+      style={{ width: 400 }}
+      treeData={[]}
+      placeholder="点击 trigger 查看 emptyContent 为 null 效果 "
+      filterTreeNode
+    />
+    <br /><br />
+    <Cascader
+      emptyContent={null}
+      style={{ width: 400 }}
+      treeData={treeData1}
+      placeholder="输入 v 查看搜索状态下 emptyContent 为 null 效果"
+      filterTreeNode
+    />
+    <br />
+  </>)
+}

packages/semi-ui/cascader/item.tsx

@@ -360,6 +360,9 @@ export default class Item extends PureComponent<CascaderItemProps> {
 
     renderEmpty() {
         const { emptyContent } = this.props;
+        if (emptyContent === null) {
+            return null;
+        }
         return (
             <LocaleConsumer componentName="Cascader">
                 {(locale: Locale['Cascader']) => (

packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx

@@ -2832,4 +2832,60 @@ export const showFilteredOnly = () => {
           />
       </>
   );
+}
+
+export const EmptyContent = () => {
+  const treeData = [
+    {
+        label: '亚洲',
+        value: 'Asia',
+        key: '0',
+        children: [
+            {
+                label: '中国',
+                value: 'China',
+                key: '0-0',
+                children: [
+                    {
+                        label: '北京',
+                        value: 'Beijing',
+                        key: '0-0-0',
+                    },
+                    {
+                        label: '上海',
+                        value: 'Shanghai',
+                        key: '0-0-1',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        label: '北美洲',
+        value: 'North America',
+        key: '1',
+    }
+  ];
+  return ( 
+      <>
+        <TreeSelect
+          style={{ width: 400 }}
+          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+          treeData={[]}
+          placeholder="点击 trigger 查看 emptyContent 为 null 效果"
+          emptyContent={null}
+        />
+        <br /><br />
+        <TreeSelect
+          style={{ width: 400 }}
+          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+          treeData={treeData}
+          placeholder="输入 v 查看 emptyContent 为 null 效果"
+          filterTreeNode
+          showFilteredOnly
+          searchPosition={"trigger"}
+          emptyContent={null}
+        />
+      </>
+  );
 }

packages/semi-ui/treeSelect/index.tsx

@@ -1346,6 +1346,9 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
 
     renderEmpty = () => {
         const { emptyContent } = this.props;
+        if (emptyContent === null) {
+            return null;
+        }
         if (emptyContent) {
             return <TreeNode empty emptyContent={this.props.emptyContent} />;
         } else {
@@ -1490,14 +1493,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             renderLabel,
             renderFullLabel,
             checkRelation,
+            emptyContent
         } = this.props;
         const wrapperCls = cls(`${prefixTree}-wrapper`);
-        const listCls = cls(`${prefixTree}-option-list`, {
-            [`${prefixTree}-option-list-block`]: true,
-        });
         const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
         const noData = isEmpty(flattenNodes) || (showFilteredOnly && searchNoRes);
         const isDropdownPositionSearch = searchPosition === strings.SEARCH_POSITION_DROPDOWN;
+        const listCls = cls(`${prefixTree}-option-list ${prefixTree}-option-list-block`, {
+            [`${prefixTree}-option-list-hidden`]: emptyContent === null && noData,
+        });
         return (
             <TreeContext.Provider
                 value={{