New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
flowtip-react-dom
Advanced tools
flowtip-react-dom - npm Package Compare versions
Comparing version 5.0.0 to 5.1.0
@@ -1,2 +0,2 @@ | ||
| 'use strict'; | ||
| "use strict"; | ||
@@ -6,53 +6,43 @@ Object.defineProperty(exports, "__esModule", { | ||
| }); | ||
| exports.default = void 0; | ||
| 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; }; | ||
| var React = _interopRequireWildcard(require("react")); | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
| var _reactResizeObserver = _interopRequireDefault(require("react-resize-observer")); | ||
| var _react = require('react'); | ||
| var _flowtipCore = _interopRequireWildcard(require("flowtip-core")); | ||
| var React = _interopRequireWildcard(_react); | ||
| var _getContainingBlock = _interopRequireDefault(require("./util/getContainingBlock")); | ||
| var _reactDom = require('react-dom'); | ||
| var _getClippingBlock = _interopRequireDefault(require("./util/getClippingBlock")); | ||
| var _reactResizeObserver = require('react-resize-observer'); | ||
| var _getContentRect = _interopRequireDefault(require("./util/getContentRect")); | ||
| var _reactResizeObserver2 = _interopRequireDefault(_reactResizeObserver); | ||
| var _findDOMNode = _interopRequireDefault(require("./util/findDOMNode")); | ||
| var _invariant = require('fbjs/lib/invariant'); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| var _invariant2 = _interopRequireDefault(_invariant); | ||
| function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
| var _flowtipCore = require('flowtip-core'); | ||
| function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
| var _flowtipCore2 = _interopRequireDefault(_flowtipCore); | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
| var _omit = require('./util/omit'); | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var _omit2 = _interopRequireDefault(_omit); | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| var _singleWarning = require('./util/singleWarning'); | ||
| function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
| var _singleWarning2 = _interopRequireDefault(_singleWarning); | ||
| function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
| var _getContainingBlock = require('./util/getContainingBlock'); | ||
| function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
| var _getContainingBlock2 = _interopRequireDefault(_getContainingBlock); | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
| function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } | ||
| 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; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| var REMOVED_PROPS = ['anchor', 'width', 'height', 'offset', 'clamp', 'rotationOffset', 'targetAlign', 'targetAlignOffset', 'rootAlign', 'rootAlignOffset', 'hideInDisabledRegions']; | ||
| var FLOWTIP_PROPS = ['target', 'bounds', 'region', 'sticky', 'targetOffset', 'edgeOffset', 'tailOffset', 'align', 'topDisabled', 'rightDisabled', 'bottomDisabled', 'leftDisabled', 'constrainTop', 'constrainRight', 'constrainBottom', 'constrainLeft', 'content', 'tail']; | ||
| // Static `flowtip` layout calculation result mock for use during initial client | ||
| // side render or on server render where DOM feedback is not possible. | ||
| var STATIC_RESULT = { | ||
@@ -62,3 +52,8 @@ region: 'bottom', | ||
| rect: _flowtipCore.Rect.zero, | ||
| valid: { top: false, right: false, bottom: true, left: false }, | ||
| valid: { | ||
| top: false, | ||
| right: false, | ||
| bottom: true, | ||
| left: false | ||
| }, | ||
| offset: 0, | ||
@@ -70,3 +65,29 @@ overlap: 0, | ||
| var FlowTip = function (_React$Component) { | ||
| 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 = | ||
| /*#__PURE__*/ | ||
| function (_React$Component) { | ||
| _inherits(FlowTip, _React$Component); | ||
@@ -77,29 +98,83 @@ | ||
| var _temp, _this, _ret; | ||
| var _temp, _this; | ||
| _classCallCheck(this, FlowTip); | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FlowTip.__proto__ || Object.getPrototypeOf(FlowTip)).call.apply(_ref, [this].concat(args))), _this), _this._nextContent = null, _this._nextTail = null, _this._nextContainingBlock = _flowtipCore.Rect.zero, _this._nextBounds = _flowtipCore.Rect.zero, _this._isMounted = false, _this._containingBlockNode = null, _this._node = null, _this.state = _this._getState(_this.props), _this._handleContentSize = _this._handleContentSize.bind(_this), _this._handleTailSize = _this._handleTailSize.bind(_this), _this._handleScroll = _this._handleScroll.bind(_this), _temp), _possibleConstructorReturn(_this, _ret); | ||
| return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_ref = FlowTip.__proto__ || Object.getPrototypeOf(FlowTip)).call.apply(_ref, [this].concat(args))), Object.defineProperty(_assertThisInitialized(_this), "_nextContent", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: null | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_nextTail", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: null | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_nextContainingBlock", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: _flowtipCore.Rect.zero | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_nextBounds", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: null | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_lastRegion", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_isMounted", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: false | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_containingBlockNode", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: null | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_clippingBlockNode", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: null | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_node", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: null | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "state", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: _this._getState(_this.props) | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_handleContentSize", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: _this._handleContentSize.bind(_assertThisInitialized(_this)) | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_handleTailSize", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: _this._handleTailSize.bind(_assertThisInitialized(_this)) | ||
| }), Object.defineProperty(_assertThisInitialized(_this), "_handleScroll", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: _this._handleScroll.bind(_assertThisInitialized(_this)) | ||
| }), _temp)); | ||
| } | ||
| _createClass(FlowTip, [{ | ||
| key: 'componentWillMount', | ||
| key: "componentDidMount", | ||
| // =========================================================================== | ||
| // Lifecycle Methods. | ||
| // Lifecycle Methods | ||
| // =========================================================================== | ||
| value: function componentWillMount() { | ||
| var _this2 = this; | ||
| REMOVED_PROPS.forEach(function (prop) { | ||
| return (0, _singleWarning2.default)(prop + '_deprecated', !_this2.props.hasOwnProperty(prop), 'React FlowTip `%s` prop is has been removed in this version.', prop); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
@@ -109,2 +184,3 @@ this._isMounted = true; | ||
| this._updateDOMNodes(); | ||
| this._nextContainingBlock = this._getContainingBlockRect(); | ||
@@ -119,4 +195,5 @@ this._nextBounds = this._getBoundsRect(this.props); | ||
| }, { | ||
| key: 'componentWillReceiveProps', | ||
| key: "componentWillReceiveProps", | ||
| value: function componentWillReceiveProps(nextProps) { | ||
| this._nextContainingBlock = this._getContainingBlockRect(); | ||
| this._nextBounds = this._getBoundsRect(nextProps); | ||
@@ -127,3 +204,3 @@ | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| key: "componentDidUpdate", | ||
| value: function componentDidUpdate() { | ||
@@ -133,19 +210,16 @@ this._updateDOMNodes(); | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| key: "componentWillUnmount", | ||
| value: function componentWillUnmount() { | ||
| this._isMounted = false; | ||
| this._containingBlockNode = null; | ||
| this._clippingBlockNode = null; | ||
| this._node = null; | ||
| window.removeEventListener('scroll', this._handleScroll); | ||
| window.removeEventListener('resize', this._handleScroll); | ||
| } | ||
| } // =========================================================================== | ||
| // State Management | ||
| // =========================================================================== | ||
| // State Management. | ||
| // =========================================================================== | ||
| }, { | ||
| key: '_getLastRegion', | ||
| key: "_getLastRegion", | ||
| value: function _getLastRegion(nextProps) { | ||
@@ -155,3 +229,3 @@ return this._lastRegion || nextProps.region; | ||
| }, { | ||
| key: '_getRegion', | ||
| key: "_getRegion", | ||
| value: function _getRegion(nextProps) { | ||
@@ -163,3 +237,2 @@ // Feed the current region in as the default if `sticky` is true. | ||
| } | ||
| /** | ||
@@ -177,3 +250,3 @@ * Get the dimension of the tail perpendicular to the attached edge of the | ||
| }, { | ||
| key: '_getTailLength', | ||
| key: "_getTailLength", | ||
| value: function _getTailLength(nextProps) { | ||
@@ -187,6 +260,7 @@ var lastRegion = this._getLastRegion(nextProps); | ||
| return this._nextTail.width; | ||
| } | ||
| // Either lastRegion is top or bottom - or it is undefined, which means | ||
| } // 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; | ||
@@ -197,3 +271,2 @@ } | ||
| } | ||
| /** | ||
@@ -213,3 +286,3 @@ * Get the offset between the target and the content rect. | ||
| }, { | ||
| key: '_getOffset', | ||
| key: "_getOffset", | ||
| value: function _getOffset(nextProps) { | ||
@@ -220,3 +293,2 @@ // Ensure that the there is `targetOffset` amount of space between the | ||
| } | ||
| /** | ||
@@ -234,3 +306,3 @@ * Get the dimension of the tail parallel to the attached edge of the content | ||
| }, { | ||
| key: '_getTailBase', | ||
| key: "_getTailBase", | ||
| value: function _getTailBase(nextProps) { | ||
@@ -244,6 +316,7 @@ var lastRegion = this._getLastRegion(nextProps); | ||
| return this._nextTail.height; | ||
| } | ||
| // Either lastRegion is top or bottom - or it is undefined, which means | ||
| } // 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; | ||
@@ -254,3 +327,2 @@ } | ||
| } | ||
| /** | ||
@@ -272,7 +344,6 @@ * Get current minimum linear overlap value. | ||
| }, { | ||
| key: '_getOverlap', | ||
| key: "_getOverlap", | ||
| value: function _getOverlap(nextProps) { | ||
| return nextProps.tailOffset + this._getTailBase(nextProps) / 2; | ||
| } | ||
| /** | ||
@@ -294,3 +365,3 @@ * Get the next state. | ||
| }, { | ||
| key: '_getState', | ||
| key: "_getState", | ||
| value: function _getState(nextProps) { | ||
@@ -302,6 +373,5 @@ var containingBlock = this._nextContainingBlock; | ||
| var target = nextProps.target; | ||
| var result = null; | ||
| if (bounds && target && content && (!nextProps.Tail || tail)) { | ||
| if (bounds && target && content && (typeof nextProps.Tail !== 'function' || tail)) { | ||
| var config = { | ||
@@ -328,5 +398,3 @@ offset: this._getOffset(nextProps), | ||
| }; | ||
| result = (0, _flowtipCore2.default)(config); | ||
| result = (0, _flowtipCore.default)(config); | ||
| this._lastRegion = result.region; | ||
@@ -340,7 +408,5 @@ } | ||
| tail: tail, | ||
| result: result | ||
| }; | ||
| } | ||
| /** | ||
@@ -357,65 +423,75 @@ * Trigger a state update and render if necessary. | ||
| }, { | ||
| key: '_updateState', | ||
| key: "_updateState", | ||
| value: function _updateState(nextProps) { | ||
| // eslint-disable-line complexity | ||
| if (!this._isMounted) return; | ||
| // Only trigger a state update if the dynamic measurements have changed | ||
| if (!this._isMounted) return; // Only trigger a state update if the dynamic measurements have changed | ||
| // since the last update. We can optimize here since the `flowtip` layout | ||
| // calculation is an entire pure function - we would get the same result. | ||
| if (!(0, _flowtipCore.areEqualDimensions)(this.state.content, this._nextContent) || !(0, _flowtipCore.areEqualDimensions)(this.state.tail, this._nextTail) || !_flowtipCore.Rect.areEqual(this.state.containingBlock, this._nextContainingBlock) || !_flowtipCore.Rect.areEqual(this.state.bounds, this._nextBounds) || !_flowtipCore.Rect.areEqual(this.props.target, nextProps.target) || this.props.region !== nextProps.region || this.props.sticky !== nextProps.sticky || this.props.targetOffset !== nextProps.targetOffset || this.props.edgeOffset !== nextProps.edgeOffset || this.props.tailOffset !== nextProps.tailOffset || this.props.align !== nextProps.align || this.props.topDisabled !== nextProps.topDisabled || this.props.rightDisabled !== nextProps.rightDisabled || this.props.bottomDisabled !== nextProps.bottomDisabled || this.props.leftDisabled !== nextProps.leftDisabled || this.props.constrainTop !== nextProps.constrainTop || this.props.constrainRight !== nextProps.constrainRight || this.props.constrainBottom !== nextProps.constrainBottom || this.props.constrainLeft !== nextProps.constrainLeft) { | ||
| this.setState(this._getState(nextProps)); | ||
| } | ||
| } | ||
| } // =========================================================================== | ||
| // DOM Measurement Methods | ||
| // =========================================================================== | ||
| // DOM Measurement Methods. | ||
| // =========================================================================== | ||
| }, { | ||
| key: '_getBoundsRect', | ||
| key: "_getBoundsRect", | ||
| value: function _getBoundsRect(nextProps) { | ||
| var viewport = new _flowtipCore.Rect(0, 0, window.document.documentElement.clientWidth, window.document.documentElement.clientHeight); | ||
| var viewportRect = new _flowtipCore.Rect(0, 0, window.innerWidth, window.innerHeight); | ||
| var bounds = _flowtipCore.Rect.grow(nextProps.bounds ? _flowtipCore.Rect.intersect(viewport, nextProps.bounds) : viewport, -nextProps.edgeOffset); | ||
| 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. | ||
| // A rect with neagitve dimensions doesn't make sense here. | ||
| // Returning null disable rendering of any content. | ||
| if (bounds.width >= 0 && bounds.height >= 0) { | ||
| return bounds; | ||
| if (visibleBounds.width < 0 || visibleBounds.height < 0) { | ||
| return _flowtipCore.Rect.zero; | ||
| } | ||
| return visibleBounds; | ||
| }; | ||
| if (nextProps.bounds) { | ||
| return processBounds(nextProps.bounds); | ||
| } | ||
| if (document.body && this._clippingBlockNode === document.documentElement) { | ||
| return processBounds(new _flowtipCore.Rect(-document.body.scrollLeft, -document.body.scrollTop, document.body.scrollWidth, document.body.scrollHeight)); | ||
| } | ||
| if (this._clippingBlockNode) { | ||
| return processBounds((0, _getContentRect.default)(this._clippingBlockNode)); | ||
| } | ||
| return null; | ||
| } | ||
| }, { | ||
| key: '_getContainingBlockRect', | ||
| key: "_getContainingBlockRect", | ||
| value: function _getContainingBlockRect() { | ||
| if (!this._containingBlockNode) return _flowtipCore.Rect.zero; | ||
| return _flowtipCore.Rect.from(this._containingBlockNode.getBoundingClientRect()); | ||
| } | ||
| if (!this._containingBlockNode) { | ||
| return _flowtipCore.Rect.zero; | ||
| } | ||
| if (document.body && this._containingBlockNode === document.documentElement) { | ||
| return new _flowtipCore.Rect(-document.body.scrollLeft, -document.body.scrollTop, document.body.scrollWidth, document.body.scrollHeight); | ||
| } | ||
| return (0, _getContentRect.default)(this._containingBlockNode); | ||
| } // =========================================================================== | ||
| // DOM Element Accessors | ||
| // =========================================================================== | ||
| // DOM Element Accessors. | ||
| // =========================================================================== | ||
| }, { | ||
| key: '_updateDOMNodes', | ||
| key: "_updateDOMNodes", | ||
| value: function _updateDOMNodes() { | ||
| var node = (0, _reactDom.findDOMNode)(this); | ||
| this._node = node instanceof HTMLElement ? node : null; | ||
| var node = (0, _findDOMNode.default)(this); | ||
| var block = this._node && (0, _getContainingBlock2.default)(this._node.parentNode); | ||
| if (block) { | ||
| this._containingBlockNode = block; | ||
| } else { | ||
| // Refine nullable `document.body`. | ||
| // see: https://stackoverflow.com/questions/42377663 | ||
| (0, _invariant2.default)(document.body !== null, 'document.body is null'); | ||
| this._containingBlockNode = document.body; | ||
| if (node instanceof HTMLElement) { | ||
| this._node = node; | ||
| this._containingBlockNode = (0, _getContainingBlock.default)(node.parentNode) || document.documentElement; | ||
| this._clippingBlockNode = (0, _getClippingBlock.default)(node.parentNode) || document.documentElement; | ||
| } | ||
| } | ||
| } // =========================================================================== | ||
| // Event Handlers | ||
| // =========================================================================== | ||
| // Event Handlers. | ||
| // =========================================================================== | ||
@@ -433,8 +509,11 @@ /** | ||
| }, { | ||
| key: '_handleContentSize', | ||
| key: "_handleContentSize", | ||
| value: function _handleContentSize(rect) { | ||
| this._nextContent = { width: rect.width, height: rect.height }; | ||
| this._nextContent = { | ||
| width: rect.width, | ||
| height: rect.height | ||
| }; | ||
| this._updateState(this.props); | ||
| } | ||
| /** | ||
@@ -452,8 +531,11 @@ * | ||
| }, { | ||
| key: '_handleTailSize', | ||
| key: "_handleTailSize", | ||
| value: function _handleTailSize(rect) { | ||
| this._nextTail = { width: rect.width, height: rect.height }; | ||
| this._nextTail = { | ||
| width: rect.width, | ||
| height: rect.height | ||
| }; | ||
| this._updateState(this.props); | ||
| } | ||
| /** | ||
@@ -469,12 +551,11 @@ * Window scroll handler. | ||
| }, { | ||
| key: '_handleScroll', | ||
| key: "_handleScroll", | ||
| value: function _handleScroll() { | ||
| this._nextContainingBlock = this._getContainingBlockRect(); | ||
| this._nextBounds = this._getBoundsRect(this.props); | ||
| this._updateState(this.props); | ||
| } | ||
| } // =========================================================================== | ||
| // Render Methods | ||
| // =========================================================================== | ||
| // Render Methods. | ||
| // =========================================================================== | ||
@@ -490,10 +571,8 @@ /** | ||
| }, { | ||
| key: '_getContentStyle', | ||
| key: "_getContentStyle", | ||
| value: function _getContentStyle(result) { | ||
| var containingBlock = this.state.containingBlock; | ||
| // Hide the result with css clip - preserving its ability to be measured - | ||
| 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) { | ||
| if (!result || result._static === true) { | ||
| return { | ||
@@ -511,3 +590,2 @@ position: 'absolute', | ||
| } | ||
| /** | ||
@@ -522,13 +600,11 @@ * Get the tail element position style based on the current layout result in | ||
| }, { | ||
| key: '_getTailStyle', | ||
| key: "_getTailStyle", | ||
| value: function _getTailStyle(result) { | ||
| var tailOffset = this.props.tailOffset; | ||
| var tail = this.state.tail; | ||
| if (!result) return { position: 'absolute' }; | ||
| if (!result) return { | ||
| position: 'absolute' | ||
| }; | ||
| var region = result.region; | ||
| var tailAttached = result.offset >= this._getOffset(this.props); | ||
@@ -542,7 +618,6 @@ | ||
| 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 | ||
| 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%'; | ||
@@ -559,3 +634,2 @@ | ||
| } | ||
| /** | ||
@@ -570,6 +644,5 @@ * Render the tail element. A `ResizeObserver` is inserted to allow measuring | ||
| }, { | ||
| key: 'renderTail', | ||
| key: "renderTail", | ||
| value: function renderTail(result) { | ||
| if (!this.props.tail) return null; | ||
| var Tail = this.props.tail; | ||
@@ -579,9 +652,9 @@ | ||
| return React.createElement( | ||
| Tail, | ||
| { result: result, style: tailStyle }, | ||
| React.createElement(_reactResizeObserver2.default, { onResize: this._handleTailSize }) | ||
| ); | ||
| return React.createElement(Tail, { | ||
| result: result, | ||
| style: tailStyle | ||
| }, React.createElement(_reactResizeObserver.default, { | ||
| onResize: this._handleTailSize | ||
| })); | ||
| } | ||
| /** | ||
@@ -596,6 +669,5 @@ * Render the content element. A `ResizeObserver` is inserted before the other | ||
| }, { | ||
| key: 'renderContent', | ||
| key: "renderContent", | ||
| value: function renderContent(result) { | ||
| if (!this.props.content) return null; | ||
| var _props = this.props, | ||
@@ -605,4 +677,3 @@ children = _props.children, | ||
| var contentProps = _extends({}, (0, _omit2.default)(FLOWTIP_PROPS, this.props), { | ||
| var contentProps = _objectSpread({}, omitFlowtipProps(this.props), { | ||
| style: this._getContentStyle(result) | ||
@@ -615,12 +686,8 @@ }); | ||
| return React.createElement( | ||
| Content, | ||
| contentProps, | ||
| React.createElement(_reactResizeObserver2.default, { onResize: this._handleContentSize }), | ||
| children, | ||
| this.renderTail(result) | ||
| ); | ||
| return React.createElement(Content, contentProps, React.createElement(_reactResizeObserver.default, { | ||
| onResize: this._handleContentSize | ||
| }), children, this.renderTail(result)); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| key: "render", | ||
| value: function render() { | ||
@@ -642,21 +709,27 @@ if (this.state.result) { | ||
| FlowTip.defaultProps = { | ||
| bounds: null, | ||
| region: undefined, | ||
| sticky: true, | ||
| targetOffset: 0, | ||
| edgeOffset: 0, | ||
| tailOffset: 0, | ||
| align: _flowtipCore.CENTER, | ||
| topDisabled: false, | ||
| rightDisabled: false, | ||
| bottomDisabled: false, | ||
| leftDisabled: false, | ||
| constrainTop: true, | ||
| constrainRight: true, | ||
| constrainBottom: true, | ||
| constrainLeft: true, | ||
| content: 'div' | ||
| }; | ||
| exports.default = FlowTip; | ||
| Object.defineProperty(FlowTip, "defaultProps", { | ||
| configurable: true, | ||
| enumerable: true, | ||
| writable: true, | ||
| value: { | ||
| bounds: null, | ||
| region: undefined, | ||
| sticky: true, | ||
| targetOffset: 0, | ||
| edgeOffset: 0, | ||
| tailOffset: 0, | ||
| align: _flowtipCore.CENTER, | ||
| topDisabled: false, | ||
| rightDisabled: false, | ||
| bottomDisabled: false, | ||
| leftDisabled: false, | ||
| constrainTop: true, | ||
| constrainRight: true, | ||
| constrainBottom: true, | ||
| constrainLeft: true, | ||
| content: 'div' | ||
| } | ||
| }); | ||
| var _default = FlowTip; | ||
| exports.default = _default; | ||
| //# sourceMappingURL=FlowTip.js.map |
@@ -1,2 +0,2 @@ | ||
| 'use strict'; | ||
| "use strict"; | ||
@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { | ||
| }); | ||
| var _FlowTip = require('./FlowTip'); | ||
| Object.defineProperty(exports, 'default', { | ||
| Object.defineProperty(exports, "default", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _interopRequireDefault(_FlowTip).default; | ||
| return _FlowTip.default; | ||
| } | ||
| }); | ||
| var _FlowTip = _interopRequireDefault(require("./FlowTip")); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| //# sourceMappingURL=index.js.map |
@@ -6,2 +6,4 @@ "use strict"; | ||
| }); | ||
| exports.default = void 0; | ||
| var findAncestor = function findAncestor(callback, node) { | ||
@@ -21,3 +23,4 @@ var current = node; | ||
| exports.default = findAncestor; | ||
| var _default = findAncestor; | ||
| exports.default = _default; | ||
| //# sourceMappingURL=findAncestor.js.map |
@@ -1,2 +0,2 @@ | ||
| 'use strict'; | ||
| "use strict"; | ||
@@ -6,21 +6,19 @@ Object.defineProperty(exports, "__esModule", { | ||
| }); | ||
| exports.default = void 0; | ||
| var _findAncestor = require('./findAncestor'); | ||
| var _findAncestor = _interopRequireDefault(require("./findAncestor")); | ||
| var _findAncestor2 = _interopRequireDefault(_findAncestor); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| var getContainingBlock = function getContainingBlock(node) { | ||
| var result = (0, _findAncestor2.default)(function (node) { | ||
| if (node.tagName === 'BODY') return true; | ||
| var style = window.getComputedStyle(node); | ||
| var result = (0, _findAncestor.default)(function (node) { | ||
| if (node === document.documentElement) return true; | ||
| var style = getComputedStyle(node); | ||
| return style.position && style.position !== 'static'; | ||
| }, node); | ||
| return result; | ||
| }; | ||
| exports.default = getContainingBlock; | ||
| var _default = getContainingBlock; | ||
| exports.default = _default; | ||
| //# sourceMappingURL=getContainingBlock.js.map |
| { | ||
| "name": "flowtip-react-dom", | ||
| "description": "A flexible, adaptable, and easy to use tooltip positioning library for React.", | ||
| "version": "5.0.0", | ||
| "version": "5.1.0", | ||
| "author": "Neal Granger <neal@nealg.com>", | ||
@@ -29,8 +29,7 @@ "main": "./lib", | ||
| "copy": "../../node_modules/.bin/ncp src lib && ../../node_modules/.bin/renamer --regex --find '$' --replace '.flow' 'lib/**/*.js'", | ||
| "prepublish": "npm run clean && npm run copy && npm run build" | ||
| "prepare": "npm run clean && npm run copy && npm run build" | ||
| }, | ||
| "dependencies": { | ||
| "fbjs": "^0.8.12", | ||
| "flowtip-core": "^5.0.0", | ||
| "react-resize-observer": "^0.2.0" | ||
| "flowtip-core": "^5.1.0", | ||
| "react-resize-observer": "^0.2.1" | ||
| }, | ||
@@ -37,0 +36,0 @@ "devDependencies": { |
139
README.md
@@ -22,11 +22,13 @@ # flowtip-react-dom | ||
| const Content = ({result, children, style}) => | ||
| <div className='flowtip-content' style={style}> | ||
| const Content = ({result, children, style}) => ( | ||
| <div className="flowtip-content" style={style}> | ||
| {children} | ||
| </div>; | ||
| </div> | ||
| ); | ||
| const Tail = ({result, children, style}) => | ||
| <div className={`flowtip-tail-${result.region}`} style={style} > | ||
| const Tail = ({result, children, style}) => ( | ||
| <div className={`flowtip-tail-${result.region}`} style={style}> | ||
| {children} | ||
| </div>; | ||
| </div> | ||
| ); | ||
@@ -43,16 +45,15 @@ class FlowTipExample extends React.Component { | ||
| <div> | ||
| <button onClick={this._toggleFowTip}> | ||
| <ResizeObserver onReflow={this._handleTargetReflow}/> | ||
| <button onClick={this._toggleFlowTip}> | ||
| <ResizeObserver onReflow={this._handleTargetReflow} /> | ||
| Activate FlowTip | ||
| </button> | ||
| {!!this.state.flowTipOpen && | ||
| {!!this.state.flowTipOpen && ( | ||
| <FlowTip target={this.state.target} content={Content} tail={Tail}> | ||
| FlowTip Content | ||
| </FlowTip> | ||
| } | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
| } | ||
| ``` | ||
@@ -71,3 +72,3 @@ | ||
| .flowtip-tail-top, | ||
| .flowtip-tail-right { | ||
| .flowtip-tail-bottom { | ||
| width: 20px; | ||
@@ -77,3 +78,3 @@ height: 10px; | ||
| .flowtip-tail-bottom, | ||
| .flowtip-tail-right, | ||
| .flowtip-tail-left { | ||
@@ -88,3 +89,3 @@ width: 10px; | ||
| .flowtip-tail-left::before { | ||
| content: ""; | ||
| content: ''; | ||
| display: block; | ||
@@ -96,3 +97,3 @@ } | ||
| border-right: 10px solid transparent; | ||
| border-bottom: 20px solid white; | ||
| border-top: 10px solid white; | ||
| } | ||
@@ -103,3 +104,3 @@ | ||
| border-bottom: 10px solid transparent; | ||
| border-left: 20px solid white; | ||
| border-right: 10px solid white; | ||
| } | ||
@@ -110,3 +111,3 @@ | ||
| border-right: 10px solid transparent; | ||
| border-top: 20px solid white; | ||
| border-bottom: 10px solid white; | ||
| } | ||
@@ -117,3 +118,3 @@ | ||
| border-bottom: 10px solid transparent; | ||
| border-right: 20px solid white; | ||
| border-left: 10px solid white; | ||
| } | ||
@@ -145,6 +146,7 @@ ``` | ||
| ```jsx | ||
| const Tail = ({result, children, style}) => | ||
| <div className={`flowtip-tail-${result.region}`} style={style} > | ||
| const Tail = ({result, children, style}) => ( | ||
| <div className={`flowtip-tail-${result.region}`} style={style}> | ||
| {children} | ||
| </div>; | ||
| </div> | ||
| ); | ||
| ``` | ||
@@ -203,19 +205,19 @@ | ||
| ```jsx | ||
| const Tail = ({result, children, style}) => | ||
| <div className={`flowtip-tail-${result.region}`} style={style} > | ||
| const Tail = ({result, children, style}) => ( | ||
| <div className={`flowtip-tail-${result.region}`} style={style}> | ||
| {children} | ||
| </div>; | ||
| </div> | ||
| ); | ||
| const StyledFlowTip = ({children, ...props}) => | ||
| const StyledFlowTip = ({children, ...props}) => ( | ||
| <FlowTip tail={Tail} {...props}> | ||
| <div className="flowtip-content"> | ||
| {children} | ||
| </div> | ||
| <div className="flowtip-content">{children}</div> | ||
| </FlowTip> | ||
| ); | ||
| // Rendering StyledFlowTip component: | ||
| {!!this.state.flowTipOpen && | ||
| <StyledFlowTip target={this.state.target}> | ||
| FlowTip Content | ||
| </StyledFlowTip> | ||
| { | ||
| !!this.state.flowTipOpen && ( | ||
| <StyledFlowTip target={this.state.target}>FlowTip Content</StyledFlowTip> | ||
| ); | ||
| } | ||
@@ -250,5 +252,5 @@ ``` | ||
| const Content = ({result, children, style, onClose}) => | ||
| const Content = ({result, children, style, onClose}) => ( | ||
| <FocusTrap | ||
| className='flowtip-content' | ||
| className="flowtip-content" | ||
| style={style} | ||
@@ -262,8 +264,10 @@ focusTrapOptions={{ | ||
| {children} | ||
| </FocusTrap>; | ||
| </FocusTrap> | ||
| ); | ||
| const Tail = ({result, children, style}) => | ||
| <div className={`flowtip-tail-${result.region}`} style={style} > | ||
| const Tail = ({result, children, style}) => ( | ||
| <div className={`flowtip-tail-${result.region}`} style={style}> | ||
| {children} | ||
| </div>; | ||
| </div> | ||
| ); | ||
@@ -282,6 +286,6 @@ class FlowTipExample extends React.Component { | ||
| <button onClick={this._openFlowTip}> | ||
| <ResizeObserver onReflow={this._handleTargetReflow}/> | ||
| <ResizeObserver onReflow={this._handleTargetReflow} /> | ||
| Activate FlowTip | ||
| </button> | ||
| {!!this.state.flowTipOpen && | ||
| {!!this.state.flowTipOpen && ( | ||
| <FlowTip | ||
@@ -295,7 +299,7 @@ target={this.state.target} | ||
| </FlowTip> | ||
| } | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
| } | ||
| ``` | ||
@@ -307,3 +311,3 @@ | ||
| *required* | ||
| _required_ | ||
@@ -316,3 +320,3 @@ The measured position of the target element as a [DOMRect-shaped] object. | ||
| *optional* | ||
| _optional_ | ||
@@ -325,3 +329,3 @@ The measured position of the available layout area for the tooltip content as a [DOMRect-shaped] object. This defines the outer collision boundaries referenced by the `constrain` prop. | ||
| *optional* | ||
| _optional_ | ||
@@ -334,3 +338,3 @@ The preferred region in which the tooltip will appear at first relative to its target. Possibly values are: `top`, `bottom`, `left`, and `right`. | ||
| *optional*, *default: `false`* | ||
| _optional_, _default: `false`_ | ||
@@ -343,9 +347,9 @@ Disabling `sticky` will make the component reposition its content to occupy whatever the current ideal region is - regardless of its current position. | ||
| *optional*, *default: `0`* | ||
| _optional_, _default: `0`_ | ||
| The desired margin between the positioned content tail and the target. | ||
| ### `targetOffset`: number | ||
| ### `edgeOffset`: number | ||
| *optional*, *default: `0`* | ||
| _optional_, _default: `0`_ | ||
@@ -356,3 +360,3 @@ The minimum margin between the positioned content and the boundary. A positive value will prevent the content from touching the boundary edge, a negative value will allow the content to overflow the boundary before a collision is detected. | ||
| *optional*, *default: `0`* | ||
| _optional_, _default: `0`_ | ||
@@ -365,3 +369,3 @@ The minimum distance between the tail and corner of the content along an edge. | ||
| *optional*, *default: `center`* | ||
| _optional_, _default: `center`_ | ||
@@ -372,3 +376,3 @@ Linear alignment between the positioned content and the target. Possible values are a number in the range of `0` to `1`, or one of `start`, `center`, and `end` (aliases for `0`, `0.5`, and `1` respectively). | ||
| *optional*, *default: `false`* | ||
| _optional_, _default: `false`_ | ||
@@ -379,3 +383,3 @@ Disable rendering the content above the target. | ||
| *optional*, *default: `false`* | ||
| _optional_, _default: `false`_ | ||
@@ -386,3 +390,3 @@ Disable rendering the content to the right of the target. | ||
| *optional*, *default: `false`* | ||
| _optional_, _default: `false`_ | ||
@@ -393,3 +397,3 @@ Disable rendering the content below the target. | ||
| *optional*, *default: `false`* | ||
| _optional_, _default: `false`_ | ||
@@ -400,3 +404,3 @@ Disable rendering the content to the left of the target. | ||
| *optional*, *default: `true`* | ||
| _optional_, _default: `true`_ | ||
@@ -407,3 +411,3 @@ Disable rendering the content outside the bounds area in the top region. | ||
| *optional*, *default: `true`* | ||
| _optional_, _default: `true`_ | ||
@@ -414,3 +418,3 @@ Disable rendering the content outside the bounds area in the right region. | ||
| *optional*, *default: `true`* | ||
| _optional_, _default: `true`_ | ||
@@ -421,3 +425,3 @@ Disable rendering the content outside the bounds area in the bottom region. | ||
| *optional*, *default: `true`* | ||
| _optional_, _default: `true`_ | ||
@@ -430,3 +434,3 @@ Disable rendering the content outside the bounds area in the left region. | ||
| *optional*, *default: `div`* | ||
| _optional_, _default: `div`_ | ||
@@ -437,3 +441,3 @@ A React Class or stateless component responsible for rendering the tooltip content. | ||
| Example `Content` component: | ||
| Example `Content` component: | ||
@@ -455,3 +459,3 @@ ```jsx | ||
| *optional* | ||
| _optional_ | ||
@@ -462,3 +466,3 @@ An optional React Class or stateless component responsible for rendering the tail content. | ||
| Example `Tail` component: | ||
| Example `Tail` component: | ||
@@ -477,12 +481,11 @@ ```jsx | ||
| While `flowtip-core` has no dependency on the DOM, it is designed to be directly compatible with DOMRect instances returned from `getClientBoundingRect()` calls. Any object that satisfies the DOMRect object interface `top: number, left: number, width: number, height: number, bottom?: number, right?: number` can be used. | ||
| While `flowtip-core` has no dependency on the DOM, it is designed to be directly compatible with DOMRect instances returned from `getClientBoundingRect()` calls. Any object that satisfies the DOMRect object interface `top: number, left: number, width: number, height: number, bottom?: number, right?: number` can be used. | ||
| The absolute reference frame of the measurements does not have an impact on the calculation - as long as all measurements are relative to the same frame. | ||
| [DOMRect-shaped]: #rect-interface | ||
| [domrect-shaped]: #rect-interface | ||
| [dimensions]: #rect-interface | ||
| [React DOM]: https://facebook.github.io/react/docs/react-dom.html | ||
| [react dom]: https://facebook.github.io/react/docs/react-dom.html | ||
| [`react-resize-observer`]: https://github.com/metalabdesign/react-resize-observer | ||
| [`focus-trap-react`]: https://github.com/davidtheclark/focus-trap-react | ||
| [`react-resize-observer`]: https://github.com/metalabdesign/react-resize-observer |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by12.83%
107344
- Dependency count
- decreased by-25%
3
- Number of package files
- increased by14.29%
24
- Lines of code
- increased by20.92%
711
- Number of lines in readme file
- increased by0.66%
457
Dependency changes
- Removedfbjs@^0.8.12
- Removedasap@2.0.6(transitive)
- Removedcore-js@1.2.7(transitive)
- Removedencoding@0.1.13(transitive)
- Removedfbjs@0.8.18(transitive)
- Removediconv-lite@0.6.3(transitive)
- Removedis-stream@1.1.0(transitive)
- Removedisomorphic-fetch@2.2.1(transitive)
- Removedjs-tokens@4.0.0(transitive)
- Removedloose-envify@1.4.0(transitive)
- Removednode-fetch@1.7.3(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedpromise@7.3.1(transitive)
- Removedsafer-buffer@2.1.2(transitive)
- Removedsetimmediate@1.0.5(transitive)
- Removedua-parser-js@0.7.40(transitive)
- Removedwhatwg-fetch@3.6.20(transitive)
Updatedflowtip-core@^5.1.0
Updatedreact-resize-observer@^0.2.1