From a9b9c93fc3a3fea60d14052a5afeef9daf7efa1b Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Tue, 20 Feb 2024 14:33:21 +0800
Subject: [PATCH 1/3] feat(input&select): add prefix api

---
 .changeset/five-masks-shave.md                |  6 +++
 .changeset/hip-dryers-beam.md                 |  5 +++
 packages/ui/input/src/MockInput.tsx           | 14 +++++++
 packages/ui/input/src/styles/mock-input.scss  | 19 ++++++++--
 packages/ui/select/src/Select.tsx             | 12 ++++++
 packages/ui/select/stories/addon.stories.tsx  | 37 +++++++++++++++++++
 .../select/stories/display-render.stories.tsx |  6 +--
 packages/ui/select/stories/index.stories.tsx  |  1 +
 8 files changed, 94 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/five-masks-shave.md
 create mode 100644 .changeset/hip-dryers-beam.md
 create mode 100644 packages/ui/select/stories/addon.stories.tsx

diff --git a/.changeset/five-masks-shave.md b/.changeset/five-masks-shave.md
new file mode 100644
index 000000000..0261468c9
--- /dev/null
+++ b/.changeset/five-masks-shave.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/input": minor
+"@hi-ui/select": minor
+---
+
+feat: add prefix api
diff --git a/.changeset/hip-dryers-beam.md b/.changeset/hip-dryers-beam.md
new file mode 100644
index 000000000..c66140270
--- /dev/null
+++ b/.changeset/hip-dryers-beam.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(input&select): add prefix api
diff --git a/packages/ui/input/src/MockInput.tsx b/packages/ui/input/src/MockInput.tsx
index 52768a8e1..079728a3a 100644
--- a/packages/ui/input/src/MockInput.tsx
+++ b/packages/ui/input/src/MockInput.tsx
@@ -34,7 +34,9 @@ export const MockInput = forwardRef<HTMLDivElement | null, MockInputProps>(
       appearance = 'line',
       clearableTrigger = 'hover',
       displayRender,
+      prefix,
       suffix,
+      secondarySuffix,
       onMouseOver,
       onMouseLeave,
       ...rest
@@ -114,11 +116,15 @@ export const MockInput = forwardRef<HTMLDivElement | null, MockInputProps>(
         }}
         {...rest}
       >
+        {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}
         {hasValue ? (
           <span className={`${prefixCls}__value`}>{displayValue}</span>
         ) : (
           <span className={`${prefixCls}__placeholder`}>{placeholder}</span>
         )}
+        {secondarySuffix ? (
+          <span className={`${prefixCls}__secondary-suffix`}>{secondarySuffix}</span>
+        ) : null}
         {suffix || showClearableIcon ? (
           <span className={`${prefixCls}__suffix`}>
             {showClearableIcon ? (
@@ -186,10 +192,18 @@ export type MockInputProps = HiBaseHTMLFieldProps<
      * 输入框占位符
      */
     placeholder?: string
+    /**
+     * 输入框前置内容
+     */
+    prefix?: React.ReactNode
     /**
      * 输入框后置内容
      */
     suffix?: React.ReactNode
+    /**
+     * 输入框次要后置内容
+     */
+    secondarySuffix?: React.ReactNode
     /**
      * 点击 Input 时触发回调
      */
diff --git a/packages/ui/input/src/styles/mock-input.scss b/packages/ui/input/src/styles/mock-input.scss
index 49e6e624d..793f0de98 100644
--- a/packages/ui/input/src/styles/mock-input.scss
+++ b/packages/ui/input/src/styles/mock-input.scss
@@ -13,7 +13,6 @@ $mock-input-prefix: '#{$component-prefix}-mock-input' !default;
   overflow: hidden;
   display: inline-flex;
   align-items: center;
-  justify-content: space-between;
   flex: 1;
   transition-property: all;
   transition-duration: use-motion-duration('normal');
@@ -48,6 +47,11 @@ $mock-input-prefix: '#{$component-prefix}-mock-input' !default;
     }
   }
 
+  &__placeholder,
+  &__value {
+    flex: 1;
+  }
+
   &__placeholder {
     width: auto;
     overflow: hidden;
@@ -82,16 +86,25 @@ $mock-input-prefix: '#{$component-prefix}-mock-input' !default;
     }
   }
 
-  &__suffix {
+  &__prefix,
+  &__suffix,
+  &__secondary-suffix {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
     color: use-color('gray', 400);
     font-size: use-text-size('lg');
-    padding-left: use-spacing(4);
     text-align: center;
   }
 
+  &__prefix {
+    margin-right: use-spacing(4);
+  }
+
+  &__suffix {
+    padding-left: use-spacing(4);
+  }
+
   &__value {
     box-sizing: border-box;
     display: inline-block;
diff --git a/packages/ui/select/src/Select.tsx b/packages/ui/select/src/Select.tsx
index ebe34d8d7..0ab75afb0 100644
--- a/packages/ui/select/src/Select.tsx
+++ b/packages/ui/select/src/Select.tsx
@@ -72,6 +72,8 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
       data: dataProp,
       fieldNames,
       size = 'md',
+      prefix,
+      suffix,
       onSelect: onSelectProp,
       onSearch: onSearchProp,
       onKeyDown: onKeyDownProp,
@@ -249,7 +251,9 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
                     }
                   : undefined
               }
+              prefix={prefix}
               suffix={menuVisible ? <UpOutlined /> : <DownOutlined />}
+              secondarySuffix={suffix}
               focused={menuVisible}
               value={value}
               onChange={(value, item) => {
@@ -369,6 +373,14 @@ export interface SelectProps
    * 设置大小
    */
   size?: HiBaseSizeEnum
+  /**
+   * 选择框前置内容
+   */
+  prefix?: React.ReactNode
+  /**
+   * 选择框后置内容
+   */
+  suffix?: React.ReactNode
 }
 
 ;(Select as any).HiName = 'Select'
diff --git a/packages/ui/select/stories/addon.stories.tsx b/packages/ui/select/stories/addon.stories.tsx
new file mode 100644
index 000000000..3f987a6c3
--- /dev/null
+++ b/packages/ui/select/stories/addon.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import Select from '../src'
+import { AppStoreOutlined, InfoCircleOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前后内置元素
+ * @desc 将选择框与内置的其他元素组合使用
+ */
+export const Addon = () => {
+  const [data] = React.useState([
+    { title: '电视', id: '3', disabled: false },
+    { title: '手机', id: '2' },
+    { title: '笔记本', id: '4', disabled: false },
+    {
+      title: '生活周边超长文案展示超长文案展示',
+      id: '5',
+    },
+    { title: '办公', id: '6' },
+    { title: '生活周边7', id: '7' },
+    { title: '办公8', id: '8' },
+  ])
+
+  return (
+    <>
+      <h1>Addon</h1>
+      <div className="select-addon__wrap">
+        <Select
+          style={{ width: 240 }}
+          // clearable={false}
+          data={data}
+          prefix={<AppStoreOutlined style={{ color: '#333' }} />}
+          suffix={<InfoCircleOutlined style={{ color: '#333' }} />}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/select/stories/display-render.stories.tsx b/packages/ui/select/stories/display-render.stories.tsx
index bf57e5226..ce48e6a6c 100644
--- a/packages/ui/select/stories/display-render.stories.tsx
+++ b/packages/ui/select/stories/display-render.stories.tsx
@@ -24,10 +24,10 @@ export const DisplayRender = () => {
           displayRender={(item) => {
             console.log(item)
             return (
-              <React.Fragment>
-                <span style={{ float: 'left' }}>{item.title}</span>
+              <span style={{ float: 'left' }}>
+                {item.title}
                 <span style={{ float: 'right', color: '#999', fontSize: 14 }}>({item.id})</span>
-              </React.Fragment>
+              </span>
             )
           }}
         />
diff --git a/packages/ui/select/stories/index.stories.tsx b/packages/ui/select/stories/index.stories.tsx
index fbe4f5d8e..0e6d16031 100644
--- a/packages/ui/select/stories/index.stories.tsx
+++ b/packages/ui/select/stories/index.stories.tsx
@@ -20,6 +20,7 @@ export * from './pinyin.stories'
 export * from './virtual-list.stories'
 export * from './empty-content.stories'
 export * from './tip.stories'
+export * from './addon.stories'
 
 export default {
   title: 'Data Input/Select',

From 1aeeb1c7b65c3923d31c2e45b2302a834085e1ca Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Wed, 21 Feb 2024 20:35:22 +0800
Subject: [PATCH 2/3] =?UTF-8?q?chore(input):=20=E7=A4=BA=E4=BE=8B=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/input/stories/index.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/input/stories/index.stories.tsx b/packages/ui/input/stories/index.stories.tsx
index b4194ef97..8ad17621d 100644
--- a/packages/ui/input/stories/index.stories.tsx
+++ b/packages/ui/input/stories/index.stories.tsx
@@ -14,7 +14,7 @@ export * from './auto-focus.stories'
 export * from './focus.stories'
 export * from './trim.stories'
 export * from './type.stories'
-export * from './format.stories'
+// export * from './format.stories'
 export * from './with-tooltip.stories'
 // export * from './mock.stories'
 

From b97069b1bc16455b80f51f0092616d197f5cd1d4 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Mon, 26 Feb 2024 20:31:25 +0800
Subject: [PATCH 3/3] =?UTF-8?q?chore(select):=20suffix=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/input/src/MockInput.tsx | 19 +++++++------------
 packages/ui/select/src/Select.tsx   |  3 +--
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/ui/input/src/MockInput.tsx b/packages/ui/input/src/MockInput.tsx
index 079728a3a..759ebc820 100644
--- a/packages/ui/input/src/MockInput.tsx
+++ b/packages/ui/input/src/MockInput.tsx
@@ -4,6 +4,7 @@ import { __DEV__ } from '@hi-ui/env'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
 import { CloseCircleFilled } from '@hi-ui/icons'
 import type { HiBaseAppearanceEnum, HiBaseDataItem, HiBaseHTMLFieldProps } from '@hi-ui/core'
+import { isArray } from '@hi-ui/type-assertion'
 
 const _role = 'mock-input'
 const _prefix = getPrefixCls(_role)
@@ -35,8 +36,7 @@ export const MockInput = forwardRef<HTMLDivElement | null, MockInputProps>(
       clearableTrigger = 'hover',
       displayRender,
       prefix,
-      suffix,
-      secondarySuffix,
+      suffix: suffixProp,
       onMouseOver,
       onMouseLeave,
       ...rest
@@ -84,6 +84,7 @@ export const MockInput = forwardRef<HTMLDivElement | null, MockInputProps>(
     )
 
     const hasValue = !!displayValue
+    const suffix = isArray(suffixProp) ? suffixProp : [suffixProp]
 
     // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清除
     const showClearableIcon = useMemo(() => {
@@ -122,10 +123,8 @@ export const MockInput = forwardRef<HTMLDivElement | null, MockInputProps>(
         ) : (
           <span className={`${prefixCls}__placeholder`}>{placeholder}</span>
         )}
-        {secondarySuffix ? (
-          <span className={`${prefixCls}__secondary-suffix`}>{secondarySuffix}</span>
-        ) : null}
-        {suffix || showClearableIcon ? (
+        {suffix[1] ? <span className={`${prefixCls}__secondary-suffix`}>{suffix[1]}</span> : null}
+        {suffix[0] || showClearableIcon ? (
           <span className={`${prefixCls}__suffix`}>
             {showClearableIcon ? (
               <span
@@ -137,7 +136,7 @@ export const MockInput = forwardRef<HTMLDivElement | null, MockInputProps>(
                 <CloseCircleFilled />
               </span>
             ) : (
-              suffix
+              suffix[0]
             )}
           </span>
         ) : null}
@@ -199,11 +198,7 @@ export type MockInputProps = HiBaseHTMLFieldProps<
     /**
      * 输入框后置内容
      */
-    suffix?: React.ReactNode
-    /**
-     * 输入框次要后置内容
-     */
-    secondarySuffix?: React.ReactNode
+    suffix?: React.ReactNode | React.ReactNode[]
     /**
      * 点击 Input 时触发回调
      */
diff --git a/packages/ui/select/src/Select.tsx b/packages/ui/select/src/Select.tsx
index 0ab75afb0..8c62d8b74 100644
--- a/packages/ui/select/src/Select.tsx
+++ b/packages/ui/select/src/Select.tsx
@@ -252,8 +252,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
                   : undefined
               }
               prefix={prefix}
-              suffix={menuVisible ? <UpOutlined /> : <DownOutlined />}
-              secondarySuffix={suffix}
+              suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
               focused={menuVisible}
               value={value}
               onChange={(value, item) => {