flowtip-react-dom - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

lib/FlowTip.js

@@ -10,13 +10,11 @@ "use strict";
 
-var _reactResizeObserver = _interopRequireDefault(require("react-resize-observer"));
-
 var _flowtipCore = _interopRequireWildcard(require("flowtip-core"));
 
-var _getContainingBlock = _interopRequireDefault(require("./util/getContainingBlock"));
+var _findDOMNode = _interopRequireDefault(require("./util/findDOMNode"));
 
-var _getClippingBlock = _interopRequireDefault(require("./util/getClippingBlock"));
+var _dom = require("./util/dom");
 
-var _getContentRect = _interopRequireDefault(require("./util/getContentRect"));
+var _state = require("./util/state");
 
-var _findDOMNode = _interopRequireDefault(require("./util/findDOMNode"));
+var _defaultRender = _interopRequireDefault(require("./defaultRender"));
 
@@ -45,6 +43,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 // Static `flowtip` layout calculation result mock for use during initial client
 var STATIC_RESULT = {
+  bounds: _flowtipCore.Rect.zero,
+  target: _flowtipCore.Rect.zero,
   region: 'bottom',
@@ -65,26 +63,2 @@ reason: 'default',
 
-var omitFlowtipProps = function omitFlowtipProps(props) {
-  var _target = props.target,
-      _bounds = props.bounds,
-      _region = props.region,
-      _sticky = props.sticky,
-      _targetOffset = props.targetOffset,
-      _edgeOffset = props.edgeOffset,
-      _tailOffset = props.tailOffset,
-      _align = props.align,
-      _topDisabled = props.topDisabled,
-      _rightDisabled = props.rightDisabled,
-      _bottomDisabled = props.bottomDisabled,
-      _leftDisabled = props.leftDisabled,
-      _constrainTop = props.constrainTop,
-      _constrainRight = props.constrainRight,
-      _constrainBottom = props.constrainBottom,
-      _constrainLeft = props.constrainLeft,
-      _content = props.content,
-      _tail = props.tail,
-      rest = _objectWithoutProperties(props, ["target", "bounds", "region", "sticky", "targetOffset", "edgeOffset", "tailOffset", "align", "topDisabled", "rightDisabled", "bottomDisabled", "leftDisabled", "constrainTop", "constrainRight", "constrainBottom", "constrainLeft", "content", "tail"]);
-
-  return rest;
-};
-
 var FlowTip =
@@ -155,3 +129,11 @@ /*#__PURE__*/
       writable: true,
-      value: _this._getState(_this.props)
+      value: {
+        containingBlock: _flowtipCore.Rect.zero,
+        boundedByViewport: true,
+        bounds: null,
+        content: null,
+        contentBorders: null,
+        tail: null,
+        result: STATIC_RESULT
+      }
     }), Object.defineProperty(_assertThisInitialized(_this), "_handleContentSize", {
@@ -161,3 +143,10 @@ configurable: true,
       writable: true,
-      value: _this._handleContentSize.bind(_assertThisInitialized(_this))
+      value: function value(rect) {
+        _this._nextContent = {
+          width: rect.width,
+          height: rect.height
+        };
+
+        _this._updateState(_this.props);
+      }
     }), Object.defineProperty(_assertThisInitialized(_this), "_handleTailSize", {
@@ -167,3 +156,10 @@ configurable: true,
       writable: true,
-      value: _this._handleTailSize.bind(_assertThisInitialized(_this))
+      value: function value(rect) {
+        _this._nextTail = {
+          width: rect.width,
+          height: rect.height
+        };
+
+        _this._updateState(_this.props);
+      }
     }), Object.defineProperty(_assertThisInitialized(_this), "_handleScroll", {
@@ -173,3 +169,8 @@ configurable: true,
       writable: true,
-      value: _this._handleScroll.bind(_assertThisInitialized(_this))
+      value: function value() {
+        _this._nextContainingBlock = _this._getContainingBlockRect();
+        _this._nextBounds = _this._getBoundsRect(_this.props);
+
+        _this._updateState(_this.props);
+      }
     }), _temp));
@@ -180,5 +181,3 @@ }
     key: "componentDidMount",
-    // ===========================================================================
-    // Lifecycle Methods
-    // ===========================================================================
+    // Lifecycle Methods =========================================================
     value: function componentDidMount() {
@@ -219,122 +218,5 @@ this._isMounted = true;
       window.removeEventListener('resize', this._handleScroll);
-    } // ===========================================================================
-    // State Management
-    // ===========================================================================
+    } // State Management ==========================================================
 
-  }, {
-    key: "_getLastRegion",
-    value: function _getLastRegion(nextProps) {
-      return this._lastRegion || nextProps.region;
-    }
-  }, {
-    key: "_getRegion",
-    value: function _getRegion(nextProps) {
-      // Feed the current region in as the default if `sticky` is true.
-      // This makes the component stay in its region until it meets a
-      // boundary edge and must change.
-      return nextProps.sticky ? this._getLastRegion(nextProps) : nextProps.region;
-    }
     /**
-     * Get the dimension of the tail perpendicular to the attached edge of the
-     * content rect.
-     *
-     * Note: `props` are passed in as an argument to allow using this method from
-     * within `componentWillReceiveProps`.
-     *
-     * @param   {Object} nextProps - FlowTip props.
-     * @returns {number} Tail length.
-     */
-
-  }, {
-    key: "_getTailLength",
-    value: function _getTailLength(nextProps) {
-      var lastRegion = this._getLastRegion(nextProps);
-
-      if (this._nextTail) {
-        // Swap the width and height into "base" and "length" to create
-        // measurements that are agnostic to tail orientation.
-        if (lastRegion === _flowtipCore.LEFT || lastRegion === _flowtipCore.RIGHT) {
-          return this._nextTail.width;
-        } // Either lastRegion is top or bottom - or it is undefined, which means
-        // the tail was rendered using the static dummy result that uses the
-        // bottom region.
-
-
-        return this._nextTail.height;
-      }
-
-      return 0;
-    }
-    /**
-     * Get the offset between the target and the content rect.
-     *
-     * The flowtip layout calculation does not factor the dimensions of the tail.
-     * This method encodes the tail dimension into the `offset` parameter.
-     *
-     * Note: `props` are passed in as an argument to allow using this method from
-     * within `componentWillReceiveProps`.
-     *
-     * @param   {Object} nextProps - FlowTip props.
-     * @returns {number} Tail length.
-     */
-
-  }, {
-    key: "_getOffset",
-    value: function _getOffset(nextProps) {
-      // Ensure that the there is `targetOffset` amount of space between the
-      // tail and the target rect.
-      return nextProps.targetOffset + this._getTailLength(nextProps);
-    }
-    /**
-     * Get the dimension of the tail parallel to the attached edge of the content
-     * rect.
-     *
-     * Note: `props` are passed in as an argument to allow using this method from
-     * within `componentWillReceiveProps`.
-     *
-     * @param   {Object} nextProps - FlowTip props.
-     * @returns {number} Tail base size.
-     */
-
-  }, {
-    key: "_getTailBase",
-    value: function _getTailBase(nextProps) {
-      var lastRegion = this._getLastRegion(nextProps);
-
-      if (this._nextTail) {
-        // Swap the width and height into "base" and "length" to create
-        // measurements that are agnostic to tail orientation.
-        if (lastRegion === _flowtipCore.LEFT || lastRegion === _flowtipCore.RIGHT) {
-          return this._nextTail.height;
-        } // Either lastRegion is top or bottom - or it is undefined, which means
-        // the tail was rendered using the static dummy result that uses the
-        // bottom region
-
-
-        return this._nextTail.width;
-      }
-
-      return 0;
-    }
-    /**
-     * Get current minimum linear overlap value.
-     *
-     * Overlap ensures that there is always enough room to render a tail that
-     * points to the target rect. This will force the content to enter a
-     * different region if there is not enough room. The `tailOffset` value
-     * is the minumun distance between the tail and the content corner.
-     *
-     * Note: `props` are passed in as an argument to allow using this method from
-     * within `componentWillReceiveProps`.
-     *
-     * @param   {Object} nextProps - FlowTip props.
-     * @returns {number} Minimum linear overlap.
-     */
-
-  }, {
-    key: "_getOverlap",
-    value: function _getOverlap(nextProps) {
-      return nextProps.tailOffset + this._getTailBase(nextProps) / 2;
-    }
-    /**
      * Get the next state.
@@ -362,10 +244,24 @@ *
       var target = nextProps.target;
-      var result = null;
+      var result = STATIC_RESULT;
 
       if (bounds && target && content && (typeof nextProps.Tail !== 'function' || tail)) {
+        var intermediateState = _objectSpread({}, this.state, {
+          bounds: bounds,
+          containingBlock: containingBlock,
+          tail: tail,
+          content: content
+        });
+
+        var offset = (0, _state.getOffset)(nextProps, intermediateState);
+        var overlap = (0, _state.getOverlap)(nextProps, intermediateState);
+        var region = (0, _state.getRegion)(nextProps, intermediateState);
+        var _nextProps$edgeOffset = nextProps.edgeOffset,
+            edgeOffset = _nextProps$edgeOffset === void 0 ? offset : _nextProps$edgeOffset,
+            align = nextProps.align;
         var config = {
-          offset: this._getOffset(nextProps),
-          overlap: this._getOverlap(nextProps),
-          align: nextProps.align,
-          region: this._getRegion(nextProps),
+          offset: offset,
+          edgeOffset: edgeOffset,
+          overlap: overlap,
+          align: align,
+          region: region,
           bounds: bounds,
@@ -388,9 +284,12 @@ target: target,
         result = (0, _flowtipCore.default)(config);
-        this._lastRegion = result.region;
       }
 
+      var contentBorders = this._node ? (0, _dom.getBorders)(this._node) : null;
+      var boundedByViewport = !nextProps.bounds && this._clippingBlockNode === document.documentElement;
       return {
         containingBlock: containingBlock,
+        boundedByViewport: boundedByViewport,
         bounds: bounds,
         content: content,
+        contentBorders: contentBorders,
         tail: tail,
@@ -420,5 +319,3 @@ result: result
       }
-    } // ===========================================================================
-    // DOM Measurement Methods
-    // ===========================================================================
+    } // DOM Measurement Methods ===================================================
 
@@ -428,14 +325,6 @@ }, {
     value: function _getBoundsRect(nextProps) {
-      var viewportRect = new _flowtipCore.Rect(0, 0, window.innerWidth, window.innerHeight);
-
       var processBounds = function processBounds(boundsRect) {
-        var visibleBounds = _flowtipCore.Rect.grow(_flowtipCore.Rect.intersect(viewportRect, boundsRect), -nextProps.edgeOffset); // A rect with negative dimensions doesn't make sense here.
-        // Returning null will disable rendering content.
+        var visibleBounds = _flowtipCore.Rect.intersect((0, _dom.getViewportRect)(), boundsRect);
 
-
-        if (visibleBounds.width < 0 || visibleBounds.height < 0) {
-          return _flowtipCore.Rect.zero;
-        }
-
-        return visibleBounds;
+        return _flowtipCore.Rect.isValid(visibleBounds) ? visibleBounds : null;
       };
@@ -452,3 +341,3 @@
       if (this._clippingBlockNode) {
-        return processBounds((0, _getContentRect.default)(this._clippingBlockNode));
+        return processBounds((0, _dom.getContentRect)(this._clippingBlockNode));
       }
@@ -469,6 +358,4 @@
 
-      return (0, _getContentRect.default)(this._containingBlockNode);
-    } // ===========================================================================
-    // DOM Element Accessors
-    // ===========================================================================
+      return (0, _dom.getContentRect)(this._containingBlockNode);
+    } // DOM Element Accessors =====================================================
 
@@ -482,8 +369,6 @@ }, {
         this._node = node;
-        this._containingBlockNode = (0, _getContainingBlock.default)(node.parentNode) || document.documentElement;
-        this._clippingBlockNode = (0, _getClippingBlock.default)(node.parentNode) || document.documentElement;
+        this._containingBlockNode = (0, _dom.getContainingBlock)(node.parentNode);
+        this._clippingBlockNode = (0, _dom.getClippingBlock)(node.parentNode);
       }
-    } // ===========================================================================
-    // Event Handlers
-    // ===========================================================================
+    } // Event Handlers ============================================================
 
@@ -496,3 +381,3 @@ /**
      *
-     * @param   {Object} rect - DOMRect instance.
+     * @param   {Object} rect - Object with `width` and `height` properties.
      * @returns {void}
@@ -502,183 +387,10 @@ */
   }, {
-    key: "_handleContentSize",
-    value: function _handleContentSize(rect) {
-      this._nextContent = {
-        width: rect.width,
-        height: rect.height
-      };
-
-      this._updateState(this.props);
-    }
-    /**
-     *
-     * Tail `ResizeObserver` handler.
-     *
-     * Responds to changes in the dimensions of the rendered tail element and
-     * updates the cached `_nextContent` rect and triggers a state update.
-     *
-     * @param   {Object} rect - DOMRect instance.
-     * @returns {void}
-     */
-
-  }, {
-    key: "_handleTailSize",
-    value: function _handleTailSize(rect) {
-      this._nextTail = {
-        width: rect.width,
-        height: rect.height
-      };
-
-      this._updateState(this.props);
-    }
-    /**
-     * Window scroll handler.
-     *
-     * Responds to changes in the window scroll position to update the cached
-     * `_nextContainingBlock` and `_nextBounds` rects and triggers a state update.
-     *
-     * @returns {void}
-     */
-
-  }, {
-    key: "_handleScroll",
-    value: function _handleScroll() {
-      this._nextContainingBlock = this._getContainingBlockRect();
-      this._nextBounds = this._getBoundsRect(this.props);
-
-      this._updateState(this.props);
-    } // ===========================================================================
-    // Render Methods
-    // ===========================================================================
-
-    /**
-     * Get the content element position style based on the current layout result
-     * in the state.
-     *
-     * @param   {Object} result - A `flowtip` layout result.
-     * @returns {Object} Content position style.
-     */
-
-  }, {
-    key: "_getContentStyle",
-    value: function _getContentStyle(result) {
-      var containingBlock = this.state.containingBlock; // Hide the result with css clip - preserving its ability to be measured -
-      // when working with a static layout result mock.
-
-      if (!result || result._static === true) {
-        return {
-          position: 'absolute',
-          clip: 'rect(0 0 0 0)'
-        };
-      }
-
-      return {
-        position: 'absolute',
-        top: Math.round(result.rect.top - containingBlock.top),
-        left: Math.round(result.rect.left - containingBlock.left)
-      };
-    }
-    /**
-     * Get the tail element position style based on the current layout result in
-     * the state.
-     *
-     * @param   {Object} result - A `flowtip` layout result.
-     * @returns {Object} Tail position style.
-     */
-
-  }, {
-    key: "_getTailStyle",
-    value: function _getTailStyle(result) {
-      var tailOffset = this.props.tailOffset;
-      var tail = this.state.tail;
-      if (!result) return {
-        position: 'absolute'
-      };
-      var region = result.region;
-
-      var tailAttached = result.offset >= this._getOffset(this.props);
-
-      var style = {
-        position: 'absolute',
-        visibility: tailAttached ? 'visible' : 'hidden'
-      };
-
-      if (tail) {
-        var position = (0, _flowtipCore.getClampedTailPosition)(result, tail, tailOffset); // Position the tail at the opposite edge of the region. i.e. if region is
-        // `right` the style will be `right: 100%`, which will place the tail
-        // at left edge.
-
-        style[region] = '100%';
-
-        if (region === _flowtipCore.RIGHT || region === _flowtipCore.LEFT) {
-          style.top = position;
-        } else {
-          style.left = position;
-        }
-      }
-
-      return style;
-    }
-    /**
-     * Render the tail element. A `ResizeObserver` is inserted to allow measuring
-     * the dimensions of the rendered content.
-     *
-     * @param   {Object} result - A `flowtip` layout result.
-     * @returns {Object|null} Rendered element.
-     */
-
-  }, {
-    key: "renderTail",
-    value: function renderTail(result) {
-      if (!this.props.tail) return null;
-      var Tail = this.props.tail;
-
-      var tailStyle = this._getTailStyle(result);
-
-      return React.createElement(Tail, {
-        result: result,
-        style: tailStyle
-      }, React.createElement(_reactResizeObserver.default, {
-        onResize: this._handleTailSize
-      }));
-    }
-    /**
-     * Render the content element. A `ResizeObserver` is inserted before the other
-     * children to allow measuring the dimensions of the rendered content.
-     *
-     * @param   {Object} result - A `flowtip` layout result.
-     * @returns {Object|null} Rendered element.
-     */
-
-  }, {
-    key: "renderContent",
-    value: function renderContent(result) {
-      if (!this.props.content) return null;
-      var _props = this.props,
-          children = _props.children,
-          Content = _props.content;
-
-      var contentProps = _objectSpread({}, omitFlowtipProps(this.props), {
-        style: this._getContentStyle(result)
-      });
-
-      if (typeof Content === 'function') {
-        contentProps.result = result;
-      }
-
-      return React.createElement(Content, contentProps, React.createElement(_reactResizeObserver.default, {
-        onResize: this._handleContentSize
-      }), children, this.renderTail(result));
-    }
-  }, {
     key: "render",
     value: function render() {
-      if (this.state.result) {
-        return this.renderContent(this.state.result);
-      }
-
-      if (this.props.content) {
-        return this.renderContent(STATIC_RESULT);
-      }
-
-      return null;
+      return this.props.render({
+        onTailSize: this._handleTailSize,
+        onContentSize: this._handleContentSize,
+        state: this.state,
+        props: this.props
+      });
     }
@@ -710,3 +422,3 @@ }]);
     constrainLeft: true,
-    content: 'div'
+    render: _defaultRender.default
   }
@@ -713,0 +425,0 @@ });

lib/index.js

@@ -12,2 +12,3 @@ "use strict";
 });
+exports.unusedTest = void 0;
 
@@ -17,2 +18,8 @@ var _FlowTip = _interopRequireDefault(require("./FlowTip"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var unusedTest = function unusedTest() {
+  return console.log('unusedTest side effect');
+};
+
+exports.unusedTest = unusedTest;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "flowtip-react-dom",
   "description": "A flexible, adaptable, and easy to use tooltip positioning library for React.",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "author": "Neal Granger <[e-mail]>",
   "main": "./lib",
+  "module": "./es",
+  "sideEffects": false,
+  "files": [
+    "README.md",
+    "lib",
+    "es"
+  ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/metalabdesign/flowtip.git"
+    "url": "https://github.com/metalabdesign/flowtip/tree/master/packages/flowtip-react-dom"
   },
@@ -19,28 +26,13 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/qiushihe/metalabdesign/issues"
+    "url": "https://github.com/metalabdesign/flowtip/issues"
   },
   "homepage": "https://github.com/metalabdesign/flowtip/tree/master/packages/flowtip-react-dom",
-  "files": [
-    "lib"
-  ],
-  "scripts": {
-    "clean": "../../node_modules/.bin/rimraf lib",
-    "build": "../../node_modules/.bin/babel --copy-files -s -d lib src",
-    "copy": "../../node_modules/.bin/ncp src lib && ../../node_modules/.bin/renamer --regex --find '$' --replace '.flow' 'lib/**/*.js'",
-    "prepare": "npm run clean && npm run copy && npm run build"
-  },
   "dependencies": {
-    "flowtip-core": "^5.1.0",
+    "flowtip-core": "^5.2.0",
     "react-resize-observer": "^0.2.1"
   },
-  "devDependencies": {
-    "enzyme": "^2.9.1",
-    "jest-enzyme": "^3.7.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1"
-  },
   "peerDependencies": {
-    "react": ">=0.14"
+    "react": ">=0.14",
+    "react-dom": ">=0.14"
   }
 }

README.md

@@ -114,3 +114,3 @@ # flowtip-react-dom
 
-See [Styling Flowtip](#styling-flowtip) for more details.
+See [Styling FlowTip](#styling-flowtip) for more details.
 
@@ -117,0 +117,0 @@ </details>

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

221693

increased by106.53%

Dev dependency count

0

decreased by-100%

Number of package files

52

increased by116.67%

Lines of code

1473

increased by107.17%

Number of low maintenance alerts

1

decreased by-50%

Worsened metrics

Dependency count

4

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• Updatedflowtip-core@^5.2.0