Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Tooltip，Popover): add the exist props #2073

Open
wants to merge 4 commits into
base: release
Choose a base branch
from
Open

feat(Tooltip，Popover): add the exist props #2073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ebc14a5
feat(Tooltip，Popover): add the exist props
sunsunmonkey Feb 17, 2024
dc3001e
Merge branch 'release' into feat-exist-props
pointhalo Mar 4, 2024
5a27d7b
feat: exist control event
sunsunmonkey Mar 4, 2024
7f61672
Merge branch 'feat-exist-props' of https://github.com/sunsunmonkey/se…
sunsunmonkey Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions content/show/popover/index-en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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** |
Expand Down
1 change: 1 addition & 0 deletions content/show/popover/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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** |
Expand Down
1 change: 1 addition & 0 deletions content/show/tooltip/index-en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**|
Expand Down
1 change: 1 addition & 0 deletions content/show/tooltip/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ｜ <ApiType detail='{ marginLeft: number; marginTop: number; marginRight: number; marginBottom: number }'>MarginObject</ApiType> | 0 | **2.23.0**|
Expand Down
4 changes: 2 additions & 2 deletions packages/semi-foundation/tooltip/foundation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> 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) {
Expand Down
6 changes: 5 additions & 1 deletion packages/semi-ui/popover/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -90,6 +91,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
prefixCls: PropTypes.string,
guardFocus: PropTypes.bool,
disableArrowKeyDown: PropTypes.bool,
exist: PropTypes.bool,
};
static __SemiComponentName__ = "Popover";

Expand Down Expand Up @@ -160,6 +162,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
position,
style,
trigger,
exist,
...attr
} = this.props;
let { spacing } = this.props;
Expand Down Expand Up @@ -193,6 +196,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
showArrow={arrow}
arrowBounding={arrowBounding}
role={role}
exist={exist}
>
{children}
</Tooltip>
Expand Down
20 changes: 16 additions & 4 deletions packages/semi-ui/tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@ export interface TooltipProps extends BaseProps {
preventScroll?: boolean;
disableFocusListener?: boolean;
afterClose?: () => void;
keepDOM?: boolean
keepDOM?: boolean;
exist?: boolean
}

interface TooltipState {
Expand Down Expand Up @@ -149,6 +150,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
returnFocusOnClose: PropTypes.bool,
preventScroll: PropTypes.bool,
keepDOM: PropTypes.bool,
exist: PropTypes.bool,
};
static __SemiComponentName__ = "Tooltip";
static defaultProps = getDefaultPropsFromGlobalConfig(Tooltip.__SemiComponentName__, {
Expand Down Expand Up @@ -176,7 +178,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
onEscKeyDown: noop,
disableFocusListener: false,
disableArrowKeyDown: false,
keepDOM: false
keepDOM: false,
exist: true,
});

eventManager: Event;
Expand Down Expand Up @@ -524,6 +527,15 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
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();
}
Expand Down Expand Up @@ -602,7 +614,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
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;
Expand Down Expand Up @@ -655,7 +667,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {


return (
<Portal getPopupContainer={this.props.getPopupContainer} style={{ zIndex }}>
exist && <Portal getPopupContainer={this.props.getPopupContainer} style={{ zIndex }}>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
<div
// listen keyboard event, don't move tabIndex -1
Expand Down