Merge branch 'master' of github.com:discovery-digital/react-tooltip-lite

discovery-digital · Nov 13, 2019 · 189ca77 · 189ca77
2 parents 11d9019 + 58c7e60
commit 189ca77
Show file tree

Hide file tree

Showing 6 changed files with 4,044 additions and 340 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -40,188 +40,188 @@ var defaultColor = '#fff';
 var defaultBg = '#333';
 
 var Tooltip = function (_React$Component) {
-  _inherits(Tooltip, _React$Component);
+    _inherits(Tooltip, _React$Component);
 
-  function Tooltip() {
-    _classCallCheck(this, Tooltip);
+    function Tooltip() {
+        _classCallCheck(this, Tooltip);
 
-    var _this = _possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).call(this));
+        var _this = _possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).call(this));
 
-    _this.state = { showTip: false, hasHover: false, ignoreShow: false };
+        _this.state = { showTip: false, hasHover: false, ignoreShow: false };
 
-    _this.showTip = _this.showTip.bind(_this);
-    _this.hideTip = _this.hideTip.bind(_this);
-    _this.checkHover = _this.checkHover.bind(_this);
-    _this.cancelTip = _this.cancelTip.bind(_this);
-    _this.toggleTip = _this.toggleTip.bind(_this);
-    _this.startHover = _this.startHover.bind(_this);
-    return _this;
-  }
-
-  _createClass(Tooltip, [{
-    key: 'toggleTip',
-    value: function toggleTip() {
-      this.setState({ showTip: !this.state.showTip });
-    }
-  }, {
-    key: 'showTip',
-    value: function showTip() {
-      this.setState({ showTip: true });
-    }
-  }, {
-    key: 'hideTip',
-    value: function hideTip() {
-      this.setState({ hasHover: false });
-      this.setState({ showTip: false });
-    }
-  }, {
-    key: 'startHover',
-    value: function startHover() {
-      if (!this.state.ignoreShow) {
-        this.setState({ hasHover: true });
-
-        setTimeout(this.checkHover, hoverDelay);
-      }
-    }
-  }, {
-    key: 'checkHover',
-    value: function checkHover() {
-      if (this.state.hasHover) {
-        this.setState({ showTip: true });
-      }
-    }
-  }, {
-    key: 'cancelTip',
-    value: function cancelTip() {
-      var _this2 = this;
-
-      this.setState({ ignoreShow: true });
-
-      setTimeout(function () {
-        _this2.setState({ ignoreShow: false });
-      }, touchToMouseOverDelay);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this3 = this;
-
-      var _props = this.props,
-          direction = _props.direction,
-          className = _props.className,
-          padding = _props.padding,
-          children = _props.children,
-          content = _props.content,
-          styles = _props.styles,
-          eventOn = _props.eventOn,
-          eventOff = _props.eventOff,
-          eventToggle = _props.eventToggle,
-          useHover = _props.useHover,
-          background = _props.background,
-          color = _props.color,
-          useDefaultStyles = _props.useDefaultStyles;
-
-
-      var currentPositions = (0, _position2.default)(direction, this.tip, this.target, this.state, {
-        background: useDefaultStyles ? defaultBg : background
-      });
-
-      var wrapperStyles = _extends({
-        position: 'relative'
-      }, styles);
-
-      var tipStyles = _extends({}, currentPositions.tip, {
-        background: useDefaultStyles ? defaultBg : background,
-        color: useDefaultStyles ? defaultColor : color,
-        padding: padding,
-        boxSizing: 'border-box',
-        zIndex: 1000,
-        position: 'absolute',
-        display: 'inline-block'
-      });
-
-      var arrowStyles = _extends({}, currentPositions.arrow, {
-        position: 'absolute',
-        width: '0px',
-        height: '0px',
-        zIndex: 1001
-      });
-
-      var props = {
-        style: wrapperStyles,
-        ref: function ref(target) {
-          _this3.target = target;
-        },
-        className: className
-      };
-
-      // event handling
-      if (eventOff) {
-        props[eventOff] = this.hideTip;
-      }
-
-      if (eventOn) {
-        props[eventOn] = this.showTip;
-      }
-
-      if (eventToggle) {
-        props[eventToggle] = this.toggleTip;
-
-        // only use hover if they don't have a toggle event
-      } else if (useHover) {
-        props.onMouseOver = this.startHover;
-        props.onMouseOut = this.hideTip;
-        props.onTouchStart = this.cancelTip;
-      }
-
-      return _react2.default.createElement(
-        this.props.tagName,
-        props,
-        children,
-        _react2.default.createElement(
-          _Portal2.default,
-          { className: className },
-          _react2.default.createElement(
-            'span',
-            { className: 'react-tooltip-lite', style: tipStyles, ref: function ref(tip) {
-                _this3.tip = tip;
-              } },
-            content
-          ),
-          _react2.default.createElement('span', { className: 'react-tooltip-lite-arrow react-tooltip-lite-' + currentPositions.realDirection + '-arrow', style: arrowStyles })
-        )
-      );
+        _this.showTip = _this.showTip.bind(_this);
+        _this.hideTip = _this.hideTip.bind(_this);
+        _this.checkHover = _this.checkHover.bind(_this);
+        _this.cancelTip = _this.cancelTip.bind(_this);
+        _this.toggleTip = _this.toggleTip.bind(_this);
+        _this.startHover = _this.startHover.bind(_this);
+        return _this;
     }
-  }]);
 
-  return Tooltip;
+    _createClass(Tooltip, [{
+        key: 'toggleTip',
+        value: function toggleTip() {
+            this.setState({ showTip: !this.state.showTip });
+        }
+    }, {
+        key: 'showTip',
+        value: function showTip() {
+            this.setState({ showTip: true });
+        }
+    }, {
+        key: 'hideTip',
+        value: function hideTip() {
+            this.setState({ hasHover: false });
+            this.setState({ showTip: false });
+        }
+    }, {
+        key: 'startHover',
+        value: function startHover() {
+            if (!this.state.ignoreShow) {
+                this.setState({ hasHover: true });
+
+                setTimeout(this.checkHover, hoverDelay);
+            }
+        }
+    }, {
+        key: 'checkHover',
+        value: function checkHover() {
+            if (this.state.hasHover) {
+                this.setState({ showTip: true });
+            }
+        }
+    }, {
+        key: 'cancelTip',
+        value: function cancelTip() {
+            var _this2 = this;
+
+            this.setState({ ignoreShow: true });
+
+            setTimeout(function () {
+                _this2.setState({ ignoreShow: false });
+            }, touchToMouseOverDelay);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this3 = this;
+
+            var _props = this.props,
+                direction = _props.direction,
+                className = _props.className,
+                padding = _props.padding,
+                children = _props.children,
+                content = _props.content,
+                styles = _props.styles,
+                eventOn = _props.eventOn,
+                eventOff = _props.eventOff,
+                eventToggle = _props.eventToggle,
+                useHover = _props.useHover,
+                background = _props.background,
+                color = _props.color,
+                useDefaultStyles = _props.useDefaultStyles;
+
+
+            var currentPositions = this.tip ? (0, _position2.default)(direction, this.tip, this.target, this.state, {
+                background: useDefaultStyles ? defaultBg : background
+            }) : {};
+
+            var wrapperStyles = _extends({
+                position: 'relative'
+            }, styles);
+
+            var tipStyles = _extends({}, currentPositions.tip, {
+                background: useDefaultStyles ? defaultBg : background,
+                color: useDefaultStyles ? defaultColor : color,
+                padding: padding,
+                boxSizing: 'border-box',
+                zIndex: 1000,
+                position: 'absolute',
+                display: 'inline-block'
+            });
+
+            var arrowStyles = _extends({}, currentPositions.arrow, {
+                position: 'absolute',
+                width: '0px',
+                height: '0px',
+                zIndex: 1001
+            });
+
+            var props = {
+                style: wrapperStyles,
+                ref: function ref(target) {
+                    _this3.target = target;
+                },
+                className: className
+            };
+
+            // event handling
+            if (eventOff) {
+                props[eventOff] = this.hideTip;
+            }
+
+            if (eventOn) {
+                props[eventOn] = this.showTip;
+            }
+
+            if (eventToggle) {
+                props[eventToggle] = this.toggleTip;
+
+                // only use hover if they don't have a toggle event
+            } else if (useHover) {
+                props.onMouseOver = this.startHover;
+                props.onMouseOut = this.hideTip;
+                props.onTouchStart = this.cancelTip;
+            }
+
+            return _react2.default.createElement(
+                this.props.tagName,
+                props,
+                children,
+                _react2.default.createElement(
+                    _Portal2.default,
+                    { className: className },
+                    _react2.default.createElement(
+                        'span',
+                        { className: 'react-tooltip-lite', style: tipStyles, ref: function ref(tip) {
+                                _this3.tip = tip;
+                            } },
+                        content
+                    ),
+                    _react2.default.createElement('span', { className: 'react-tooltip-lite-arrow react-tooltip-lite-' + currentPositions.realDirection + '-arrow', style: arrowStyles })
+                )
+            );
+        }
+    }]);
+
+    return Tooltip;
 }(_react2.default.Component);
 
 Tooltip.propTypes = {
-  // eslint-disable-next-line react/no-unused-prop-types
-  tagName: _propTypes2.default.string,
-  direction: _propTypes2.default.string,
-  className: _propTypes2.default.string,
-  content: _propTypes2.default.node.isRequired,
-  background: _propTypes2.default.string,
-  color: _propTypes2.default.string,
-  padding: _propTypes2.default.string,
-  styles: _propTypes2.default.object,
-  eventOff: _propTypes2.default.string,
-  eventOn: _propTypes2.default.string,
-  eventToggle: _propTypes2.default.string,
-  useHover: _propTypes2.default.bool,
-  useDefaultStyles: _propTypes2.default.bool
+    // eslint-disable-next-line react/no-unused-prop-types
+    tagName: _propTypes2.default.string,
+    direction: _propTypes2.default.string,
+    className: _propTypes2.default.string,
+    content: _propTypes2.default.node.isRequired,
+    background: _propTypes2.default.string,
+    color: _propTypes2.default.string,
+    padding: _propTypes2.default.string,
+    styles: _propTypes2.default.object,
+    eventOff: _propTypes2.default.string,
+    eventOn: _propTypes2.default.string,
+    eventToggle: _propTypes2.default.string,
+    useHover: _propTypes2.default.bool,
+    useDefaultStyles: _propTypes2.default.bool
 };
 Tooltip.defaultProps = {
-  tagName: 'div',
-  direction: 'up',
-  className: '',
-  background: '',
-  color: '',
-  padding: '10px',
-  styles: {},
-  useHover: true,
-  useDefaultStyles: false
+    tagName: 'div',
+    direction: 'up',
+    className: '',
+    background: '',
+    color: '',
+    padding: '10px',
+    styles: {},
+    useHover: true,
+    useDefaultStyles: false
 };
 exports.default = Tooltip;