From ecce26e45b7c4762565117f9a2fc1c210ba57bfc Mon Sep 17 00:00:00 2001 From: luanraithz Date: Sat, 9 Feb 2019 15:30:35 -0200 Subject: [PATCH 1/3] remove useless code, change linceses to license, and creating disabled prop --- examples/disabled.html | 0 examples/disabled.js | 101 +++++++++++++++++++++++++++++++++++++++++ examples/disabled.less | 26 +++++++++++ examples/simple.js | 7 +-- package.json | 2 +- src/index.js | 9 ++++ 6 files changed, 138 insertions(+), 7 deletions(-) create mode 100644 examples/disabled.html create mode 100644 examples/disabled.js create mode 100644 examples/disabled.less 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..2524b247 --- /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..94b2338b 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'], }, @@ -107,10 +107,6 @@ class Test extends React.Component { }); } - onVisibleChange = (visible) => { - console.log('tooltip', visible); - } - onMask = (e) => { this.setState({ mask: e.target.checked, @@ -271,7 +267,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) { From b6c92b12e1371692e7577bf59e8e20a4fb28c7ca Mon Sep 17 00:00:00 2001 From: luanraithz Date: Sat, 9 Feb 2019 15:32:46 -0200 Subject: [PATCH 2/3] Add disabled prop to documentation --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) 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) + From 58253d57032014426827a14180455d83e559b462 Mon Sep 17 00:00:00 2001 From: luanraithz Date: Sun, 10 Feb 2019 12:47:28 -0200 Subject: [PATCH 3/3] fix linters --- examples/disabled.js | 178 +++++++++++++++++++++---------------------- examples/simple.js | 4 - src/index.js | 18 ++--- 3 files changed, 98 insertions(+), 102 deletions(-) diff --git a/examples/disabled.js b/examples/disabled.js index 2524b247..5b266997 100644 --- a/examples/disabled.js +++ b/examples/disabled.js @@ -1,101 +1,101 @@ -import React from 'react' -import ReactDOM from 'react-dom' +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' +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) - } + 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 -
- } - > - - + 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('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 -
- } - > - - + } + > + + +
+ 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/simple.js b/examples/simple.js index 94b2338b..c6e19f8e 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -46,10 +46,6 @@ function preventDefault(e) { e.preventDefault(); } -function getPopupContainer(trigger) { - return trigger.parentNode; -} - class Test extends React.Component { state = { mask: false, diff --git a/src/index.js b/src/index.js index 2537b22f..683d1509 100644 --- a/src/index.js +++ b/src/index.js @@ -78,7 +78,7 @@ export default class Trigger extends React.Component { maskAnimation: PropTypes.string, stretch: PropTypes.string, alignPoint: PropTypes.bool, // Maybe we can support user pass position in the future - disabled: PropTypes.bool + disabled: PropTypes.bool, }; static contextTypes = contextTypes; @@ -106,7 +106,7 @@ export default class Trigger extends React.Component { action: [], showAction: [], hideAction: [], - disabled: false + disabled: false, }; constructor(props) { @@ -211,7 +211,7 @@ export default class Trigger extends React.Component { } onMouseEnter = (e) => { - if (this.props.disabled) return + if (this.props.disabled) return; const { mouseEnterDelay } = this.props; this.fireEvents('onMouseEnter', e); this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e); @@ -223,7 +223,7 @@ export default class Trigger extends React.Component { }; onMouseLeave = (e) => { - if (this.props.disabled) return + if (this.props.disabled) return; this.fireEvents('onMouseLeave', e); this.delaySetPopupVisible(false, this.props.mouseLeaveDelay); } @@ -233,7 +233,7 @@ export default class Trigger extends React.Component { } onPopupMouseLeave = (e) => { - if (this.props.disabled) return + if (this.props.disabled) return; // https://github.com/react-component/trigger/pull/13 // react bug? if (e.relatedTarget && !e.relatedTarget.setTimeout && @@ -246,7 +246,7 @@ export default class Trigger extends React.Component { } onFocus = (e) => { - if (this.props.disabled) return + if (this.props.disabled) return; this.fireEvents('onFocus', e); // incase focusin and focusout this.clearDelayTimer(); @@ -267,7 +267,7 @@ export default class Trigger extends React.Component { } onBlur = (e) => { - if (this.props.disabled) return + if (this.props.disabled) return; this.fireEvents('onBlur', e); this.clearDelayTimer(); if (this.isBlurToHide()) { @@ -276,7 +276,7 @@ export default class Trigger extends React.Component { } onContextMenu = (e) => { - if (this.props.disabled) return + if (this.props.disabled) return; e.preventDefault(); this.fireEvents('onContextMenu', e); this.setPopupVisible(true, e); @@ -289,7 +289,7 @@ export default class Trigger extends React.Component { } onClick = (event) => { - if (this.props.disabled) return + if (this.props.disabled) return; this.fireEvents('onClick', event); // focus will trigger click if (this.focusTime) {