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) {