@bit-sun/business-component 4.0.12-alpha.12 → 4.0.12-alpha.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.0.12-alpha.12",
+  "version": "4.0.12-alpha.17",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Functional/SearchSelect/index.less

@@ -2,6 +2,19 @@
 @primary-color: #005cff;
 
 .search_select {
+  // 选择器 隐藏滚动条 横向滑动
+  .ant-select-selector{
+    height: 24px;
+    overflow: hidden;
+    .ant-select-selection-overflow{
+      height: 40px;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+    .ant-select-selection-overflow-item {
+      align-self: auto;
+    }
+  }
   &_show {
     display: flex;
 
@@ -300,3 +313,11 @@
     height: 300px !important;
   }
 }
+
+.searchSelectMaxTagToolTip {
+  .ant-tooltip-inner {
+    max-height: 72px;
+    overflow-x: auto;
+    padding: 0px;
+  }
+}

package/src/components/Functional/SearchSelect/index.tsx

@@ -92,6 +92,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const [items, setItems] = useState([]);
   const [selectOpen, setSelectOpen] = useState(false);
+  const [isMaxTagsOpen, setIsMaxTagsOpen] = useState(false);
   const [scrollPage, setScrollPage] = useState(1);
   const [itemsTotal, setItemsTotal] = useState(0);
   const [fetching, setFetching] = useState(false);
@@ -922,6 +923,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }
 
   const onDropdownVisibleChange = (visible) => {
+    // 阻止maxTagPlaceholder点击事件触发下拉框展示事件
+    if(isMaxTagsOpen && !selectOpen) return; 
+    
     setSelectOpen(visible); 
     // 关闭下拉框 如果首次本身就不展示数据的 没有选中数据-需要清空查询数据源; 首次展示的默认展示
     if (!visible && !value?.length) {
@@ -995,15 +999,33 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       onChange(newValue);
     }
     return (
-      <Tooltip title={selectedValues.map((i: any) => (
-        <Tag
-          closable={true}
-          onClose={(e) => onClose(e, i)}
-          style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
-        >
-          {i.label}
-        </Tag>
-      ))}>
+      <Tooltip 
+        overlayClassName='searchSelectMaxTagToolTip'
+        destroyTooltipOnHide 
+        placement="topRight" 
+        autoAdjustOverflow={false} 
+        title={(
+          <div 
+            style={{ margin: '6px 8px 0px' }}
+            onMouseEnter={() => {
+              setIsMaxTagsOpen(true)
+            }}
+            onMouseLeave={() => {
+              setIsMaxTagsOpen(false)
+            }}
+          >
+            {selectedValues.map((i: any) => (
+              <Tag
+                closable={true}
+                onClose={(e) => onClose(e, i)}
+                style={{ margin: '0px 3px 3px 0px', background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
+              >
+                {i.label}
+              </Tag>
+            ))}
+          </div>
+        )}
+      >
         {`+ ${selectedValues?.length}`}
       </Tooltip>
     )

package/src/components/Functional/SearchSelect/utils.ts

@@ -47,9 +47,12 @@ export const getCurrentSRKs = (selectMode: any,labelInValue:boolean,value: any)
 }
 
 export const getRenderSource = (currentSRKs: any, items: any) => {
+  // 判空处理
+  if(!currentSRKs?.length) return items||[];
+
   // 创建映射对象 用于记录原始选中顺序
   const orderMap = new Map<number, number>();
-  currentSRKs.forEach((value: any, index: number) => {
+  currentSRKs?.forEach((value: any, index: number) => {
     orderMap.set(value, index);
   });