From 7710d59b36861e36e01aeb3d4c478a89803c0ab9 Mon Sep 17 00:00:00 2001 From: wwayne Date: Fri, 30 Sep 2016 16:31:21 +0800 Subject: [PATCH] Hide tooltip if the tip is empty or disabled --- example/src/index.js | 1 + src/index.js | 35 +++++++++++++++++++---------------- src/utils/getTipContent.js | 1 + 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/example/src/index.js b/example/src/index.js index 37a4f74ab..22470a2c6 100755 --- a/example/src/index.js +++ b/example/src/index.js @@ -181,6 +181,7 @@ const Test = React.createClass({
(･ω´･ ) + {/* empty testing */}
diff --git a/src/index.js b/src/index.js index b02c7caae..73d8aed84 100644 --- a/src/index.js +++ b/src/index.js @@ -69,7 +69,9 @@ class ReactTooltip extends Component { eventOff: props.eventOff || null, currentEvent: null, // Current mouse event currentTarget: null, // Current target of mouse event - ariaProps: parseAria(props) // aria- and role attributes + ariaProps: parseAria(props), // aria- and role attributes + isEmptyTip: false, + disable: false } this.bind([ @@ -207,11 +209,6 @@ class ReactTooltip extends Component { * When mouse enter, show the tooltip */ showTooltip (e, isGlobalCall) { - const disabled = e.currentTarget.getAttribute('data-tip-disable') - ? e.currentTarget.getAttribute('data-tip-disable') === 'true' - : (this.props.disable || false) - if (disabled) return - if (isGlobalCall) { // Don't trigger other elements belongs to other ReactTooltip const targetArray = this.getTargetArray(this.props.id) @@ -234,6 +231,7 @@ class ReactTooltip extends Component { } } const placeholder = getTipContent(originTooltip, content, isMultiline) + const isEmptyTip = typeof placeholder === 'string' && placeholder === '' // If it is focus event or called by ReactTooltip.show, switch to `solid` effect const switchToSolid = e instanceof window.FocusEvent || isGlobalCall @@ -248,6 +246,7 @@ class ReactTooltip extends Component { this.setState({ placeholder, + isEmptyTip, place: e.currentTarget.getAttribute('data-place') || this.props.place || 'top', type: e.currentTarget.getAttribute('data-type') || this.props.type || 'dark', effect: switchToSolid && 'solid' || e.currentTarget.getAttribute('data-effect') || this.props.effect || 'float', @@ -260,7 +259,10 @@ class ReactTooltip extends Component { border: e.currentTarget.getAttribute('data-border') ? e.currentTarget.getAttribute('data-border') === 'true' : (this.props.border || false), - extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || '' + extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || '', + disable: e.currentTarget.getAttribute('data-tip-disable') + ? e.currentTarget.getAttribute('data-tip-disable') === 'true' + : (this.props.disable || false) }, () => { if (scrollHide) this.addScrollListener(e) this.updateTooltip(e) @@ -270,8 +272,10 @@ class ReactTooltip extends Component { if (this.mount) { const {getContent} = this.props const placeholder = getTipContent(originTooltip, getContent[0](), isMultiline) + const isEmptyTip = typeof placeholder === 'string' && placeholder === '' this.setState({ - placeholder + placeholder, + isEmptyTip }) } }, getContent[1]) @@ -283,14 +287,14 @@ class ReactTooltip extends Component { * When mouse hover, updatetooltip */ updateTooltip (e) { - const {delayShow, show} = this.state + const {delayShow, show, isEmptyTip, disable} = this.state const {afterShow} = this.props let {placeholder} = this.state const delayTime = show ? 0 : parseInt(delayShow, 10) const eventTarget = e.currentTarget + if (isEmptyTip || disable) return // if the tooltip is empty, disable the tooltip const updateState = () => { - if (typeof placeholder === 'string') placeholder = placeholder.trim() if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) { const isInvisible = !this.state.show this.setState({ @@ -316,15 +320,16 @@ class ReactTooltip extends Component { * When mouse leave, hide tooltip */ hideTooltip (e, hasTarget) { + const {delayHide, isEmptyTip, disable} = this.state + const {afterHide} = this.props if (!this.mount) return + if (isEmptyTip || disable) return // if the tooltip is empty, disable the tooltip if (hasTarget) { // Don't trigger other elements belongs to other ReactTooltip const targetArray = this.getTargetArray(this.props.id) const isMyElement = targetArray.some(ele => ele === e.currentTarget) if (!isMyElement || !this.state.show) return } - const {delayHide} = this.state - const {afterHide} = this.props const resetState = () => { const isVisible = this.state.show this.setState({ @@ -360,7 +365,6 @@ class ReactTooltip extends Component { updatePosition () { const {currentEvent, currentTarget, place, effect, offset} = this.state const node = ReactDOM.findDOMNode(this) - const result = getPosition(currentEvent, currentTarget, node, place, effect, offset) if (result.isNewState) { @@ -397,10 +401,10 @@ class ReactTooltip extends Component { } render () { - const {placeholder, extraClass, html, ariaProps} = this.state + const {placeholder, extraClass, html, ariaProps, disable, isEmptyTip} = this.state let tooltipClass = classname( '__react_component_tooltip', - {'show': this.state.show}, + {'show': this.state.show && !disable && !isEmptyTip}, {'border': this.state.border}, {'place-top': this.state.place === 'top'}, {'place-bottom': this.state.place === 'bottom'}, @@ -413,7 +417,6 @@ class ReactTooltip extends Component { {'type-info': this.state.type === 'info'}, {'type-light': this.state.type === 'light'} ) - if (html) { return (
/ if (!multiline || multiline === 'false' || !regexp.test(tip)) { + // No trim(), so that user can keep their input return tip }