Skip to content

Commit

Permalink
Merge pull request #49 from karl-run/master
Browse files Browse the repository at this point in the history
upgrade to babel 7
  • Loading branch information
maslianok authored Oct 29, 2018
2 parents 3c4dfe9 + 0ed2e64 commit 56dcbaa
Show file tree
Hide file tree
Showing 8 changed files with 8,732 additions and 5,600 deletions.
5 changes: 3 additions & 2 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"presets": ["es2015", "react"]
}
"presets": ["@babel/env", "@babel/react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
3 changes: 2 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
},
"rules": {
"max-len": [2, 120],
"react/jsx-filename-extension": 0
"react/jsx-filename-extension": 0,
"react/destructuring-assignment": 0
},
"settings": {
"import/resolve": {
Expand Down
14 changes: 10 additions & 4 deletions examples/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,19 @@
"name": "examples",
"version": "1.1.0",
"private": true,
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"linklocal": "^2.8.1",
"react-scripts": "^1.1.1"
"linklocal": "^2.8.2",
"react-scripts": "^2.0.5"
},
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-resize-detector": "file:../"
},
"scripts": {
Expand Down
10,442 changes: 6,553 additions & 3,889 deletions examples/yarn.lock

Large diffs are not rendered by default.

171 changes: 97 additions & 74 deletions lib/index.js
Original file line number Diff line number Diff line change
@@ -1,182 +1,203 @@
'use strict';
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.withResizeDetector = undefined;
exports.default = exports.withResizeDetector = void 0;

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 = _interopRequireWildcard(require("react"));

var _react = require('react');
var _propTypes = _interopRequireDefault(require("prop-types"));

var _react2 = _interopRequireDefault(_react);
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));

var _propTypes = require('prop-types');
var _lodash = _interopRequireDefault(require("lodash.debounce"));

var _propTypes2 = _interopRequireDefault(_propTypes);
var _lodash2 = _interopRequireDefault(require("lodash.throttle"));

var _resizeObserverPolyfill = require('resize-observer-polyfill');
var _lodash3 = _interopRequireDefault(require("lodash.isfunction"));

var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _lodash = require('lodash.debounce');
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 _lodash2 = _interopRequireDefault(_lodash);
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 _lodash3 = require('lodash.throttle');
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

var _lodash4 = _interopRequireDefault(_lodash3);
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

var _lodash5 = require('lodash.isfunction');
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

var _lodash6 = _interopRequireDefault(_lodash5);
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; } }

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 _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
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); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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; }
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); }

var listMode = { debounce: _lodash2.default, throttle: _lodash4.default };
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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 listMode = {
debounce: _lodash.default,
throttle: _lodash2.default
};
var styles = {
position: 'absolute',
width: 0,
height: 0,
visibility: 'hidden',
display: 'none'
};

/**
* detect component's children and convert them to array
* @param {*} children - component's children
*/

function convertChildrenToArray(children) {
if (!children) return [];
if (!Array.isArray(children)) return [children];
return children;
}

var ResizeDetector = function (_PureComponent) {
var ResizeDetector =
/*#__PURE__*/
function (_PureComponent) {
_inherits(ResizeDetector, _PureComponent);

function ResizeDetector(props) {
var _this;

_classCallCheck(this, ResizeDetector);

var _this = _possibleConstructorReturn(this, (ResizeDetector.__proto__ || Object.getPrototypeOf(ResizeDetector)).call(this, props));
_this = _possibleConstructorReturn(this, _getPrototypeOf(ResizeDetector).call(this, props));

_this.getElement = function () {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElement", function () {
var resizableElementId = _this.props.resizableElementId;


var otherElement = resizableElementId && document.getElementById(resizableElementId);
var parentElement = _this.el && _this.el.parentElement;

var resizableElement = otherElement || parentElement;

return resizableElement;
};
});

_this.createResizeHandler = function (entries) {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "createResizeHandler", function (entries) {
var _this$props = _this.props,
handleWidth = _this$props.handleWidth,
handleHeight = _this$props.handleHeight,
onResize = _this$props.onResize;

entries.forEach(function (entry) {
var _entry$contentRect = entry.contentRect,
width = _entry$contentRect.width,
height = _entry$contentRect.height;

var notifyWidth = handleWidth && _this.state.width !== width;
var notifyHeight = handleHeight && _this.state.height !== height;

if (!_this.skipOnMount && (notifyWidth || notifyHeight) && typeof window !== 'undefined') {
_this.animationFrameID = window.requestAnimationFrame(function () {
onResize(width, height);
_this.setState({ width: width, height: height });

_this.setState({
width: width,
height: height
});
});
}

_this.skipOnMount = false;
});
};
});

_this.handleRenderProp = function () {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleRenderProp", function () {
var _this$state = _this.state,
width = _this$state.width,
height = _this$state.height;
var render = _this.props.render;

if (render && typeof render === 'function') {
return (0, _react.cloneElement)(render({ width: width, height: height }), { key: 'render' });
return (0, _react.cloneElement)(render({
width: width,
height: height
}), {
key: 'render'
});
}

return undefined;
};
});

_this.renderChildren = function () {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderChildren", function () {
var _this$state2 = _this.state,
width = _this$state2.width,
height = _this$state2.height;
var children = _this.props.children;

return convertChildrenToArray(children).filter(function (child) {
return !!child;
}).map(function (child, key) {
if ((0, _lodash6.default)(child)) return (0, _react.cloneElement)(child(width, height), { key: key });
if ((0, _react.isValidElement)(child)) return (0, _react.cloneElement)(child, { width: width, height: height, key: key });
if ((0, _lodash3.default)(child)) return (0, _react.cloneElement)(child(width, height), {
key: key
});
if ((0, _react.isValidElement)(child)) return (0, _react.cloneElement)(child, {
width: width,
height: height,
key: key
});
return child;
});
};
});

var skipOnMount = props.skipOnMount,
refreshMode = props.refreshMode,
refreshRate = props.refreshRate;


_this.state = {
width: undefined,
height: undefined
};

_this.skipOnMount = skipOnMount;
_this.animationFrameID = null;

_this.resizeHandler = listMode[refreshMode] && listMode[refreshMode](_this.createResizeHandler, refreshRate) || _this.createResizeHandler;

_this.ro = new _resizeObserverPolyfill2.default(_this.resizeHandler);
_this.ro = new _resizeObserverPolyfill.default(_this.resizeHandler);
return _this;
}

_createClass(ResizeDetector, [{
key: 'componentDidMount',
key: "componentDidMount",
value: function componentDidMount() {
var resizableElement = this.getElement();
if (resizableElement) this.ro.observe(resizableElement);
}
}, {
key: 'componentWillUnmount',
key: "componentWillUnmount",
value: function componentWillUnmount() {
var resizableElement = this.getElement();
if (resizableElement) this.ro.unobserve(resizableElement);

if (typeof window !== 'undefined' && this.animationFrameID) {
window.cancelAnimationFrame(this.animationFrameID);
}

if (this.resizeHandler && this.resizeHandler.cancel) {
// cancel debounced handler
this.resizeHandler.cancel();
}
}
}, {
key: 'render',
key: "render",
value: function render() {
var _this2 = this;

return [_react2.default.createElement('div', {
key: 'resize-detector',
return [_react.default.createElement("div", {
key: "resize-detector",
style: styles,
ref: function ref(el) {
_this2.el = el;
Expand All @@ -189,17 +210,17 @@ var ResizeDetector = function (_PureComponent) {
}(_react.PureComponent);

ResizeDetector.propTypes = {
handleWidth: _propTypes2.default.bool,
handleHeight: _propTypes2.default.bool,
skipOnMount: _propTypes2.default.bool,
refreshRate: _propTypes2.default.number,
refreshMode: _propTypes2.default.string,
resizableElementId: _propTypes2.default.string,
onResize: _propTypes2.default.func,
render: _propTypes2.default.func,
children: _propTypes2.default.any // eslint-disable-line react/forbid-prop-types
};
handleWidth: _propTypes.default.bool,
handleHeight: _propTypes.default.bool,
skipOnMount: _propTypes.default.bool,
refreshRate: _propTypes.default.number,
refreshMode: _propTypes.default.string,
resizableElementId: _propTypes.default.string,
onResize: _propTypes.default.func,
render: _propTypes.default.func,
children: _propTypes.default.any // eslint-disable-line react/forbid-prop-types

};
ResizeDetector.defaultProps = {
handleWidth: false,
handleHeight: false,
Expand All @@ -214,27 +235,27 @@ ResizeDetector.defaultProps = {
children: null
};

var withResizeDetector = exports.withResizeDetector = function withResizeDetector(WrappedComponent) {
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { handleWidth: true, handleHeight: true };
var withResizeDetector = function withResizeDetector(WrappedComponent) {
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
handleWidth: true,
handleHeight: true
};
return (
/*#__PURE__*/
// eslint-disable-next-line
function (_Component) {
_inherits(ResizeDetectorHOC, _Component);

function ResizeDetectorHOC() {
_classCallCheck(this, ResizeDetectorHOC);

return _possibleConstructorReturn(this, (ResizeDetectorHOC.__proto__ || Object.getPrototypeOf(ResizeDetectorHOC)).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(ResizeDetectorHOC).apply(this, arguments));
}

_createClass(ResizeDetectorHOC, [{
key: 'render',
key: "render",
value: function render() {
return _react2.default.createElement(
ResizeDetector,
props,
_react2.default.createElement(WrappedComponent, this.props)
);
return _react.default.createElement(ResizeDetector, props, _react.default.createElement(WrappedComponent, this.props));
}
}]);

Expand All @@ -243,4 +264,6 @@ var withResizeDetector = exports.withResizeDetector = function withResizeDetecto
);
};

exports.default = ResizeDetector;
exports.withResizeDetector = withResizeDetector;
var _default = ResizeDetector;
exports.default = _default;
Loading

0 comments on commit 56dcbaa

Please sign in to comment.