feat(pro:search): temp state is now cleared after blur, add merge ite…

…ms demo (#1253) * feat(pro:search): temp state is now cleared after blur * docs(pro:search): add merge items demo
IDuxFE · Nov 5, 2022 · 775901e · 775901e
1 parent f3aa234
commit 775901e
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 51 deletions.
diff --git a/packages/pro/search/demo/MergeItems.md b/packages/pro/search/demo/MergeItems.md
@@ -0,0 +1,14 @@
+---
+order: 22
+title:
+  zh: 合并同类选项
+  en: Merge items
+---
+
+## zh
+
+合并同类选项并置于尾部。
+
+## en
+
+Merge items of same key then place it at the end of all items.
diff --git a/packages/pro/search/demo/MergeItems.vue b/packages/pro/search/demo/MergeItems.vue
@@ -0,0 +1,115 @@
+<template>
+  <IxProSearch
+    :value="value"
+    style="width: 100%"
+    :searchFields="searchFields"
+    :onSearch="onSearch"
+    :onUpdate:value="handleValueUpdate"
+  ></IxProSearch>
+</template>
+
+<script setup lang="ts">
+import type { SearchField, SearchValue } from '@idux/pro/search'
+
+import { reactive, ref } from 'vue'
+
+const value = ref<SearchValue[]>([
+  {
+    key: 'level',
+    name: 'Level',
+    operator: '=',
+    value: 'level1',
+  },
+  {
+    key: 'keyword',
+    name: '',
+    value: 'custom keyword',
+  },
+])
+const securityStateField = reactive<SearchField>({
+  type: 'select',
+  label: 'Security State',
+  key: 'security_state',
+  multiple: true,
+  fieldConfig: {
+    multiple: true,
+    searchable: true,
+    dataSource: [
+      {
+        key: 'fatal',
+        label: 'fatal',
+      },
+      {
+        key: 'high',
+        label: 'high',
+      },
+      {
+        key: 'mediumn',
+        label: 'mediumn',
+      },
+      {
+        key: 'low',
+        label: 'low',
+      },
+    ],
+  },
+})
+const searchFields: SearchField[] = reactive([
+  {
+    key: 'keyword',
+    type: 'input',
+    label: 'Keyword',
+    multiple: true,
+    fieldConfig: {
+      trim: true,
+    },
+  },
+  {
+    type: 'select',
+    label: 'Level',
+    key: 'level',
+    operators: ['=', '!='],
+    defaultOperator: '=',
+    fieldConfig: {
+      multiple: false,
+      searchable: true,
+      dataSource: [
+        {
+          key: 'level1',
+          label: 'Level 1',
+        },
+        {
+          key: 'level2',
+          label: 'Level 2',
+        },
+        {
+          key: 'level3',
+          label: 'Level 3',
+        },
+      ],
+    },
+  },
+  securityStateField,
+])
+
+const handleValueUpdate = (searchValues: SearchValue[] | undefined) => {
+  const securityStateValues = searchValues?.filter(v => v.key === 'security_state') as
+    | SearchValue<string[]>[]
+    | undefined
+
+  if (!securityStateValues?.length) {
+    value.value = searchValues ?? []
+    return
+  }
+
+  const currentValue = securityStateValues.pop()!
+  value.value = [...searchValues!.filter(v => v.key !== 'security_state'), currentValue]
+
+  securityStateField.defaultValue = currentValue.value
+}
+const onSearch = () => {
+  console.log('onSearch')
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/packages/pro/search/src/composables/useFocusedState.ts b/packages/pro/search/src/composables/useFocusedState.ts
@@ -7,6 +7,7 @@
 
 import type { ProSearchProps } from '../types'
 import type { ActiveSegmentContext } from './useActiveSegment'
+import type { SearchStateContext } from './useSearchStates'
 import type { ɵOverlayProps } from '@idux/components/_private/overlay'
 
 import { type ComputedRef, type Ref, nextTick, onBeforeUnmount, onMounted, watch } from 'vue'
@@ -16,8 +17,6 @@ import { isFunction, isString } from 'lodash-es'
 import { useSharedFocusMonitor } from '@idux/cdk/a11y'
 import { MaybeElementRef, callEmit, useState } from '@idux/cdk/utils'
 
-import { type SearchState, type SearchStateContext, tempSearchStateKey } from './useSearchStates'
-
 export interface FocusEventContext {
   focused: ComputedRef<boolean>
   focus: (options?: FocusOptions) => void
@@ -31,36 +30,26 @@ export function useFocusedState(
   searchStateContext: SearchStateContext,
   activeSegmentContext: ActiveSegmentContext,
 ): FocusEventContext {
-  const { tempSearchState, searchStates } = searchStateContext
+  const { searchStates, initTempSearchState } = searchStateContext
   const { activeSegment, setInactive, setTempActive } = activeSegmentContext
   const [focused, setFocused] = useState(false)
 
-  const { setTempSegmentActive, setPrevActiveSegmentName } = manageTempSegmentActive(tempSearchState, setTempActive)
-  const { handleFocus, handleBlur } = useFocusHandlers(props, focused, setFocused, setInactive)
+  const { handleFocus, handleBlur } = useFocusHandlers(props, focused, setFocused, setInactive, initTempSearchState)
 
   watch([activeSegment, searchStates], ([segment]) => {
     if (!segment && focused.value) {
-      setTempSegmentActive()
+      setTempActive()
     }
   })
 
-  const _handleBlur = (evt: FocusEvent) => {
-    handleBlur(evt, () => {
-      // remember currently active segment to restore focus to it
-      setPrevActiveSegmentName(
-        activeSegment.value?.itemKey === tempSearchStateKey ? activeSegment.value.name : undefined,
-      )
-    })
-  }
-
   const _handleFocus = (evt: FocusEvent) => {
     if (props.disabled) {
       return
     }
 
     handleFocus(evt, () => {
       if (evt.target === elementRef.value) {
-        setTempSegmentActive()
+        setTempActive()
       }
     })
   }
@@ -73,7 +62,7 @@ export function useFocusedState(
     setFocused(false)
   }
 
-  registerHandlers(elementRef, () => getContainerEl(commonOverlayProps.value.container), _handleFocus, _handleBlur)
+  registerHandlers(elementRef, () => getContainerEl(commonOverlayProps.value.container), _handleFocus, handleBlur)
 
   return { focused, focus, blur }
 }
@@ -84,45 +73,12 @@ function getContainerEl(containerProp: ɵOverlayProps['container']): HTMLElement
   return isString(container) ? document.querySelector(/^[.#]/.test(container) ? container : `.${container}`) : container
 }
 
-function manageTempSegmentActive(
-  tempSearchState: SearchState,
-  setTempActive: (name?: string | undefined) => void,
-): {
-  setTempSegmentActive: () => void
-  setPrevActiveSegmentName: (name: string | undefined) => void
-} {
-  let prevActiveSegmentName: string | undefined
-  const setTempSegmentActive = () => {
-    let name = prevActiveSegmentName
-
-    // if no segment was active when blured, find the last segment with value
-    if (!name) {
-      name = tempSearchState.segmentValues[0]?.name ?? 'name'
-      for (let idx = tempSearchState.segmentValues.length - 1; idx > -1; idx--) {
-        if (tempSearchState.segmentValues[idx].value) {
-          name = tempSearchState.segmentValues[idx].name
-          break
-        }
-      }
-    }
-
-    setTempActive(name)
-  }
-  const setPrevActiveSegmentName = (name: string | undefined) => {
-    prevActiveSegmentName = name
-  }
-
-  return {
-    setTempSegmentActive,
-    setPrevActiveSegmentName,
-  }
-}
-
 function useFocusHandlers(
   props: ProSearchProps,
   focused: ComputedRef<boolean>,
   setFocused: (focused: boolean) => void,
   setInactive: (blur?: boolean) => void,
+  initTempSearchState: () => void,
 ): {
   handleFocus: (evt: FocusEvent, cb?: () => void) => void
   handleBlur: (evt: FocusEvent, cb?: () => void) => void
@@ -151,10 +107,12 @@ function useFocusHandlers(
       return
     }
 
+    initTempSearchState()
     cb?.()
 
     setInactive(true)
     setFocused(false)
+
     callEmit(props.onBlur, evt)
   }