Browse Source

chore: improve taginput doc (#1392)

* chore: improve taginput doc

* chore: improve taginput doc
YannLynn 2 years ago
parent
commit
c72b69c4b0

+ 1 - 1
content/input/taginput/index-en-US.md

@@ -446,7 +446,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 |maxTagCount   |The maximum number of tags to be displayed, if exceeded, they will be displayed in the form of +N |number        | -        |1.21.0|
 |showRestTagsPopover |When maxTagCount is exceeded and hover reaches +N, whether to display the remaining content through Popover  |boolean     | true     |1.21.0|
 |restTagsPopoverProps |The configuration properties of the popover     |PopoverProps     | {}        |1.21.0|
-|showContentTooltip |When the tag is too long and truncated, when hovering the tag, whether to display all contents through Tooltip     |boolean    | true        |1.21.0|
+|showContentTooltip |When the tag is too long and truncated, when hovering the tag, whether to display all contents through Tooltip.If passed in as object: type,type of component to show tooltip, one of Tooltip, Popover; opts, properties that will be passed directly to the component     |boolean\|{type: 'tooltip'\|'popover', opts: object}    | true        |1.21.0|
 |placeholder   |Content to be appear by default                  |string                                                           | -         |1.19.0|
 |prefix        |Prefix                                           |ReactNode                                                        |-          |1.19.0|
 | preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |

+ 1 - 1
content/input/taginput/index.md

@@ -447,7 +447,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 |maxTagCount  |标签的最大展示数量,超出后将以 +N 形式展示              |number                         | -        |1.21.0|
 |showRestTagsPopover  |当超过 maxTagCount,hover 到 +N 时,是否通过 Popover 显示剩余内容  |boolean     | true     |1.21.0|
 |restTagsPopoverProps |Popover 的配置属性,可以控制弹出方向、zIndex、trigger等,具体参考[Popover](/zh-CN/show/popover#API_参考)           |PopoverProps     | {}        |1.21.0|
-|showContentTooltip   |当标签长度过长发生截断时,hover 标签的时候,是否通过 Tooltip 显示全部内容     |boolean    | true        |1.21.0|
+|showContentTooltip   |当标签长度过长发生截断时,hover 标签的时候,是否通过 Tooltip 显示全部内容, 支持 Tooltip\|Popover;opts,其他需要透传给浮层组件的属性    |boolean\|{type: 'tooltip'\|'popover', opts: object}    | true        |1.21.0|
 |placeholder  |占位默认值                                         |string                         | -         |1.19.0|
 |prefix       |前缀标签                                           |ReactNode                      |-          |1.19.0|
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素,作用于组件内的 focus 方法 | boolean |  |  |

+ 9 - 2
packages/semi-ui/tagInput/index.tsx

@@ -21,6 +21,7 @@ import Popover, { PopoverProps } from '../popover';
 import Paragraph from '../typography/paragraph';
 import { IconClear, IconHandle } from '@douyinfe/semi-icons';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { ShowTooltip } from '../typography';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -53,7 +54,7 @@ export interface TagInputProps {
     maxTagCount?: number;
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: RestTagsPopoverProps;
-    showContentTooltip?: boolean;
+    showContentTooltip?: boolean | ShowTooltip;
     allowDuplicates?: boolean;
     addOnBlur?: boolean;
     draggable?: boolean;
@@ -107,7 +108,13 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         maxLength: PropTypes.number,
         showRestTagsPopover: PropTypes.bool,
         restTagsPopoverProps: PropTypes.object,
-        showContentTooltip: PropTypes.bool,
+        showContentTooltip: PropTypes.oneOfType([
+            PropTypes.shape({
+                type: PropTypes.string,
+                opts: PropTypes.object,
+            }),
+            PropTypes.bool,
+        ]),
         defaultValue: PropTypes.array,
         value: PropTypes.array,
         inputValue: PropTypes.string,