Merge pull request #2531 from XiaoMi/feature/check-select(#2528)

feat(check-select&check-tree-select&check-cascader): #2528
XiaoMi · Aug 7, 2023 · 4f0c20d · 4f0c20d
2 parents 7792482 + 7b7aa52
commit 4f0c20d
Show file tree

Hide file tree

Showing 15 changed files with 317 additions and 8 deletions.
diff --git a/.changeset/kind-yaks-talk.md b/.changeset/kind-yaks-talk.md
@@ -0,0 +1,7 @@
+---
+"@hi-ui/check-cascader": minor
+"@hi-ui/check-select": minor
+"@hi-ui/check-tree-select": minor
+---
+
+feat: 增加 tagInputProps API,支持显示内容高度自适应
diff --git a/.changeset/silent-timers-juggle.md b/.changeset/silent-timers-juggle.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/hiui": patch
+---
+
+- CheckSelect CheckCascader CheckTreeSelect feat: 增加 tagInputProps API,支持显示内容高度自适应
+- Popper TagInput fix: 优化 wrap 模式下代码
diff --git a/.changeset/soft-rockets-brake.md b/.changeset/soft-rockets-brake.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/popper": patch
+"@hi-ui/tag-input": patch
+---
+
+优化 wrap 模式下代码
diff --git a/packages/ui/check-cascader/src/CheckCascader.tsx b/packages/ui/check-cascader/src/CheckCascader.tsx
@@ -68,6 +68,7 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
       visible,
       onOpen,
       onClose,
+      tagInputProps,
       ...rest
     },
     ref
@@ -223,6 +224,7 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
         onSearch={callAllFuncs(onSearchProp, onSearch)}
         trigger={
           <TagInputMock
+            {...tagInputProps}
             clearable={clearable}
             placeholder={placeholder}
             // @ts-ignore
@@ -363,6 +365,10 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
    * SEPARATE：父子完全独立受控
    */
   checkedMode?: 'PARENT' | 'CHILD' | 'ALL' | 'SEPARATE'
+  /**
+   * TagInput 参数设置
+   */
+  tagInputProps?: TagInputMockProps
 }
 
 if (__DEV__) {

diff --git a/packages/ui/check-cascader/stories/index.stories.tsx b/packages/ui/check-cascader/stories/index.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import CheckCascader from '../src'
 
 export * from './basic.stories'
+export * from './tag-input-wrap.stories'
 export * from './disabled.stories'
 export * from './search.stories'
 export * from './select-change.stories'

diff --git a/packages/ui/check-cascader/stories/tag-input-wrap.stories.tsx b/packages/ui/check-cascader/stories/tag-input-wrap.stories.tsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import CheckCascader from '../src'
+
+/**
+ * @title 换行展示选中内容
+ * @desc 设置后，选中内容超出宽度时会换行展示
+ */
+export const TagInputWrap = () => {
+  const [dataOnlyLeafCheckable] = React.useState(() => {
+    const data = [
+      {
+        id: '手机',
+        title: '手机t',
+        children: [
+          {
+            id: '小米',
+            title: '小米t',
+            children: [
+              {
+                id: '小米3',
+                title: '小米3t',
+              },
+              {
+                id: '小米4',
+                title: '小米4t',
+              },
+            ],
+          },
+          {
+            id: '红米',
+            title: '红米t',
+            children: [
+              {
+                id: '红米3',
+                title: '红米3t',
+              },
+              {
+                id: '红米4',
+                title: '红米4t',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: '电视',
+        title: '电视t',
+        children: [
+          {
+            id: '小米电视4A',
+            title: '小米电视4At',
+          },
+          {
+            id: '小米电视4C',
+            title: '小米电视4Ct',
+          },
+        ],
+      },
+    ]
+
+    const getDataOnlyLeafCheckable = (data: any) => {
+      return data.map((item: any) => {
+        if (item.children) {
+          item.checkable = item.checkable ?? false
+          item.children = getDataOnlyLeafCheckable(item.children)
+        }
+
+        return item
+      })
+    }
+
+    const dataOnlyLeafCheckable = getDataOnlyLeafCheckable(data)
+
+    return dataOnlyLeafCheckable
+  })
+
+  return (
+    <>
+      <h1>换行展示选中内容</h1>
+      <div className="cascader-tag-input-wrap__wrap">
+        <CheckCascader
+          style={{ width: 240 }}
+          searchable={false}
+          // clearable
+          placeholder="请选择品类"
+          defaultValue={[['手机', '红米', '红米4']]}
+          changeOnSelect
+          data={dataOnlyLeafCheckable}
+          onChange={console.log}
+          tagInputProps={{
+            wrap: true,
+          }}
+        ></CheckCascader>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/check-select/src/CheckSelect.tsx b/packages/ui/check-select/src/CheckSelect.tsx
@@ -13,7 +13,7 @@ import {
 } from './types'
 import { useLatestRef } from '@hi-ui/use-latest'
 import Checkbox from '@hi-ui/checkbox'
-import { TagInputMock } from '@hi-ui/tag-input'
+import { TagInputMock, TagInputMockProps } from '@hi-ui/tag-input'
 import { isFunction, isArrayNonEmpty, isUndef } from '@hi-ui/type-assertion'
 import VirtualList, { ListRef, useCheckInVirtual } from '@hi-ui/virtual-list'
 import { Picker, PickerProps } from '@hi-ui/picker'
@@ -73,6 +73,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
       onSearch: onSearchProp,
       fieldNames = DEFAULT_FIELD_NAMES,
       customRender,
+      tagInputProps,
       ...rest
     },
     ref
@@ -271,6 +272,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
               )
             ) : (
               <TagInputMock
+                {...tagInputProps}
                 clearable={clearable}
                 placeholder={placeholder}
                 // @ts-ignore
@@ -451,6 +453,10 @@ export interface CheckSelectProps
    * 自定义渲染选中的内容
    */
   customRender?: React.ReactNode | ((option: CheckSelectItemEventData[]) => React.ReactNode)
+  /**
+   * TagInput 参数设置
+   */
+  tagInputProps?: TagInputMockProps
 }
 
 // @ts-ignore

diff --git a/packages/ui/check-select/stories/index.stories.tsx b/packages/ui/check-select/stories/index.stories.tsx
@@ -5,6 +5,7 @@ export * from './basic.stories'
 export * from './controlled.stories'
 export * from './uncontrolled.stories'
 export * from './clearable.stories'
+export * from './tag-input-wrap.stories'
 export * from './appearance.stories'
 export * from './disabled.stories'
 export * from './group.stories'

diff --git a/packages/ui/check-select/stories/tag-input-wrap.stories.tsx b/packages/ui/check-select/stories/tag-input-wrap.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import CheckSelect from '../src'
+
+/**
+ * @title 换行展示选中内容
+ * @desc 设置后，选中内容超出宽度时会换行展示
+ */
+export const TagInputWrap = () => {
+  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>换行展示选中内容</h1>
+      <div className="check-select-tag-input-wrap__wrap">
+        <CheckSelect
+          style={{ width: 240 }}
+          placeholder="请选择"
+          searchable
+          clearable
+          data={data}
+          tagInputProps={{
+            wrap: true,
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/check-tree-select/src/CheckTreeSelect.tsx b/packages/ui/check-tree-select/src/CheckTreeSelect.tsx
@@ -15,7 +15,7 @@ import { baseFlattenTree } from '@hi-ui/tree-utils'
 import { isArrayNonEmpty, isUndef } from '@hi-ui/type-assertion'
 import { uniqBy } from '@hi-ui/array-utils'
 import { Highlighter } from '@hi-ui/highlighter'
-import { TagInputMock } from '@hi-ui/tag-input'
+import { TagInputMock, TagInputMockProps } from '@hi-ui/tag-input'
 import { UpOutlined, DownOutlined } from '@hi-ui/icons'
 import { useLocaleContext } from '@hi-ui/core'
 import { callAllFuncs } from '@hi-ui/func-utils'
@@ -88,6 +88,7 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
       itemHeight,
       height,
       showCheckAll,
+      tagInputProps,
       ...rest
     },
     ref
@@ -343,6 +344,7 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
         loading={rest.loading !== undefined ? rest.loading : loading}
         trigger={
           <TagInputMock
+            {...tagInputProps}
             // ref={targetElementRef}
             // onClick={openMenu}
             // disabled={disabled}
@@ -525,6 +527,10 @@ export interface CheckTreeSelectProps
    * 是否开启全选功能，需要对数据全量操作。异步数据场景暂不支持，可自行渲染弹层底部实现
    */
   showCheckAll?: boolean
+  /**
+   * TagInput 参数设置
+   */
+  tagInputProps?: TagInputMockProps
 }
 
 if (__DEV__) {

diff --git a/packages/ui/check-tree-select/stories/index.stories.tsx b/packages/ui/check-tree-select/stories/index.stories.tsx
@@ -4,6 +4,7 @@ import CheckTreeSelect from '../src'
 export * from './basic.stories'
 export * from './controlled.stories'
 export * from './uncontrolled.stories'
+export * from './tag-input-wrap.stories'
 export * from './appearance.stories'
 export * from './clearable.stories'
 export * from './searchable.stories'

diff --git a/packages/ui/check-tree-select/stories/tag-input-wrap.stories.tsx b/packages/ui/check-tree-select/stories/tag-input-wrap.stories.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import CheckTreeSelect from '../src'
+
+/**
+ * @title 换行展示选中内容
+ * @desc 设置后，选中内容超出宽度时会换行展示
+ */
+export const TagInputWrap = () => {
+  const [data] = React.useState([
+    {
+      title: '手机类',
+      id: '0',
+      children: [
+        {
+          title: 'Redmi系列',
+          id: '0-0',
+          disabled: true,
+          children: [
+            {
+              id: '0-0-1',
+              title: 'Redmi K30',
+            },
+            {
+              id: '0-0-2',
+              title: 'Redmi K30 Pro',
+            },
+            {
+              id: '0-0-3',
+              title: 'Redmi 10X 5G',
+            },
+            {
+              id: '0-0-4',
+              title: 'Redmi Note 8',
+            },
+            {
+              id: '0-0-5',
+              title: 'Redmi 9',
+            },
+            {
+              id: '0-0-6',
+              title: 'Redmi 9A',
+            },
+          ],
+        },
+        {
+          title: '小米手机',
+          id: '0-1',
+          children: [
+            {
+              id: '0-1-1',
+              title: '小米10 Pro',
+            },
+            {
+              id: '0-1-2',
+              title: '小米10',
+            },
+            {
+              id: '0-1-3',
+              title: '小米10 青春版 5G',
+            },
+            {
+              id: '0-1-4',
+              title: '小米MIX Alpha',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '电视',
+      id: '1',
+      children: [
+        {
+          title: '小米电视 大师 65英寸OLED',
+          id: '1-0',
+        },
+        {
+          title: 'Redmi 智能电视 MAX 98',
+          id: '1-1',
+        },
+        {
+          title: '小米电视4A 60英寸',
+          id: '1-2',
+        },
+      ],
+    },
+  ])
+
+  return (
+    <>
+      <h1>换行展示选中内容</h1>
+      <div className="check-tree-select-tag-input-wrap__wrap">
+        <CheckTreeSelect
+          style={{ width: 240 }}
+          data={data}
+          checkedMode="PARENT"
+          onChange={console.log}
+          tagInputProps={{
+            wrap: true,
+          }}
+        />
+      </div>
+    </>
+  )
+}