react-measure
Advanced tools
react-measure - npm Package Compare versions
Comparing version 1.4.7 to 2.0.0
| ## CHANGELOG | ||
| ### 2.0.0 | ||
| Complete rewrite. Check README for new docs. | ||
| Most transitions from the old API should be easy. You just need to pass a ref callback down now. If you have any issues please feel free to file an issue. | ||
| ### 1.4.7 | ||
@@ -3,0 +8,0 @@ Update to use separate prop-types package as per React 15.5 deprecation [#43](https://github.com/souporserious/react-measure/pull/43#pullrequestreview-32216767) |
| /*! | ||
| * React Measure 1.4.7 | ||
| * React Measure 2.0.0 | ||
| * https://github.com/souporserious/react-measure | ||
@@ -8,10 +8,10 @@ * Copyright (c) 2017 React Measure Authors | ||
| if(typeof exports === 'object' && typeof module === 'object') | ||
| module.exports = factory(require("react"), require("react-dom"), require("resize-observer-polyfill"), require("get-node-dimensions")); | ||
| module.exports = factory(require("react"), require("resize-observer-polyfill")); | ||
| else if(typeof define === 'function' && define.amd) | ||
| define(["react", "react-dom", "resize-observer-polyfill", "get-node-dimensions"], factory); | ||
| define(["react", "resize-observer-polyfill"], factory); | ||
| else if(typeof exports === 'object') | ||
| exports["Measure"] = factory(require("react"), require("react-dom"), require("resize-observer-polyfill"), require("get-node-dimensions")); | ||
| exports["Measure"] = factory(require("react"), require("resize-observer-polyfill")); | ||
| else | ||
| root["Measure"] = factory(root["React"], root["ReactDOM"], root["ResizeObserver"], root["getNodeDimensions"]); | ||
| })(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_14__) { | ||
| root["Measure"] = factory(root["React"], root["ResizeObserver"]); | ||
| })(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_13__) { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
@@ -68,3 +68,3 @@ /******/ // The module cache | ||
| }); | ||
| exports.default = undefined; | ||
| exports.withContentRect = exports.default = undefined; | ||
@@ -75,6 +75,10 @@ var _Measure = __webpack_require__(1); | ||
| var _withContentRect = __webpack_require__(3); | ||
| var _withContentRect2 = _interopRequireDefault(_withContentRect); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| exports.default = _Measure2.default; | ||
| module.exports = exports['default']; | ||
| exports.withContentRect = _withContentRect2.default; | ||
@@ -91,4 +95,44 @@ /***/ }, | ||
| var _react = __webpack_require__(2); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _withContentRect = __webpack_require__(3); | ||
| var _withContentRect2 = _interopRequireDefault(_withContentRect); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function Measure(_ref) { | ||
| var measure = _ref.measure, | ||
| measureRef = _ref.measureRef, | ||
| contentRect = _ref.contentRect, | ||
| children = _ref.children; | ||
| return children({ measure: measure, measureRef: measureRef, contentRect: contentRect }); | ||
| } | ||
| exports.default = (0, _withContentRect2.default)()(Measure); | ||
| module.exports = exports['default']; | ||
| /***/ }, | ||
| /* 2 */ | ||
| /***/ function(module, exports) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE_2__; | ||
| /***/ }, | ||
| /* 3 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| 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; }; | ||
| var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
| 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; }; }(); | ||
@@ -100,10 +144,6 @@ | ||
| var _propTypes = __webpack_require__(3); | ||
| var _propTypes = __webpack_require__(4); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _reactDom = __webpack_require__(12); | ||
| var _reactDom2 = _interopRequireDefault(_reactDom); | ||
| var _resizeObserverPolyfill = __webpack_require__(13); | ||
@@ -113,8 +153,10 @@ | ||
| var _getNodeDimensions = __webpack_require__(14); | ||
| var _getContentRect = __webpack_require__(14); | ||
| var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions); | ||
| var _getContentRect2 = _interopRequireDefault(_getContentRect); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -126,167 +168,116 @@ | ||
| var Measure = function (_Component) { | ||
| _inherits(Measure, _Component); | ||
| var types = ['client', 'offset', 'scroll', 'bounds', 'margin']; | ||
| function Measure(props) { | ||
| _classCallCheck(this, Measure); | ||
| function getTypes(props) { | ||
| var allowedTypes = []; | ||
| types.forEach(function (type) { | ||
| if (props[type]) { | ||
| allowedTypes.push(type); | ||
| } | ||
| }); | ||
| return allowedTypes; | ||
| } | ||
| var _this = _possibleConstructorReturn(this, (Measure.__proto__ || Object.getPrototypeOf(Measure)).call(this, props)); | ||
| function withContentRect(types) { | ||
| return function (WrappedComponent) { | ||
| var _class, _temp2; | ||
| _this.measure = function () { | ||
| var includeMargin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.includeMargin; | ||
| var useClone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props.useClone; | ||
| return _temp2 = _class = function (_Component) { | ||
| _inherits(_class, _Component); | ||
| // bail out if we shouldn't measure | ||
| if (!_this.props.shouldMeasure) return; | ||
| function _class() { | ||
| var _ref; | ||
| // if no parent available we need to requery the DOM node | ||
| if (!_this._node.parentNode) { | ||
| _this._setDOMNode(); | ||
| } | ||
| var _temp, _this, _ret; | ||
| var dimensions = _this.getDimensions(_this._node, includeMargin, useClone); | ||
| var isChildFunction = typeof _this.props.children === 'function'; | ||
| _classCallCheck(this, _class); | ||
| // determine if we need to update our callback with new dimensions or not | ||
| _this._propsToMeasure.some(function (prop) { | ||
| if (dimensions[prop] !== _this._lastDimensions[prop]) { | ||
| // update our callback if we've found a dimension that has changed | ||
| _this.props.onMeasure(dimensions); | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| // update state to send dimensions to child function | ||
| if (isChildFunction && typeof _this !== 'undefined') { | ||
| _this.setState({ dimensions: dimensions }); | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = { | ||
| contentRect: { | ||
| entry: {}, | ||
| client: {}, | ||
| offset: {}, | ||
| scroll: {}, | ||
| bounds: {}, | ||
| margin: {} | ||
| } | ||
| }, _this.measure = function (entries) { | ||
| var contentRect = (0, _getContentRect2.default)(_this._node, types || getTypes(_this.props)); | ||
| // store last dimensions to compare changes | ||
| _this._lastDimensions = dimensions; | ||
| if (entries) { | ||
| contentRect.entry = entries[0].contentRect; | ||
| } | ||
| // we don't need to look any further, bail out | ||
| return true; | ||
| } | ||
| }); | ||
| }; | ||
| _this.setState({ contentRect: contentRect }); | ||
| _this.state = { | ||
| dimensions: { | ||
| width: 0, | ||
| height: 0, | ||
| top: 0, | ||
| right: 0, | ||
| bottom: 0, | ||
| left: 0 | ||
| } | ||
| }; | ||
| _this._node = null; | ||
| _this._propsToMeasure = _this._getPropsToMeasure(props); | ||
| _this._lastDimensions = {}; | ||
| return _this; | ||
| } | ||
| if (typeof _this.props.onResize === 'function') { | ||
| _this.props.onResize(contentRect); | ||
| } | ||
| }, _this._handleRef = function (component) { | ||
| _this._node = component; | ||
| _createClass(Measure, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| var _this2 = this; | ||
| this._setDOMNode(); | ||
| // measure on first render | ||
| this.measure(); | ||
| // add component to resize observer to detect changes on resize | ||
| this.resizeObserver = new _resizeObserverPolyfill2.default(function () { | ||
| return _this2.measure(); | ||
| }); | ||
| this.resizeObserver.observe(this._node); | ||
| } | ||
| }, { | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(_ref) { | ||
| var config = _ref.config, | ||
| whitelist = _ref.whitelist, | ||
| blacklist = _ref.blacklist; | ||
| // we store the properties ourselves so we need to update them if the | ||
| // whitelist or blacklist props have changed | ||
| if (this.props.whitelist !== whitelist || this.props.blacklist !== blacklist) { | ||
| this._propsToMeasure = this._getPropsToMeasure({ whitelist: whitelist, blacklist: blacklist }); | ||
| if (typeof _this.props.innerRef === 'function') { | ||
| _this.props.innerRef(component); | ||
| } | ||
| }, _temp), _possibleConstructorReturn(_this, _ret); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| this.resizeObserver.disconnect(this._node); | ||
| this._node = null; | ||
| } | ||
| }, { | ||
| key: '_setDOMNode', | ||
| value: function _setDOMNode() { | ||
| this._node = _reactDom2.default.findDOMNode(this); | ||
| } | ||
| }, { | ||
| key: 'getDimensions', | ||
| value: function getDimensions() { | ||
| var node = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._node; | ||
| var includeMargin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props.includeMargin; | ||
| var useClone = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.props.useClone; | ||
| var cloneOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.props.cloneOptions; | ||
| return (0, _getNodeDimensions2.default)(node, _extends({ | ||
| margin: includeMargin, | ||
| clone: useClone | ||
| }, cloneOptions)); | ||
| } | ||
| }, { | ||
| key: '_getPropsToMeasure', | ||
| value: function _getPropsToMeasure(_ref2) { | ||
| var whitelist = _ref2.whitelist, | ||
| blacklist = _ref2.blacklist; | ||
| _createClass(_class, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== 'object') return; | ||
| return whitelist.filter(function (prop) { | ||
| return blacklist.indexOf(prop) < 0; | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var children = this.props.children; | ||
| if (this._node) { | ||
| this._resizeObserver = new _resizeObserverPolyfill2.default(this.measure); | ||
| this._resizeObserver.observe(this._node); | ||
| } else { | ||
| console.error('No ref found, attach the `measureRef` prop to the component you want to measure.'); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| if (this.resizeObserver && this._node) { | ||
| this._resizeObserver.disconnect(this._node); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _props = this.props, | ||
| innerRef = _props.innerRef, | ||
| onResize = _props.onResize, | ||
| props = _objectWithoutProperties(_props, ['innerRef', 'onResize']); | ||
| return _react.Children.only(typeof children === 'function' ? children(this.state.dimensions) : children); | ||
| } | ||
| }]); | ||
| return (0, _react.createElement)(WrappedComponent, _extends({}, props, { | ||
| measureRef: this._handleRef, | ||
| measure: this.measure, | ||
| contentRect: this.state.contentRect | ||
| })); | ||
| } | ||
| }]); | ||
| return Measure; | ||
| }(_react.Component); | ||
| return _class; | ||
| }(_react.Component), _class.propTypes = { | ||
| client: _propTypes2.default.bool, | ||
| offset: _propTypes2.default.bool, | ||
| scroll: _propTypes2.default.bool, | ||
| bounds: _propTypes2.default.bool, | ||
| margin: _propTypes2.default.bool, | ||
| innerRef: _propTypes2.default.func, | ||
| onResize: _propTypes2.default.func, | ||
| children: _propTypes2.default.func | ||
| }, _temp2; | ||
| }; | ||
| } | ||
| Measure.propTypes = { | ||
| whitelist: _propTypes2.default.array, | ||
| blacklist: _propTypes2.default.array, | ||
| includeMargin: _propTypes2.default.bool, | ||
| useClone: _propTypes2.default.bool, | ||
| cloneOptions: _propTypes2.default.object, | ||
| shouldMeasure: _propTypes2.default.bool, | ||
| onMeasure: _propTypes2.default.func | ||
| }; | ||
| Measure.defaultProps = { | ||
| whitelist: ['width', 'height', 'top', 'right', 'bottom', 'left'], | ||
| blacklist: [], | ||
| includeMargin: true, | ||
| useClone: false, | ||
| cloneOptions: {}, | ||
| shouldMeasure: true, | ||
| onMeasure: function onMeasure() { | ||
| return null; | ||
| } | ||
| }; | ||
| exports.default = Measure; | ||
| exports.default = withContentRect; | ||
| module.exports = exports['default']; | ||
| /***/ }, | ||
| /* 2 */ | ||
| /***/ function(module, exports) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE_2__; | ||
| /***/ }, | ||
| /* 3 */ | ||
| /* 4 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -317,12 +308,12 @@ | ||
| var throwOnDirectAccess = true; | ||
| module.exports = __webpack_require__(5)(isValidElement, throwOnDirectAccess); | ||
| module.exports = __webpack_require__(6)(isValidElement, throwOnDirectAccess); | ||
| } else { | ||
| // By explicitly using `prop-types` you are opting into new production behavior. | ||
| // http://fb.me/prop-types-in-prod | ||
| module.exports = __webpack_require__(11)(); | ||
| module.exports = __webpack_require__(12)(); | ||
| } | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5))) | ||
| /***/ }, | ||
| /* 4 */ | ||
| /* 5 */ | ||
| /***/ function(module, exports) { | ||
@@ -513,3 +504,3 @@ | ||
| /***/ }, | ||
| /* 5 */ | ||
| /* 6 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -530,8 +521,8 @@ | ||
| var emptyFunction = __webpack_require__(6); | ||
| var invariant = __webpack_require__(7); | ||
| var warning = __webpack_require__(8); | ||
| var emptyFunction = __webpack_require__(7); | ||
| var invariant = __webpack_require__(8); | ||
| var warning = __webpack_require__(9); | ||
| var ReactPropTypesSecret = __webpack_require__(9); | ||
| var checkPropTypes = __webpack_require__(10); | ||
| var ReactPropTypesSecret = __webpack_require__(10); | ||
| var checkPropTypes = __webpack_require__(11); | ||
@@ -670,2 +661,3 @@ module.exports = function (isValidElement, throwOnDirectAccess) { | ||
| var manualPropTypeCallCache = {}; | ||
| var manualPropTypeWarningCount = 0; | ||
| } | ||
@@ -683,5 +675,8 @@ function checkType(isRequired, props, propName, componentName, location, propFullName, secret) { | ||
| var cacheKey = componentName + ':' + propName; | ||
| if (!manualPropTypeCallCache[cacheKey]) { | ||
| if (!manualPropTypeCallCache[cacheKey] && | ||
| // Avoid spamming the console because they are often not actionable except for lib authors | ||
| manualPropTypeWarningCount < 3) { | ||
| warning(false, 'You are manually calling a React.PropTypes validation ' + 'function for the `%s` prop on `%s`. This is deprecated ' + 'and will throw in the standalone `prop-types` package. ' + 'You may be seeing this warning due to a third-party PropTypes ' + 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.', propFullName, componentName); | ||
| manualPropTypeCallCache[cacheKey] = true; | ||
| manualPropTypeWarningCount++; | ||
| } | ||
@@ -824,2 +819,10 @@ } | ||
| for (var i = 0; i < arrayOfTypeCheckers.length; i++) { | ||
| var checker = arrayOfTypeCheckers[i]; | ||
| if (typeof checker !== 'function') { | ||
| warning(false, 'Invalid argument supplid to oneOfType. Expected an array of check functions, but ' + 'received %s at index %s.', getPostfixForTypeWarning(checker), i); | ||
| return emptyFunction.thatReturnsNull; | ||
| } | ||
| } | ||
| function validate(props, propName, componentName, location, propFullName) { | ||
@@ -957,2 +960,5 @@ for (var i = 0; i < arrayOfTypeCheckers.length; i++) { | ||
| function getPreciseType(propValue) { | ||
| if (typeof propValue === 'undefined' || propValue === null) { | ||
| return '' + propValue; | ||
| } | ||
| var propType = getPropType(propValue); | ||
@@ -969,2 +975,19 @@ if (propType === 'object') { | ||
| // Returns a string that is postfixed to a warning about an invalid type. | ||
| // For example, "undefined" or "of type array" | ||
| function getPostfixForTypeWarning(value) { | ||
| var type = getPreciseType(value); | ||
| switch (type) { | ||
| case 'array': | ||
| case 'object': | ||
| return 'an ' + type; | ||
| case 'boolean': | ||
| case 'date': | ||
| case 'regexp': | ||
| return 'a ' + type; | ||
| default: | ||
| return type; | ||
| } | ||
| } | ||
| // Returns class name of the object, if any. | ||
@@ -983,6 +1006,6 @@ function getClassName(propValue) { | ||
| }; | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5))) | ||
| /***/ }, | ||
| /* 6 */ | ||
| /* 7 */ | ||
| /***/ function(module, exports) { | ||
@@ -1030,3 +1053,3 @@ | ||
| /***/ }, | ||
| /* 7 */ | ||
| /* 8 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -1089,6 +1112,6 @@ | ||
| module.exports = invariant; | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5))) | ||
| /***/ }, | ||
| /* 8 */ | ||
| /* 9 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -1108,3 +1131,3 @@ | ||
| var emptyFunction = __webpack_require__(6); | ||
| var emptyFunction = __webpack_require__(7); | ||
@@ -1163,6 +1186,6 @@ /** | ||
| module.exports = warning; | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5))) | ||
| /***/ }, | ||
| /* 9 */ | ||
| /* 10 */ | ||
| /***/ function(module, exports) { | ||
@@ -1186,3 +1209,3 @@ | ||
| /***/ }, | ||
| /* 10 */ | ||
| /* 11 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -1204,5 +1227,5 @@ | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| var invariant = __webpack_require__(7); | ||
| var warning = __webpack_require__(8); | ||
| var ReactPropTypesSecret = __webpack_require__(9); | ||
| var invariant = __webpack_require__(8); | ||
| var warning = __webpack_require__(9); | ||
| var ReactPropTypesSecret = __webpack_require__(10); | ||
| var loggedTypeFailures = {}; | ||
@@ -1254,6 +1277,6 @@ } | ||
| module.exports = checkPropTypes; | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5))) | ||
| /***/ }, | ||
| /* 11 */ | ||
| /* 12 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
@@ -1272,9 +1295,12 @@ | ||
| var emptyFunction = __webpack_require__(6); | ||
| var invariant = __webpack_require__(7); | ||
| var emptyFunction = __webpack_require__(7); | ||
| var invariant = __webpack_require__(8); | ||
| var ReactPropTypesSecret = __webpack_require__(10); | ||
| module.exports = function () { | ||
| // Important! | ||
| // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. | ||
| function shim() { | ||
| function shim(props, propName, componentName, location, propFullName, secret) { | ||
| if (secret === ReactPropTypesSecret) { | ||
| // It is still safe when called from React. | ||
| return; | ||
| } | ||
| invariant(false, 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types'); | ||
@@ -1286,2 +1312,4 @@ }; | ||
| }; | ||
| // Important! | ||
| // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. | ||
| var ReactPropTypes = { | ||
@@ -1314,8 +1342,2 @@ array: shim, | ||
| /***/ }, | ||
| /* 12 */ | ||
| /***/ function(module, exports) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE_12__; | ||
| /***/ }, | ||
| /* 13 */ | ||
@@ -1330,4 +1352,65 @@ /***/ function(module, exports) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE_14__; | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| function getContentRect(node, types) { | ||
| var calculations = {}; | ||
| if (types.indexOf('client') > -1) { | ||
| calculations.client = { | ||
| top: node.clientTop, | ||
| left: node.clientLeft, | ||
| width: node.clientWidth, | ||
| height: node.clientHeight | ||
| }; | ||
| } | ||
| if (types.indexOf('offset') > -1) { | ||
| calculations.offset = { | ||
| top: node.offsetTop, | ||
| left: node.offsetLeft, | ||
| width: node.offsetWidth, | ||
| height: node.offsetHeight | ||
| }; | ||
| } | ||
| if (types.indexOf('scroll') > -1) { | ||
| calculations.scroll = { | ||
| top: node.scrollTop, | ||
| left: node.scrollLeft, | ||
| width: node.scrollWidth, | ||
| height: node.scrollHeight | ||
| }; | ||
| } | ||
| if (types.indexOf('bounds') > -1) { | ||
| var rect = node.getBoundingClientRect(); | ||
| calculations.bounds = { | ||
| top: rect.top, | ||
| right: rect.right, | ||
| bottom: rect.bottom, | ||
| left: rect.left, | ||
| width: rect.width, | ||
| height: rect.height | ||
| }; | ||
| } | ||
| if (types.indexOf('margin') > -1) { | ||
| var styles = getComputedStyle(node); | ||
| calculations.margin = { | ||
| top: parseInt(styles.marginTop), | ||
| right: parseInt(styles.marginRight), | ||
| bottom: parseInt(styles.marginBottom), | ||
| left: parseInt(styles.marginLeft) | ||
| }; | ||
| } | ||
| return calculations; | ||
| } | ||
| exports.default = getContentRect; | ||
| module.exports = exports['default']; | ||
| /***/ } | ||
@@ -1334,0 +1417,0 @@ /******/ ]) |
| /*! | ||
| * React Measure 1.4.7 | ||
| * React Measure 2.0.0 | ||
| * https://github.com/souporserious/react-measure | ||
| * Copyright (c) 2017 React Measure Authors | ||
| */ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("resize-observer-polyfill"),require("get-node-dimensions")):"function"==typeof define&&define.amd?define(["react","react-dom","resize-observer-polyfill","get-node-dimensions"],t):"object"==typeof exports?exports.Measure=t(require("react"),require("react-dom"),require("resize-observer-polyfill"),require("get-node-dimensions")):e.Measure=t(e.React,e.ReactDOM,e.ResizeObserver,e.getNodeDimensions)}(this,function(e,t,n,r){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(1),i=r(o);t.default=i.default,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(2),f=(r(c),n(3)),l=r(f),p=n(12),d=r(p),y=n(13),h=r(y),v=n(14),m=r(v),Measure=function(e){function Measure(e){o(this,Measure);var t=i(this,(Measure.__proto__||Object.getPrototypeOf(Measure)).call(this,e));return t.measure=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.props.includeMargin,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.props.useClone;if(t.props.shouldMeasure){t._node.parentNode||t._setDOMNode();var r=t.getDimensions(t._node,e,n),o="function"==typeof t.props.children;t._propsToMeasure.some(function(e){if(r[e]!==t._lastDimensions[e])return t.props.onMeasure(r),o&&"undefined"!=typeof t&&t.setState({dimensions:r}),t._lastDimensions=r,!0})}},t.state={dimensions:{width:0,height:0,top:0,right:0,bottom:0,left:0}},t._node=null,t._propsToMeasure=t._getPropsToMeasure(e),t._lastDimensions={},t}return u(Measure,e),s(Measure,[{key:"componentDidMount",value:function(){var e=this;this._setDOMNode(),this.measure(),this.resizeObserver=new h.default(function(){return e.measure()}),this.resizeObserver.observe(this._node)}},{key:"componentWillReceiveProps",value:function(e){var t=(e.config,e.whitelist),n=e.blacklist;this.props.whitelist===t&&this.props.blacklist===n||(this._propsToMeasure=this._getPropsToMeasure({whitelist:t,blacklist:n}))}},{key:"componentWillUnmount",value:function(){this.resizeObserver.disconnect(this._node),this._node=null}},{key:"_setDOMNode",value:function(){this._node=d.default.findDOMNode(this)}},{key:"getDimensions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this._node,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.props.includeMargin,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.props.useClone,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:this.props.cloneOptions;return(0,m.default)(e,a({margin:t,clone:n},r))}},{key:"_getPropsToMeasure",value:function(e){var t=e.whitelist,n=e.blacklist;return t.filter(function(e){return n.indexOf(e)<0})}},{key:"render",value:function(){var e=this.props.children;return c.Children.only("function"==typeof e?e(this.state.dimensions):e)}}]),Measure}(c.Component);Measure.propTypes={whitelist:l.default.array,blacklist:l.default.array,includeMargin:l.default.bool,useClone:l.default.bool,cloneOptions:l.default.object,shouldMeasure:l.default.bool,onMeasure:l.default.func},Measure.defaultProps={whitelist:["width","height","top","right","bottom","left"],blacklist:[],includeMargin:!0,useClone:!1,cloneOptions:{},shouldMeasure:!0,onMeasure:function(){return null}},t.default=Measure,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};if("production"!==t.env.NODE_ENV){var o="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,i=function(e){return"object"===("undefined"==typeof e?"undefined":r(e))&&null!==e&&e.$$typeof===o},u=!0;e.exports=n(5)(i,u)}else e.exports=n(11)()}).call(t,n(4))},function(e,t){"use strict";function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(f===setTimeout)return setTimeout(e,0);if((f===n||!f)&&setTimeout)return f=setTimeout,setTimeout(e,0);try{return f(e,0)}catch(t){try{return f.call(null,e,0)}catch(t){return f.call(this,e,0)}}}function i(e){if(l===clearTimeout)return clearTimeout(e);if((l===r||!l)&&clearTimeout)return l=clearTimeout,clearTimeout(e);try{return l(e)}catch(t){try{return l.call(null,e)}catch(t){return l.call(this,e)}}}function u(){h&&d&&(h=!1,d.length?y=d.concat(y):v=-1,y.length&&a())}function a(){if(!h){var e=o(u);h=!0;for(var t=y.length;t;){for(d=y,y=[];++v<t;)d&&d[v].run();v=-1,t=y.length}d=null,h=!1,i(e)}}function s(e,t){this.fun=e,this.array=t}function c(){}var f,l,p=e.exports={};!function(){try{f="function"==typeof setTimeout?setTimeout:n}catch(e){f=n}try{l="function"==typeof clearTimeout?clearTimeout:r}catch(e){l=r}}();var d,y=[],h=!1,v=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];y.push(new s(e,t)),1!==y.length||h||o(a)},s.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t,n){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=n(6),i=n(7),u=n(8),a=n(9),s=n(10);e.exports=function(e,n){function c(e){var t=e&&(N&&e[N]||e[k]);if("function"==typeof t)return t}function f(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function l(e){this.message=e,this.stack=""}function p(e){function r(r,s,c,f,p,d,y){if(f=f||j,d=d||c,y!==a)if(n)i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var h=f+":"+c;o[h]||(u(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",d,f),o[h]=!0)}return null==s[c]?r?new l(null===s[c]?"The "+p+" `"+d+"` is marked as required "+("in `"+f+"`, but its value is `null`."):"The "+p+" `"+d+"` is marked as required in "+("`"+f+"`, but its value is `undefined`.")):null:e(s,c,f,p,d)}if("production"!==t.env.NODE_ENV)var o={};var s=r.bind(null,!1);return s.isRequired=r.bind(null,!0),s}function d(e){function t(t,n,r,o,i,u){var a=t[n],s=E(a);if(s!==e){var c=P(a);return new l("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return p(t)}function y(){return p(o.thatReturnsNull)}function h(e){function t(t,n,r,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var s=E(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c<u.length;c++){var f=e(u,c,r,o,i+"["+c+"]",a);if(f instanceof Error)return f}return null}return p(t)}function v(){function t(t,n,r,o,i){var u=t[n];if(!e(u)){var a=E(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+a+"` supplied to `"+r+"`, expected a single ReactElement."))}return null}return p(t)}function m(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var u=e.name||j,a=S(t[n]);return new l("Invalid "+o+" `"+i+"` of type "+("`"+a+"` supplied to `"+r+"`, expected ")+("instance of `"+u+"`."))}return null}return p(t)}function b(e){function n(t,n,r,o,i){for(var u=t[n],a=0;a<e.length;a++)if(f(u,e[a]))return null;var s=JSON.stringify(e);return new l("Invalid "+o+" `"+i+"` of value `"+u+"` "+("supplied to `"+r+"`, expected one of "+s+"."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?u(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,o.thatReturnsNull)}function g(e){function t(t,n,r,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var u=t[n],s=E(u);if("object"!==s)return new l("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+r+"`, expected an object."));for(var c in u)if(u.hasOwnProperty(c)){var f=e(u,c,r,o,i+"."+c,a);if(f instanceof Error)return f}return null}return p(t)}function w(e){function n(t,n,r,o,i){for(var u=0;u<e.length;u++){var s=e[u];if(null==s(t,n,r,o,i,a))return null}return new l("Invalid "+o+" `"+i+"` supplied to "+("`"+r+"`."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?u(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,o.thatReturnsNull)}function O(){function e(e,t,n,r,o){return _(e[t])?null:new l("Invalid "+r+" `"+o+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return p(e)}function T(e){function t(t,n,r,o,i){var u=t[n],s=E(u);if("object"!==s)return new l("Invalid "+o+" `"+i+"` of type `"+s+"` "+("supplied to `"+r+"`, expected `object`."));for(var c in e){var f=e[c];if(f){var p=f(u,c,r,o,i+"."+c,a);if(p)return p}}return null}return p(t)}function _(t){switch("undefined"==typeof t?"undefined":r(t)){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(_);if(null===t||e(t))return!0;var n=c(t);if(!n)return!1;var o,i=n.call(t);if(n!==t.entries){for(;!(o=i.next()).done;)if(!_(o.value))return!1}else for(;!(o=i.next()).done;){var u=o.value;if(u&&!_(u[1]))return!1}return!0;default:return!1}}function x(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function E(e){var t="undefined"==typeof e?"undefined":r(e);return Array.isArray(e)?"array":e instanceof RegExp?"object":x(t,e)?"symbol":t}function P(e){var t=E(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function S(e){return e.constructor&&e.constructor.name?e.constructor.name:j}var N="function"==typeof Symbol&&Symbol.iterator,k="@@iterator",j="<<anonymous>>",M={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:y(),arrayOf:h,element:v(),instanceOf:m,node:O(),objectOf:g,oneOf:b,oneOfType:w,shape:T};return l.prototype=Error.prototype,M.checkPropTypes=s,M.PropTypes=M,M}}).call(t,n(4))},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){(function(t){"use strict";function n(e,t,n,o,i,u,a,s){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[n,o,i,u,a,s],l=0;c=new Error(t.replace(/%s/g,function(){return f[l++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(e){};"production"!==t.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(4))},function(e,t,n){(function(t){"use strict";var r=n(6),o=r;"production"!==t.env.NODE_ENV&&!function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};o=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,o=Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];e.apply(void 0,[n].concat(o))}}}(),e.exports=o}).call(t,n(4))},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){"use strict";function r(e,n,r,c,f){if("production"!==t.env.NODE_ENV)for(var l in e)if(e.hasOwnProperty(l)){var p;try{i("function"==typeof e[l],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",c||"React class",r,l),p=e[l](n,l,c,r,null,a)}catch(e){p=e}if(u(!p||p instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",c||"React class",r,l,"undefined"==typeof p?"undefined":o(p)),p instanceof Error&&!(p.message in s)){s[p.message]=!0;var d=f?f():"";u(!1,"Failed %s type: %s%s",r,p.message,null!=d?d:"")}}}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};if("production"!==t.env.NODE_ENV)var i=n(7),u=n(8),a=n(9),s={};e.exports=r}).call(t,n(4))},function(e,t,n){"use strict";var r=n(6),o=n(7);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["react","resize-observer-polyfill"],t):"object"==typeof exports?exports.Measure=t(require("react"),require("resize-observer-polyfill")):e.Measure=t(e.React,e.ResizeObserver)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.withContentRect=t.default=void 0;var o=n(1),i=r(o),u=n(3),a=r(u);t.default=i.default,t.withContentRect=a.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function Measure(e){var t=e.measure,n=e.measureRef,r=e.contentRect,o=e.children;return o({measure:t,measureRef:n,contentRect:r})}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=(r(o),n(3)),u=r(i);t.default=(0,u.default)()(Measure),e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function f(e){var t=[];return w.forEach(function(n){e[n]&&t.push(n)}),t}function c(e){return function(t){var n,r;return r=n=function(n){function r(){var t,n,o,a;i(this,r);for(var c=arguments.length,s=Array(c),l=0;l<c;l++)s[l]=arguments[l];return n=o=u(this,(t=r.__proto__||Object.getPrototypeOf(r)).call.apply(t,[this].concat(s))),o.state={contentRect:{entry:{},client:{},offset:{},scroll:{},bounds:{},margin:{}}},o.measure=function(t){var n=(0,g.default)(o._node,e||f(o.props));t&&(n.entry=t[0].contentRect),o.setState({contentRect:n}),"function"==typeof o.props.onResize&&o.props.onResize(n)},o._handleRef=function(e){o._node=e,"function"==typeof o.props.innerRef&&o.props.innerRef(e)},a=n,u(o,a)}return a(r,n),p(r,[{key:"componentDidMount",value:function(){"object"===("undefined"==typeof window?"undefined":l(window))&&(this._node?(this._resizeObserver=new m.default(this.measure),this._resizeObserver.observe(this._node)):console.error("No ref found, attach the `measureRef` prop to the component you want to measure."))}},{key:"componentWillUnmount",value:function(){this.resizeObserver&&this._node&&this._resizeObserver.disconnect(this._node)}},{key:"render",value:function(){var e=this.props,n=(e.innerRef,e.onResize,o(e,["innerRef","onResize"]));return(0,d.createElement)(t,s({},n,{measureRef:this._handleRef,measure:this.measure,contentRect:this.state.contentRect}))}}]),r}(d.Component),n.propTypes={client:h.default.bool,offset:h.default.bool,scroll:h.default.bool,bounds:h.default.bool,margin:h.default.bool,innerRef:h.default.func,onResize:h.default.func,children:h.default.func},r}}Object.defineProperty(t,"__esModule",{value:!0});var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),d=n(2),y=(r(d),n(4)),h=r(y),v=n(13),m=r(v),b=n(14),g=r(b),w=["client","offset","scroll","bounds","margin"];t.default=c,e.exports=t.default},function(e,t,n){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};if("production"!==t.env.NODE_ENV){var o="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,i=function(e){return"object"===("undefined"==typeof e?"undefined":r(e))&&null!==e&&e.$$typeof===o},u=!0;e.exports=n(6)(i,u)}else e.exports=n(12)()}).call(t,n(5))},function(e,t){"use strict";function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(s===setTimeout)return setTimeout(e,0);if((s===n||!s)&&setTimeout)return s=setTimeout,setTimeout(e,0);try{return s(e,0)}catch(t){try{return s.call(null,e,0)}catch(t){return s.call(this,e,0)}}}function i(e){if(l===clearTimeout)return clearTimeout(e);if((l===r||!l)&&clearTimeout)return l=clearTimeout,clearTimeout(e);try{return l(e)}catch(t){try{return l.call(null,e)}catch(t){return l.call(this,e)}}}function u(){h&&d&&(h=!1,d.length?y=d.concat(y):v=-1,y.length&&a())}function a(){if(!h){var e=o(u);h=!0;for(var t=y.length;t;){for(d=y,y=[];++v<t;)d&&d[v].run();v=-1,t=y.length}d=null,h=!1,i(e)}}function f(e,t){this.fun=e,this.array=t}function c(){}var s,l,p=e.exports={};!function(){try{s="function"==typeof setTimeout?setTimeout:n}catch(e){s=n}try{l="function"==typeof clearTimeout?clearTimeout:r}catch(e){l=r}}();var d,y=[],h=!1,v=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];y.push(new f(e,t)),1!==y.length||h||o(a)},f.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t,n){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=n(7),i=n(8),u=n(9),a=n(10),f=n(11);e.exports=function(e,n){function c(e){var t=e&&(P&&e[P]||e[N]);if("function"==typeof t)return t}function s(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function l(e){this.message=e,this.stack=""}function p(e){function r(r,c,s,p,d,y,h){if(p=p||k,y=y||s,h!==a)if(n)i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var v=p+":"+s;!o[v]&&f<3&&(u(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",y,p),o[v]=!0,f++)}return null==c[s]?r?new l(null===c[s]?"The "+d+" `"+y+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+y+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(c,s,p,d,y)}if("production"!==t.env.NODE_ENV)var o={},f=0;var c=r.bind(null,!1);return c.isRequired=r.bind(null,!0),c}function d(e){function t(t,n,r,o,i,u){var a=t[n],f=_(a);if(f!==e){var c=E(a);return new l("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return p(t)}function y(){return p(o.thatReturnsNull)}function h(e){function t(t,n,r,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var f=_(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+f+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c<u.length;c++){var s=e(u,c,r,o,i+"["+c+"]",a);if(s instanceof Error)return s}return null}return p(t)}function v(){function t(t,n,r,o,i){var u=t[n];if(!e(u)){var a=_(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+a+"` supplied to `"+r+"`, expected a single ReactElement."))}return null}return p(t)}function m(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var u=e.name||k,a=j(t[n]);return new l("Invalid "+o+" `"+i+"` of type "+("`"+a+"` supplied to `"+r+"`, expected ")+("instance of `"+u+"`."))}return null}return p(t)}function b(e){function n(t,n,r,o,i){for(var u=t[n],a=0;a<e.length;a++)if(s(u,e[a]))return null;var f=JSON.stringify(e);return new l("Invalid "+o+" `"+i+"` of value `"+u+"` "+("supplied to `"+r+"`, expected one of "+f+"."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?u(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,o.thatReturnsNull)}function g(e){function t(t,n,r,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var u=t[n],f=_(u);if("object"!==f)return new l("Invalid "+o+" `"+i+"` of type "+("`"+f+"` supplied to `"+r+"`, expected an object."));for(var c in u)if(u.hasOwnProperty(c)){var s=e(u,c,r,o,i+"."+c,a);if(s instanceof Error)return s}return null}return p(t)}function w(e){function n(t,n,r,o,i){for(var u=0;u<e.length;u++){var f=e[u];if(null==f(t,n,r,o,i,a))return null}return new l("Invalid "+o+" `"+i+"` supplied to "+("`"+r+"`."))}if(!Array.isArray(e))return"production"!==t.env.NODE_ENV?u(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,o.thatReturnsNull;for(var r=0;r<e.length;r++){var i=e[r];if("function"!=typeof i)return u(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",S(i),r),o.thatReturnsNull}return p(n)}function O(){function e(e,t,n,r,o){return T(e[t])?null:new l("Invalid "+r+" `"+o+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return p(e)}function R(e){function t(t,n,r,o,i){var u=t[n],f=_(u);if("object"!==f)return new l("Invalid "+o+" `"+i+"` of type `"+f+"` "+("supplied to `"+r+"`, expected `object`."));for(var c in e){var s=e[c];if(s){var p=s(u,c,r,o,i+"."+c,a);if(p)return p}}return null}return p(t)}function T(t){switch("undefined"==typeof t?"undefined":r(t)){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(T);if(null===t||e(t))return!0;var n=c(t);if(!n)return!1;var o,i=n.call(t);if(n!==t.entries){for(;!(o=i.next()).done;)if(!T(o.value))return!1}else for(;!(o=i.next()).done;){var u=o.value;if(u&&!T(u[1]))return!1}return!0;default:return!1}}function x(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function _(e){var t="undefined"==typeof e?"undefined":r(e);return Array.isArray(e)?"array":e instanceof RegExp?"object":x(t,e)?"symbol":t}function E(e){if("undefined"==typeof e||null===e)return""+e;var t=_(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function S(e){var t=E(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function j(e){return e.constructor&&e.constructor.name?e.constructor.name:k}var P="function"==typeof Symbol&&Symbol.iterator,N="@@iterator",k="<<anonymous>>",I={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:y(),arrayOf:h,element:v(),instanceOf:m,node:O(),objectOf:g,oneOf:b,oneOfType:w,shape:R};return l.prototype=Error.prototype,I.checkPropTypes=f,I.PropTypes=I,I}}).call(t,n(5))},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){(function(t){"use strict";function n(e,t,n,o,i,u,a,f){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[n,o,i,u,a,f],l=0;c=new Error(t.replace(/%s/g,function(){return s[l++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(e){};"production"!==t.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(5))},function(e,t,n){(function(t){"use strict";var r=n(7),o=r;"production"!==t.env.NODE_ENV&&!function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};o=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,o=Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];e.apply(void 0,[n].concat(o))}}}(),e.exports=o}).call(t,n(5))},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){"use strict";function r(e,n,r,c,s){if("production"!==t.env.NODE_ENV)for(var l in e)if(e.hasOwnProperty(l)){var p;try{i("function"==typeof e[l],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",c||"React class",r,l),p=e[l](n,l,c,r,null,a)}catch(e){p=e}if(u(!p||p instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",c||"React class",r,l,"undefined"==typeof p?"undefined":o(p)),p instanceof Error&&!(p.message in f)){f[p.message]=!0;var d=s?s():"";u(!1,"Failed %s type: %s%s",r,p.message,null!=d?d:"")}}}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};if("production"!==t.env.NODE_ENV)var i=n(8),u=n(9),a=n(10),f={};e.exports=r}).call(t,n(5))},function(e,t,n){"use strict";var r=n(7),o=n(8),i=n(10);e.exports=function(){function e(e,t,n,r,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,n){e.exports=t},function(e,t){"use strict";function n(e,t){var n={};if(t.indexOf("client")>-1&&(n.client={top:e.clientTop,left:e.clientLeft,width:e.clientWidth,height:e.clientHeight}),t.indexOf("offset")>-1&&(n.offset={top:e.offsetTop,left:e.offsetLeft,width:e.offsetWidth,height:e.offsetHeight}),t.indexOf("scroll")>-1&&(n.scroll={top:e.scrollTop,left:e.scrollLeft,width:e.scrollWidth,height:e.scrollHeight}),t.indexOf("bounds")>-1){var r=e.getBoundingClientRect();n.bounds={top:r.top,right:r.right,bottom:r.bottom,left:r.left,width:r.width,height:r.height}}if(t.indexOf("margin")>-1){var o=getComputedStyle(e);n.margin={top:parseInt(o.marginTop),right:parseInt(o.marginRight),bottom:parseInt(o.marginBottom),left:parseInt(o.marginLeft)}}return n}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,e.exports=t.default}])}); |
@@ -7,6 +7,2 @@ 'use strict'; | ||
| 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 _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 _react = require('react'); | ||
@@ -16,181 +12,18 @@ | ||
| var _propTypes = require('prop-types'); | ||
| var _withContentRect = require('./with-content-rect'); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _withContentRect2 = _interopRequireDefault(_withContentRect); | ||
| var _reactDom = require('react-dom'); | ||
| var _reactDom2 = _interopRequireDefault(_reactDom); | ||
| var _resizeObserverPolyfill = require('resize-observer-polyfill'); | ||
| var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill); | ||
| var _getNodeDimensions = require('get-node-dimensions'); | ||
| var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function Measure(_ref) { | ||
| var measure = _ref.measure, | ||
| measureRef = _ref.measureRef, | ||
| contentRect = _ref.contentRect, | ||
| children = _ref.children; | ||
| 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; } | ||
| return children({ measure: measure, measureRef: measureRef, contentRect: contentRect }); | ||
| } | ||
| 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 Measure = function (_Component) { | ||
| _inherits(Measure, _Component); | ||
| function Measure(props) { | ||
| _classCallCheck(this, Measure); | ||
| var _this = _possibleConstructorReturn(this, (Measure.__proto__ || Object.getPrototypeOf(Measure)).call(this, props)); | ||
| _this.measure = function () { | ||
| var includeMargin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.includeMargin; | ||
| var useClone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props.useClone; | ||
| // bail out if we shouldn't measure | ||
| if (!_this.props.shouldMeasure) return; | ||
| // if no parent available we need to requery the DOM node | ||
| if (!_this._node.parentNode) { | ||
| _this._setDOMNode(); | ||
| } | ||
| var dimensions = _this.getDimensions(_this._node, includeMargin, useClone); | ||
| var isChildFunction = typeof _this.props.children === 'function'; | ||
| // determine if we need to update our callback with new dimensions or not | ||
| _this._propsToMeasure.some(function (prop) { | ||
| if (dimensions[prop] !== _this._lastDimensions[prop]) { | ||
| // update our callback if we've found a dimension that has changed | ||
| _this.props.onMeasure(dimensions); | ||
| // update state to send dimensions to child function | ||
| if (isChildFunction && typeof _this !== 'undefined') { | ||
| _this.setState({ dimensions: dimensions }); | ||
| } | ||
| // store last dimensions to compare changes | ||
| _this._lastDimensions = dimensions; | ||
| // we don't need to look any further, bail out | ||
| return true; | ||
| } | ||
| }); | ||
| }; | ||
| _this.state = { | ||
| dimensions: { | ||
| width: 0, | ||
| height: 0, | ||
| top: 0, | ||
| right: 0, | ||
| bottom: 0, | ||
| left: 0 | ||
| } | ||
| }; | ||
| _this._node = null; | ||
| _this._propsToMeasure = _this._getPropsToMeasure(props); | ||
| _this._lastDimensions = {}; | ||
| return _this; | ||
| } | ||
| _createClass(Measure, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| var _this2 = this; | ||
| this._setDOMNode(); | ||
| // measure on first render | ||
| this.measure(); | ||
| // add component to resize observer to detect changes on resize | ||
| this.resizeObserver = new _resizeObserverPolyfill2.default(function () { | ||
| return _this2.measure(); | ||
| }); | ||
| this.resizeObserver.observe(this._node); | ||
| } | ||
| }, { | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(_ref) { | ||
| var config = _ref.config, | ||
| whitelist = _ref.whitelist, | ||
| blacklist = _ref.blacklist; | ||
| // we store the properties ourselves so we need to update them if the | ||
| // whitelist or blacklist props have changed | ||
| if (this.props.whitelist !== whitelist || this.props.blacklist !== blacklist) { | ||
| this._propsToMeasure = this._getPropsToMeasure({ whitelist: whitelist, blacklist: blacklist }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| this.resizeObserver.disconnect(this._node); | ||
| this._node = null; | ||
| } | ||
| }, { | ||
| key: '_setDOMNode', | ||
| value: function _setDOMNode() { | ||
| this._node = _reactDom2.default.findDOMNode(this); | ||
| } | ||
| }, { | ||
| key: 'getDimensions', | ||
| value: function getDimensions() { | ||
| var node = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._node; | ||
| var includeMargin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props.includeMargin; | ||
| var useClone = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.props.useClone; | ||
| var cloneOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.props.cloneOptions; | ||
| return (0, _getNodeDimensions2.default)(node, _extends({ | ||
| margin: includeMargin, | ||
| clone: useClone | ||
| }, cloneOptions)); | ||
| } | ||
| }, { | ||
| key: '_getPropsToMeasure', | ||
| value: function _getPropsToMeasure(_ref2) { | ||
| var whitelist = _ref2.whitelist, | ||
| blacklist = _ref2.blacklist; | ||
| return whitelist.filter(function (prop) { | ||
| return blacklist.indexOf(prop) < 0; | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var children = this.props.children; | ||
| return _react.Children.only(typeof children === 'function' ? children(this.state.dimensions) : children); | ||
| } | ||
| }]); | ||
| return Measure; | ||
| }(_react.Component); | ||
| Measure.propTypes = { | ||
| whitelist: _propTypes2.default.array, | ||
| blacklist: _propTypes2.default.array, | ||
| includeMargin: _propTypes2.default.bool, | ||
| useClone: _propTypes2.default.bool, | ||
| cloneOptions: _propTypes2.default.object, | ||
| shouldMeasure: _propTypes2.default.bool, | ||
| onMeasure: _propTypes2.default.func | ||
| }; | ||
| Measure.defaultProps = { | ||
| whitelist: ['width', 'height', 'top', 'right', 'bottom', 'left'], | ||
| blacklist: [], | ||
| includeMargin: true, | ||
| useClone: false, | ||
| cloneOptions: {}, | ||
| shouldMeasure: true, | ||
| onMeasure: function onMeasure() { | ||
| return null; | ||
| } | ||
| }; | ||
| exports.default = Measure; | ||
| exports.default = (0, _withContentRect2.default)()(Measure); | ||
| module.exports = exports['default']; |
@@ -6,3 +6,3 @@ 'use strict'; | ||
| }); | ||
| exports.default = undefined; | ||
| exports.withContentRect = exports.default = undefined; | ||
@@ -13,5 +13,9 @@ var _Measure = require('./Measure'); | ||
| var _withContentRect = require('./with-content-rect'); | ||
| var _withContentRect2 = _interopRequireDefault(_withContentRect); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| exports.default = _Measure2.default; | ||
| module.exports = exports['default']; | ||
| exports.withContentRect = _withContentRect2.default; |
| { | ||
| "name": "react-measure", | ||
| "version": "1.4.7", | ||
| "version": "2.0.0", | ||
| "description": "Compute measurements of React components.", | ||
@@ -45,4 +45,4 @@ "main": "lib/react-measure.js", | ||
| "get-node-dimensions": "^1.2.0", | ||
| "prop-types": "^15.5.4", | ||
| "resize-observer-polyfill": "^1.4.1" | ||
| "prop-types": "^15.5.10", | ||
| "resize-observer-polyfill": "^1.4.2" | ||
| }, | ||
@@ -49,0 +49,0 @@ "devDependencies": { |
139
README.md
@@ -10,2 +10,4 @@ ## React Measure | ||
| `yarn add react-measure` | ||
| `npm install react-measure --save` | ||
@@ -18,11 +20,55 @@ | ||
| ## Codepen Demo | ||
| ## Measure Component | ||
| [Live Demo](http://codepen.io/souporserious/pen/rLdwao/) | ||
| ### Props | ||
| ## Example Usage w/ state | ||
| #### `client`: PropTypes.bool | ||
| Adds the following to `contentRect.client` returned in the child function. | ||
| [clientTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop), [clientLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft), [clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth), and [clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight). | ||
| #### `offset`: PropTypes.bool | ||
| Adds the following to `contentRect.offset` returned in the child function. | ||
| [offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop), [offsetLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetLeft), [offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetWidth), and [offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetHeight). | ||
| #### `scroll`: PropTypes.bool | ||
| Adds the following to `contentRect.scroll` returned in the child function. | ||
| [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop), [scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft), [scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth), and [scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight). | ||
| #### `bounds`: PropTypes.bool | ||
| Uses [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) to calculate the element rect and add it to `contentRect.bounds` returned in the child function. | ||
| #### `margin`: PropTypes.bool | ||
| Uses [getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) to calculate margins and add it to `contentRect.margin` returned in the child function. | ||
| #### `innerRef`: PropTypes.func | ||
| Use this to access the internal component `ref`. | ||
| #### `onResize`: PropTypes.func | ||
| Callback invoked when either element width or height have changed. | ||
| #### `children`: PropTypes.func | ||
| Children must be a function. Will receive the following object shape: | ||
| - `measureRef`: must be passed down to your component's ref in order to obtain a proper node to measure | ||
| - `measure`: use to programmatically measure your component, calls the internal `measure` method in `withContentRect` | ||
| - `contentRect`: this will contain any of the following allowed rects from above: `client`, `offset`, `scroll`, `bounds`, or `margin`. It will also include `entry` from the `ResizeObserver` when available. | ||
| ### Example | ||
| ```javascript | ||
| import Measure from 'react-measure'; | ||
| import classNames from 'classnames'; | ||
| import Measure from 'react-measure' | ||
| import classNames from 'classnames' | ||
@@ -45,13 +91,16 @@ class ItemToMeasure extends Component { | ||
| <Measure | ||
| onMeasure={(dimensions) => { | ||
| this.setState({dimensions}) | ||
| bounds | ||
| onResize={(contentRect) => { | ||
| this.setState({ dimensions: contentRect.bounds }) | ||
| }} | ||
| > | ||
| <div className={className}> | ||
| I can do cool things with my dimensions now :D | ||
| {({ measureRef }) => | ||
| <div ref={measureRef} className={className}> | ||
| I can do cool things with my dimensions now :D | ||
| { (height > 250) && | ||
| <div>Render responsive content based on the component size!</div> | ||
| } | ||
| </div> | ||
| { (height > 250) && | ||
| <div>Render responsive content based on the component size!</div> | ||
| } | ||
| </div> | ||
| } | ||
| </Measure> | ||
@@ -63,56 +112,24 @@ ) | ||
| ## Example Usage w/ child function | ||
| ## withContentRect(types) HoC | ||
| ```javascript | ||
| import Measure from 'react-measure'; | ||
| A higher-order component that provides dimensions to the wrapped component. Accepts `types` which determines what measurements are returned, similar to above. Pass an array or single value of either `client`, `offset`, `scroll`, `bounds`, or `margin` to calculate and receive those measurements as the prop `contentRect` in your wrapped component. You can also use the `measure` function passed down to programmatically measure your component if you need to. | ||
| const ItemToMeasure = () => ( | ||
| <Measure> | ||
| { dimensions => | ||
| <div> | ||
| Some content here | ||
| <pre> | ||
| {JSON.stringify(dimensions, null, 2)} | ||
| </pre> | ||
| </div> | ||
| } | ||
| </Measure> | ||
| ) | ||
| ``` | ||
| **please note** | ||
| `measureRef` must be passed down to your component's ref in order to obtain a proper node to measure | ||
| ## Props | ||
| ### Example | ||
| #### `whitelist`: PropTypes.array | ||
| ```javascript | ||
| import { withContentRect } from 'react-measure' | ||
| Provide a list of properties that determine when `onMeasure` should fire. Accepts any of the following properties `['width', 'height', 'top', 'right', 'bottom', 'left']` | ||
| const ItemToMeasure = withContentRect('bounds')(({ measureRef, measure, contentRect }) => ( | ||
| <div ref={measureRef}> | ||
| Some content here | ||
| <pre> | ||
| {JSON.stringify(contentRect, null, 2)} | ||
| </pre> | ||
| </div> | ||
| )) | ||
| ``` | ||
| #### `blacklist`: PropTypes.array | ||
| Like above, but will not fire `onMeasure` for the specified properties. | ||
| #### `includeMargin`: PropTypes.bool | ||
| Whether or not to include margins in calculation. Defaults to `true`. | ||
| #### `useClone`: PropTypes.bool | ||
| Tries to give the most accurate measure by cloning the element and measuring it. Use if your item is hidden or you want to determine what a new dimension will be. | ||
| #### `cloneOptions`: PropTypes.Object | ||
| Passes clone options to [getNodeDimensions](https://github.com/souporserious/get-node-dimensions). | ||
| #### `shouldMeasure`: PropTypes.bool | ||
| Determines whether or not a measurement should occur. Useful if you only need to measure in certain cases. | ||
| #### `onMeasure`: PropTypes.func | ||
| Callback when the component dimensions have changed. Receives the new `dimensions` of your component. | ||
| ## Good to knows | ||
| To help avoid layout thrashing, use the prop `blacklist` to ignore specific values and stop firing a render to check the DOM for changes. Likewise you can use `whitelist` to choose only the ones you need to check. | ||
| **Margins from hell.** If your element is not calculating width or height properly it could be due to a margin hanging outside of its container. To get a true measurement, make sure to not have any hanging margins, in some cases a padding of 1px added to the container will fix this. See the stack overflow answers [here](http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) for more tricks . | ||
| ## Run Example | ||
@@ -119,0 +136,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
Improved metrics
- Total package byte prevSize
- increased by7.22%
88815
- Number of package files
- increased by22.22%
11
- Lines of code
- increased by7.39%
1410
- Number of lines in readme file
- increased by12.78%
150
- Number of medium supply chain risk alerts
- decreased by-100%
0
Dependency changes
Updatedprop-types@^15.5.10