Merge pull request #2746 from XiaoMi/feature/check-select/2743

feat(tag-input&check-select): add prefix and suffix api (#2743)
XiaoMi · Feb 27, 2024 · e98c47c · e98c47c
2 parents 1b8e5d6 + 3a96286
commit e98c47c
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 11 deletions.
diff --git a/.changeset/kind-singers-share.md b/.changeset/kind-singers-share.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(tag-input&check-select): add prefix api
diff --git a/.changeset/red-beers-guess.md b/.changeset/red-beers-guess.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/check-select": minor
+"@hi-ui/tag-input": minor
+---
+
+feat: add prefix api
diff --git a/packages/ui/check-select/src/CheckSelect.tsx b/packages/ui/check-select/src/CheckSelect.tsx
@@ -75,6 +75,8 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
       customRender,
       tagInputProps,
       size = 'md',
+      prefix,
+      suffix,
       onKeyDown: onKeyDownProp,
       ...rest
     },
@@ -304,7 +306,8 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
                 placeholder={placeholder}
                 // @ts-ignore
                 displayRender={displayRender}
-                suffix={menuVisible ? <UpOutlined /> : <DownOutlined />}
+                prefix={prefix}
+                suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
                 focused={menuVisible}
                 appearance={appearance}
                 value={value}
@@ -457,9 +460,13 @@ export interface CheckSelectProps
    */
   renderExtraFooter?: () => React.ReactNode
   /**
-   * 自定义 input 后缀 icon
+   * 选择框前置内容
    */
-  suffixIcon?: React.ReactNode
+  prefix?: React.ReactNode
+  /**
+   * 选择框后置内容
+   */
+  suffix?: React.ReactNode
   /**
    * 自定义清除 tags 的 icon
    */

diff --git a/packages/ui/check-select/stories/addon.stories.tsx b/packages/ui/check-select/stories/addon.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import CheckSelect from '../src'
+import { AppStoreOutlined, InfoCircleOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前后内置元素
+ * @desc 将选择框与内置的其他元素组合使用
+ */
+export const Addon = () => {
+  const [data] = React.useState([
+    { title: '手机', id: '2' },
+    { title: '小米2', id: '2-1' },
+    { title: '小米3', id: '2-2' },
+    { title: '小米4', id: '2-3' },
+    { title: '小米5', id: '2-4' },
+    { title: '电脑', id: '3' },
+    { title: '笔记本', id: '4' },
+    {
+      title: '生活周边超长文案展示超长文案展示超长文案展示超长文案展示超长文案展示',
+      id: '5',
+    },
+    { title: '其它', id: '6' },
+  ])
+
+  return (
+    <>
+      <h1>Addon</h1>
+      <div className="check-select-addon__wrap">
+        <CheckSelect
+          style={{ width: 240 }}
+          placeholder="请选择"
+          searchable
+          // clearable={false}
+          data={data}
+          tagInputProps={{ wrap: true }}
+          prefix={<AppStoreOutlined />}
+          suffix={<InfoCircleOutlined style={{ marginRight: 8 }} />}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/check-select/stories/index.stories.tsx b/packages/ui/check-select/stories/index.stories.tsx
@@ -22,6 +22,7 @@ export * from './virtual-list.stories'
 export * from './empty-content.stories'
 export * from './only-checked.stories'
 export * from './tip.stories'
+export * from './addon.stories'
 export * from './custom-render.stories'
 
 export default {

diff --git a/packages/ui/tag-input/src/TagInputMock.tsx b/packages/ui/tag-input/src/TagInputMock.tsx
@@ -13,7 +13,7 @@ import { CloseCircleFilled, CloseOutlined } from '@hi-ui/icons'
 import { TagInputOption } from './types'
 import { HiBaseAppearanceEnum, HiBaseHTMLFieldProps } from '@hi-ui/core'
 import { useLatestCallback } from '@hi-ui/use-latest'
-import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion'
+import { isArrayNonEmpty, isFunction, isArray } from '@hi-ui/type-assertion'
 import ResizeDetector from 'react-resize-detector'
 
 const _role = 'tag-input-mock'
@@ -41,7 +41,8 @@ export const TagInputMock = forwardRef<HTMLDivElement | null, TagInputMockProps>
       wrap = false,
       expandable = false,
       activeExpandable = false,
-      suffix,
+      prefix,
+      suffix: suffixProp,
       // tag 最小宽度
       tagWidth = 20,
       displayRender,
@@ -90,6 +91,10 @@ export const TagInputMock = forwardRef<HTMLDivElement | null, TagInputMockProps>
     // const [tagMaxWidth, setTagMaxWidth] = useState(0)
     const [tagMaxCount, setTagMaxCount] = useState(0)
 
+    const suffix = useMemo(() => {
+      return isArray(suffixProp) ? suffixProp : [suffixProp]
+    }, [suffixProp])
+
     useLayoutEffect(() => {
       let tagMaxCount = 0
 
@@ -200,6 +205,8 @@ export const TagInputMock = forwardRef<HTMLDivElement | null, TagInputMockProps>
           }}
           {...rest}
         >
+          {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}
+
           {/* tags 列表区域渲染 */}
           {showTags ? (
             <span className={`${prefixCls}__tags`}>
@@ -226,6 +233,8 @@ export const TagInputMock = forwardRef<HTMLDivElement | null, TagInputMockProps>
             <span className={`${prefixCls}__placeholder`}>{placeholder}</span>
           )}
 
+          {suffix[1] ? <span className={`${prefixCls}__secondary-suffix`}>{suffix[1]}</span> : null}
+
           <ResizeDetector
             skipOnMount={false}
             onResize={(w) => {
@@ -235,7 +244,7 @@ export const TagInputMock = forwardRef<HTMLDivElement | null, TagInputMockProps>
             }}
           >
             {/* suffix 后缀区域渲染 */}
-            {!!suffix || (showClearableIcon && hover) || showTagCount ? (
+            {!!suffix[0] || (showClearableIcon && hover) || showTagCount ? (
               <span className={`${prefixCls}__suffix`}>
                 {showTagCount ? (
                   <span
@@ -258,7 +267,7 @@ export const TagInputMock = forwardRef<HTMLDivElement | null, TagInputMockProps>
                     <CloseCircleFilled />
                   </span>
                 ) : (
-                  suffix
+                  suffix[0]
                 )}
               </span>
             ) : null}
@@ -304,9 +313,13 @@ export interface TagInputMockProps
    */
   placeholder?: string
   /**
-   * 输入框后置内容
+   * 选择框前置内容
+   */
+  prefix?: React.ReactNode
+  /**
+   * 选择框后置内容
    */
-  suffix?: React.ReactNode
+  suffix?: React.ReactNode | React.ReactNode[]
   /**
    * tag 列表数据源
    */

diff --git a/packages/ui/tag-input/src/styles/tag-input-mock.scss b/packages/ui/tag-input/src/styles/tag-input-mock.scss
@@ -11,7 +11,6 @@ $tag-input-mock-prefix: '#{$component-prefix}-tag-input-mock' !default;
   position: relative;
   overflow: hidden;
   display: inline-flex;
-  justify-content: space-between;
   align-items: center;
   flex: 1;
   transition-property: all;
@@ -52,7 +51,9 @@ $tag-input-mock-prefix: '#{$component-prefix}-tag-input-mock' !default;
     }
   }
 
-  &__suffix {
+  &__prefix,
+  &__suffix,
+  &__secondary-suffix {
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
@@ -123,6 +124,15 @@ $tag-input-mock-prefix: '#{$component-prefix}-tag-input-mock' !default;
     }
   }
 
+  &__prefix {
+    margin-right: use-spacing(4);
+  }
+
+  &__tags,
+  &__placeholder {
+    flex: 1;
+  }
+
   &__suffix,
   &__placeholder {
     color: use-color('gray', 400);