feat(tag): add editorRender api (#2657)

XiaoMi · Nov 6, 2023 · 1dd9b9e · 1dd9b9e
1 parent 7db6a8f
commit 1dd9b9e
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 13 deletions.
diff --git a/.changeset/lucky-owls-laugh.md b/.changeset/lucky-owls-laugh.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/tag": minor
+---
+
+feat: add editorRender api
diff --git a/.changeset/strange-nails-sniff.md b/.changeset/strange-nails-sniff.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(tag): add editorRender api
diff --git a/packages/ui/alert/stories/duration.stories.tsx b/packages/ui/alert/stories/duration.stories.tsx
@@ -3,7 +3,7 @@ import Alert from '../src'
 
 /**
  * @title 倒计时自动关闭
- * @desc 倒计时自动关闭反馈信息在出现一定时间后自动关闭，不打扰
+ * @desc 倒计时自动关闭反馈信息在出现一定时间后自动关闭，不打扰。注：最大值不能超过 2^31-1
  */
 export const Duration = () => {
   return (

diff --git a/packages/ui/tag/src/TagGroup.tsx b/packages/ui/tag/src/TagGroup.tsx
@@ -27,6 +27,8 @@ export const TagGroup = forwardRef<HTMLDivElement | null, TagGroupProps>(
       onDelete,
       onEdit,
       addButton,
+      render,
+      editorRender,
       ...rest
     },
     ref
@@ -76,10 +78,11 @@ export const TagGroup = forwardRef<HTMLDivElement | null, TagGroupProps>(
               itemOnEdit && itemOnEdit(e)
               onEdit && onEdit(e, { ...item }, index)
             }}
+            render={render}
           />
         )
       })
-    }, [data, editable, maxWidth, onDelete, onEdit, prefixCls])
+    }, [data, editable, maxWidth, onDelete, onEdit, prefixCls, render])
 
     const addNewButton = useMemo(() => {
       return (
@@ -99,17 +102,20 @@ export const TagGroup = forwardRef<HTMLDivElement | null, TagGroupProps>(
       <div ref={ref} role={role} className={rootClassName} style={style} {...rest}>
         {displayTags}
         {editable && !isInAdding && addNewButton}
-        {isInAdding && (
-          <Tag
-            autoEditable
-            editable
-            onEdit={(e) => {
-              onAdd?.(e, data.length)
-              setIsInAdding(false)
-            }}
-            className={`${prefixCls}__item`}
-          />
-        )}
+        {isInAdding &&
+          (editorRender ? (
+            editorRender(() => setIsInAdding(false))
+          ) : (
+            <Tag
+              autoEditable
+              editable
+              onEdit={(e) => {
+                onAdd?.(e, data.length)
+                setIsInAdding(false)
+              }}
+              className={`${prefixCls}__item`}
+            />
+          ))}
       </div>
     )
   }
@@ -151,6 +157,16 @@ export interface TagGroupProps extends HiBaseHTMLProps<'div'> {
    * @private
    */
   addButton?: React.ReactNode
+  /**
+   * 内容渲染器
+   * @param children 子代对象
+   * @default e => e
+   */
+  render?: (children?: React.ReactText) => React.ReactNode
+  /**
+   * 自定义编辑器渲染
+   */
+  editorRender?: (updated: () => void) => React.ReactNode
 }
 
 export interface TagGroupDataItem

diff --git a/packages/ui/tag/stories/editor-render.stories.tsx b/packages/ui/tag/stories/editor-render.stories.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import Tag, { TagGroupDataItem } from '../src'
+import Select from '@hi-ui/select'
+
+/**
+ * @title 自定义编辑器渲染
+ */
+export const EditorRender = () => {
+  const [baseData, setBaseData] = useState<TagGroupDataItem[]>([
+    {
+      children: 'Test',
+      id: 1,
+    },
+  ])
+  const [tagsData] = useState([
+    { id: 1, title: 'Test' },
+    { id: 2, title: 'Test2' },
+    { id: 3, title: 'Test3' },
+    { id: 4, title: 'Test4' },
+    { id: 5, title: 'Test5' },
+  ])
+
+  const selectData = React.useMemo(() => {
+    return tagsData.filter((item) => !baseData.find((d) => d.id === item.id))
+  }, [baseData, tagsData])
+
+  return (
+    <>
+      <h1>EditorRender</h1>
+      <Tag.Group
+        data={baseData}
+        // editable={false}
+        editorRender={(updated) => {
+          return (
+            <Select
+              style={{ display: 'inline-flex', width: 120, margin: '8px 0 0 0' }}
+              size={'sm'}
+              data={selectData}
+              onClose={() => updated()}
+              onChange={(id, item) => {
+                if (id !== undefined) {
+                  setBaseData((pre) => {
+                    const result = [...pre]
+                    result.push({
+                      children: item.title,
+                      id,
+                    })
+                    return result
+                  })
+
+                  updated()
+                }
+              }}
+            />
+          )
+        }}
+        onDelete={(e, index) => {
+          setBaseData((pre) => {
+            const result = [...pre]
+            result.splice(index, 1)
+            return result
+          })
+        }}
+      />
+    </>
+  )
+}
diff --git a/packages/ui/tag/stories/index.stories.tsx b/packages/ui/tag/stories/index.stories.tsx
@@ -11,6 +11,7 @@ export * from './colors.stories'
 export * from './custom-color.stories'
 export * from './max-width.stories'
 export * from './tag-group.stories'
+export * from './editor-render.stories'
 
 export default {
   title: 'FeedBack/Tag',