From 04e2500bdf1d4b8df5a0d9f8030729b06040e95b Mon Sep 17 00:00:00 2001
From: saller <weskerli@163.com>
Date: Wed, 17 May 2023 16:09:45 +0800
Subject: [PATCH] fix(pro:search): remove name input min-width (#1551)

---
 .../src/components/NameSelectOverlay.tsx      |  3 +-
 .../search/src/components/segment/Segment.tsx |  4 +
 .../src/components/segment/SegmentInput.tsx   |  8 +-
 .../search/src/segments/CreateNameSegment.tsx | 97 -------------------
 packages/pro/search/style/index.less          |  1 -
 5 files changed, 11 insertions(+), 102 deletions(-)
 delete mode 100644 packages/pro/search/src/segments/CreateNameSegment.tsx

diff --git a/packages/pro/search/src/components/NameSelectOverlay.tsx b/packages/pro/search/src/components/NameSelectOverlay.tsx
index a67f760c2..ad2aaeb7b 100644
--- a/packages/pro/search/src/components/NameSelectOverlay.tsx
+++ b/packages/pro/search/src/components/NameSelectOverlay.tsx
@@ -99,12 +99,13 @@ export default defineComponent({
       panelKeyDown = keydown
     }
     const handleKeyDown = (evt: KeyboardEvent) => {
-      if (!selectedFieldKey.value && evt.key === 'Enter') {
+      if (!filteredDataSource.value.length && evt.key === 'Enter') {
         callEmit(proSearchProps.onItemCreate, {
           name: undefined,
           nameInput: props.searchValue,
         })
         props.onChange?.(undefined)
+        return false
       }
 
       if (!overlayOpened.value || !panelKeyDown) {
diff --git a/packages/pro/search/src/components/segment/Segment.tsx b/packages/pro/search/src/components/segment/Segment.tsx
index 32cd476cf..7a60bccdc 100644
--- a/packages/pro/search/src/components/segment/Segment.tsx
+++ b/packages/pro/search/src/components/segment/Segment.tsx
@@ -141,6 +141,9 @@ export default defineComponent({
       setOverlayOpened(false)
       handleSegmentCancel(props.segment.name)
     }
+    const handleMouseDown = (evt: MouseEvent) => {
+      evt.stopImmediatePropagation()
+    }
 
     const { handleInput, handleFocus, handleKeyDown, setPanelOnKeyDown } = useInputEvents(
       props,
@@ -166,6 +169,7 @@ export default defineComponent({
         onInput={handleInput}
         onFocus={handleFocus}
         onKeydown={handleKeyDown}
+        onMousedown={handleMouseDown}
         onWidthChange={triggerOverlayUpdate}
       ></SegmentInput>
     )
diff --git a/packages/pro/search/src/components/segment/SegmentInput.tsx b/packages/pro/search/src/components/segment/SegmentInput.tsx
index 8b9d0295f..64e130c4d 100644
--- a/packages/pro/search/src/components/segment/SegmentInput.tsx
+++ b/packages/pro/search/src/components/segment/SegmentInput.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, inject, normalizeClass, onMounted, ref, watch } from 'vue'
+import { type CSSProperties, computed, defineComponent, inject, normalizeClass, onMounted, ref, watch } from 'vue'
 
 import { callEmit, convertCssPixel, useState } from '@idux/cdk/utils'
 
@@ -63,19 +63,21 @@ export default defineComponent({
 
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-segment-input`
+      const { class: className, style, ...rest } = attrs
 
       return (
-        <span class={classes.value}>
+        <span class={normalizeClass([classes.value, className])}>
           <input
             ref={segmentInputRef}
             class={`${prefixCls}-inner`}
+            style={style as CSSProperties}
             value={props.value ?? ''}
             disabled={props.disabled}
             placeholder={props.placeholder}
             onInput={handleInput}
             onCompositionstart={handleCompositionStart}
             onCompositionend={handleCompositionEnd}
-            {...attrs}
+            {...rest}
           ></input>
           <MeasureElement onWidthChange={setInputWidth}>{props.value || props.placeholder || ''}</MeasureElement>
         </span>
diff --git a/packages/pro/search/src/segments/CreateNameSegment.tsx b/packages/pro/search/src/segments/CreateNameSegment.tsx
deleted file mode 100644
index 663d99a2d..000000000
--- a/packages/pro/search/src/segments/CreateNameSegment.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
- */
-
-import type { PanelRenderContext, SearchField, Segment, SelectPanelData } from '../types'
-import type { VNodeChild } from 'vue'
-
-import { isString } from 'lodash-es'
-
-import { type VKey, convertArray } from '@idux/cdk/utils'
-
-import SelectPanel from '../panel/SelectPanel'
-import { filterDataSource, matchRule } from '../utils/selectData'
-
-export const defaultNameSegmentEndSymbol = ':'
-
-export function createNameSegment(
-  prefixCls: string,
-  searchFields: SearchField[] | undefined,
-  customNameLabel: string | ((searchField: SearchField) => VNodeChild) | undefined,
-  showEndSymbol: boolean,
-): Segment<VKey | undefined> {
-  const names = getSearchOptionNameList(searchFields ?? [])
-  const panelRenderer = (context: PanelRenderContext<VKey | undefined>) => {
-    const { slots, input, value, setValue, ok, setOnKeyDown } = context
-    const handleChange = (value: VKey[]) => {
-      setValue(value[0])
-      ok()
-    }
-    const filteredDataSource = filterDataSource(names, nameOption => matchRule(nameOption.label, getRawInput(input)))
-    if (!filteredDataSource?.length) {
-      return
-    }
-
-    const renderNameLabel = (key: VKey, renderer: (searchField: SearchField) => VNodeChild) => {
-      const searchField = searchFields!.find(field => field.key === key)!
-      return renderer(searchField)
-    }
-
-    const _customNameLabel = customNameLabel ?? 'nameLabel'
-    const customNameLabelRender = isString(_customNameLabel) ? slots[_customNameLabel] : _customNameLabel
-
-    const panelSlots = {
-      optionLabel: customNameLabelRender
-        ? (option: SelectPanelData) => renderNameLabel(option.key, customNameLabelRender)
-        : undefined,
-    }
-
-    return (
-      <SelectPanel
-        class={`${prefixCls}-name-segment-panel`}
-        v-slots={panelSlots}
-        value={convertArray(value)}
-        dataSource={filteredDataSource}
-        multiple={false}
-        onChange={handleChange}
-        onConfirm={ok}
-        setOnKeyDown={setOnKeyDown}
-      />
-    )
-  }
-
-  return {
-    name: 'name',
-    inputClassName: `${prefixCls}-name-segment-input`,
-    parse: input => parseInput(input, names),
-    format: value => formatValue(value, names, showEndSymbol),
-    panelRenderer,
-  }
-}
-
-function getRawInput(input: string): string {
-  return input.trim().replace(new RegExp(`${defaultNameSegmentEndSymbol}$`), '')
-}
-
-function getSearchOptionNameList(dataSource: SearchField[]): { key: VKey; label: string }[] {
-  return dataSource.map(data => ({ key: data.key, label: data.label }))
-}
-
-function parseInput(input: string, names: { key: VKey; label: string }[]): VKey | undefined {
-  const name = getRawInput(input)
-
-  return names.find(item => item.label === name)?.key
-}
-
-function formatValue(value: VKey | undefined, names: { key: VKey; label: string }[], showEndSymbol: boolean): string {
-  if (!value) {
-    return ''
-  }
-
-  const name = names.find(item => item.key === value)?.label ?? ''
-
-  return name && showEndSymbol ? name + defaultNameSegmentEndSymbol : name
-}
diff --git a/packages/pro/search/style/index.less b/packages/pro/search/style/index.less
index eadc6fc94..4d19f89aa 100644
--- a/packages/pro/search/style/index.less
+++ b/packages/pro/search/style/index.less
@@ -221,7 +221,6 @@
     }
   }
   &-temp-segment-input {
-    min-width: 100px;
     margin-left: 8px;
   }
   &-name-segment-overlay {