From e768028131590fbdb8f91b28ac79b74ab835c9aa Mon Sep 17 00:00:00 2001 From: Ak2hol Date: Fri, 20 Aug 2021 15:23:14 +0800 Subject: [PATCH] FIX: toolTip Opt --- components/tooltip/index.js | 66 +++++++++++++++++++------------------ 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/components/tooltip/index.js b/components/tooltip/index.js index 3acc493..c7ee631 100644 --- a/components/tooltip/index.js +++ b/components/tooltip/index.js @@ -10,7 +10,7 @@ import { trimList, getOtherProps, $, SVG } from '../util' import { StyledToolTip, StyledToolTipSpan } from './styled' -const EVENT_NAME_LIST = ['hover', 'click'] +const EVENT_NAME_LIST = [ 'hover', 'click' ] const TIP_ROOT_ID = 'IBOT_TOOLTIP_ROOT' @@ -30,7 +30,7 @@ function parseContent (content, eventName = 'hover') { isString(content) || isArray(content) || isValidElement(content) ? content : EVENT_NAME_LIST.includes(eventName) && isObject(content) - ? content[eventName] || content.hover + ? content[ eventName ] || content.hover : null ) } @@ -39,12 +39,12 @@ export default class Tooltip extends PureComponent { state = { isOpen: false, isClicked: false, - $text: null, + $text: null } static propTypes = { - theme: PropTypes.oneOf(['core', 'plain']), - position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired, + theme: PropTypes.oneOf([ 'core', 'plain' ]), + position: PropTypes.oneOf([ 'top', 'right', 'bottom', 'left' ]).isRequired, arrowed: PropTypes.bool, inflexible: PropTypes.bool, @@ -55,23 +55,23 @@ export default class Tooltip extends PureComponent { PropTypes.node, PropTypes.shape( EVENT_NAME_LIST.reduce( - (res, n) => Object.assign(res, { [n]: PropTypes.node }), - {}, - ), - ), + (res, n) => Object.assign(res, { [ n ]: PropTypes.node }), + {} + ) + ) ]), onMouseEnter: PropTypes.func, onClick: PropTypes.func, onMouseLeave: PropTypes.func, - delay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + delay: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]), + duration: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]), children: PropTypes.node, html: PropTypes.string, - setRef: PropTypes.func, + setRef: PropTypes.func } static defaultProps = { @@ -86,7 +86,7 @@ export default class Tooltip extends PureComponent { tipClassName: '', setRef: () => null, - onClick: () => null, + onClick: () => null } ref = React.createRef() @@ -97,6 +97,8 @@ export default class Tooltip extends PureComponent { componentDidUpdate (_, { isOpen: wasOpen }) { const { duration } = this.props + if (!duration) return null + const { isOpen } = this.state if (duration > 0 && !wasOpen && isOpen) { @@ -112,7 +114,7 @@ export default class Tooltip extends PureComponent { onClick = e => { this.setState({ isOpen: !!parseContent(this.props.content, 'click'), - isClicked: true, + isClicked: true }) e.persist() @@ -123,10 +125,10 @@ export default class Tooltip extends PureComponent { hoverTimeout: setTimeout( () => this.setState( { isOpen: !!parseContent(this.props.content, 'hover') }, - this.props.onMouseEnter, + this.props.onMouseEnter ), - this.props.delay, - ), + this.props.delay + ) }) onMouseLeave = () => { @@ -134,7 +136,7 @@ export default class Tooltip extends PureComponent { this.setState( { isOpen: false, isClicked: false }, - this.props.onMouseLeave, + this.props.onMouseLeave ) } @@ -146,7 +148,7 @@ export default class Tooltip extends PureComponent { content, html, - children, + children } = this.props const { isOpen, isClicked } = this.state @@ -155,7 +157,7 @@ export default class Tooltip extends PureComponent { 'Tooltip', className, isOpen ? 'is-open' : '', - isClicked ? 'is-clicked' : '', + isClicked ? 'is-clicked' : '' ]) const eventName = isClicked ? 'click' : 'hover' @@ -172,9 +174,9 @@ export default class Tooltip extends PureComponent { <> { html ? : children } - {parseContent(content, eventName)} - + } ) } @@ -196,7 +198,7 @@ class Tip extends PureComponent { prevProps: this.props, isOpen: this.props.isOpen, - position: this.props.position, + position: this.props.position } static propTypes = { @@ -205,12 +207,12 @@ class Tip extends PureComponent { eventName: PropTypes.oneOf(EVENT_NAME_LIST), $text: PropTypes.instanceOf(Element), - theme: PropTypes.oneOf(['plain', 'core']), - position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), + theme: PropTypes.oneOf([ 'plain', 'core' ]), + position: PropTypes.oneOf([ 'top', 'right', 'bottom', 'left' ]), inflexible: PropTypes.bool, arrowed: PropTypes.bool, - children: PropTypes.node, + children: PropTypes.node } static getDerivedStateFromProps (props, { prevProps }) { @@ -218,7 +220,7 @@ class Tip extends PureComponent { return { prevProps: props, isOpen: props.isOpen, - position: props.position, + position: props.position } } return null @@ -253,8 +255,8 @@ class Tip extends PureComponent { if (!$text || !$tipBase || !$tip) return const flexible = !inflexible - const [minX, minY] = [10, 10] - const [maxX, maxY] = [window.innerWidth - 10, window.innerHeight - 10] + const [ minX, minY ] = [ 10, 10 ] + const [ maxX, maxY ] = [ window.innerWidth - 10, window.innerHeight - 10 ] const { top, right, bottom, left } = $text.getBoundingClientRect() const { offsetWidth: wOf$text, offsetHeight: hOf$text } = $text @@ -272,7 +274,7 @@ class Tip extends PureComponent { top: `${top}px`, left: `${left}px`, width: `${wOf$text}px`, - height: `${hOf$text}px`, + height: `${hOf$text}px` }) // Main-axis position adjustment: @@ -359,7 +361,7 @@ class Tip extends PureComponent { className, `on-${position}`, inflexible && 'inflexible', - arrowed && 'arrowed', + arrowed && 'arrowed' ]) return isOpen && (