fix(pro:search): searchable fields should keep search text after valu…

…e change (#1796)
IDuxFE · Jan 8, 2024 · 97cf777 · 97cf777
1 parent 613079d
commit 97cf777
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 13 deletions.
diff --git a/packages/pro/search/src/segments/CreateCascaderSegment.tsx b/packages/pro/search/src/segments/CreateCascaderSegment.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { CascaderPanelData, CascaderSearchField, PanelRenderContext, Segment } from '../types'
+import type { CascaderPanelData, CascaderSearchField, PanelRenderContext, Segment, SegmentState } from '../types'
 
 import { ref } from 'vue'
 
@@ -110,7 +110,7 @@ export function createCascaderSegment(
     inputClassName: [`${prefixCls}-cascader-segment-input`],
     containerClassName: [`${prefixCls}-cascader-segment-container`],
     parse: input => parseInput(input, config, nodeLabelMap, checkedKeysResolver, parentKeyMap),
-    format: value => formatValue(value, config, nodeKeyMap),
+    format: (value, states) => formatValue(value, states, config, nodeKeyMap),
     panelRenderer,
   }
 }
@@ -138,19 +138,32 @@ function parseInput(
 
 function formatValue(
   value: VKey | (VKey | VKey[])[] | undefined,
+  states: SegmentState[] | undefined,
   config: CascaderSearchField['fieldConfig'],
   nodeKeyMap: Map<VKey, CascaderPanelData>,
 ): string {
-  const { fullPath, multiple, separator, pathSeparator } = config
+  const { fullPath, multiple, separator, pathSeparator, searchable } = config
   if (isNil(value)) {
     return ''
   }
 
-  return getLabelByKeys(
+  const _separator = separator ?? defaultSeparator
+  const labels = getLabelByKeys(
     nodeKeyMap,
     (multiple ? value : [value]) as VKey[] | VKey[][],
     fullPath ?? defaultFullPath ? pathSeparator ?? defaultPathSeparator : undefined,
-  ).join(` ${separator ?? defaultSeparator} `)
+  )
+
+  if (searchable) {
+    const inputParts = states ? states[states.length - 1]?.input?.split(_separator) ?? [] : []
+    const lastInputPart = inputParts[inputParts.length - 1]?.trim() as string | undefined
+
+    if (lastInputPart && !labels.includes(lastInputPart)) {
+      return [...labels, lastInputPart].join(` ${_separator} `)
+    }
+  }
+
+  return labels.join(` ${_separator} `)
 }
 
 function getLabelByKeys(

diff --git a/packages/pro/search/src/segments/CreateSelectSegment.tsx b/packages/pro/search/src/segments/CreateSelectSegment.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { PanelRenderContext, Segment, SelectPanelData, SelectSearchField } from '../types'
+import type { PanelRenderContext, Segment, SegmentState, SelectPanelData, SelectSearchField } from '../types'
 import type { ProSearchLocale } from '@idux/pro/locales'
 
 import { isNil, toString } from 'lodash-es'
@@ -68,7 +68,7 @@ export function createSelectSegment(
     inputClassName: [`${prefixCls}-select-segment-input`],
     containerClassName: [`${prefixCls}-select-segment-container`],
     parse: input => parseInput(input, config, locale.allSelected),
-    format: value => formatValue(value, config, locale.allSelected),
+    format: (value, states) => formatValue(value, states, config, locale.allSelected),
     panelRenderer,
   }
 }
@@ -91,10 +91,11 @@ function parseInput(
 
 function formatValue(
   value: VKey | VKey[] | undefined,
+  states: SegmentState[] | undefined,
   config: SelectSearchField['fieldConfig'],
   allSelected: string,
 ): string {
-  const { concludeAllSelected, dataSource, separator } = config
+  const { concludeAllSelected, dataSource, separator, searchable } = config
   if (isNil(value)) {
     return ''
   }
@@ -105,7 +106,19 @@ function formatValue(
     return allSelected
   }
 
-  return getLabelByKeys(dataSource, convertArray(value)).join(` ${separator ?? defaultSeparator} `)
+  const _separator = separator ?? defaultSeparator
+  const labels = getLabelByKeys(dataSource, convertArray(value))
+
+  if (searchable) {
+    const inputParts = states ? states[states.length - 1]?.input?.split(_separator) ?? [] : []
+    const lastInputPart = inputParts[inputParts.length - 1]?.trim() as string | undefined
+
+    if (lastInputPart && !labels.includes(lastInputPart)) {
+      return [...labels, lastInputPart].join(` ${_separator} `)
+    }
+  }
+
+  return labels.join(` ${_separator} `)
 }
 
 function getLabelByKeys(dataSource: SelectPanelData[], keys: VKey[]): (string | number)[] {

diff --git a/packages/pro/search/src/segments/CreateTreeSelectSegment.tsx b/packages/pro/search/src/segments/CreateTreeSelectSegment.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { PanelRenderContext, Segment, TreeSelectPanelData, TreeSelectSearchField } from '../types'
+import type { PanelRenderContext, Segment, SegmentState, TreeSelectPanelData, TreeSelectSearchField } from '../types'
 
 import { isNil, isString, toString } from 'lodash-es'
 
@@ -111,7 +111,7 @@ export function createTreeSelectSegment(
     inputClassName: [`${prefixCls}-tree-select-segment-input`],
     containerClassName: [`${prefixCls}-tree-select-segment-container`],
     parse: input => parseInput(input, config, nodeLabelMap),
-    format: value => formatValue(value, config, nodeKeyMap),
+    format: (value, states) => formatValue(value, states, config, nodeKeyMap),
     panelRenderer,
   }
 }
@@ -131,15 +131,28 @@ function parseInput(
 
 function formatValue(
   value: VKey | VKey[] | undefined,
+  states: SegmentState[] | undefined,
   config: TreeSelectSearchField['fieldConfig'],
   nodeKeyMap: Map<VKey, TreeSelectPanelData>,
 ): string {
-  const { separator } = config
+  const { separator, searchable } = config
   if (isNil(value)) {
     return ''
   }
 
-  return getLabelByKeys(nodeKeyMap, convertArray(value)).join(` ${separator ?? defaultSeparator} `)
+  const _separator = separator ?? defaultSeparator
+  const labels = getLabelByKeys(nodeKeyMap, convertArray(value))
+
+  if (searchable) {
+    const inputParts = states ? states[states.length - 1]?.input?.split(_separator) ?? [] : []
+    const lastInputPart = inputParts[inputParts.length - 1]?.trim() as string | undefined
+
+    if (lastInputPart && !labels.includes(lastInputPart)) {
+      return [...labels, lastInputPart].join(` ${_separator} `)
+    }
+  }
+
+  return labels.join(` ${_separator} `)
 }
 
 function getLabelByKeys(nodeKeyMap: Map<VKey, TreeSelectPanelData>, keys: VKey[]): (string | number)[] {