fix(pro:search): rest count should hide when no item is overflowed (#…

…1736)
IDuxFE · Nov 6, 2023 · a436e92 · a436e92
1 parent bb75c13
commit a436e92
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 14 deletions.
diff --git a/packages/components/_private/overflow/src/Item.tsx b/packages/components/_private/overflow/src/Item.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { defineComponent, ref } from 'vue'
+import { defineComponent, onUnmounted, ref } from 'vue'
 
 import { useResizeObserver } from '@idux/cdk/resize'
 import { callEmit } from '@idux/cdk/utils'
@@ -19,6 +19,9 @@ export default defineComponent({
     const itemElRef = ref<HTMLElement | undefined>()
     const handleResize = (entry: ResizeObserverEntry) => callEmit(props.onSizeChange, entry, props.itemKey ?? '')
     useResizeObserver(itemElRef, handleResize)
+    onUnmounted(() => {
+      callEmit(props.onSizeChange, undefined, props.itemKey ?? '')
+    })
 
     return () => {
       return (

diff --git a/packages/components/_private/overflow/src/Overflow.tsx b/packages/components/_private/overflow/src/Overflow.tsx
@@ -142,7 +142,7 @@ export default defineComponent({
           class={`${mergedPrefixCls.value}-rest`}
           itemKey={restNodeKey}
           display={displayRest.value}
-          onSizeChange={({ contentRect }) => (restWidth.value = contentRect.width ?? 0)}
+          onSizeChange={entry => (restWidth.value = entry?.contentRect.width ?? 0)}
         >
           {nodeContent}
         </Item>
@@ -156,7 +156,7 @@ export default defineComponent({
           {...itemSharedProps}
           class={`${mergedPrefixCls.value}-suffix`}
           itemKey={suffixNodeKey}
-          onSizeChange={({ contentRect }) => (suffixWidth.value = contentRect.width ?? 0)}
+          onSizeChange={entry => (suffixWidth.value = entry?.contentRect.width ?? 0)}
         >
           {nodeContent}
         </Item>
@@ -199,15 +199,11 @@ const useContainerSize = (containerElRef: Ref<HTMLElement | undefined>) => {
 
 const useItemSize = () => {
   const itemsWidthMap = ref<Map<VKey, number>>(new Map())
-  const setItemWidth = (key: VKey, entry: ResizeObserverEntry) => {
-    const {
-      contentRect: { width },
-      target,
-    } = entry
-    if (!target && itemsWidthMap.value.get(key)) {
+  const setItemWidth = (key: VKey, entry?: ResizeObserverEntry) => {
+    if (!entry?.target && itemsWidthMap.value.get(key)) {
       itemsWidthMap.value.delete(key)
-    } else if (width) {
-      itemsWidthMap.value.set(key, width)
+    } else if (entry?.contentRect.width) {
+      itemsWidthMap.value.set(key, entry.contentRect.width)
     }
   }
 

diff --git a/packages/components/_private/overflow/src/types.ts b/packages/components/_private/overflow/src/types.ts
@@ -29,7 +29,7 @@ export const overflowItemProps = {
     required: true,
   },
   data: Object as PropType<ItemData>,
-  onSizeChange: Function as PropType<(entry: ResizeObserverEntry, key?: VKey) => void>,
+  onSizeChange: Function as PropType<(entry: ResizeObserverEntry | undefined, key?: VKey) => void>,
 } as const
 
 export const overflowProps = {

diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx
@@ -182,6 +182,10 @@ export default defineComponent({
         rest: (rest: (SearchItem | typeof nameSelectOverflowItemKey)[]) => {
           const restItems = rest.filter(item => item !== nameSelectOverflowItemKey)
 
+          if (!restItems.length) {
+            return
+          }
+
           return (
             <span class={`${prefixCls}-search-item ${prefixCls}-search-item-tag`}>
               {slots.overflowedLabel?.(restItems) ?? `+ ${restItems.length}`}

diff --git a/packages/pro/search/src/components/segment/SegmentInput.tsx b/packages/pro/search/src/components/segment/SegmentInput.tsx
@@ -96,7 +96,7 @@ export default defineComponent({
       const { class: className, style, ...rest } = attrs
 
       return (
-        <span ref={segmentWrapperRef} class={normalizeClass([classes.value, className])}>
+        <span ref={segmentWrapperRef} class={normalizeClass([classes.value, className])} style={style as CSSProperties}>
           <span
             v-show={props.ellipsis && leftSideEllipsis.value}
             class={`${prefixCls}-ellipsis-left`}
@@ -107,7 +107,6 @@ export default defineComponent({
           <input
             ref={segmentInputRef}
             class={`${prefixCls}-inner`}
-            style={style as CSSProperties}
             value={input.value ?? ''}
             disabled={props.disabled}
             placeholder={props.placeholder}