From ebc14a5b18a7f87090b3c0535b94e0ceaeb8daae Mon Sep 17 00:00:00 2001 From: sunsunmonkey <2933201543@qq.com> Date: Sat, 17 Feb 2024 23:51:09 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(Tooltip=EF=BC=8CPopover):=20add=20the?= =?UTF-8?q?=20exist=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/show/popover/index-en-US.md | 1 + content/show/popover/index.md | 1 + content/show/tooltip/index-en-US.md | 1 + content/show/tooltip/index.md | 1 + packages/semi-ui/popover/index.tsx | 6 +++++- packages/semi-ui/tooltip/index.tsx | 11 +++++++---- 6 files changed, 16 insertions(+), 5 deletions(-) diff --git a/content/show/popover/index-en-US.md b/content/show/popover/index-en-US.md index e1aab3ee8d..fdab58b62e 100644 --- a/content/show/popover/index-en-US.md +++ b/content/show/popover/index-en-US.md @@ -548,6 +548,7 @@ Please refer to [Use with Tooltip/Popconfirm](/en-US/show/tooltip#%E6%90%AD%E9%8 | content | Content displayed | string \| ReactNode | | | clickToHide | Whether to automatically close the elastic layer when clicking on the floating layer and any element inside | boolean | false | **0.24.0** | | disableFocusListener | When trigger is `hover`, does not respond to the keyboard focus popup event, see details at [issue#977](https://github.com/DouyinFE/semi-design/issues/977) | boolean | true | **2.17.0** | +| exist | Control the exist of the popover. | boolean | true | | | getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set 'position: relative` This will change the DOM tree position, but not the view's rendering position. | () => HTMLElement | () => document.body | | guardFocus | When the focus is in the popup layer, toggle whether the Tab makes the focus loop in the popup layer | boolean | true | **2.8.0** | | keepDOM | Whether to keep internal components from being destroyed when closing | boolean | false | **2.31.0** | diff --git a/content/show/popover/index.md b/content/show/popover/index.md index 5dae619e9d..218f77eaf9 100644 --- a/content/show/popover/index.md +++ b/content/show/popover/index.md @@ -534,6 +534,7 @@ import { Button, Input, Popover, Space } from '@douyinfe/semi-ui'; | content | 显示的内容（函数类型，2.8.0 版本支持） | ReactNode \| ({ initialFocusRef }) => ReactNode | | | | clickToHide | 点击弹出层及内部任一元素时是否自动关闭弹层 | boolean | false | **0.24.0** | | disableFocusListener | trigger为`hover`时，不响应键盘聚焦弹出浮层事件，详见[issue#977](https://github.com/DouyinFE/semi-design/issues/977) | boolean | true | **2.17.0** | +| exist | 控制popover是否出现 | boolean | true | | | getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。 | function():HTMLElement | () => document.body | | | guardFocus | 当焦点处于弹出层内时，切换 Tab 是否让焦点在弹出层内循环 | boolean | true | **2.8.0** | | keepDOM | 关闭时是否保留内部组件不销毁 | boolean | false | **2.31.0** | diff --git a/content/show/tooltip/index-en-US.md b/content/show/tooltip/index-en-US.md index 128af7f156..3a1f10fcf2 100644 --- a/content/show/tooltip/index-en-US.md +++ b/content/show/tooltip/index-en-US.md @@ -338,6 +338,7 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui'; | content | Pop-up layer content | string | ReactNode | | | clickToHide | Whether to automatically close the elastic layer when clicking on the floating layer and any element inside | boolean | false | **0.24.0** | | disableFocusListener | When trigger is `hover`, does not respond to the keyboard focus popup event, see details at [issue#977](https://github.com/DouyinFE/semi-design/issues/977) | boolean | false | **2.17.0** | +| exist | Control the exist of the tooltip. | boolean | true | | | getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM This will change the DOM tree position, but not the view's rendering position. | () => HTMLElement | () => document.body | | keepDOM | Whether to keep internal components from being destroyed when closing | boolean | false | **2.31.0** | | margin | Calculate the added redundancy value when overflowing, see [issue#549](https://github.com/DouyinFE/semi-design/issues/549) | number ｜ { marginLeft: number; marginTop: number; marginRight: number; marginBottom: number } | 0 | **2.23.0**| diff --git a/content/show/tooltip/index.md b/content/show/tooltip/index.md index c5dd06e19c..358a643d95 100644 --- a/content/show/tooltip/index.md +++ b/content/show/tooltip/index.md @@ -374,6 +374,7 @@ function Demo() { | className | 弹出层的样式名 | string | | | | clickToHide | 点击弹出层及内部任一元素时是否自动关闭弹层 | boolean | false | | | disableFocusListener | trigger为`hover`时，不响应键盘聚焦弹出浮层事件，详见[issue#977](https://github.com/DouyinFE/semi-design/issues/977) | boolean | false | **2.17.0** | +| exist | 控制tooltip是否出现 | boolean | true | | | getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。 | function():HTMLElement | () => document.body | | | keepDOM | 关闭时是否保留内部组件不销毁 | boolean | false | **2.31.0** | | margin | 计算溢出时的增加的冗余值，详见[issue#549](https://github.com/DouyinFE/semi-design/issues/549) | number ｜ MarginObject | 0 | **2.23.0**| diff --git a/packages/semi-ui/popover/index.tsx b/packages/semi-ui/popover/index.tsx index ab2fef3e5e..cbc468ea7f 100644 --- a/packages/semi-ui/popover/index.tsx +++ b/packages/semi-ui/popover/index.tsx @@ -50,7 +50,8 @@ export interface PopoverProps extends BaseProps { clickToHide?: TooltipProps['clickToHide']; disableFocusListener?: boolean; afterClose?: () => void; - keepDOM?: boolean + keepDOM?: boolean; + exist?: boolean } export interface PopoverState { @@ -90,6 +91,7 @@ class Popover extends React.PureComponent { prefixCls: PropTypes.string, guardFocus: PropTypes.bool, disableArrowKeyDown: PropTypes.bool, + exist: PropTypes.bool, }; static __SemiComponentName__ = "Popover"; @@ -160,6 +162,7 @@ class Popover extends React.PureComponent { position, style, trigger, + exist, ...attr } = this.props; let { spacing } = this.props; @@ -193,6 +196,7 @@ class Popover extends React.PureComponent { showArrow={arrow} arrowBounding={arrowBounding} role={role} + exist={exist} > {children} diff --git a/packages/semi-ui/tooltip/index.tsx b/packages/semi-ui/tooltip/index.tsx index 3452ef3f23..ad6ca9f147 100644 --- a/packages/semi-ui/tooltip/index.tsx +++ b/packages/semi-ui/tooltip/index.tsx @@ -83,7 +83,8 @@ export interface TooltipProps extends BaseProps { preventScroll?: boolean; disableFocusListener?: boolean; afterClose?: () => void; - keepDOM?: boolean + keepDOM?: boolean; + exist?: boolean } interface TooltipState { @@ -149,6 +150,7 @@ export default class Tooltip extends BaseComponent { returnFocusOnClose: PropTypes.bool, preventScroll: PropTypes.bool, keepDOM: PropTypes.bool, + exist: PropTypes.bool, }; static __SemiComponentName__ = "Tooltip"; static defaultProps = getDefaultPropsFromGlobalConfig(Tooltip.__SemiComponentName__, { @@ -176,7 +178,8 @@ export default class Tooltip extends BaseComponent { onEscKeyDown: noop, disableFocusListener: false, disableArrowKeyDown: false, - keepDOM: false + keepDOM: false, + exist: true, }); eventManager: Event; @@ -602,7 +605,7 @@ export default class Tooltip extends BaseComponent { id, isPositionUpdated } = this.state; - const { prefixCls, content, showArrow, style, motion, role, zIndex } = this.props; + const { prefixCls, content, showArrow, style, motion, role, zIndex, exist } = this.props; const contentNode = this.renderContentNode(content); const { className: propClassName } = this.props; const direction = this.context.direction; @@ -655,7 +658,7 @@ export default class Tooltip extends BaseComponent { return ( - + exist && {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
Date: Mon, 4 Mar 2024 19:56:19 +0800 Subject: [PATCH 2/2] feat: exist control event --- packages/semi-foundation/tooltip/foundation.ts | 4 ++-- packages/semi-ui/tooltip/index.tsx | 9 +++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/semi-foundation/tooltip/foundation.ts b/packages/semi-foundation/tooltip/foundation.ts index 12346a241c..c543ecd469 100644 --- a/packages/semi-foundation/tooltip/foundation.ts +++ b/packages/semi-foundation/tooltip/foundation.ts @@ -86,9 +86,9 @@ export default class Tooltip

, S = Record> e } init() { - const { wrapperId } = this.getProps(); + const { wrapperId, exist } = this.getProps(); this._mounted = true; - this._bindEvent(); + exist && this._bindEvent(); this._shouldShow(); this._initContainerPosition(); if (!wrapperId) { diff --git a/packages/semi-ui/tooltip/index.tsx b/packages/semi-ui/tooltip/index.tsx index ad6ca9f147..755f2d94bb 100644 --- a/packages/semi-ui/tooltip/index.tsx +++ b/packages/semi-ui/tooltip/index.tsx @@ -527,6 +527,15 @@ export default class Tooltip extends BaseComponent { this.props.visible ? this.foundation.show() : this.foundation.hide(); } } + + if (prevProps.exist !== this.props.exist) { + if (this.props.exist) { + this.foundation._bindEvent(); + } else { + this.foundation.unBindEvent(); + } + } + if (!isEqual(prevProps.rePosKey, this.props.rePosKey)) { this.rePosition(); }