feat(Balloon): add mouseEnterDelay and mouseLeaveDelay, with higher p…

…riority than delay
alibaba-fusion · Jun 24, 2024 · 550297f · 550297f
1 parent 09303ce
commit 550297f
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 2 deletions.
diff --git a/components/balloon/__tests__/balloon-spec.js b/components/balloon/__tests__/balloon-spec.js
@@ -249,6 +249,31 @@ describe('Balloon', () => {
  assert(document.querySelector('.next-balloon-left-top') !== null);
  });
  });
+ describe('balloon delay', () => {
+ it('add mouseEnterDelay and mouseLeaveDelay, with higher priority than delay.', async () => {
+ const wrapper = mount(
+ <Balloon trigger={<div>trigger1111111</div>} mouseEnterDelay={4000} mouseLeaveDelay={4000} triggerType="hover">
+ trigger
+ </Balloon>
+ );
+
+ wrapper.find('div').simulate('mouseenter');
+ await delay(2000);
+ assert(document.querySelector('.next-balloon') === null);
+
+ await delay(2200);
+ assert(document.querySelector('.next-balloon') !== null);
+
+ wrapper.find('div').simulate('mouseleave');
+
+ await delay(2000);
+ assert(document.querySelector('.next-balloon') !== null);
+
+ await delay(2500);
+ assert(document.querySelector('.next-balloon') === null);
+
+ });
+ })
 });
 
 describe('Balloon onClose ComponentWillReceiveProps closeIcon', () => {

diff --git a/components/balloon/__tests__/tooltip-spec.js b/components/balloon/__tests__/tooltip-spec.js
@@ -16,6 +16,8 @@ const trigger = (
  xiachi
  </span>
 );
+const delay = time => new Promise(resolve => setTimeout(resolve, time));
+
 describe('Tooltip', () => {
  let defaultWrapper = {};
 
@@ -99,4 +101,24 @@ describe('Tooltip', () => {
  done();
  }, 300);
  });
+
+ it('add mouseEnterDelay and mouseLeaveDelay, with higher priority than delay.', async () => {
+ const wrapper = mount(<Tooltip trigger={<div>trigger1111111</div>} delay={500} mouseEnterDelay={1000} mouseLeaveDelay={1000}>test</Tooltip>);
+
+ wrapper.find('div').simulate('mouseenter');
+
+ await delay(500);
+ assert(document.querySelector('.next-balloon-tooltip') === null);
+
+ await delay(550);
+ assert(document.querySelector('.next-balloon-tooltip') !== null);
+
+ wrapper.find('div').simulate('mouseleave');
+
+ await delay(500);
+ assert(document.querySelector('.next-balloon-tooltip') !== null);
+
+ await delay(1000);
+ assert(document.querySelector('.next-balloon-tooltip') === null);
+ });
 });
diff --git a/components/balloon/balloon.jsx b/components/balloon/balloon.jsx
@@ -114,6 +114,14 @@ class Balloon extends React.Component {
  * 弹层在触发以后的延时显示, 单位毫秒 ms
  */
  delay: PropTypes.number,
+ /**
+ * 鼠标放置后的延时显示, 单位毫秒 ms
+ */
+ mouseEnterDelay: PropTypes.number,
+ /**
+ * 鼠标离开后的延时显示, 单位毫秒 ms
+ */
+ mouseLeaveDelay: PropTypes.number,
  /**
  * 浮层关闭后触发的事件, 如果有动画，则在动画结束后触发
  */
@@ -327,6 +335,8 @@ class Balloon extends React.Component {
  closable,
  shouldUpdatePosition,
  delay,
+ mouseEnterDelay,
+ mouseLeaveDelay,
  needAdjust,
  autoAdjust,
  safeId,
@@ -401,6 +411,8 @@ class Balloon extends React.Component {
 
  const otherProps = {
  delay: delay,
+ mouseEnterDelay: mouseEnterDelay,
+ mouseLeaveDelay: mouseLeaveDelay,
  shouldUpdatePosition: shouldUpdatePosition,
  needAdjust: needAdjust,
  align: alignMap[align].align,

diff --git a/components/balloon/index.d.ts b/components/balloon/index.d.ts
@@ -61,6 +61,16 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLElement>, CommonP
  */
  delay?: number;
 
+ /**
+ * 鼠标放置后的延时显示, 单位毫秒 ms
+ */
+ mouseEnterDelay: PropTypes.number;
+
+ /**
+ * 鼠标离开后的延时显示, 单位毫秒 ms
+ */
+ mouseLeaveDelay: PropTypes.number;
+
  /**
  * 是否pure render
  */
@@ -175,6 +185,16 @@ export interface BalloonProps extends HTMLAttributesWeak, CommonProps {
  */
  delay?: number;
 
+ /**
+ * 鼠标放置后的延时显示, 单位毫秒 ms
+ */
+ mouseEnterDelay: PropTypes.number;
+
+ /**
+ * 鼠标离开后的延时显示, 单位毫秒 ms
+ */
+ mouseLeaveDelay: PropTypes.number;
+
  /**
  * 浮层关闭后触发的事件, 如果有动画，则在动画结束后触发
  */

diff --git a/components/balloon/tooltip.jsx b/components/balloon/tooltip.jsx
@@ -73,6 +73,14 @@ export default class Tooltip extends React.Component {
  * 如果需要让 Tooltip 内容可被点击，可以设置这个参数，例如 100
  */
  delay: PropTypes.number,
+ /**
+ * 鼠标放置后的延时显示, 单位毫秒 ms
+ */
+ mouseEnterDelay: PropTypes.number,
+ /**
+ * 鼠标离开后的延时显示, 单位毫秒 ms
+ */
+ mouseLeaveDelay: PropTypes.number,
  /**
  * 开启 v2 版本
  */
@@ -165,6 +173,8 @@ export default class Tooltip extends React.Component {
  autoAdjust,
  rtl,
  delay,
+ mouseEnterDelay,
+ mouseLeaveDelay,
  v2,
  arrowPointToCenter,
  ...others
@@ -219,6 +229,8 @@ export default class Tooltip extends React.Component {
 
  const otherProps = {
  delay: delay,
+ mouseEnterDelay: mouseEnterDelay,
+ mouseLeaveDelay: mouseLeaveDelay,
  shouldUpdatePosition: true,
  needAdjust: false,
  align: alignMap[align].align,

diff --git a/components/overlay/index.d.ts b/components/overlay/index.d.ts
@@ -180,6 +180,16 @@ export interface PopupProps extends React.HTMLAttributes<HTMLElement>, CommonPro
  */
  delay?: number;
 
+ /**
+ * 鼠标放置后的延时显示, 单位毫秒 ms
+ */
+ mouseEnterDelay: PropTypes.number;
+
+ /**
+ * 鼠标离开后的延时显示, 单位毫秒 ms
+ */
+ mouseLeaveDelay: PropTypes.number;
+
  /**
  * trigger 是否可以关闭弹层
  */

diff --git a/components/overlay/popup.jsx b/components/overlay/popup.jsx
@@ -53,6 +53,14 @@ class Popup extends Component {
  * 弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效
  */
  delay: PropTypes.number,
+ /**
+ * 鼠标放置后的延时显示, 单位毫秒 ms
+ */
+ mouseEnterDelay: PropTypes.number,
+ /**
+ * 鼠标离开后的延时显示, 单位毫秒 ms
+ */
+ mouseLeaveDelay: PropTypes.number,
  /**
  * trigger 是否可以关闭弹层
  */
@@ -184,7 +192,7 @@ class Popup extends Component {
  if (!this.state.visible) {
  this._showTimer = setTimeout(() => {
  this.handleVisibleChange(true, 'fromTrigger', e);
- }, this.props.delay);
+ }, (this.props.mouseEnterDelay === null || this.props.mouseEnterDelay === undefined) ? this.props.delay : this.props.mouseEnterDelay);
  }
  }
 
@@ -196,7 +204,7 @@ class Popup extends Component {
  if (this.state.visible) {
  this._hideTimer = setTimeout(() => {
  this.handleVisibleChange(false, type || 'fromTrigger', e);
- }, this.props.delay);
+ }, (this.props.mouseLeaveDelay === null || this.props.mouseLeaveDelay === undefined) ? this.props.delay : this.props.mouseLeaveDelay);
  }
  }