Skip to content

Commit a818c4d

Browse files
maslianokmaslianok
committed
Add builds
1 parent ce336bd commit a818c4d

File tree

2 files changed

+254
-6
lines changed

2 files changed

+254
-6
lines changed

‎lib/esm/index.js‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
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); }
2+
3+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
4+
5+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
6+
7+
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
8+
9+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
10+
11+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
12+
13+
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); } }
14+
15+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
16+
17+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
18+
19+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
20+
21+
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, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
22+
23+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
24+
25+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
26+
27+
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; }
28+
29+
import React, { PureComponent, Component, isValidElement, cloneElement } from 'react';
30+
import PropTypes from 'prop-types';
31+
import ResizeObserver from 'resize-observer-polyfill';
32+
import debounce from "lodash-es/debounce";
33+
import throttle from "lodash-es/throttle";
34+
import isFunction from "lodash-es/isFunction";
35+
var listMode = {
36+
debounce: debounce,
37+
throttle: throttle
38+
};
39+
var styles = {
40+
position: 'absolute',
41+
width: 0,
42+
height: 0,
43+
visibility: 'hidden',
44+
display: 'none'
45+
};
46+
/**
47+
* detect component's children and convert them to array
48+
* @param {*} children - component's children
49+
*/
50+
51+
function convertChildrenToArray(children) {
52+
if (!children) return [];
53+
if (!Array.isArray(children)) return [children];
54+
return children;
55+
}
56+
57+
var ResizeDetector =
58+
/*#__PURE__*/
59+
function (_PureComponent) {
60+
_inherits(ResizeDetector, _PureComponent);
61+
62+
function ResizeDetector(props) {
63+
var _this;
64+
65+
_classCallCheck(this, ResizeDetector);
66+
67+
_this = _possibleConstructorReturn(this, _getPrototypeOf(ResizeDetector).call(this, props));
68+
69+
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElement", function () {
70+
var resizableElementId = _this.props.resizableElementId;
71+
var otherElement = resizableElementId && document.getElementById(resizableElementId);
72+
var parentElement = _this.el && _this.el.parentElement;
73+
var resizableElement = otherElement || parentElement;
74+
return resizableElement;
75+
});
76+
77+
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "createResizeHandler", function (entries) {
78+
var _this$props = _this.props,
79+
handleWidth = _this$props.handleWidth,
80+
handleHeight = _this$props.handleHeight,
81+
onResize = _this$props.onResize;
82+
entries.forEach(function (entry) {
83+
var _entry$contentRect = entry.contentRect,
84+
width = _entry$contentRect.width,
85+
height = _entry$contentRect.height;
86+
var notifyWidth = handleWidth && _this.state.width !== width;
87+
var notifyHeight = handleHeight && _this.state.height !== height;
88+
89+
if (!_this.skipOnMount && (notifyWidth || notifyHeight) && typeof window !== 'undefined') {
90+
_this.animationFrameID = window.requestAnimationFrame(function () {
91+
onResize(width, height);
92+
93+
_this.setState({
94+
width: width,
95+
height: height
96+
});
97+
});
98+
}
99+
100+
_this.skipOnMount = false;
101+
});
102+
});
103+
104+
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleRenderProp", function () {
105+
var _this$state = _this.state,
106+
width = _this$state.width,
107+
height = _this$state.height;
108+
var render = _this.props.render;
109+
110+
if (render && typeof render === 'function') {
111+
return cloneElement(render({
112+
width: width,
113+
height: height
114+
}), {
115+
key: 'render'
116+
});
117+
}
118+
119+
return undefined;
120+
});
121+
122+
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderChildren", function () {
123+
var _this$state2 = _this.state,
124+
width = _this$state2.width,
125+
height = _this$state2.height;
126+
var children = _this.props.children;
127+
return convertChildrenToArray(children).filter(function (child) {
128+
return !!child;
129+
}).map(function (child, key) {
130+
if (isFunction(child)) return cloneElement(child(width, height), {
131+
key: key
132+
});
133+
if (isValidElement(child)) return cloneElement(child, {
134+
width: width,
135+
height: height,
136+
key: key
137+
});
138+
return child;
139+
});
140+
});
141+
142+
var skipOnMount = props.skipOnMount,
143+
refreshMode = props.refreshMode,
144+
refreshRate = props.refreshRate;
145+
_this.state = {
146+
width: undefined,
147+
height: undefined
148+
};
149+
_this.skipOnMount = skipOnMount;
150+
_this.animationFrameID = null;
151+
_this.resizeHandler = listMode[refreshMode] && listMode[refreshMode](_this.createResizeHandler, refreshRate) || _this.createResizeHandler;
152+
_this.ro = new ResizeObserver(_this.resizeHandler);
153+
return _this;
154+
}
155+
156+
_createClass(ResizeDetector, [{
157+
key: "componentDidMount",
158+
value: function componentDidMount() {
159+
var resizableElement = this.getElement();
160+
if (resizableElement) this.ro.observe(resizableElement);
161+
}
162+
}, {
163+
key: "componentWillUnmount",
164+
value: function componentWillUnmount() {
165+
var resizableElement = this.getElement();
166+
if (resizableElement) this.ro.unobserve(resizableElement);
167+
168+
if (typeof window !== 'undefined' && this.animationFrameID) {
169+
window.cancelAnimationFrame(this.animationFrameID);
170+
}
171+
172+
if (this.resizeHandler && this.resizeHandler.cancel) {
173+
// cancel debounced handler
174+
this.resizeHandler.cancel();
175+
}
176+
}
177+
}, {
178+
key: "render",
179+
value: function render() {
180+
var _this2 = this;
181+
182+
return [React.createElement("div", {
183+
key: "resize-detector",
184+
style: styles,
185+
ref: function ref(el) {
186+
_this2.el = el;
187+
}
188+
}), this.handleRenderProp()].concat(_toConsumableArray(this.renderChildren()));
189+
}
190+
}]);
191+
192+
return ResizeDetector;
193+
}(PureComponent);
194+
195+
ResizeDetector.propTypes = {
196+
handleWidth: PropTypes.bool,
197+
handleHeight: PropTypes.bool,
198+
skipOnMount: PropTypes.bool,
199+
refreshRate: PropTypes.number,
200+
refreshMode: PropTypes.string,
201+
resizableElementId: PropTypes.string,
202+
onResize: PropTypes.func,
203+
render: PropTypes.func,
204+
children: PropTypes.any // eslint-disable-line react/forbid-prop-types
205+
206+
};
207+
ResizeDetector.defaultProps = {
208+
handleWidth: false,
209+
handleHeight: false,
210+
skipOnMount: false,
211+
refreshRate: 1000,
212+
refreshMode: undefined,
213+
resizableElementId: '',
214+
onResize: function onResize(e) {
215+
return e;
216+
},
217+
render: undefined,
218+
children: null
219+
};
220+
export var withResizeDetector = function withResizeDetector(WrappedComponent) {
221+
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
222+
handleWidth: true,
223+
handleHeight: true
224+
};
225+
return (
226+
/*#__PURE__*/
227+
// eslint-disable-next-line
228+
function (_Component) {
229+
_inherits(ResizeDetectorHOC, _Component);
230+
231+
function ResizeDetectorHOC() {
232+
_classCallCheck(this, ResizeDetectorHOC);
233+
234+
return _possibleConstructorReturn(this, _getPrototypeOf(ResizeDetectorHOC).apply(this, arguments));
235+
}
236+
237+
_createClass(ResizeDetectorHOC, [{
238+
key: "render",
239+
value: function render() {
240+
return React.createElement(ResizeDetector, props, React.createElement(WrappedComponent, this.props));
241+
}
242+
}]);
243+
244+
return ResizeDetectorHOC;
245+
}(Component)
246+
);
247+
};
248+
export default ResizeDetector;

‎lib/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
1111

1212
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
1313

14-
var _lodash = _interopRequireDefault(require("lodash.debounce"));
14+
var _debounce = _interopRequireDefault(require("lodash/debounce"));
1515

16-
var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
16+
var _throttle = _interopRequireDefault(require("lodash/throttle"));
1717

18-
var _lodash3 = _interopRequireDefault(require("lodash.isfunction"));
18+
var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
1919

2020
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2121

@@ -50,8 +50,8 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
5050
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; }
5151

5252
var listMode = {
53-
debounce: _lodash.default,
54-
throttle: _lodash2.default
53+
debounce: _debounce.default,
54+
throttle: _throttle.default
5555
};
5656
var styles = {
5757
position: 'absolute',
@@ -144,7 +144,7 @@ function (_PureComponent) {
144144
return convertChildrenToArray(children).filter(function (child) {
145145
return !!child;
146146
}).map(function (child, key) {
147-
if ((0, _lodash3.default)(child)) return (0, _react.cloneElement)(child(width, height), {
147+
if ((0, _isFunction.default)(child)) return (0, _react.cloneElement)(child(width, height), {
148148
key: key
149149
});
150150
if ((0, _react.isValidElement)(child)) return (0, _react.cloneElement)(child, {

0 commit comments

Comments
 (0)