diff --git a/README.md b/README.md
index b1f83a39..a5c405a2 100644
--- a/README.md
+++ b/README.md
@@ -245,6 +245,12 @@ ReactDOM.render((
|
Let popup div stretch with trigger element. enums of 'width', 'minWidth', 'height', 'minHeight'. (You can also mixed with 'height minWidth') |
+
+ disabled |
+ boolean |
+ false |
+ Flag for disable the popup, (none of the events is triggered when this flag is setted to true) |
+
diff --git a/examples/disabled.html b/examples/disabled.html
new file mode 100644
index 00000000..e69de29b
diff --git a/examples/disabled.js b/examples/disabled.js
new file mode 100644
index 00000000..5b266997
--- /dev/null
+++ b/examples/disabled.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Trigger from 'rc-trigger';
+import 'rc-trigger/assets/index.less';
+import './disabled.less';
+import { builtinPlacements } from './simple';
+
+class Test extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ disabled: false,
+ };
+ this.handleDisabledChanged = this.handleDisabledChanged.bind(this);
+ }
+
+ handleDisabledChanged(event) {
+ this.setState({ disabled: event.target.checked });
+ }
+
+ render() {
+ const { disabled } = this.state;
+ return (
+
+
+
+
+
+
+
+
console.log('Click popup visible changed')}
+ popupPlacement={'bottom'}
+ builtinPlacements={builtinPlacements}
+ action={['click']}
+ disabled={disabled}
+ popup={
+ I'm a popup
+ }
+ >
+
+
+
+
+
console.log('Hover popup visible changed')}
+ popupPlacement={'bottom'}
+ builtinPlacements={builtinPlacements}
+ action={['hover']}
+ disabled={disabled}
+ popup={
+
+ I'm a popup
+
+ }
+ >
+
+
+
+
+
console.log('Hover popup visible changed')}
+ popupPlacement={'contextMenu'}
+ builtinPlacements={builtinPlacements}
+ action={['hover']}
+ disabled={disabled}
+ popupAlign={{
+ points: ['tl', 'bl'],
+ offset: [0, 3],
+ }}
+ popup={
+
+ I'm a popup
+
+ }
+ >
+
+
+
+
console.log('Focus popup visible changed')}
+ popupPlacement={'bottom'}
+ builtinPlacements={builtinPlacements}
+ action={['focus']}
+ disabled={disabled}
+ popup={
+
+ I'm a popup
+
+ }
+ >
+
+
+
+
+ );
+ }
+}
+
+ReactDOM.render(, document.getElementById('__react-content'));
diff --git a/examples/disabled.less b/examples/disabled.less
new file mode 100644
index 00000000..728e4692
--- /dev/null
+++ b/examples/disabled.less
@@ -0,0 +1,26 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 300px;
+ .disabledWrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 50px;
+ font-size: 24px;
+ input {
+ margin-right: 10px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+ .examples {
+ display: flex;
+ .trigger-example {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+}
\ No newline at end of file
diff --git a/examples/simple.js b/examples/simple.js
index d5f17a25..c6e19f8e 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -15,7 +15,7 @@ function getPopupAlign(state) {
};
}
-const builtinPlacements = {
+export const builtinPlacements = {
left: {
points: ['cr', 'cl'],
},
@@ -46,10 +46,6 @@ function preventDefault(e) {
e.preventDefault();
}
-function getPopupContainer(trigger) {
- return trigger.parentNode;
-}
-
class Test extends React.Component {
state = {
mask: false,
@@ -107,10 +103,6 @@ class Test extends React.Component {
});
}
- onVisibleChange = (visible) => {
- console.log('tooltip', visible);
- }
-
onMask = (e) => {
this.setState({
mask: e.target.checked,
@@ -271,7 +263,6 @@ class Test extends React.Component {
{
+ if (this.props.disabled) return;
const { mouseEnterDelay } = this.props;
this.fireEvents('onMouseEnter', e);
this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
@@ -220,6 +223,7 @@ export default class Trigger extends React.Component {
};
onMouseLeave = (e) => {
+ if (this.props.disabled) return;
this.fireEvents('onMouseLeave', e);
this.delaySetPopupVisible(false, this.props.mouseLeaveDelay);
}
@@ -229,6 +233,7 @@ export default class Trigger extends React.Component {
}
onPopupMouseLeave = (e) => {
+ if (this.props.disabled) return;
// https://github.com/react-component/trigger/pull/13
// react bug?
if (e.relatedTarget && !e.relatedTarget.setTimeout &&
@@ -241,6 +246,7 @@ export default class Trigger extends React.Component {
}
onFocus = (e) => {
+ if (this.props.disabled) return;
this.fireEvents('onFocus', e);
// incase focusin and focusout
this.clearDelayTimer();
@@ -261,6 +267,7 @@ export default class Trigger extends React.Component {
}
onBlur = (e) => {
+ if (this.props.disabled) return;
this.fireEvents('onBlur', e);
this.clearDelayTimer();
if (this.isBlurToHide()) {
@@ -269,6 +276,7 @@ export default class Trigger extends React.Component {
}
onContextMenu = (e) => {
+ if (this.props.disabled) return;
e.preventDefault();
this.fireEvents('onContextMenu', e);
this.setPopupVisible(true, e);
@@ -281,6 +289,7 @@ export default class Trigger extends React.Component {
}
onClick = (event) => {
+ if (this.props.disabled) return;
this.fireEvents('onClick', event);
// focus will trigger click
if (this.focusTime) {